/* ============================================================
WEEKENDS — EDITORIAL OVERHAUL (Vogue-grade)
Per QUALIFIED PRODUCTION BRIEF (May 2026)
- Left-aligned headlines
- Mixed serif (Instrument Serif italic) + sans (Manrope)
- Dramatic scale (clamp up)
- Asymmetric magazine pacing
- Sand background preserved
============================================================ */
/* ─── HOMEPAGE HERO — left-aligned, mixed type, dramatic scale ─── */
.hero.hero-editorial,
.hero-editorial {
text-align: left !important;
padding: 140px 48px 60px !important;
max-width: 1440px;
margin: 0 auto;
}
@media(max-width:1100px){
.hero.hero-editorial,
.hero-editorial { padding: 130px 32px 50px !important; }
}
@media(max-width:720px){
.hero.hero-editorial,
.hero-editorial { padding: 110px 20px 36px !important; }
}
/* H1 — Vogue-style mixed type, big-as-possible */
.hero-h.hero-h-editorial,
h1.hero-h-editorial {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.045em !important;
text-transform: none !important;
font-size: clamp(56px, 11vw, 188px) !important;
line-height: 0.88 !important;
color: var(--ink);
margin: 0 0 36px 0 !important;
max-width: 18ch;
text-align: left !important;
}
/* Inject serif italic emphasis on the second line via the line break */
.hero-h.hero-h-editorial em,
h1.hero-h-editorial em {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
/* Slightly larger optical sizing for serif against the sans */
font-size: 1.04em;
}
/* Sub-line — switch to serif italic for editorial cadence */
.hero-sub-v8.hero-sub-editorial,
p.hero-sub-editorial {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
text-transform: none !important;
font-size: clamp(26px, 3.6vw, 52px) !important;
line-height: 1.15 !important;
color: var(--ink);
text-align: left !important;
margin: 0 0 36px 0 !important;
max-width: 28ch;
}
/* CTAs — left aligned */
.hero-ctas.hero-ctas-editorial {
justify-content: flex-start !important;
margin: 0 0 64px 0 !important;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ─── BIG STATEMENTS — left-aligned, mixed serif+sans, larger ─── */
.big-statement {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
text-transform: none !important;
font-size: clamp(40px, 8vw, 132px) !important;
line-height: 0.92 !important;
color: var(--ink) !important;
text-align: left !important;
margin: 0 !important;
padding: 80px 0 56px 0 !important;
max-width: 22ch;
}
.big-statement em {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
}
/* OS section — section headline left, kicker eyebrow style */
.os-block { padding-top: 24px !important; padding-bottom: 96px !important; }
.os-block .sys-kicker,
.sys-kicker {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
font-size: 11px !important;
color: var(--ink-3) !important;
text-align: left !important;
margin: 0 0 28px 0 !important;
}
.os-block .big-statement,
.big-statement.os-headline {
text-align: left !important;
padding: 0 0 32px 0 !important;
}
.os-block .os-category,
.os-category {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
font-size: clamp(14px, 1.4vw, 18px) !important;
color: var(--ink-2) !important;
text-align: left !important;
margin: 0 0 36px 0 !important;
}
.os-block .os-category .tm,
.os-category .tm {
font-size: 0.5em;
vertical-align: super;
margin-left: 2px;
letter-spacing: 0;
}
/* OS architecture line — new, left-aligned, mono small caps */
.os-architecture-line {
display: block;
margin: 28px 0 0 0;
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
line-height: 1.7;
max-width: 70ch;
}
.os-architecture-line strong {
color: var(--ink);
font-weight: 500;
}
/* SYS GRID — keep but allow left edge alignment on flat layouts */
.sys-grid { max-width: none !important; }
/* ─── MID STATEMENT (Selected Work / "WHAT YOU SEE IS WHAT YOU MEANT.") ─── */
.mid-statement,
.flow-section {
text-align: left !important;
padding: 80px 48px 56px 48px !important;
max-width: 1440px;
margin: 0 auto;
}
@media(max-width:1100px){
.mid-statement,
.flow-section { padding: 64px 32px 44px 32px !important; }
}
@media(max-width:720px){
.mid-statement,
.flow-section { padding: 48px 20px 32px 20px !important; }
}
.mid-statement .big-statement,
.flow-section .big-statement {
padding: 0 !important;
text-align: left !important;
}
/* ─── CTA HERO (footer-region "Start with one product") ─── */
.cta-hero,
.cta-hero-section {
text-align: left !important;
}
.cta-hero .big-statement {
text-align: left !important;
padding: 0 0 24px 0 !important;
}
.cta-hero-sub,
p.cta-hero-sub {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
text-align: left !important;
font-size: clamp(20px, 2.4vw, 30px) !important;
line-height: 1.25 !important;
letter-spacing: -0.015em !important;
color: var(--ink-2) !important;
max-width: 36ch;
margin: 0 0 28px 0 !important;
}
.hero-ctas[style*="justify-content:center"] {
justify-content: flex-start !important;
}
/* ─── SUBPAGE HEROES (PHOTO / RETOUCH / AI) — same editorial scale ─── */
/* The "v3" subpage hero gets editorial treatment too */
.v3-hero h1,
h1.v3-hero-h,
.subpage-hero h1 {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.045em !important;
text-transform: none !important;
font-size: clamp(56px, 11vw, 188px) !important;
line-height: 0.88 !important;
text-align: left !important;
margin: 0 0 32px 0 !important;
}
.v3-hero h1 em,
h1.v3-hero-h em,
.subpage-hero h1 em {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
}
/* Subpage subhead — serif italic */
.v3-hero .v3-sub,
.v3-hero p.lede,
.subpage-hero .lede {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(22px, 3vw, 42px) !important;
line-height: 1.18 !important;
letter-spacing: -0.015em !important;
text-align: left !important;
max-width: 32ch;
}
/* ─── FOOTER — left-aligned per brief ─── */
.site-footer,
footer.site-footer,
.footer,
footer {
text-align: left !important;
}
.site-footer .footer-inner,
footer .footer-inner,
.footer-inner {
text-align: left !important;
align-items: flex-start !important;
}
.footer-headline,
.footer-eyebrow,
.footer-line,
.footer-block,
.footer-col {
text-align: left !important;
}
.footer-headline {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
font-size: clamp(36px, 6vw, 96px) !important;
line-height: 0.92 !important;
text-align: left !important;
margin: 0 0 32px 0 !important;
max-width: 18ch;
}
.footer-headline em {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
}
/* ─── LANG-LOCK utility class — guards locked phrases against
inadvertent overrides (visual treatment, not text) ─── */
.lock-phrase { font-feature-settings:"ss01","ss02","kern"; }
/* ─── DARK SECTION CONTRAST — for editorial pacing ─── */
.section-dark {
background: #0E0E10;
color: #F3EEE4;
}
.section-dark .big-statement,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p { color: #F3EEE4; }
.section-dark .eyebrow,
.section-dark .sys-kicker,
.section-dark .os-architecture-line { color: rgba(243,238,228,0.6); }
.section-dark .os-architecture-line strong { color: #F3EEE4; }
/* ─── MAHARISHI INTRO BLOCK ─── */
.maharishi-intro {
padding: 96px 48px 96px 48px;
max-width: 1440px;
margin: 0 auto;
border-top: 1px solid var(--hair);
}
@media(max-width:1100px){
.maharishi-intro { padding: 72px 32px; }
}
@media(max-width:720px){
.maharishi-intro { padding: 56px 20px; }
}
.maharishi-intro .mh-eyebrow {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 24px 0;
}
.maharishi-intro h2 {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
font-size: clamp(40px, 7vw, 116px);
line-height: 0.92;
margin: 0 0 32px 0;
max-width: 22ch;
color: var(--ink);
}
.maharishi-intro h2 em {
font-family: "Instrument Serif", ui-serif, Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
}
.maharishi-intro .mh-lede {
font-family: "Instrument Serif", ui-serif, Georgia, serif;
font-style: italic;
font-size: clamp(20px, 2.6vw, 32px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink-2);
max-width: 36ch;
margin: 0 0 32px 0;
}
.maharishi-intro .mh-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: start;
}
@media(max-width:900px){
.maharishi-intro .mh-grid { grid-template-columns: 1fr; gap: 32px; }
}
.maharishi-intro .mh-panel {
border: 1px solid var(--hair);
border-radius: 6px;
padding: 28px;
background: #FAF6EC;
}
.maharishi-intro .mh-panel h3 {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 16px 0;
color: var(--ink);
}
.maharishi-intro .mh-panel ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.maharishi-intro .mh-panel li {
font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--ink-2);
padding-left: 16px;
position: relative;
}
.maharishi-intro .mh-panel li::before {
content: "—";
position: absolute;
left: 0;
color: var(--ink-3);
}
.maharishi-intro .mh-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
text-decoration: none;
font-size: 14px;
font-weight: 500;
margin-top: 24px;
transition: transform .3s cubic-bezier(.2,.9,.2,1);
}
.maharishi-intro .mh-cta:hover { transform: translateY(-2px); }
/* ─── AI PAGE TRIAD (GARMENT/BRAND/PUBLISH-READY) ─── */
.ai-triad {
padding: 80px 48px;
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
border-top: 1px solid var(--hair);
}
@media(max-width:900px){
.ai-triad { grid-template-columns: 1fr; gap: 40px; padding: 56px 32px; }
}
@media(max-width:720px){
.ai-triad { padding: 40px 20px; }
}
.ai-triad .triad-cell { text-align: left; }
.ai-triad .triad-num {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink-3);
text-transform: uppercase;
margin: 0 0 16px 0;
}
.ai-triad .triad-h {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 0.96;
letter-spacing: -0.03em;
margin: 0 0 16px 0;
color: var(--ink);
}
.ai-triad .triad-h em {
font-family: "Instrument Serif", ui-serif, Georgia, serif;
font-style: italic;
font-weight: 400;
}
.ai-triad .triad-body {
font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
max-width: 32ch;
margin: 0;
}
/* ─── AI PAGE — close line ─── */
.ai-close-line {
padding: 80px 48px;
max-width: 1440px;
margin: 0 auto;
border-top: 1px solid var(--hair);
}
.ai-close-line p {
font-family: "Instrument Serif", ui-serif, Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 4vw, 56px);
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--ink);
text-align: left;
max-width: 26ch;
margin: 0;
}
/* ─── Make CTA section padding generous for breathing room ─── */
.cta-hero, .cta-hero-section {
padding: 96px 48px !important;
max-width: 1440px;
margin: 0 auto;
}
@media(max-width:1100px){
.cta-hero, .cta-hero-section { padding: 72px 32px !important; }
}
@media(max-width:720px){
.cta-hero, .cta-hero-section { padding: 56px 20px !important; }
}
/* ─── Capabilities triptych — left-align row, but keep the 3-cell flow */
.caps-triptych { text-align: left !important; padding: 64px 0 !important; }
.caps-row { justify-content: flex-start !important; }
/* ─── Maharishi headline force scale (override .mh-headline) ─── */
.maharishi-intro .mh-headline,
h2.mh-headline {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
text-transform: uppercase !important;
font-size: clamp(36px, 6vw, 96px) !important;
line-height: 0.94 !important;
margin: 0 0 32px 0 !important;
max-width: 18ch !important;
color: var(--ink) !important;
}
.maharishi-intro .mh-headline em,
h2.mh-headline em {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
}
.maharishi-intro .mh-body,
.mh-body {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-size: clamp(20px, 2.4vw, 30px) !important;
line-height: 1.22 !important;
letter-spacing: -0.015em !important;
color: var(--ink-2) !important;
max-width: 36ch !important;
margin: 0 0 32px 0 !important;
}
.maharishi-intro .mh-questions {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
display: grid;
gap: 10px;
}
.maharishi-intro .mh-questions li {
font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
font-size: 14.5px;
line-height: 1.5;
color: var(--ink-2);
padding-left: 16px;
position: relative;
}
.maharishi-intro .mh-questions li::before {
content: "—";
position: absolute;
left: 0;
color: var(--ink-3);
}
.maharishi-intro .mh-panel {
border: 1px solid var(--hair);
border-radius: 6px;
padding: 28px;
background: #FAF6EC;
}
.maharishi-intro .mh-panel-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px 0;
padding-bottom: 14px;
border-bottom: 1px solid var(--hair);
}
.maharishi-intro .mh-dot {
width: 8px; height: 8px; border-radius: 50%;
background: oklch(0.72 0.16 145);
box-shadow: 0 0 0 4px rgba(0,180,90,0.12);
}
.maharishi-intro .mh-panel-label {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink);
}
.maharishi-intro .mh-foot {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
margin: 18px 0 0 0;
padding-top: 14px;
border-top: 1px solid var(--hair);
}
/* ─── FOOTER — left-aligned editorial (override v7 centering) ─── */
.foot.foot-v7,
.foot.foot-editorial,
footer.foot {
text-align: left !important;
}
.foot-v7 .foot-inner,
.foot-editorial .foot-inner,
footer.foot .foot-inner,
footer .foot-inner {
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 48px !important;
text-align: left !important;
display: block !important;
align-items: flex-start !important;
flex-direction: row !important;
}
@media(max-width:1100px){
.foot-v7 .foot-inner,
.foot-editorial .foot-inner { padding: 0 32px !important; }
}
@media(max-width:720px){
.foot-v7 .foot-inner,
.foot-editorial .foot-inner { padding: 0 20px !important; }
}
.foot-v7 .foot-mani,
.foot-editorial .foot-mani {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
text-transform: none !important;
font-size: clamp(36px, 6vw, 88px) !important;
line-height: 0.94 !important;
text-align: left !important;
margin: 0 0 56px 0 !important;
max-width: 18ch;
color: var(--ink) !important;
}
.foot-v7 .foot-mani em,
.foot-editorial .foot-mani em {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
}
.foot-v7 .foot-global,
.foot-editorial .foot-global {
display: block !important;
align-items: flex-start !important;
text-align: left !important;
margin: 0 0 36px 0 !important;
}
.foot-v7 .foot-global p,
.foot-editorial .foot-global p {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ink-2) !important;
margin: 0 0 6px 0 !important;
text-align: left !important;
}
.foot-v7 .foot-pricing,
.foot-editorial .foot-pricing {
display: block !important;
align-items: flex-start !important;
text-align: left !important;
margin: 0 0 48px 0 !important;
}
.foot-v7 .foot-pricing p,
.foot-editorial .foot-pricing p {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-size: clamp(18px, 1.8vw, 22px) !important;
color: var(--ink-2) !important;
margin: 0 !important;
text-align: left !important;
letter-spacing: -0.01em !important;
}
.foot-v7 .foot-nav,
.foot-editorial .foot-nav {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 14px !important;
margin: 0 0 48px 0 !important;
padding-top: 32px !important;
border-top: 1px solid var(--hair) !important;
}
.foot-v7 .foot-nav a,
.foot-editorial .foot-nav a {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: clamp(20px, 2.2vw, 28px) !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
text-decoration: none !important;
text-align: left !important;
text-transform: none !important;
padding: 0 !important;
border: 0 !important;
}
.foot-v7 .foot-nav a:hover,
.foot-editorial .foot-nav a:hover { color: var(--accent-ink) !important; }
.foot-v7 .foot-langs,
.foot-editorial .foot-langs {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
margin: 0 0 48px 0 !important;
}
.foot-v7 .foot-langs a,
.foot-editorial .foot-langs a {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
padding: 8px 12px !important;
border-radius: 999px !important;
border: 1px solid var(--hair) !important;
color: var(--ink-2) !important;
text-decoration: none !important;
}
.foot-v7 .foot-bot,
.foot-editorial .foot-bot {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 8px !important;
margin: 0 0 16px 0 !important;
padding-top: 32px !important;
border-top: 1px solid var(--hair) !important;
}
.foot-v7 .foot-bot .foot-brand,
.foot-editorial .foot-bot .foot-brand {
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
text-align: left !important;
}
.foot-v7 .foot-bot .foot-brand-tag,
.foot-editorial .foot-bot .foot-brand-tag {
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
text-align: left !important;
}
.foot-v7 .foot-meta,
.foot-editorial .foot-meta {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
text-align: left !important;
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
font-size: 10.5px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
padding-top: 16px !important;
border-top: 1px solid var(--hair) !important;
flex-wrap: wrap;
gap: 16px;
}
.foot-v7 .foot-meta .foot-legal,
.foot-editorial .foot-meta .foot-legal {
display: inline-flex;
gap: 12px;
align-items: center;
}
.foot-v7 .foot-meta .foot-legal a,
.foot-editorial .foot-meta .foot-legal a {
color: var(--ink-3);
text-decoration: none;
}
/* ─── FOOTER: stronger force-left for stubborn centered children ─── */
footer.foot.foot-v7 .foot-mani,
footer.foot.foot-editorial .foot-mani,
.foot.foot-v7 .foot-mani.foot-mani,
.foot.foot-editorial .foot-mani.foot-mani {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
align-self: flex-start !important;
}
footer.foot.foot-v7 .foot-global,
footer.foot.foot-editorial .foot-global {
text-align: left !important;
align-self: flex-start !important;
}
footer.foot.foot-v7 .foot-pricing,
footer.foot.foot-editorial .foot-pricing {
text-align: left !important;
align-self: flex-start !important;
}
footer.foot.foot-v7 .foot-langs,
footer.foot.foot-editorial .foot-langs {
justify-content: flex-start !important;
}
/* ─── FOOTER FINAL OVERRIDE — match specificity of .foot.foot-editorial ─── */
.foot.foot-editorial .foot-inner,
.foot.foot-v7 .foot-inner {
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 48px !important;
text-align: left !important;
display: block !important;
align-items: flex-start !important;
}
@media(max-width:1100px){
.foot.foot-editorial .foot-inner,
.foot.foot-v7 .foot-inner { padding: 0 32px !important; }
}
@media(max-width:720px){
.foot.foot-editorial .foot-inner,
.foot.foot-v7 .foot-inner { padding: 0 20px !important; }
}
.foot.foot-editorial .foot-mani,
.foot.foot-v7 .foot-mani {
text-align: left !important;
align-self: flex-start !important;
margin-left: 0 !important;
margin-right: auto !important;
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
text-transform: none !important;
font-size: clamp(36px, 6vw, 88px) !important;
line-height: 0.94 !important;
margin-top: 0 !important;
margin-bottom: 56px !important;
max-width: 18ch;
color: var(--ink) !important;
}
.foot.foot-editorial .foot-global,
.foot.foot-v7 .foot-global {
display: block !important;
align-items: flex-start !important;
align-self: flex-start !important;
text-align: left !important;
margin: 0 0 36px 0 !important;
}
.foot.foot-editorial .foot-global p,
.foot.foot-v7 .foot-global p {
text-align: left !important;
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ink-2) !important;
margin: 0 0 6px 0 !important;
}
.foot.foot-editorial .foot-pricing,
.foot.foot-v7 .foot-pricing {
display: block !important;
align-items: flex-start !important;
align-self: flex-start !important;
text-align: left !important;
margin: 0 0 48px 0 !important;
}
.foot.foot-editorial .foot-pricing p,
.foot.foot-v7 .foot-pricing p {
text-align: left !important;
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-size: clamp(18px, 1.8vw, 22px) !important;
color: var(--ink-2) !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
.foot.foot-editorial .foot-nav,
.foot.foot-v7 .foot-nav {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
align-self: flex-start !important;
text-align: left !important;
gap: 14px !important;
margin: 0 0 48px 0 !important;
padding-top: 32px !important;
border-top: 1px solid var(--hair) !important;
}
.foot.foot-editorial .foot-nav a,
.foot.foot-v7 .foot-nav a {
text-align: left !important;
font-family: "Manrope", "Söhne", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: clamp(20px, 2.2vw, 28px) !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
text-decoration: none !important;
text-transform: none !important;
padding: 0 !important;
border: 0 !important;
}
.foot.foot-editorial .foot-langs,
.foot.foot-v7 .foot-langs {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-self: flex-start !important;
gap: 8px !important;
margin: 0 0 48px 0 !important;
}
.foot.foot-editorial .foot-bot,
.foot.foot-v7 .foot-bot {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
align-self: flex-start !important;
text-align: left !important;
gap: 8px !important;
margin: 0 0 16px 0 !important;
padding-top: 32px !important;
border-top: 1px solid var(--hair) !important;
}
.foot.foot-editorial .foot-meta,
.foot.foot-v7 .foot-meta {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
align-self: stretch !important;
text-align: left !important;
flex-wrap: wrap;
gap: 16px;
}
/* ============================================================
SUBPAGE EDITORIAL HERO — PHOTO / RETOUCH / AI
Vogue-grade: left-aligned, BIG mixed serif+sans
============================================================ */
.page-hero.photo-hero-editorial,
.page-hero.retouch-hero-editorial,
.page-hero.ai-hero-editorial {
text-align: left !important;
padding: clamp(80px, 12vw, 180px) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 80px) !important;
max-width: 1440px;
margin: 0 auto;
}
.page-h.photo-h-editorial,
.page-h.retouch-h-editorial,
.page-h.ai-h-editorial {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
font-size: clamp(72px, 14vw, 240px) !important;
line-height: 0.86 !important;
letter-spacing: -0.045em !important;
color: var(--ink) !important;
text-align: left !important;
margin: 0 0 clamp(20px, 3vw, 40px) !important;
text-transform: uppercase;
}
.page-h.photo-h-editorial em,
.page-h.retouch-h-editorial em,
.page-h.ai-h-editorial em {
font-family: 'Instrument Serif', 'Times New Roman', serif !important;
font-weight: 400;
font-style: italic;
letter-spacing: -0.02em;
}
.page-promise.photo-promise,
.page-promise.retouch-promise,
.page-promise.ai-promise {
font-family: 'Instrument Serif', 'Times New Roman', serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(28px, 4.4vw, 56px) !important;
line-height: 1.18 !important;
letter-spacing: -0.012em !important;
text-align: left !important;
max-width: 22ch !important;
color: var(--ink) !important;
margin: 0 0 clamp(16px, 2vw, 28px) !important;
}
.photo-360-line,
.retouch-discipline-line {
font-family: 'JetBrains Mono', monospace !important;
font-size: clamp(11px, 1vw, 13px) !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
text-align: left !important;
margin: 0 !important;
}
/* ============================================================
TASTE INTELLIGENCE — Maharishi memory layer
============================================================ */
.taste-intelligence {
padding: clamp(80px, 10vw, 160px) clamp(20px, 5vw, 60px) !important;
max-width: 1280px;
margin: 0 auto;
text-align: left !important;
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.taste-intelligence .ti-eyebrow {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11.5px !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
margin: 0 0 clamp(20px, 2.5vw, 36px) !important;
}
.taste-intelligence .ti-headline {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
font-size: clamp(44px, 8vw, 124px) !important;
line-height: 0.92 !important;
letter-spacing: -0.04em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
margin: 0 0 clamp(24px, 3vw, 48px) !important;
max-width: 18ch;
}
.taste-intelligence .ti-headline em {
font-family: 'Instrument Serif', 'Times New Roman', serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
text-transform: none !important;
}
.taste-intelligence .ti-body {
font-family: 'Manrope', sans-serif !important;
font-size: clamp(16px, 1.4vw, 19px) !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
color: var(--ink-2) !important;
max-width: 56ch !important;
margin: 0 0 clamp(28px, 3vw, 44px) !important;
}
.taste-intelligence .ti-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 760px;
}
.taste-intelligence .ti-list li {
font-family: 'Manrope', sans-serif !important;
font-size: clamp(15px, 1.25vw, 17px) !important;
line-height: 1.55 !important;
color: var(--ink) !important;
padding: 18px 0 !important;
border-top: 1px solid var(--hair) !important;
letter-spacing: 0.01em;
}
.taste-intelligence .ti-list li:last-child {
border-bottom: 1px solid var(--hair) !important;
}
@media (max-width: 760px) {
.taste-intelligence .ti-headline { font-size: clamp(36px, 11vw, 64px) !important; }
}
/* ============================================================
R3 — Memory Repackaging
Hero supporting mantra, closing verdict, mantra placements
============================================================ */
/* Hero supporting mantra (under hero subline) */
.hero-mantra {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
font-weight: 900;
font-stretch: condensed;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink, #111);
margin-top: 22px;
margin-bottom: 0;
}
/* Closing verdict — reposition of CONTENT PRODUCTION. REIMAGINED. */
.closing-verdict {
text-align: center;
padding: 96px 24px;
}
.closing-verdict .cv-h {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
font-weight: 900;
font-stretch: condensed;
font-size: 32px;
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ink, #111);
margin: 0 0 18px;
}
.closing-verdict .cv-sub {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
font-weight: 300;
font-size: 17px;
line-height: 1.4;
color: var(--ink, #111);
margin: 0;
}
@media (max-width: 760px) {
.closing-verdict { padding: 64px 20px; }
.closing-verdict .cv-h { font-size: 24px; }
.closing-verdict .cv-sub { font-size: 16px; }
}
/* Mantra placements — /photo and /ai */
.mantra-section {
padding: 64px 24px;
text-align: center;
}
.mantra-line {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
font-weight: 900;
font-stretch: condensed;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink, #111);
margin: 0 auto;
text-align: center;
max-width: none;
}
/* R13 — Photo estimator: enlarge hint, halve mantra bottom space */
.photo-grid-wrap .grid-hint {
font-size: 26px !important;
line-height: 1.25 !important;
letter-spacing: 0.01em !important;
margin-bottom: 28px !important;
text-align: center !important;
}
.photo-grid-wrap .mantra-section {
padding-top: 64px !important;
padding-bottom: 32px !important;
}
.photo-grid-wrap .mantra-line {
margin-left: auto !important;
margin-right: auto !important;
max-width: none !important;
text-align: center !important;
width: 100% !important;
}
@media (max-width: 720px) {
.photo-grid-wrap .grid-hint { font-size: 20px !important; }
.photo-grid-wrap .mantra-section { padding-bottom: 24px !important; }
}
.ai-mantra {
margin-top: 28px;
margin-bottom: 8px;
}
/* ============================================================
R4 — ITALIAN VOGUE FILTER
Added 2026-05-08 — Phases 7+8+9
- Hero full-bleed (Phase 9)
- Camera-punch + Maharishi-block + Closing verdict (Phase 8 typography + spacing)
- Capability typography flip (Phase 7)
- Footer mani size reduction (Phase 8)
- 5-tier hierarchy scale (Phase 8)
============================================================ */
/* ===== Phase 9: Hero full-bleed treatment ===== */
.hero-fullbleed { padding-top: 100px; padding-bottom: 0; }
.hero-fullbleed .hero-ph {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: 64px;
aspect-ratio: 21/9;
min-height: 60vh;
}
@media (max-width: 1100px) { .hero-fullbleed .hero-ph { aspect-ratio: 16/9; min-height: 52vh; } }
@media (max-width: 720px) { .hero-fullbleed .hero-ph { aspect-ratio: 4/5; min-height: 64vh; margin-top: 40px; } }
/* Hero h1 — 5-tier hierarchy: TIER 1 (largest) */
.hero-fullbleed .hero-h,
.hero .hero-h {
font-size: clamp(54px, 9vw, 132px);
line-height: 0.94;
letter-spacing: -0.01em;
}
/* ===== Phase 8: 5-tier hierarchy + spacing rhythm ===== */
/* Tier 2 — CAMERA */
.camera-punch {
text-align: center;
padding: 132px 32px 88px;
max-width: 1200px;
margin: 0 auto;
}
.camera-punch .cp-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: 11px;
color: var(--ink-3, #8B8580);
margin: 0 0 36px;
}
.camera-punch .cp-h {
font-family: 'Editorial Old', 'Cormorant Garamond', 'Times New Roman', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(40px, 6.4vw, 96px);
line-height: 1.02;
letter-spacing: -0.005em;
color: var(--ink, #1A1A1A);
margin: 0 0 28px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
text-transform: none;
}
.camera-punch .cp-sub {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.4;
color: var(--ink-2, #4A4744);
margin: 0 0 56px;
letter-spacing: 0.01em;
}
.camera-punch .cp-mantra {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(13px, 1vw, 14px);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink, #1A1A1A);
margin: 0;
padding-top: 36px;
border-top: 1px solid var(--hair, rgba(26,26,26,0.12));
display: inline-block;
}
@media (max-width: 720px) {
.camera-punch { padding: 88px 20px 64px; }
.camera-punch .cp-h { font-size: clamp(32px, 8vw, 48px); }
.camera-punch .cp-sub { font-size: 16px; margin-bottom: 40px; }
}
/* Tier 3 — ONE CAPTURE INFINITE OUTPUTS lives in capability triptych mantra (handled elsewhere) */
/* ===== Tier 4 — MAHARISHI block ===== */
.maharishi-block {
padding: 132px 32px 96px;
max-width: 1280px;
margin: 0 auto;
background: transparent;
}
.maharishi-block .mb-header {
text-align: center;
margin-bottom: 80px;
border-bottom: 1px solid var(--hair, rgba(26,26,26,0.12));
padding-bottom: 56px;
}
.maharishi-block .mb-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: 11px;
color: var(--ink-3, #8B8580);
margin: 0 0 32px;
}
.maharishi-block .mb-headline {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(56px, 8vw, 116px);
line-height: 0.96;
letter-spacing: -0.01em;
color: var(--ink, #1A1A1A);
margin: 0 0 28px;
text-transform: none;
font-style: italic;
}
.maharishi-block .mb-headline .tm {
font-size: 0.4em;
vertical-align: super;
font-style: normal;
letter-spacing: 0;
}
.maharishi-block .mb-subhead {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.45;
color: var(--ink-2, #4A4744);
margin: 0 auto;
max-width: 720px;
}
.maharishi-block .mb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 96px;
align-items: start;
}
@media (max-width: 900px) {
.maharishi-block .mb-grid { grid-template-columns: 1fr; gap: 56px; }
}
.maharishi-block .mb-copy { padding-top: 12px; }
.maharishi-block .mb-h3 {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--ink, #1A1A1A);
margin: 0 0 24px;
text-transform: none;
}
.maharishi-block .mb-architecture {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.6;
color: var(--ink-2, #4A4744);
margin: 0 0 32px;
}
.maharishi-block .mb-architecture strong {
font-weight: 700;
color: var(--ink, #1A1A1A);
}
.maharishi-block .mb-cta { margin-top: 16px; }
/* Maharishi command-panel preview (right column) */
.maharishi-block .mb-panel {
background: var(--panel, #FAF6EC);
border: 1px solid var(--hair-strong, rgba(26,26,26,0.18));
padding: 36px 32px;
position: relative;
}
.maharishi-block .mb-panel-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--hair, rgba(26,26,26,0.12));
}
.maharishi-block .mb-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent, #D4471F);
display: inline-block;
}
.maharishi-block .mb-panel-label {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink, #1A1A1A);
}
.maharishi-block .mb-questions {
list-style: none;
margin: 0; padding: 0;
}
.maharishi-block .mb-questions li {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-style: italic;
font-size: 17px;
line-height: 1.45;
color: var(--ink, #1A1A1A);
padding: 14px 0;
border-bottom: 1px solid var(--hair, rgba(26,26,26,0.10));
}
.maharishi-block .mb-questions li:last-child { border-bottom: none; }
.maharishi-block .mb-foot {
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3, #8B8580);
margin: 24px 0 0;
}
/* Memory block + Taste Memory wedge */
.maharishi-block .mb-memory {
border-top: 1px solid var(--hair, rgba(26,26,26,0.12));
padding-top: 64px;
margin-bottom: 64px;
text-align: center;
}
.maharishi-block .mb-memory-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: 11px;
color: var(--ink-3, #8B8580);
margin: 0 0 24px;
}
.maharishi-block .mb-memory-headline {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.1;
color: var(--ink, #1A1A1A);
margin: 0 auto 40px;
max-width: 880px;
text-transform: none;
}
.maharishi-block .mb-memory-headline em {
font-style: italic;
border-bottom: 1px solid var(--ink, #1A1A1A);
padding-bottom: 2px;
}
.maharishi-block .mb-memory-list {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 720px;
text-align: left;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 40px;
}
@media (max-width: 720px) {
.maharishi-block .mb-memory-list { grid-template-columns: 1fr; }
}
.maharishi-block .mb-memory-list li {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.55;
color: var(--ink-2, #4A4744);
padding-left: 18px;
position: relative;
}
.maharishi-block .mb-memory-list li::before {
content: '·';
position: absolute;
left: 0;
font-weight: 700;
color: var(--ink, #1A1A1A);
}
/* Taste Memory wedge — the brand wedge */
.maharishi-block .mb-wedge {
text-align: center;
border-top: 1px solid var(--ink, #1A1A1A);
padding-top: 56px;
margin-top: 56px;
}
.maharishi-block .mb-wedge-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: 11px;
color: var(--ink, #1A1A1A);
margin: 0 0 24px;
}
.maharishi-block .mb-wedge-line {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1.08;
color: var(--ink, #1A1A1A);
margin: 0 auto;
max-width: 880px;
text-transform: none;
}
@media (max-width: 720px) {
.maharishi-block { padding: 88px 20px 72px; }
.maharishi-block .mb-header { margin-bottom: 56px; padding-bottom: 40px; }
.maharishi-block .mb-grid { margin-bottom: 64px; }
.maharishi-block .mb-memory { padding-top: 48px; }
.maharishi-block .mb-wedge { padding-top: 40px; margin-top: 40px; }
}
/* ===== Phase 7: Capability typography flip ===== */
/* PHOTO / RETOUCH / CONTENT+ page heads → editorial italic serif; sub-tagline stays sans */
/* Stronger selectors + !important to win over earlier rules in this same file */
html body h1.page-h.photo-h-editorial,
html body h1.page-h.retouch-h-editorial,
html body h1.page-h.ai-h-editorial {
font-family: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif !important;
font-weight: 400 !important;
font-style: italic !important;
font-size: clamp(72px, 13vw, 200px) !important;
line-height: 0.94 !important;
letter-spacing: -0.012em !important;
text-transform: none !important;
text-align: left !important;
margin: 0 0 clamp(18px, 2.4vw, 32px) !important;
}
html body p.page-promise.photo-promise,
html body p.page-promise.retouch-promise,
html body p.page-promise.ai-promise,
html body p.page-promise.photo-promise-editorial,
html body p.page-promise.retouch-promise-editorial {
font-family: 'Manrope', sans-serif !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: clamp(17px, 1.6vw, 22px) !important;
line-height: 1.45 !important;
letter-spacing: 0.005em !important;
text-transform: none !important;
color: var(--ink-2, #4A4744) !important;
margin: 28px 0 0 !important;
max-width: 640px !important;
text-align: left !important;
}
/* AI page sub-tag and outcomes line */
.ai-sub-tag {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.3;
color: var(--ink, #1A1A1A);
margin: 24px auto 0;
max-width: 720px;
}
.ai-outcomes-line {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.5;
letter-spacing: 0.005em;
color: var(--ink-2, #4A4744);
margin: 18px auto 0;
max-width: 640px;
}
/* AI page — Maharishi headline relocated above OS diagram */
.ai-mq-above {
text-align: center;
padding: 56px 32px 32px;
}
.ai-mq-above .mq-headline-above {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
color: var(--ink, #1A1A1A);
margin: 0 auto;
max-width: 880px;
text-transform: none;
letter-spacing: -0.005em;
}
/* RETOUCH speed line — bigger 24-hour line per Italian Vogue brief */
.retouch-speed-line {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.3;
color: var(--ink, #1A1A1A);
margin: 28px auto 0;
max-width: 720px;
text-transform: none;
letter-spacing: 0.002em;
}
/* PHOTO page nav-row spacing (FLATS·GHOST·PRODUCT…) */
.bullet-row.photo-bullets {
padding: 0 !important;
gap: 0 !important;
letter-spacing: 0.18em;
grid-template-columns: repeat(4, 1fr) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bullet-row.photo-bullets span {
padding: 0 !important;
}
@media (max-width: 720px) {
.bullet-row.photo-bullets { grid-template-columns: repeat(2, 1fr) !important; }
}
/* R14 — PHOTO promise + 360 line: 2x font sizes */
.page-promise.photo-promise.r7-photo-promise {
font-size: 44px !important;
line-height: 1.2 !important;
}
.photo-360-line.r7-360-line {
font-size: 22px !important;
letter-spacing: 0.22em !important;
line-height: 1.3 !important;
}
@media (max-width: 720px) {
.page-promise.photo-promise.r7-photo-promise { font-size: 30px !important; }
.photo-360-line.r7-360-line { font-size: 16px !important; }
}
/* R15 — RETOUCH parity (mirror photo R13/R14) */
.retouch-grid-wrap .grid-hint {
font-size: 26px !important;
line-height: 1.25 !important;
letter-spacing: 0.01em !important;
margin-bottom: 28px !important;
text-align: center !important;
}
.page-promise.retouch-promise.retouch-promise-editorial.r7-retouch-promise {
font-size: 44px !important;
line-height: 1.2 !important;
}
@media (max-width: 720px) {
.retouch-grid-wrap .grid-hint { font-size: 20px !important; }
.page-promise.retouch-promise.retouch-promise-editorial.r7-retouch-promise { font-size: 30px !important; }
}
/* ============================================================
R16 — AI PAGE EDITORIAL RESTRUCTURE
- Liquid-glass pill (CAMPAIGNS·E-COMMERCE·OOH·LOOKBOOK·EDITORIAL)
moved to top, photo-style centered, sits above truth defs
- Mantra above pill
- Diagram lead eyebrow + bigger caption (Tier 2 italic prelude)
- Diagram wrapped in liquid-glass card
- Maharishi block (homepage parity) replaces INTAKE LAYER section
- All text sections left-aligned at same margin (var(--ai-margin))
- Portfolio sections merged with no gap
============================================================ */
/* R16 — Liquid-glass pill at top (mirror photo positioning, hero-parity 48px) */
.bullet-row.ai-bullets-top {
margin: 0 auto 56px !important;
max-width: calc(1200px - 96px) !important;
width: calc(100% - 96px) !important;
grid-template-columns: repeat(5, 1fr) !important;
}
.bullet-row.ai-bullets-top span { padding: 0 !important; }
@media (max-width: 720px) {
.bullet-row.ai-bullets-top { grid-template-columns: repeat(2, 1fr) !important; }
}
.mantra-line.ai-mantra-top {
text-align: left !important;
margin: 56px auto 28px !important;
max-width: 1200px !important;
padding: 0 48px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* R16 — Truth definitions: same hero margin (48px) */
.ai-truth-defs-r16 {
margin: 24px auto 96px !important;
max-width: 1200px !important;
padding: 0 48px !important;
text-align: left !important;
}
.ai-truth-defs-r16 article { text-align: left !important; }
.ai-truth-defs-r16 article h3,
.ai-truth-defs-r16 article p { text-align: left !important; }
/* R16 — OS lead block (eyebrow above diagram) */
.ai-os-lead-r16 {
max-width: 1200px;
margin: 96px auto 24px !important;
padding: 0 48px !important;
text-align: left !important;
}
.ai-os-lead-r16 .ai-os-eyebrow-r16 {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: clamp(13px, 1.1vw, 15px);
color: var(--ink-3, #8B8580);
margin: 0;
text-align: left !important;
}
/* R16 — Diagram liquid-glass card (same 48px hero margin) */
.v3-ingest-diagram.ai-os-glass-r16 {
max-width: calc(1200px - 96px) !important;
width: calc(100% - 96px) !important;
margin: 0 auto !important;
padding: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px) clamp(24px, 3vw, 36px) !important;
background: rgba(255, 255, 255, 0.62) !important;
-webkit-backdrop-filter: blur(48px) saturate(1.9) !important;
backdrop-filter: blur(48px) saturate(1.9) !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 28px !important;
box-shadow: 0 30px 80px rgba(26, 23, 20, 0.10), 0 8px 24px rgba(26, 23, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
@media (max-width: 720px) {
.v3-ingest-diagram.ai-os-glass-r16 {
border-radius: 18px !important;
padding: 20px !important;
}
}
/* R16 — Diagram caption block (BIGGER, left-aligned) */
.ai-os-foot-r16 {
max-width: 1200px;
margin: 28px auto 96px !important;
padding: 0 48px !important;
text-align: left !important;
}
.ai-os-foot-r16 .ai-os-caption-r16 {
font-family: 'Manrope', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-size: clamp(14px, 1.3vw, 18px) !important;
line-height: 1.5 !important;
color: var(--ink-2, #5C5247) !important;
text-align: left !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* R16 — Tier 2 prelude line above Maharishi block (italic uppercase serif) */
.ai-mh-prelude-r16 {
max-width: 1200px;
margin: 96px auto 32px !important;
padding: 0 48px !important;
text-align: left !important;
}
.ai-mh-prelude-r16 .ai-mh-prelude-h {
font-family: 'Editorial Old', 'Cormorant Garamond', 'Times New Roman', serif !important;
font-weight: 400 !important;
font-style: italic !important;
font-size: clamp(36px, 5.4vw, 72px) !important;
line-height: 1.05 !important;
letter-spacing: -0.005em !important;
color: var(--ink, #1A1714) !important;
margin: 0 !important;
text-align: left !important;
text-transform: uppercase !important;
max-width: 24ch !important;
}
@media (max-width: 720px) {
.ai-mh-prelude-r16 .ai-mh-prelude-h { font-size: 32px !important; }
}
/* R16 — Maharishi block on AI page: ensure left margin parity (48px) */
.ai-maharishi-r16 {
max-width: 1200px !important;
margin: 0 auto 96px !important;
padding: 0 48px !important;
}
/* R16 — Hero text left-align parity (CONTENT+, promise, sub-tag, outcomes line) */
.page-hero.ai-hero-editorial {
text-align: left !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.page-hero.ai-hero-editorial .page-h.ai-h-editorial,
.page-hero.ai-hero-editorial .page-promise.ai-promise,
.page-hero.ai-hero-editorial .ai-sub-tag,
.page-hero.ai-hero-editorial .ai-outcomes-line {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
/* R16 — Merged portfolio: no gap between flow rows, hero-parity 48px */
.ai-portfolio-merged-r16 {
max-width: 1200px;
margin: 96px auto;
padding: 0 48px;
}
/* R16 — Remaining ai-truth (truth3 "Generated with structure") + ai-cta left-align */
h2.ai-truth {
text-align: left !important;
max-width: 1200px !important;
margin: 96px auto !important;
padding: 0 48px !important;
}
.ai-cta {
text-align: left !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 96px 48px !important;
}
.ai-cta-h { text-align: left !important; }
.ai-cta .hero-ctas-glass { text-align: left !important; justify-content: flex-start !important; }
.ai-portfolio-merged-r16 .ai-portfolio { margin: 0 !important; padding: 0 !important; }
.ai-portfolio-merged-r16 .ai-portfolio + .ai-portfolio { margin-top: 6px !important; }
/* ============================================================
R17 — AI PAGE: hero retouch-parity + halved vertical gaps
- Image-1: ai-truth3 + ai-cta deleted (HTML)
- Image-2: TASTE INTELLIGENCE deleted (HTML); top/bottom gaps halved
- Image-3: SVG diagram font sizes tripled (CSS in SVG)
- Image-4/5: hero sub bigger like RETOUCH, fits 2 lines (not 3)
============================================================ */
/* R17 — AI hero promise + sub: bigger, RETOUCH-parity, 2-line cap */
html body p.page-promise.ai-promise {
font-size: clamp(28px, 3.0vw, 44px) !important;
line-height: 1.2 !important;
font-weight: 500 !important;
color: var(--ink-2, #4A4744) !important;
max-width: 920px !important;
margin-top: clamp(20px, 2.4vw, 32px) !important;
}
.page-hero.ai-hero-editorial .ai-sub-tag {
font-size: clamp(22px, 2.4vw, 34px) !important;
line-height: 1.25 !important;
margin: clamp(20px, 2.2vw, 32px) 0 0 !important;
max-width: 1100px !important;
text-align: left !important;
}
.page-hero.ai-hero-editorial .ai-outcomes-line {
font-size: clamp(18px, 1.8vw, 24px) !important;
line-height: 1.4 !important;
margin: clamp(16px, 1.8vw, 24px) 0 0 !important;
max-width: 1100px !important;
text-align: left !important;
}
@media (max-width: 720px) {
html body p.page-promise.ai-promise { font-size: 28px !important; }
.page-hero.ai-hero-editorial .ai-sub-tag { font-size: 20px !important; }
.page-hero.ai-hero-editorial .ai-outcomes-line { font-size: 16px !important; }
}
/* R17 — Halve vertical gaps in AI page sections (was 96px → 48px) */
.bullet-row.ai-bullets-top { margin: 0 auto 28px !important; }
.mantra-line.ai-mantra-top { margin: 28px auto 14px !important; }
.ai-truth-defs-r16 { margin: 12px auto 48px !important; }
.ai-os-lead-r16 { margin: 48px auto 12px !important; }
.ai-os-foot-r16 { margin: 14px auto 48px !important; }
.ai-mh-prelude-r16 { margin: 48px auto 16px !important; }
.ai-maharishi-r16 { margin: 0 auto 48px !important; }
.ai-portfolio-merged-r16 { margin: 48px auto !important; }
/* ============================================================
R18 — AI page: hero → homepage left-margin parity (48px)
- Image-1: hero text starts at left=48 (homepage parity)
- Image-2: SVG top spine + HTML eyebrow + HTML caption removed;
SVG bottom "TASTE MEMORY" centered
============================================================ */
.page-hero.ai-hero-editorial {
max-width: 1440px !important;
padding: 140px 48px 60px !important;
margin: 0 auto !important;
}
@media (max-width: 1100px) {
.page-hero.ai-hero-editorial { padding: 130px 32px 50px !important; }
}
@media (max-width: 720px) {
.page-hero.ai-hero-editorial { padding: 110px 20px 36px !important; }
}
/* PHOTO 360 line */
.photo-360-line {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
font-size: 11px;
color: var(--ink-3, #8B8580);
margin: 32px 0 0;
}
/* ===== Phase 8: Footer manifesto size reduction + Closing verdict ===== */
.foot-v7 .foot-mani {
font-size: clamp(13px, 1.1vw, 15px) !important;
letter-spacing: 0.32em !important;
font-weight: 600 !important;
color: var(--ink-3, #8B8580) !important;
}
/* Closing verdict — make it Italian-Vogue editorial */
.closing-verdict {
padding: 132px 32px 96px;
max-width: 960px;
margin: 0 auto;
}
.closing-verdict .cv-h {
font-family: 'Editorial Old', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(36px, 5vw, 72px);
line-height: 1.05;
letter-spacing: -0.005em;
text-transform: none;
margin: 0 0 28px;
color: var(--ink, #1A1A1A);
}
.closing-verdict .cv-sub {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.5;
letter-spacing: 0.01em;
color: var(--ink-2, #4A4744);
max-width: 640px;
margin: 0 auto;
}
@media (max-width: 720px) {
.closing-verdict { padding: 88px 20px 64px; }
.closing-verdict .cv-h { font-size: clamp(28px, 7vw, 40px); }
}
/* ============================================================
R5 — Homepage micro-revisions (May 8, 2026)
============================================================ */
/* Item 2 — Capabilities triptych +33% (icon + label + spacing) */
.caps-triptych { padding: 96px 0 !important; }
.caps-triptych .caps-row {
justify-content: center !important;
gap: clamp(80px, 12vw, 200px) !important;
}
.caps-triptych .caps-cell {
text-align: center !important;
}
.caps-triptych .caps-ic svg {
width: auto !important;
height: auto !important;
transform: scale(1.33);
transform-origin: center;
display: block;
margin: 0 auto 18px;
}
.caps-triptych .caps-label {
font-size: clamp(15px, 1.1vw, 18px) !important;
letter-spacing: 0.32em !important;
display: block;
margin-top: 32px !important;
}
@media (max-width: 720px) {
.caps-triptych .caps-row {
flex-wrap: wrap;
gap: 56px !important;
}
.caps-triptych .caps-ic svg { transform: scale(1.2); }
}
/* Item 4 — Maharishi panel questions: enlarge type */
.maharishi-block .mb-questions li {
font-size: clamp(20px, 1.6vw, 26px) !important;
line-height: 1.5 !important;
padding: 20px 0 !important;
}
.maharishi-block .mb-panel-label {
font-size: 13px !important;
letter-spacing: 0.24em !important;
}
.maharishi-block .mb-foot {
font-size: 12px !important;
margin-top: 32px !important;
}
/* Item 5 + 6 — Memory block: enlarge headline + bullets, left-align, single column */
.maharishi-block .mb-memory {
text-align: left !important;
max-width: 980px;
margin-left: 0 !important;
margin-right: auto !important;
}
.maharishi-block .mb-memory-eyebrow {
font-size: 13px !important;
letter-spacing: 0.32em !important;
margin-bottom: 32px !important;
}
.maharishi-block .mb-memory-headline {
font-size: clamp(34px, 4.4vw, 64px) !important;
line-height: 1.08 !important;
margin: 0 0 48px 0 !important;
max-width: none !important;
text-align: left !important;
}
.maharishi-block .mb-memory-list {
grid-template-columns: 1fr !important;
max-width: 760px;
margin: 0 !important;
gap: 18px 0 !important;
text-align: left !important;
}
.maharishi-block .mb-memory-list li {
font-size: clamp(18px, 1.4vw, 22px) !important;
line-height: 1.55 !important;
padding-left: 22px !important;
}
@media (max-width: 720px) {
.maharishi-block .mb-memory-headline { font-size: clamp(28px, 8vw, 38px) !important; }
.maharishi-block .mb-memory-list li { font-size: 17px !important; }
}
/* Item 3 — moved mb-header (now between grid and memory): tighten */
.maharishi-block .mb-header--after {
border-top: 1px solid var(--hair, rgba(26,26,26,0.12));
padding-top: 64px;
margin-top: 64px;
margin-bottom: 56px;
text-align: center;
}
/* ============================================================
R6 — Maharishi inline header + Final CTA center + Single divider
============================================================ */
/* Item 1 — Move MAHARISHI italic block into the left column under the CTA button.
Match the right-panel height by stretching the column. */
.maharishi-block .mb-grid {
align-items: stretch !important;
}
.maharishi-block .mb-copy {
display: flex;
flex-direction: column;
}
.maharishi-block .mb-inline-header {
margin-top: auto; /* pushes block to bottom of column → matches panel bottom */
padding-top: 56px;
text-align: left !important;
}
.maharishi-block .mb-inline-header .mb-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: 11px;
color: var(--ink-3, #8B8580);
margin: 0 0 20px;
text-align: left;
}
.maharishi-block .mb-inline-header .mb-headline {
font-family: 'Editorial Old', 'Cormorant Garamond', 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(36px, 4vw, 56px);
line-height: 1.0;
color: var(--ink, #1A1A1A);
margin: 0 0 24px;
text-align: left;
letter-spacing: -0.01em;
}
.maharishi-block .mb-inline-header .mb-headline .tm {
font-size: 0.4em;
vertical-align: super;
font-style: normal;
margin-left: 2px;
}
.maharishi-block .mb-inline-header .mb-subhead {
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.5;
color: var(--ink-2, #4A4744);
margin: 0;
max-width: 38ch;
text-align: left;
}
@media (max-width: 900px) {
.maharishi-block .mb-inline-header { margin-top: 48px; padding-top: 40px; }
.maharishi-block .mb-inline-header .mb-headline { font-size: clamp(32px, 8vw, 44px); }
}
/* Item 3 — Final CTA: center the sub-line and the button row */
.final-cta { text-align: center !important; }
.final-cta .cta-section-heading,
.final-cta .big-statement,
.final-cta .cta-hero-sub {
text-align: center !important;
}
.final-cta .cta-hero-sub,
.final-cta p.cta-hero-sub {
margin-left: auto !important;
margin-right: auto !important;
max-width: 36ch;
}
.final-cta .hero-ctas,
.final-cta .hero-ctas[style*="justify-content:center"] {
justify-content: center !important;
}
/* Item 4 — Collapse the double hairline between mb-grid and mb-memory into a single divider.
Previously: mb-grid had its own bottom border and mb-memory had a top border → 2 lines.
Solution: keep mb-memory's border-top, neutralize any mb-grid bottom border. */
.maharishi-block .mb-grid {
border-bottom: 0 !important;
padding-bottom: 56px !important;
margin-bottom: 0 !important;
}
.maharishi-block .mb-memory {
margin-top: 0 !important;
}
/* ============================================================================
R7 — ITALIAN VOGUE AUDIT (May 9, 2026)
Brandon's notes + Final Audit doc → enforce Font Rulebook globally.
Tier 1 Display / Tier 2 Section / Tier 3 Editorial Italic / Tier 4 Sub / Tier 5 Body.
============================================================================ */
/* B · HERO breathing room + force support to one line, prevent "easier" orphan */
.hero-editorial .hero-h-editorial {
margin-bottom: clamp(28px, 4vw, 48px) !important;
}
.hero-editorial .hero-sub-editorial {
white-space: nowrap !important; /* one line on desktop */
font-size: clamp(16px, 2.2vw, 28px) !important;
letter-spacing: -0.01em !important;
margin-bottom: clamp(28px, 3.6vw, 44px) !important;
}
@media (max-width: 720px) {
.hero-editorial .hero-sub-editorial {
white-space: normal !important; /* mobile allows wrap */
text-wrap: balance !important;
}
}
.hero-editorial .hero-ctas-editorial {
margin-top: clamp(20px, 2.4vw, 32px) !important;
gap: 14px !important;
}
/* C1 · Reorder verified in HTML. Add visual breathing between r7-selected and r7-clarity-block */
.r7-selected { padding-bottom: clamp(40px, 5vw, 80px) !important; }
.r7-clarity-block {
padding-top: clamp(48px, 6vw, 96px) !important;
padding-bottom: clamp(32px, 4vw, 56px) !important;
}
.r7-clarity-h {
text-wrap: balance !important; /* avoid orphans on BEAUTIFUL OUT */
}
.r7-os-category {
margin-top: 18px !important;
margin-bottom: 28px !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: var(--ink-3, #8B8580) !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
}
/* C2 · CAMERA reduced to Tier 2 (font rulebook compliant), eyebrow removed in HTML */
.r7-camera {
padding-top: clamp(72px, 8vw, 128px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
text-align: center !important;
}
.r7-camera .r7-cp-h {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(28px, 5vw, 72px) !important; /* reduced from previous oversized scale */
line-height: 0.96 !important;
letter-spacing: -0.025em !important;
color: var(--ink, #1A1A1A) !important;
text-transform: uppercase !important;
margin: 0 auto !important;
max-width: 18ch !important;
text-wrap: balance !important;
}
.r7-camera .r7-cp-sub {
margin-top: 18px !important;
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(20px, 2.2vw, 30px) !important;
line-height: 1.2 !important;
color: var(--ink-2, #4A4744) !important;
letter-spacing: -0.005em !important;
}
/* C3 — WHAT YOU SEE r7 mid statement: tighten spacing as transition */
.r7-mid-statement {
padding: clamp(64px, 7vw, 120px) 0 !important;
}
/* D · MAHARISHI grand moment — bold italic memory bullets per Brandon */
.maharishi-block .mb-memory-list li {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 700 !important; /* bold + italic, per dictation */
font-size: clamp(20px, 2vw, 26px) !important;
line-height: 1.45 !important;
color: var(--ink, #1A1A1A) !important;
letter-spacing: -0.005em !important;
}
/* D1 · Single grand "Your brand should not have to introduce itself twice" — keep wedge, hide closing-verdict (which duplicated it) */
.closing-verdict { display: none !important; }
.r7-wedge {
margin-top: clamp(48px, 5vw, 88px) !important;
padding-top: clamp(40px, 4vw, 64px) !important;
border-top: 1px solid var(--hair, rgba(26,26,26,0.10)) !important;
}
.r7-wedge .mb-wedge-line {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(28px, 3.8vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: -0.015em !important;
color: var(--ink, #1A1A1A) !important;
text-wrap: balance !important;
}
/* E · FINAL CTA — START WITH ONE PRODUCT removed in HTML, tighten remaining */
.r7-final-cta {
padding: clamp(72px, 8vw, 140px) 0 clamp(56px, 6vw, 96px) !important;
text-align: center !important;
}
.r7-final-cta .r7-cta-line {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-size: clamp(22px, 2.6vw, 36px) !important;
line-height: 1.18 !important;
color: var(--ink, #1A1A1A) !important;
letter-spacing: -0.01em !important;
margin-bottom: 18px !important;
}
/* A4 · FOOTER demote — PRACTICE RADICAL PROGRESS to true footer scale, quiet/elegant/final */
.foot-editorial .foot-mani {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: var(--ink-3, #8B8580) !important;
line-height: 1.2 !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
/* F · PHOTO PAGE — Manrope display headline, Title Case labels, hide non-canon grid cells */
.cap-page .page-h,
.cap-page h1.page-h,
.cap-page .photo-promise,
.photo-page .page-promise {
/* keep existing; targeted overrides happen in photo.html below */
}
/* Title Case for service labels grid (FLATS GHOST PRODUCT ON-FIGURE PHOTO VIDEO row) */
.photo-360-line + div span,
.photo-360-line ~ div > span {
/* generic — applied via .r7-titlecase added below */
}
.r7-titlecase {
text-transform: none !important;
font-variant: small-caps !important; /* fashion magazine feel */
letter-spacing: 0.04em !important;
}
/* F4 · PHOTO grid keep only 4 — hide HERO and SOCIAL cells in the upper label row */
.r7-photo-keep-4 span:nth-child(n+5) { display: none !important; }
/* G · RETOUCH PAGE — drop HEX Creation, prepare combined support line */
.r7-hide { display: none !important; }
/* H · A.I. (CONTENT+) PAGE — liquid glass panels, no stroke borders */
.r7-liquid-glass {
background: rgba(250, 246, 236, 0.55) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 24px 60px rgba(26,26,26,0.06) !important;
}
/* === R7 SAFETY: any leftover .camera-punch (legacy) inherits new sizing too === */
.camera-punch .cp-eyebrow { display: none !important; } /* THE BREAKTHROUGH eyebrow killed globally on home */
/* === R7 BREATHING: hairline divider system between major emotional acts === */
.r7-clarity-block + .r7-triptych { padding-top: 0 !important; }
.r7-triptych { padding-bottom: clamp(48px, 5vw, 88px) !important; }
/* end R7 ============================================================== */
/* R7 · PHOTO PAGE — promise line becomes Instrument Serif italic (fashion-magazine support) */
.r7-photo-promise {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
font-size: clamp(20px, 2.4vw, 32px) !important;
line-height: 1.18 !important;
color: var(--ink, #1A1A1A) !important;
margin: 28px auto 0 !important;
max-width: 28ch !important;
}
.r7-photo-promise br { display: block !important; }
.r7-360-line {
margin-top: 28px !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: var(--ink-3, #8B8580) !important;
line-height: 1.2 !important;
}
.r7-bullets-titlecase span {
text-transform: none !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
font-size: clamp(13px, 1.3vw, 16px) !important;
}
/* R7 · RETOUCH page — combined promise to italic editorial */
.r7-retouch-promise {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(20px, 2.4vw, 32px) !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
color: var(--ink, #1A1A1A) !important;
max-width: 36ch !important;
margin: 28px auto 0 !important;
}
/* R7 · A.I. (Content+) — liquid glass panels in place of stroke borders */
.ai-page .panel,
.ai-page .card,
.ai-page section.panel,
.r7-ai .panel,
.r7-ai .card {
background: rgba(250, 246, 236, 0.55) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 24px 60px rgba(26,26,26,0.06) !important;
}
/* ============================================================================
R8 — HOMEPAGE REFINEMENTS + FOOTER REDESIGN (May 9, 2026)
Per Ömer's Italian Vogue feedback round 2.
============================================================================ */
/* ---------- HERO SUB → Tier 3 (Instrument Serif italic) ---------- */
.hero-editorial .hero-sub-v8.hero-sub-editorial,
.hero-editorial p.hero-sub-editorial {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(28px, 4vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--ink, #1A1A1A) !important;
margin-bottom: clamp(28px, 3.6vw, 44px) !important;
white-space: nowrap !important;
}
@media (max-width: 720px) {
.hero-editorial .hero-sub-v8.hero-sub-editorial,
.hero-editorial p.hero-sub-editorial {
white-space: normal !important;
text-wrap: balance !important;
font-size: clamp(22px, 6.4vw, 34px) !important;
}
}
/* ---------- SELECTED WORK → Tier 4 italic, centered ---------- */
.r8-selected { text-align: center !important; }
.r8-selected .r8-selected-h,
.r8-selected h2.sec-h-v7.r8-selected-h {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(28px, 3.4vw, 48px) !important;
line-height: 1.18 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
color: var(--ink, #1A1A1A) !important;
text-align: center !important;
margin: 0 auto clamp(24px, 3vw, 40px) !important;
width: 100% !important;
display: block !important;
}
.r8-selected .pf-grid { margin-top: 0 !important; }
/* ---------- OS LINE → Tier 4 italic, Title Case, centered ---------- */
.r8-os-category {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(22px, 2.6vw, 36px) !important;
line-height: 1.2 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
color: var(--ink-2, #4A4744) !important;
text-align: center !important;
margin-top: clamp(14px, 2vw, 24px) !important;
margin-bottom: clamp(36px, 4vw, 56px) !important;
}
.r8-os-category .tm {
font-size: 0.55em !important;
vertical-align: super !important;
margin-left: 2px !important;
}
/* ---------- TRIPTYCH ICONS (R8) ---------- */
.r7-triptych .caps-row {
align-items: end !important;
}
.r8-caps-ic {
display: inline-flex !important;
align-items: flex-end !important;
justify-content: center !important;
height: 96px !important;
margin-bottom: 18px !important;
color: var(--ink, #1A1A1A) !important;
}
.r8-caps-ic svg {
display: block !important;
width: auto !important;
height: auto !important;
max-height: 90px !important;
}
.caps-cell:hover .r8-caps-ic { color: var(--ink, #1A1A1A) !important; }
/* ---------- WHAT YOU SEE → forced line break already in HTML; tighten ---------- */
.r8-mid-h {
text-wrap: balance !important;
line-height: 0.96 !important;
}
.r8-mid-h br { display: block !important; }
/* ---------- MAHARISHI cat-logo + wordmark above the block ---------- */
.r8-maharishi { padding-top: clamp(80px, 9vw, 140px) !important; }
.r8-mh-mark {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 0 auto clamp(36px, 4vw, 64px) !important;
color: var(--ink, #1A1A1A) !important;
}
.r8-mh-mark svg {
display: block !important;
flex: 0 0 auto !important;
}
.r8-mh-wordmark {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(24px, 2.8vw, 36px) !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
color: var(--ink, #1A1A1A) !important;
}
.r8-mh-wordmark .tm {
font-size: 0.5em !important;
vertical-align: super !important;
font-style: normal !important;
margin-left: 1px !important;
}
/* ---------- "Maharishi remembers..." → Tier 3 (TASTE INTELLIGENCE eyebrow removed in HTML) ---------- */
.r8-mb-memory { text-align: center !important; }
.r8-mb-memory-headline,
.maharishi-block .r8-mb-memory-headline {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(34px, 4.4vw, 64px) !important;
line-height: 1.08 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--ink, #1A1A1A) !important;
text-align: center !important;
max-width: 22ch !important;
margin: 0 auto clamp(28px, 3.4vw, 44px) !important;
}
.r8-mb-memory-headline em,
.maharishi-block .r8-mb-memory-headline em {
font-style: italic !important;
font-weight: 400 !important;
}
.r8-mb-memory .mb-memory-list {
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 56ch !important;
text-align: center !important;
}
.r8-mb-memory .mb-memory-list li {
text-align: center !important;
}
/* ---------- TASTE MEMORY™ → Tier 4 italic ---------- */
.r8-wedge { text-align: center !important; }
.r8-wedge .r8-wedge-eyebrow,
.maharishi-block .r8-wedge .r8-wedge-eyebrow {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(28px, 3.4vw, 48px) !important;
line-height: 1.18 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
color: var(--ink, #1A1A1A) !important;
margin: 0 auto 14px !important;
text-align: center !important;
}
.r8-wedge .r8-wedge-eyebrow .tm {
font-size: 0.5em !important;
vertical-align: super !important;
font-style: normal !important;
}
.r8-wedge .mb-wedge-line {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ============================================================================
R8 FOOTER REDESIGN
- No section dividers (kill any borders/hairlines on footer children)
- No language pills (display:none on .foot-langs as failsafe)
- 4 quick links on ONE line, evenly spaced
- Bottom: brand row (left) + legal row (right)
============================================================================ */
.r8-foot {
border-top: 1px solid var(--hair, rgba(26,26,26,0.10)) !important; /* single divider only between page and footer */
padding-top: clamp(48px, 5vw, 72px) !important;
padding-bottom: clamp(40px, 4vw, 56px) !important;
background: transparent !important;
}
.r8-foot .foot-langs,
.r8-foot #foot-langs,
.r8-foot .foot-global,
.r8-foot .foot-pricing,
.r8-foot .foot-bot,
.r8-foot .foot-meta {
display: none !important;
}
.r8-foot-inner {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 32px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
@media (max-width: 720px) {
.r8-foot-inner { padding: 0 20px !important; }
}
/* Quick-links nav: one row, justified */
.r8-foot-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 24px !important;
width: 100% !important;
margin: 0 0 clamp(40px, 4vw, 64px) !important;
padding: 0 !important;
border: 0 !important;
}
.r8-foot-nav a {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: clamp(22px, 2.4vw, 34px) !important;
line-height: 1.1 !important;
letter-spacing: -0.005em !important;
color: var(--ink, #1A1A1A) !important;
text-decoration: none !important;
text-transform: none !important;
border: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
transition: opacity .2s ease !important;
}
.r8-foot-nav a:hover { opacity: 0.6 !important; }
@media (max-width: 720px) {
.r8-foot-nav {
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
}
.r8-foot-nav a { font-size: 24px !important; }
}
/* Practice Radical Progress — quiet footer mantra */
.r8-foot-mani {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: var(--ink-3, #8B8580) !important;
line-height: 1.2 !important;
margin: 0 0 clamp(28px, 3vw, 40px) !important;
padding: 0 !important;
border: 0 !important;
}
/* Bottom row: brand left, legal right — single row, no divider */
.r8-foot-bottom {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: 24px !important;
width: 100% !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.r8-foot-brand {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.r8-foot-brand .foot-brand {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--ink, #1A1A1A) !important;
}
.r8-foot-brand .foot-brand-tag {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
font-weight: 400 !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ink-3, #8B8580) !important;
}
.r8-foot-legal {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-size: 11px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--ink-3, #8B8580) !important;
}
.r8-foot-legal a {
color: var(--ink-3, #8B8580) !important;
text-decoration: none !important;
transition: color .2s ease !important;
}
.r8-foot-legal a:hover { color: var(--ink, #1A1A1A) !important; }
.r8-foot-legal .sep { color: var(--ink-3, #8B8580) !important; }
@media (max-width: 720px) {
.r8-foot-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 18px !important;
}
}
/* ============================================================================
R9 — LEFT-ALIGN HOMEPAGE, REAL ICONS, REAL MAHARISHI LOGO (May 9, 2026)
- Tüm homepage sola hizalı (footer hariç)
- SERVICES-ICONS.jpg'den çıkarılmış gerçek PNG ikonlar
- loginbackground-2.jpg'den arkaplansız Maharishi kedi logosu
- CAMERA: italic kaldır, "One data capture" büyüt
- Memory headline underline-yok, bullet bold-yok
- Footer: PRACTICE RADICAL PROGRESS üstte büyük
============================================================================ */
/* ---------- 1) HERO sola hizalı ---------- */
.hero-editorial.hero-fullbleed,
.hero-editorial {
text-align: left !important;
}
.hero-editorial .hero-h-editorial,
.hero-editorial .hero-sub-editorial,
.hero-editorial .hero-ctas-editorial {
text-align: left !important;
margin-left: 0 !important;
justify-content: flex-start !important;
}
.hero-editorial .hero-ctas-editorial {
display: flex !important;
justify-content: flex-start !important;
}
/* ---------- 2) SELECTED WORK sola hizalı ---------- */
.r8-selected,
.r8-selected .r8-selected-h,
.r8-selected h2.sec-h-v7.r8-selected-h {
text-align: left !important;
}
.r8-selected .r8-selected-h {
margin-left: 0 !important;
margin-right: auto !important;
}
/* ---------- 3) CLARITY block + OS line sola ---------- */
.r7-clarity-block { text-align: left !important; }
.r7-clarity-block .r7-clarity-h,
.r7-clarity-block .big-statement.os-headline {
text-align: left !important;
margin-left: 0 !important;
}
.r8-os-category {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
}
/* sys-grid sola hizalı */
.r7-clarity-block .sys-grid {
justify-content: flex-start !important;
text-align: left !important;
}
/* ---------- 4) TRIPTYCH sola hizalı ---------- */
.r7-triptych { text-align: left !important; }
.r7-triptych .caps-row {
justify-content: flex-start !important;
align-items: flex-end !important;
}
.r7-triptych .caps-cell {
text-align: left !important;
align-items: flex-start !important;
}
/* New PNG icons */
.r9-caps-ic {
display: inline-flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
height: 96px !important;
margin-bottom: 18px !important;
}
.r9-caps-ic img {
display: block !important;
width: auto !important;
height: auto !important;
max-height: 90px !important;
max-width: 120px !important;
object-fit: contain !important;
}
/* ---------- 5) WHAT YOU SEE sola ---------- */
.r7-mid-statement,
.r7-mid-statement .big-statement {
text-align: left !important;
}
.r8-mid-h {
margin-left: 0 !important;
}
/* ---------- 6) CAMERA sola, italic kaldır, "One data capture" büyüt, boşluk azalt ---------- */
.r7-camera {
text-align: left !important;
padding-top: clamp(48px, 5vw, 80px) !important; /* azaltıldı */
padding-bottom: clamp(36px, 4vw, 56px) !important; /* azaltıldı */
}
.r7-camera .r7-cp-h {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
/* italic değil — Manrope bold zaten R7'de doğruydu, doğrula */
font-style: normal !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}
.r7-camera .r7-cp-sub {
text-align: left !important;
margin-left: 0 !important;
/* font büyüt */
font-size: clamp(28px, 3.4vw, 44px) !important;
font-style: italic !important;
line-height: 1.15 !important;
color: var(--ink-2, #4A4744) !important;
margin-top: clamp(20px, 2.4vw, 32px) !important;
}
/* ---------- 7) MAHARISHI BLOCK sola, eyebrow yerine logo, taste paragraph ---------- */
.r9-maharishi {
text-align: left !important;
padding-top: clamp(56px, 6vw, 96px) !important; /* image-5 boşluğu azalt */
}
.r9-maharishi .mb-grid,
.r9-maharishi .mb-copy {
text-align: left !important;
}
.r9-maharishi .mb-h3,
.r9-maharishi .mb-architecture {
text-align: left !important;
margin-left: 0 !important;
}
/* taste paragraph (image-3 ref) */
.r9-mb-taste-paragraph {
margin: clamp(28px, 3vw, 44px) 0 0 !important;
font-family: "Lora", ui-serif, Georgia, serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: clamp(15px, 1.4vw, 18px) !important;
line-height: 1.55 !important;
color: var(--ink-2, #4A4744) !important;
letter-spacing: 0 !important;
max-width: 56ch !important;
}
/* MAHARISHI · INTELLIGENCE LAYER eyebrow → silindi, yerine arkaplansız PNG logo */
.r9-mb-inline-header {
text-align: left !important;
margin-top: clamp(40px, 4vw, 64px) !important;
}
.r9-mb-inline-header .mb-eyebrow { display: none !important; }
.r9-mh-logo {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 220px !important;
max-height: 90px !important;
margin: 0 0 14px !important;
object-fit: contain !important;
background: transparent !important;
}
.r9-mb-inline-header .mb-headline {
text-align: left !important;
margin-left: 0 !important;
}
.r9-mb-inline-header .mb-subhead {
text-align: left !important;
margin-left: 0 !important;
}
/* ---------- 8) "Maharishi remembers..." sola, underline-yok, bullet bold-yok ---------- */
.r8-mb-memory,
.r8-mb-memory-headline,
.maharishi-block .r8-mb-memory-headline,
.r8-mb-memory .mb-memory-list,
.r8-mb-memory .mb-memory-list li {
text-align: left !important;
}
.r8-mb-memory-headline,
.maharishi-block .r8-mb-memory-headline {
text-decoration: none !important;
border-bottom: 0 !important;
margin-left: 0 !important;
margin-right: auto !important;
max-width: none !important;
}
.r8-mb-memory-headline em,
.maharishi-block .r8-mb-memory-headline em {
text-decoration: none !important;
border-bottom: 0 !important;
}
.r8-mb-memory .mb-memory-list {
margin-left: 0 !important;
margin-right: auto !important;
}
/* bullet bold kaldır — sadece italic kal */
.maharishi-block .mb-memory-list li {
font-weight: 400 !important; /* R7'de 700 yapılmıştı, geri al */
text-align: left !important;
}
/* ---------- 9) TASTE MEMORY wedge sola + final-CTA arası boşluk azalt ---------- */
.r8-wedge,
.r8-wedge .r8-wedge-eyebrow,
.r8-wedge .mb-wedge-line,
.maharishi-block .r8-wedge .r8-wedge-eyebrow {
text-align: left !important;
}
.r8-wedge .r8-wedge-eyebrow,
.r8-wedge .mb-wedge-line {
margin-left: 0 !important;
margin-right: auto !important;
}
.r8-wedge {
margin-top: clamp(36px, 4vw, 64px) !important; /* azaltıldı */
padding-top: clamp(28px, 3vw, 44px) !important;
padding-bottom: clamp(24px, 2.6vw, 36px) !important;
}
/* FINAL CTA sola hizalı + boşluk azaltılmış */
.r7-final-cta {
text-align: left !important;
padding-top: clamp(36px, 4vw, 64px) !important; /* image-6 boşluğu azalt */
padding-bottom: clamp(48px, 5vw, 80px) !important;
}
.r7-final-cta .r7-cta-line {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.r7-final-cta .hero-ctas {
justify-content: flex-start !important;
margin-left: 0 !important;
}
/* ============================================================================
R9 FOOTER REDESIGN — image-7 referans
- PRACTICE RADICAL PROGRESS üstte BÜYÜK Manrope display
- Onun ALTINDA daha küçük quick links (Start a Project · Contact · FAQ · Socials)
- En altta brand row + legal
- Section break hairline FULL VIEWPORT WIDTH (image-8 referans)
============================================================================ */
/* Full-width hairline above footer */
.r9-foot {
position: relative !important;
border-top: 0 !important; /* eski hairline kapatıldı */
padding-top: clamp(48px, 5vw, 80px) !important;
}
.r9-foot::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
height: 1px !important;
background: var(--hair, rgba(26,26,26,0.10)) !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
pointer-events: none !important;
}
.r9-foot-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* PRACTICE RADICAL PROGRESS — büyük display, üstte */
.r9-foot-mani-display {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 800 !important;
font-size: clamp(40px, 8vw, 110px) !important;
line-height: 0.96 !important;
letter-spacing: -0.025em !important;
text-transform: uppercase !important;
color: var(--ink, #1A1A1A) !important;
margin: 0 0 clamp(28px, 3vw, 44px) !important;
padding: 0 !important;
text-align: left !important;
}
/* quick links — küçük, justified-between */
.r9-foot-nav {
margin: 0 0 clamp(36px, 4vw, 56px) !important;
}
.r9-foot-nav a {
font-size: clamp(15px, 1.4vw, 18px) !important; /* küçültüldü */
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: var(--ink, #1A1A1A) !important;
}
@media (max-width: 720px) {
.r9-foot-nav a { font-size: 15px !important; }
}
/* Bottom row aynı (R8'de zaten doğruydu) */
/* ============================================================================
R9 OVERRIDES — eski R5 + final-cta center kuralları override
============================================================================ */
/* Triptych — sola hizalı, makul gap, IMG için kural ekle */
.caps-triptych .caps-row,
.r7-triptych .caps-row {
justify-content: flex-start !important;
gap: clamp(48px, 6vw, 96px) !important;
}
.caps-triptych .caps-cell,
.r7-triptych .caps-cell {
text-align: left !important;
align-items: flex-start !important;
}
/* PNG img stilling — sola dayalı */
.r9-caps-ic {
display: block !important;
margin: 0 0 18px 0 !important;
text-align: left !important;
height: auto !important;
}
.r9-caps-ic img {
display: block !important;
width: auto !important;
height: 90px !important;
max-height: 90px !important;
max-width: 140px !important;
object-fit: contain !important;
object-position: left bottom !important;
margin: 0 !important;
}
.caps-triptych .caps-label,
.r7-triptych .caps-label {
text-align: left !important;
display: block !important;
margin-left: 0 !important;
}
/* CAMERA — eski .camera-punch .cp-h sola dayalı override */
.camera-punch.r7-camera .cp-h.r7-cp-h,
.r7-camera .r7-cp-h {
text-align: left !important;
margin: 0 !important;
max-width: none !important;
}
.r7-camera .r7-cp-sub.cp-sub {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* FINAL CTA override — sola dayalı, kart kaldır */
.final-cta.r7-final-cta {
text-align: left !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: clamp(36px, 4vw, 64px) 0 clamp(48px, 5vw, 80px) !important;
}
.final-cta.r7-final-cta .r7-cta-line,
.final-cta.r7-final-cta p.cta-hero-sub {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
background: transparent !important;
}
.final-cta.r7-final-cta .hero-ctas,
.final-cta.r7-final-cta div.hero-ctas[style] {
justify-content: flex-start !important;
margin-left: 0 !important;
}
/* Bonus: hero-sub'taki nowrap genişlik dar ekranlarda taşmasın */
@media (max-width: 1100px) {
.hero-editorial .hero-sub-editorial {
white-space: normal !important;
text-wrap: balance !important;
}
}
/* ============================================================================
R10 OVERRIDES — image.jpg-image-7.jpg referans
============================================================================ */
/* ---------- 1) Triptych: ortada + 1.33x büyük + label ortalı ---------- */
.r10-triptych { text-align: center !important; }
.r10-caps-row {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: flex-end !important;
gap: clamp(64px, 8vw, 140px) !important;
margin: 0 auto !important;
}
.r10-caps-cell {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.r10-caps-ic {
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
height: clamp(110px, 11vw, 144px) !important;
margin: 0 0 22px !important;
}
.r10-caps-ic img {
display: block !important;
width: auto !important;
height: auto !important;
/* eski 90px → 1.33x = ~120px, biraz daha büyük max */
max-height: clamp(110px, 11vw, 138px) !important;
max-width: clamp(150px, 14vw, 184px) !important;
object-fit: contain !important;
object-position: center bottom !important;
margin: 0 auto !important;
}
.r10-triptych .caps-label {
text-align: center !important;
display: block !important;
margin: 0 auto !important;
}
/* ---------- 2) image-2 metinleri sola hizalı (zaten var ama doğrula) ---------- */
.r7-mid-statement,
.r7-mid-statement .big-statement,
.r8-mid-h,
.r7-camera,
.r7-camera .r7-cp-h,
.r7-camera .r7-cp-sub {
text-align: left !important;
}
.r7-mid-statement,
.r7-camera {
padding-left: 0 !important;
}
/* ---------- 3) Maharishi: sol/sağ alt hizalar eşit + logo büyük + producer-grade alt boşluk azalt ---------- */
.r9-maharishi .mb-grid {
align-items: stretch !important; /* iki kolon eşit yükseklik */
}
.r9-maharishi .mb-copy {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.r9-maharishi .mb-panel {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Maharishi logosu büyütüldü ve aradaki boşluğa sığsın */
.r9-mh-logo,
.r9-maharishi .r9-mh-logo {
max-width: 320px !important;
max-height: 140px !important;
height: auto !important;
width: auto !important;
margin: 0 0 10px !important;
}
/* MAHARISHI™ headline + subhead daha sıkı yerleşim */
.r9-mb-inline-header {
margin-top: clamp(24px, 2.4vw, 36px) !important;
margin-bottom: 0 !important;
}
.r9-mb-inline-header .mb-headline {
margin-top: 6px !important;
margin-bottom: 8px !important;
}
.r9-mb-inline-header .mb-subhead {
margin-top: 0 !important;
max-width: 56ch !important;
}
/* Sol kolon en alta itilsin → flex-grow ile boşluk üstte tutulsun değil; ALT hiza için
inline-header'ı en alta koy */
.r9-maharishi .mb-copy > .r9-mb-inline-header {
margin-top: auto !important; /* en alta it */
}
/* Sağ panel: PRODUCER-GRADE INTAKE altındaki padding azalt ve panel alt hizası eşitlensin */
.r9-maharishi .mb-panel {
padding-bottom: clamp(20px, 2vw, 28px) !important;
}
.r9-maharishi .mb-panel .mb-foot {
margin-top: clamp(16px, 1.4vw, 22px) !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.r9-maharishi .mb-panel .mb-questions {
margin-bottom: clamp(8px, 1vw, 14px) !important;
}
/* ---------- 4) Memory ilk bullet → tek satır, wrap yok ---------- */
.r8-mb-memory .mb-memory-list li {
white-space: nowrap !important;
}
@media (max-width: 720px) {
.r8-mb-memory .mb-memory-list li {
white-space: normal !important; /* mobilde kır */
}
}
/* ---------- 5) Final CTA: dikey boşluk 1/2 + kart yatay+dikey ortalı ---------- */
.r10-final-cta {
text-align: center !important;
padding: clamp(18px, 2vw, 32px) 0 clamp(24px, 2.5vw, 40px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.r10-final-cta.final-cta {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.r10-final-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(12px, 1.4vw, 20px) !important; /* metin↔CTA boşluğu 1/2 */
margin: 0 auto !important;
text-align: center !important;
}
.r10-final-cta .r10-cta-line,
.r10-final-cta p.cta-hero-sub {
text-align: center !important;
margin: 0 auto !important;
}
.r10-final-cta .r10-final-ctas,
.r10-final-cta .hero-ctas {
justify-content: center !important;
margin: 0 auto !important;
display: flex !important;
}
/* Daha önceki .final-cta.r7-final-cta kuralları override (sola dayalıydı) */
.final-cta.r7-final-cta.r10-final-cta {
text-align: center !important;
padding: clamp(18px, 2vw, 32px) 0 clamp(24px, 2.5vw, 40px) !important;
}
.final-cta.r7-final-cta.r10-final-cta .r10-cta-line,
.final-cta.r7-final-cta.r10-final-cta p.cta-hero-sub {
text-align: center !important;
margin: 0 auto !important;
}
.final-cta.r7-final-cta.r10-final-cta .hero-ctas,
.final-cta.r7-final-cta.r10-final-cta .r10-final-ctas {
justify-content: center !important;
margin: 0 auto !important;
}
/* ---------- 6) Footer PRACTICE RADICAL PROGRESS tek satır ---------- */
.r10-foot-mani-display {
white-space: nowrap !important;
overflow: visible !important;
/* responsive font-size: 1440px viewport'ta 28-char string sığsın */
font-size: clamp(36px, 7.2vw, 96px) !important;
letter-spacing: -0.025em !important;
line-height: 0.95 !important;
margin: 0 0 clamp(28px, 3vw, 44px) !important;
text-align: left !important;
}
@media (max-width: 720px) {
.r10-foot-mani-display {
white-space: normal !important; /* mobilde sarsın */
font-size: clamp(36px, 11vw, 64px) !important;
}
}
/* ---------- 7) Footer hairline FULL VIEWPORT WIDTH ---------- */
/* (R9 zaten 100vw yapmıştı ama .foot-inner'ın max-width'i içerideki çizgiyi keser görüntüsünü oluşturmuş olabilir) */
.r10-foot {
position: relative !important;
}
.r10-foot::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: 100vw !important;
height: 1px !important;
background: var(--hair, rgba(26,26,26,0.10)) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Eski R9 hairline kapansın (çakışma olmasın) */
.r9-foot.r10-foot {
border-top: 0 !important;
}
/* ---------- 8) Footer alt satır: tek satır, yatay aligned ---------- */
.r10-foot-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 14px !important;
margin: clamp(40px, 4vw, 56px) 0 0 !important;
padding: clamp(20px, 2vw, 28px) 0 0 !important;
border-top: 1px solid var(--hair, rgba(26,26,26,0.10)) !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
font-size: clamp(11px, 1vw, 12px) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--ink-2, #4A4744) !important;
}
.r10-foot-brand {
font-weight: 700 !important;
color: var(--ink, #1A1A1A) !important;
letter-spacing: 0.1em !important;
margin-right: 6px !important;
}
.r10-foot-tag {
font-weight: 500 !important;
color: var(--ink-2, #4A4744) !important;
flex: 1 1 auto !important; /* ortada büyür, brand sola tag ortada copy/privacy/terms sağa */
}
.r10-foot-copy {
font-weight: 500 !important;
color: var(--ink-2, #4A4744) !important;
margin-left: auto !important; /* sağa it */
text-transform: uppercase !important;
}
.r10-foot-sep {
color: var(--ink-2, #4A4744) !important;
opacity: 0.5 !important;
}
.r10-foot-link {
color: var(--ink, #1A1A1A) !important;
font-weight: 600 !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
.r10-foot-link:hover {
text-decoration: underline !important;
}
@media (max-width: 900px) {
.r10-foot-row {
flex-wrap: wrap !important;
gap: 10px 14px !important;
}
.r10-foot-copy { margin-left: 0 !important; }
.r10-foot-tag { flex: 1 0 100% !important; }
}
/* Eski R8 foot bottom kuralları override */
.r10-foot .r8-foot-bottom { display: none !important; }
/* R10 — Triptych centering, spesifite: hem r10 hem r7 hem caps-triptych'i kapsa */
.caps-triptych.r7-triptych.r10-triptych .caps-row.r10-caps-row,
.caps-triptych.r10-triptych .r10-caps-row,
section.r10-triptych .r10-caps-row {
justify-content: center !important;
text-align: center !important;
}
.caps-triptych.r7-triptych.r10-triptych { text-align: center !important; }
.r10-triptych .r10-caps-cell { text-align: center !important; align-items: center !important; }
.r10-triptych .r10-caps-cell .caps-label { text-align: center !important; }
/* R10.1 — CAMERA full-left (mid-statement gibi sol kenara dayalı) */
.sec.wrap.r7-camera,
section.r7-camera.wrap {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.r7-camera .r7-cp-h,
.r7-camera .r7-cp-sub,
.camera-punch.r7-camera .cp-h.r7-cp-h {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* R10.2 — image-2.jpg: "to introduce itself twice." ↔ Final CTA arası boşluğu 1/2 azalt */
.r8-wedge {
padding-bottom: clamp(12px, 1.3vw, 18px) !important; /* 24-36 idi → yarısı */
margin-bottom: 0 !important;
}
.r10-final-cta,
.final-cta.r7-final-cta.r10-final-cta {
padding-top: clamp(8px, 1vw, 16px) !important; /* 18-32 idi → yarısı */
}
/* ============================================================================
R10.3 — image.jpg-image-4.jpg fixleri
============================================================================ */
/* 1) image.jpg: MAHARISHI STRUCTURES + Product enters paragrafı font büyüt */
.r9-maharishi .mb-h3 {
font-size: clamp(20px, 1.9vw, 26px) !important;
line-height: 1.3 !important;
}
.r9-maharishi .mb-architecture {
font-size: clamp(16px, 1.4vw, 19px) !important;
line-height: 1.5 !important;
}
.r9-maharishi .r9-mb-taste-paragraph {
font-size: clamp(16px, 1.4vw, 19px) !important;
line-height: 1.55 !important;
max-width: 60ch !important;
}
/* 2) image-2.jpg: Cat logo daha büyük + logo↔MAHARISHI™ arası en az */
.r9-mh-logo,
.r10-mh-logo {
max-width: 420px !important;
max-height: 180px !important;
margin: 0 0 -6px !important; /* başlığa neredeyse yapışsın */
}
.r9-mb-inline-header .mb-headline {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 3) image-3.jpg: Sağ panel soruları arası 1/3 azalt + sol/sağ üst-alt hizalı */
.r9-maharishi .mb-questions {
display: flex !important;
flex-direction: column !important;
}
.r9-maharishi .mb-questions li {
padding-top: clamp(12px, 1.1vw, 18px) !important; /* eski ~18-26 → 2/3 */
padding-bottom: clamp(12px, 1.1vw, 18px) !important;
}
/* Sağ panel: questions liste ile foot arası dengelensin */
.r9-maharishi .mb-panel {
padding-top: clamp(20px, 2vw, 28px) !important;
padding-bottom: clamp(20px, 2vw, 28px) !important;
}
/* Sol kolon = sağ panelle TOP da hizalı (mb-grid items stretch + mb-copy padding-top) */
.r9-maharishi .mb-grid {
align-items: stretch !important;
}
.r9-maharishi .mb-copy {
padding-top: clamp(20px, 2vw, 28px) !important; /* sağ panelin padding-top'una eşit */
padding-bottom: clamp(20px, 2vw, 28px) !important;
}
/* 4) R10.4 — WHAT YOU SEE & CAMERA hero ile aynı sol margin'da (.wrap = 0 48px) */
.sec.wrap.r7-mid-statement,
section.r7-mid-statement.wrap,
.sec.wrap.r7-camera,
section.r7-camera.wrap {
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
padding-left: 48px !important;
padding-right: 48px !important;
}
@media (max-width: 1100px) {
.sec.wrap.r7-mid-statement,
section.r7-mid-statement.wrap,
.sec.wrap.r7-camera,
section.r7-camera.wrap {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (max-width: 720px) {
.sec.wrap.r7-mid-statement,
section.r7-mid-statement.wrap,
.sec.wrap.r7-camera,
section.r7-camera.wrap {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
.r7-mid-statement .big-statement,
.r8-mid-h,
.r7-camera .r7-cp-h,
.r7-camera .r7-cp-sub,
.camera-punch.r7-camera .cp-h.r7-cp-h {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* R10.3b — Logo spesifite override */
.r9-maharishi .r9-mh-logo,
.r9-maharishi .r10-mh-logo,
.r9-maharishi .r9-mh-logo.r10-mh-logo,
img.r9-mh-logo.r10-mh-logo {
max-width: 420px !important;
max-height: 192px !important;
width: auto !important;
height: auto !important;
margin: 0 0 -8px !important;
}
/* ============================================================
R11 — SUBPAGE HERO PARITY WITH HOMEPAGE .wrap (48px)
photo / retouch / ai hero left margin = homepage hero
FAQ / start / privacy / terms KEEP narrow centered column (legal/long-read pattern)
============================================================ */
.page-hero.photo-hero-editorial,
.page-hero.retouch-hero-editorial,
.page-hero.ai-hero-editorial {
padding-left: 48px !important;
padding-right: 48px !important;
}
@media (max-width: 1100px) {
.page-hero.photo-hero-editorial,
.page-hero.retouch-hero-editorial,
.page-hero.ai-hero-editorial {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (max-width: 720px) {
.page-hero.photo-hero-editorial,
.page-hero.retouch-hero-editorial,
.page-hero.ai-hero-editorial {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* ============================================================
R11 — MOBILE OVERFLOW FIX
Maharishi block + logo on mobile: contain to viewport
============================================================ */
@media (max-width: 720px) {
.r9-maharishi .mb-grid {
grid-template-columns: 1fr !important;
gap: clamp(20px, 4vw, 32px) !important;
}
.r9-maharishi .mb-copy,
.r9-maharishi .mb-panel,
.r9-maharishi .r9-mb-taste-paragraph,
.r9-maharishi .mb-architecture,
.r9-maharishi .mb-h3,
.r9-maharishi .mb-inline-header {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.r9-maharishi .r9-mh-logo,
.r9-maharishi .r10-mh-logo {
max-width: 100% !important;
height: auto !important;
}
.r9-maharishi .mb-cta {
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* R11.1 — mobile Maharishi grid hard-fix: prevent track min-content blowup */
@media (max-width: 720px) {
.r9-maharishi .mb-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
max-width: 100% !important;
}
.r9-maharishi .mb-copy,
.r9-maharishi .mb-panel {
min-width: 0 !important;
}
/* btn primary CTA can grow with text on mobile — wrap to 2 lines */
.r9-maharishi .mb-cta {
white-space: normal !important;
word-break: break-word !important;
}
}
/* R11.2 — Logo image hard-shrink on mobile (HTML width=420 attr override) */
@media (max-width: 720px) {
.r9-maharishi .r9-mh-logo,
.r9-maharishi .r10-mh-logo,
img.r9-mh-logo,
img.r10-mh-logo {
width: auto !important;
max-width: min(280px, 100%) !important;
height: auto !important;
}
}
/* R11.3 — Logo mobile override matching R10.3b specificity */
@media (max-width: 720px) {
.r9-maharishi .r9-mh-logo,
.r9-maharishi .r10-mh-logo,
.r9-maharishi .r9-mh-logo.r10-mh-logo,
img.r9-mh-logo.r10-mh-logo {
width: auto !important;
max-width: 280px !important;
height: auto !important;
max-height: none !important;
}
}
/* ============================================================
R12 — WORK / PORTFOLIO PAGE
Sand bg #F3EEE4. Editorial grid 6-col desktop with mixed spans.
============================================================ */
.work-hero {
padding-top: clamp(80px, 9vw, 140px) !important;
padding-bottom: clamp(28px, 3vw, 48px) !important;
}
.work-hero .hero-eyebrow {
font-family: var(--f-mono);
font-size: clamp(11px, 1vw, 13px);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
margin: 0 0 clamp(16px, 1.6vw, 22px) 0;
}
.work-hero .work-h {
font-family: var(--f-display);
font-weight: 800;
font-size: clamp(56px, 9vw, 132px);
line-height: 0.95;
letter-spacing: -0.025em;
margin: 0 0 clamp(20px, 2vw, 28px) 0;
color: var(--ink);
}
.work-hero .work-sub,
.work-hero p.hero-sub-v8.hero-sub-editorial.work-sub {
font-family: var(--f-serif) !important;
font-style: italic !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
color: var(--ink-2) !important;
max-width: 60ch !important;
white-space: normal !important;
margin: 0 !important;
}
.work-hero h1.work-h,
.work-hero h1.hero-h-v7.hero-h-editorial.work-h {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
}
@media (max-width: 1100px) {
.work-hero h1.work-h { font-size: clamp(44px, 7.5vw, 84px) !important; }
}
.work-grid-wrap {
padding-top: clamp(28px, 3vw, 48px) !important;
padding-bottom: clamp(60px, 6vw, 110px) !important;
}
.work-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: clamp(160px, 14vw, 220px);
gap: clamp(8px, 0.9vw, 14px);
width: 100%;
}
.work-cell {
position: relative;
display: block;
overflow: hidden;
background: var(--paper-2);
/* Default 2x1 (wide rect) */
grid-column: span 2;
grid-row: span 2;
transition: transform 220ms cubic-bezier(.2,.7,.3,1), opacity 220ms ease;
}
.work-cell img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 480ms cubic-bezier(.2,.7,.3,1);
}
.work-cell:hover img { transform: scale(1.025); }
/* Span variants */
.work-cell.w-1x1 { grid-column: span 2; grid-row: span 2; } /* default square-ish */
.work-cell.w-2x1 { grid-column: span 3; grid-row: span 2; } /* wider */
.work-cell.w-3x1 { grid-column: span 6; grid-row: span 2; } /* full-row banner */
.work-cell.w-1x2 { grid-column: span 2; grid-row: span 3; } /* tall portrait */
/* Tablet 2 columns */
@media (max-width: 1100px) {
.work-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: clamp(140px, 16vw, 200px);
}
.work-cell.w-1x1 { grid-column: span 2; grid-row: span 2; }
.work-cell.w-2x1 { grid-column: span 4; grid-row: span 2; }
.work-cell.w-3x1 { grid-column: span 4; grid-row: span 2; }
.work-cell.w-1x2 { grid-column: span 2; grid-row: span 3; }
}
/* Mobile single column */
@media (max-width: 720px) {
.work-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 12px;
}
.work-cell,
.work-cell.w-1x1,
.work-cell.w-2x1,
.work-cell.w-3x1,
.work-cell.w-1x2 {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 4 / 5;
}
/* Wide variants get landscape ratio on mobile */
.work-cell.w-2x1, .work-cell.w-3x1 { aspect-ratio: 16 / 10; }
.work-cell.w-1x2 { aspect-ratio: 4 / 5; }
}
/* Work CTA section */
.work-cta-wrap {
padding-top: clamp(40px, 5vw, 80px) !important;
padding-bottom: clamp(80px, 8vw, 140px) !important;
border-top: 1px solid var(--hair);
}
.work-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.work-cta-h {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(34px, 5vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.work-cta-btn { font-size: clamp(14px, 1.2vw, 16px); }
/* Nav: current state */
.nav-links a.is-current { color: var(--ink); position: relative; }
.nav-links a.is-current::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -6px;
height: 1px;
background: currentColor;
opacity: 0.45;
}
/* ============================================================
R20 M1 — Footer mantra per-lang sizing (overflow fix)
DE/RU words are 30-40% longer than EN; clamp them down.
============================================================ */
html[lang="de"] .r9-foot-mani-display,
html[lang="ru"] .r9-foot-mani-display {
font-size: clamp(28px, 4.6vw, 64px) !important;
letter-spacing: -0.03em !important;
word-break: normal !important;
hyphens: none !important;
}
html[lang="es"] .r9-foot-mani-display {
font-size: clamp(32px, 5.4vw, 76px) !important;
letter-spacing: -0.03em !important;
}
/* Safety net for any lang: prevent horizontal overflow at all viewports */
.r9-foot-mani-display {
max-width: 100% !important;
overflow-wrap: break-word !important;
}
/* ============================================================
R20 M2 — Homepage hero H1 overflow fix (TR/RU)
Long single tokens (PRODÜKSİYONU, ПЕРЕОСМЫСЛЕНО) bypass max-width.
Apply soft break-word for these langs at ALL viewports.
============================================================ */
html[lang="tr"] .hero-h.hero-h-editorial,
html[lang="tr"] h1.hero-h-editorial,
html[lang="ru"] .hero-h.hero-h-editorial,
html[lang="ru"] h1.hero-h-editorial {
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
}
@media (max-width: 720px) {
html[lang="tr"] .hero-h.hero-h-editorial,
html[lang="tr"] h1.hero-h-editorial,
html[lang="ru"] .hero-h.hero-h-editorial,
html[lang="ru"] h1.hero-h-editorial {
word-break: break-word !important;
font-size: clamp(44px, 9.5vw, 64px) !important;
}
}
/* Also tighten v3-hero/subpage-hero on mobile for same langs */
@media (max-width: 720px) {
html[lang="tr"] .v3-hero h1,
html[lang="tr"] h1.v3-hero-h,
html[lang="tr"] .subpage-hero h1,
html[lang="ru"] .v3-hero h1,
html[lang="ru"] h1.v3-hero-h,
html[lang="ru"] .subpage-hero h1 {
overflow-wrap: break-word !important;
word-break: break-word !important;
hyphens: auto !important;
}
}
/* ============================================================
* R26 — HOMEPAGE REBUILD
* Hero CTA breathing room, framed hero image (sand bezel),
* big capability icons, breathing breaks around statements.
* ============================================================ */
/* HERO: CTA breathing room above (push CTAs down with extra space) */
.r26-hero { padding-top: clamp(64px, 9vw, 140px); padding-bottom: clamp(48px, 6vw, 96px); }
.r26-hero .hero-h { margin-bottom: clamp(24px, 3vw, 40px); }
.r26-hero .hero-sub-v8 { margin-bottom: clamp(56px, 7vw, 96px); } /* breathing room above CTAs */
.r26-hero .hero-ctas { margin-top: 0; gap: clamp(14px, 2vw, 24px); }
/* HERO IMAGE: framed with sand padding, not full bleed */
.r26-hero-frame {
padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 80px);
background: #F3EEE4;
margin: clamp(48px, 6vw, 96px) 0 0 0;
}
.r26-hero-frame .ph-img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 3 / 2;
object-fit: cover;
background: #ECE6D8;
}
.r26-hero-frame figcaption {
display: block;
margin-top: 16px;
font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6B6457;
}
/* CAPABILITY ICONS — BIG, juicy, heroic */
.r26-caps {
padding: clamp(96px, 12vw, 200px) 0 clamp(72px, 10vw, 160px);
background: transparent;
}
.r26-caps .caps-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(40px, 6vw, 120px);
align-items: end;
justify-items: center;
max-width: 1440px;
margin: 0 auto;
}
.r26-caps .caps-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 2.5vw, 40px);
text-decoration: none;
color: inherit;
transition: transform 200ms ease, opacity 200ms ease;
padding: clamp(20px, 3vw, 48px) clamp(12px, 2vw, 28px);
}
.r26-caps .caps-cell:hover { transform: translateY(-6px); }
.r26-caps .caps-cell:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 8px; }
.r26-caps .caps-ic {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: clamp(180px, 22vw, 340px);
}
.r26-caps .caps-ic img {
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
filter: none;
}
.r26-caps .caps-label {
font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
font-size: clamp(18px, 2.2vw, 32px);
letter-spacing: 0.22em;
font-weight: 600;
color: #1A1A1A;
text-transform: uppercase;
}
/* CLARITY IN. BEAUTIFUL OUT. — breathing break above */
.r26-clarity {
padding-top: clamp(80px, 11vw, 180px);
padding-bottom: clamp(56px, 7vw, 120px);
text-align: center;
}
.r26-clarity .big-statement {
font-size: clamp(40px, 7.5vw, 120px);
line-height: 1.02;
letter-spacing: -0.02em;
margin: 0;
}
.r26-clarity .big-statement em { font-style: italic; }
.r26-clarity .os-category {
margin-top: clamp(20px, 2.5vw, 36px);
font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
font-size: clamp(12px, 1.2vw, 14px);
letter-spacing: 0.24em;
text-transform: uppercase;
color: #6B6457;
}
/* SELECTED WORK — new headline + slight padding bump */
.r26-selected {
padding-top: clamp(72px, 9vw, 140px);
padding-bottom: clamp(72px, 9vw, 140px);
}
.r26-selected .r26-selected-h {
font-size: clamp(36px, 6vw, 88px);
line-height: 1.02;
letter-spacing: -0.015em;
margin: 0 0 clamp(40px, 5vw, 72px);
text-align: left;
}
.r26-selected .r26-selected-h em { font-style: italic; }
/* FINAL REVEAL — camera as data-capture device */
.r26-camera {
padding: clamp(96px, 12vw, 200px) 0;
text-align: center;
}
.r26-camera .cp-h {
font-size: clamp(36px, 6.5vw, 104px);
line-height: 1.05;
letter-spacing: -0.015em;
margin: 0 0 clamp(24px, 3vw, 48px);
}
.r26-camera .cp-sub {
font-size: clamp(20px, 2.4vw, 40px);
line-height: 1.2;
letter-spacing: -0.005em;
font-style: italic;
color: #1A1A1A;
margin: 0;
}
/* FINAL CTA — Maharishi-free */
.r26-final-cta { padding: clamp(72px, 9vw, 160px) 0 clamp(56px, 7vw, 120px); text-align: center; }
.r26-final-cta .r26-final-line {
font-size: clamp(18px, 1.8vw, 24px);
letter-spacing: 0.04em;
color: #1A1A1A;
margin: 0 0 clamp(24px, 3vw, 40px);
}
/* Hide legacy maharishi block on HOMEPAGE only (homepage has no Maharishi material) */
body:not(.subpage) .maharishi-block:not(.r38-maharishi) { display: none !important; }
/* MOBILE */
@media (max-width: 880px) {
.r26-caps .caps-row { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 80px); }
.r26-caps .caps-ic { height: clamp(160px, 38vw, 260px); }
.r26-hero-frame { padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px); }
.r26-hero-frame .ph-img { aspect-ratio: 4 / 5; }
.r26-selected .r26-selected-h { font-size: clamp(28px, 9vw, 56px); }
.r26-camera .cp-h { font-size: clamp(28px, 9vw, 56px); }
.r26-camera .cp-sub { font-size: clamp(16px, 5vw, 28px); }
}
/* ============================================================
* R27 — EN-only homepage typographic tweaks
* 1) CLARITY single line + bigger OS category + tighter gap
* 2) Camera reveal left-aligned (margin-locked), bigger
* 3) Final CTA: remove tagline line, keep CTAs centered
* ============================================================ */
/* 1) CLARITY IN. BEAUTIFUL OUT. — force single line on EN */
html[lang="en"] .r26-clarity { padding-top: clamp(80px, 11vw, 180px); padding-bottom: clamp(28px, 3.5vw, 60px); }
html[lang="en"] .r26-clarity .big-statement {
white-space: nowrap;
font-size: clamp(32px, 7vw, 112px);
letter-spacing: -0.025em;
}
html[lang="en"] .r26-clarity .os-category {
font-size: clamp(15px, 1.7vw, 22px);
letter-spacing: 0.22em;
margin-top: clamp(18px, 2.2vw, 32px);
}
/* Tighten the gap from CLARITY block to next section (Selected Work header) — halve it */
html[lang="en"] .r26-selected { padding-top: clamp(36px, 4.5vw, 70px); }
/* 2) Camera reveal — left aligned to page margin, bigger font (EN only) */
html[lang="en"] .r26-camera {
text-align: left;
padding: clamp(120px, 14vw, 220px) 48px clamp(72px, 9vw, 140px);
}
@media (max-width: 1100px) {
html[lang="en"] .r26-camera { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 720px) {
html[lang="en"] .r26-camera { padding-left: 20px; padding-right: 20px; }
}
html[lang="en"] .r26-camera .cp-h {
font-size: clamp(48px, 9vw, 144px) !important;
line-height: 1.0 !important;
letter-spacing: -0.02em;
text-align: left;
margin: 0 0 clamp(20px, 2.4vw, 36px);
}
html[lang="en"] .r26-camera .cp-sub {
font-size: clamp(28px, 4vw, 64px) !important;
line-height: 1.1;
text-align: left;
font-style: italic;
}
/* 3) Final CTA — hide "We'll show you..." line, keep CTAs centered (EN only) */
html[lang="en"] .r26-final-cta .r26-final-line { display: none; }
html[lang="en"] .r26-final-cta { padding: clamp(48px, 7vw, 120px) 0 clamp(56px, 7vw, 120px); }
html[lang="en"] .r26-final-cta .hero-ctas { justify-content: center; }
/* Mobile: ensure CLARITY single line doesn't break narrow viewports */
@media (max-width: 720px) {
html[lang="en"] .r26-clarity .big-statement {
font-size: clamp(22px, 7.5vw, 44px);
/* allow wrap on tiny screens — single line on desktop is the priority */
white-space: nowrap;
}
html[lang="en"] .r26-camera .cp-h { font-size: clamp(34px, 9.5vw, 64px) !important; }
html[lang="en"] .r26-camera .cp-sub { font-size: clamp(20px, 6vw, 36px) !important; }
}
/* ═══════════════════════════════════════════════════════════════
R28 — EN-only global left-align rule
"Tüm sayfalarda metinler sola hizalı" — except FAQ and .maharishi-block.
Other lang sites (TR/ES/DE/RU) untouched.
═══════════════════════════════════════════════════════════════ */
/* Base: every textual element on EN pages defaults to left.
Exceptions are explicitly re-aligned below. */
html[lang="en"] body,
html[lang="en"] section,
html[lang="en"] header,
html[lang="en"] article,
html[lang="en"] main,
html[lang="en"] .sec,
html[lang="en"] .wrap,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] p {
text-align: left;
}
/* EXCEPTION 1: FAQ page — keep current alignment untouched.
FAQ page has lang="en" so we exclude via body class or page-level guard.
We add a marker class on body for FAQ pages: body.is-faq overrides back. */
html[lang="en"] body.is-faq,
html[lang="en"] body.is-faq section,
html[lang="en"] body.is-faq header,
html[lang="en"] body.is-faq .sec,
html[lang="en"] body.is-faq .wrap,
html[lang="en"] body.is-faq h1, html[lang="en"] body.is-faq h2, html[lang="en"] body.is-faq h3, html[lang="en"] body.is-faq h4,
html[lang="en"] body.is-faq p {
text-align: revert;
}
/* EXCEPTION 2: .maharishi-block — keep its original center alignment. */
html[lang="en"] .maharishi-block,
html[lang="en"] .maharishi-block *,
html[lang="en"] [class*="maharishi-"]:not(.maharishi-block *) {
text-align: revert;
}
/* Specific overrides — force-left the centered elements we mapped:
Homepage CLARITY/Selected Work/Camera/Final-CTA text; capability heroes; mantras. */
html[lang="en"] .r26-clarity,
html[lang="en"] .r26-clarity .big-statement,
html[lang="en"] .r26-clarity .os-category,
html[lang="en"] .r26-selected,
html[lang="en"] .r26-selected .r26-selected-h,
html[lang="en"] .r26-final-cta,
html[lang="en"] .r26-final-cta .r26-final-line {
text-align: left !important;
}
/* CTA buttons inside final-cta stay centered as user explicitly requested in R27. */
html[lang="en"] .r26-final-cta .hero-ctas { justify-content: center !important; text-align: left; }
/* Capability page heroes (PHOTO/RETOUCH/AI/CONTENT+ heroes) */
html[lang="en"] .page-hero,
html[lang="en"] .page-hero *,
html[lang="en"] .output-grid-section,
html[lang="en"] .output-grid-section *,
html[lang="en"] .sublines,
html[lang="en"] .sublines *,
html[lang="en"] .ai-interject2,
html[lang="en"] .ai-interject2 *,
html[lang="en"] .mantra-section,
html[lang="en"] .mantra-section *,
html[lang="en"] .foot-mani,
html[lang="en"] .grid-hint {
text-align: left !important;
}
/* Force the work hero text left (it is already left, but defensive) */
html[lang="en"] .work-hero,
html[lang="en"] .work-hero .work-h,
html[lang="en"] .work-hero .work-sub,
html[lang="en"] .work-hero .hero-eyebrow {
text-align: left !important;
}
/* ═══════════════════════════════════════════════════════════════
R29 — EN-only: halve post-CTA whitespace + vertically center CTAs
in the remaining hero bottom area. Also bump OS category font-size
to match the hero subhead ("Beautiful content. Built faster...").
═══════════════════════════════════════════════════════════════ */
/* 1) Hero bottom whitespace — halved (was ~390px → ~195px) and vertically center CTAs.
Space ABOVE CTAs (from subhead) = space BELOW CTAs (to frame). */
html[lang="en"] .r26-hero { padding-bottom: 0 !important; }
html[lang="en"] .r26-hero .hero-sub-v8 { margin-bottom: clamp(40px, 5vw, 72px) !important; }
html[lang="en"] .r26-hero .hero-ctas { margin-top: 0 !important; margin-bottom: 0 !important; }
html[lang="en"] .r26-hero-frame { margin-top: clamp(40px, 5vw, 72px) !important; }
/* 2) OS category font-size — match the hero subhead style (Instrument Serif italic, ~56px). */
html[lang="en"] .r26-clarity .os-category {
font-family: "Instrument Serif", Lora, ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(28px, 4vw, 56px) !important;
letter-spacing: 0 !important;
line-height: 1.15 !important;
text-transform: none !important;
}
@media (max-width: 720px) {
html[lang="en"] .r26-hero { padding-bottom: 0 !important; }
html[lang="en"] .r26-hero .hero-sub-v8 { margin-bottom: 28px !important; }
html[lang="en"] .r26-hero .hero-ctas { margin-bottom: 0 !important; }
html[lang="en"] .r26-hero-frame { margin-top: 28px !important; }
html[lang="en"] .r26-clarity .os-category { font-size: clamp(22px, 6vw, 36px) !important; }
}
/* ═══════════════════════════════════════════════════════════════
R30 — EN-only: reduce hero h1 by 1/3 (was 158.4px → ~105px).
2-line layout via
in i18n string + static HTML:
Line 1: CONTENT
Line 2: PRODUCTION, REIMAGINED.
No single-word orphans. Other 4 langs untouched.
═══════════════════════════════════════════════════════════════ */
/* Hero h1 fixed at 100px on desktop (EN only). Two-line natural wrap. */
html[lang="en"] .r26-hero .hero-h.hero-h-editorial,
html[lang="en"] .r26-hero h1.hero-h-editorial {
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
@media (max-width: 720px) {
html[lang="en"] .r26-hero .hero-h.hero-h-editorial,
html[lang="en"] .r26-hero h1.hero-h-editorial {
font-size: clamp(28px, 8vw, 44px) !important;
white-space: normal !important;
line-height: 1.0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
R31 — EN-only: CTA buttons +15%, all subpage headlines = 100px.
Other 4 langs (TR/ES/DE/RU) untouched.
═══════════════════════════════════════════════════════════════ */
/* ── CTA buttons +15% then -2% = ~+12.7% over base (font, padding, gap, arrow) ── */
html[lang="en"] .btn,
html[lang="en"] .btn-primary,
html[lang="en"] .btn-ghost,
html[lang="en"] .hero-ctas .btn,
html[lang="en"] .hero-ctas-editorial .btn {
font-size: 15.78px !important;
padding: 18.03px 27.05px !important;
line-height: 1.0 !important;
}
html[lang="en"] .btn span,
html[lang="en"] .btn .arrow,
html[lang="en"] .hero-ctas .btn span,
html[lang="en"] .hero-ctas-editorial .btn span {
font-size: 15.78px !important;
}
html[lang="en"] .hero-ctas,
html[lang="en"] .hero-ctas-editorial {
gap: 13.8px !important; /* base 12px * 1.15 */
}
/* ── Subpage headlines = 100px (EN only) ── */
html[lang="en"] .work-hero .work-h,
html[lang="en"] .work-hero h1.work-h,
html[lang="en"] .work-hero h1.hero-h-v7.hero-h-editorial.work-h,
html[lang="en"] .page-hero h1,
html[lang="en"] .page-hero .page-h,
html[lang="en"] .page-hero h1.page-h,
html[lang="en"] .page-hero h1.page-h.photo-h-editorial,
html[lang="en"] .page-hero h1.page-h.retouch-h-editorial,
html[lang="en"] .page-hero h1.page-h.ai-h-editorial,
html[lang="en"] main h1.start-h,
html[lang="en"] h1.start-h,
html[lang="en"] h1.faq-page-h,
html[lang="en"] main h1.faq-page-h,
html[lang="en"] .hero h1.hero-h {
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
max-width: 100% !important;
white-space: normal !important;
}
/* Mobile responsive caps */
@media (max-width: 720px) {
html[lang="en"] .work-hero .work-h,
html[lang="en"] .page-hero h1,
html[lang="en"] h1.start-h,
html[lang="en"] h1.faq-page-h,
html[lang="en"] .hero h1.hero-h {
font-size: clamp(36px, 9vw, 56px) !important;
}
html[lang="en"] .btn,
html[lang="en"] .btn-primary,
html[lang="en"] .btn-ghost {
font-size: 14.95px !important;
padding: 15px 22px !important;
}
html[lang="en"] .btn span,
html[lang="en"] .btn .arrow { font-size: 14.95px !important; }
}
/* ═══════════════════════════════════════════════════════════════
R32 — EN-only homepage: more breathing room ABOVE CTAs.
Subhead → CTAs gap increased (72px → 128px). Below CTAs untouched.
═══════════════════════════════════════════════════════════════ */
html[lang="en"] .r26-hero .hero-sub-v8 {
margin-bottom: clamp(72px, 9vw, 128px) !important;
}
@media (max-width: 720px) {
html[lang="en"] .r26-hero .hero-sub-v8 {
margin-bottom: 56px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
R33 — /content page (TASTE MEMORY™)
EN-only scope. Hero with subhead, then portfolio directly below
with category tabs and brand metadata captions.
Inherits work-h sizing (100px) from R31 subpage rule.
═══════════════════════════════════════════════════════════════ */
/* Hero ------------------------------------------------------------ */
html[lang="en"] .r33-content-hero {
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: clamp(24px, 3vw, 40px);
text-align: left;
}
html[lang="en"] .r33-content-h {
text-align: left !important;
letter-spacing: -0.04em;
line-height: 0.96;
margin: 0 0 28px 0;
}
html[lang="en"] .r33-tm-mark {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: 0.42em;
vertical-align: super;
line-height: 1;
margin-left: 0.06em;
color: var(--ink-2, #4a463f);
}
html[lang="en"] .r33-content-sub {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--ink-2, #4a463f);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.2;
max-width: 640px;
}
/* Category tabs --------------------------------------------------- */
html[lang="en"] .r33-portfolio-wrap {
padding-top: clamp(40px, 5vw, 72px) !important;
padding-bottom: clamp(96px, 10vw, 144px) !important;
}
html[lang="en"] .r33-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 32px 0;
padding: 0;
align-items: center;
justify-content: flex-start;
}
html[lang="en"] .r33-cat {
appearance: none;
background: transparent;
border: 1px solid rgba(28, 26, 22, 0.18);
color: var(--ink-2, #4a463f);
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 9px 16px;
border-radius: 999px;
cursor: pointer;
transition: background .18s, color .18s, border-color .18s;
}
html[lang="en"] .r33-cat:hover {
border-color: rgba(28, 26, 22, 0.45);
color: var(--ink, #1c1a16);
}
html[lang="en"] .r33-cat.is-active {
background: var(--ink, #1c1a16);
color: var(--paper, #F3EEE4);
border-color: var(--ink, #1c1a16);
}
/* Grid ------------------------------------------------------------ */
html[lang="en"] .r33-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 240px;
gap: 14px;
}
html[lang="en"] .r33-cell {
position: relative;
margin: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
html[lang="en"] .r33-cell.r33-1x1 { grid-column: span 2; grid-row: span 1; }
html[lang="en"] .r33-cell.r33-2x1 { grid-column: span 3; grid-row: span 1; }
html[lang="en"] .r33-cell.r33-3x1 { grid-column: span 6; grid-row: span 1; }
html[lang="en"] .r33-cell.r33-1x2 { grid-column: span 2; grid-row: span 2; }
html[lang="en"] .r33-thumb {
display: block;
flex: 1 1 auto;
overflow: hidden;
border-radius: 2px;
background: #e9e3d7;
position: relative;
}
html[lang="en"] .r33-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
filter: contrast(1.04) saturate(0.96);
}
html[lang="en"] .r33-thumb:hover img { transform: scale(1.02); }
html[lang="en"] .r33-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2, #4a463f);
align-items: baseline;
}
html[lang="en"] .r33-brand {
color: var(--ink, #1c1a16);
font-weight: 600;
}
html[lang="en"] .r33-season,
html[lang="en"] .r33-kind {
font-weight: 400;
}
html[lang="en"] .r33-sep {
opacity: 0.5;
}
html[lang="en"] .r33-cell.is-hidden { display: none; }
/* CTA section ----------------------------------------------------- */
html[lang="en"] .r33-content-cta {
padding-top: clamp(40px, 5vw, 72px) !important;
padding-bottom: clamp(96px, 10vw, 140px) !important;
text-align: left;
}
html[lang="en"] .r33-content-cta .hero-ctas {
justify-content: flex-start;
}
/* Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
html[lang="en"] .r33-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
html[lang="en"] .r33-cell.r33-1x1 { grid-column: span 2; }
html[lang="en"] .r33-cell.r33-2x1 { grid-column: span 4; }
html[lang="en"] .r33-cell.r33-3x1 { grid-column: span 4; }
html[lang="en"] .r33-cell.r33-1x2 { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 600px) {
html[lang="en"] .r33-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
gap: 10px;
}
html[lang="en"] .r33-cell,
html[lang="en"] .r33-cell.r33-1x1,
html[lang="en"] .r33-cell.r33-2x1,
html[lang="en"] .r33-cell.r33-3x1,
html[lang="en"] .r33-cell.r33-1x2 {
grid-column: span 2;
grid-row: span 1;
}
html[lang="en"] .r33-cat {
font-size: 11px;
padding: 8px 13px;
}
html[lang="en"] .r33-content-sub {
font-size: 19px;
}
html[lang="en"] .r33-meta {
font-size: 10px;
}
}
/* ═══════════════════════════════════════════════════════════════
R34 — /photo page editorial rebuild
EN-only. Hero = homepage parity (.r26-hero already applies R32
breathing). Service quadrant 2×2 magazine cells. Pricing first-
class. Block-level spacing increased between major blocks.
Left-aligned. Footer & homepage untouched.
═══════════════════════════════════════════════════════════════ */
/* Spacing between major blocks ----------------------------------- */
html[lang="en"] .r34-photo-hero {
padding-top: clamp(80px, 10vw, 140px) !important;
padding-bottom: clamp(40px, 5vw, 72px) !important;
text-align: left;
}
html[lang="en"] .r34-shelf {
margin-top: clamp(40px, 5vw, 72px) !important;
margin-bottom: clamp(120px, 14vw, 200px) !important;
text-align: left;
}
html[lang="en"] .r34-services {
margin-top: clamp(40px, 6vw, 96px) !important;
margin-bottom: clamp(120px, 14vw, 200px) !important;
text-align: left;
}
html[lang="en"] .r34-pricing {
margin-top: clamp(40px, 6vw, 96px) !important;
margin-bottom: clamp(96px, 12vw, 160px) !important;
text-align: left;
}
html[lang="en"] .r34-bottom-cta {
margin-top: clamp(40px, 6vw, 96px) !important;
margin-bottom: clamp(96px, 12vw, 160px) !important;
text-align: left;
}
html[lang="en"] .r34-bottom-cta .hero-ctas {
justify-content: flex-start;
}
/* Eyebrow (shared by services & pricing) ------------------------- */
html[lang="en"] .r34-eyebrow {
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2, #4a463f);
margin: 0 0 36px 0;
}
/* Service quadrant ----------------------------------------------- */
html[lang="en"] .r34-quad {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 2.4vw, 36px);
}
html[lang="en"] .r34-cell {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--ink, #1c1a16);
cursor: pointer;
transition: transform .3s ease;
}
html[lang="en"] .r34-cell-img {
display: block;
width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
background: #e9e3d7;
border-radius: 2px;
margin-bottom: 22px;
position: relative;
}
html[lang="en"] .r34-cell-img::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(28,26,22,0.06);
pointer-events: none;
border-radius: 2px;
}
html[lang="en"] .r34-cell-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease, filter .4s ease;
filter: contrast(1.04) saturate(0.96);
}
html[lang="en"] .r34-cell:hover .r34-cell-img img {
transform: scale(1.03);
filter: contrast(1.08) saturate(1.02);
}
html[lang="en"] .r34-cell-label {
display: block;
font-family: var(--f-display, 'Inter Tight', sans-serif);
font-weight: 600;
font-size: clamp(48px, 6.2vw, 88px);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--ink, #1c1a16);
margin: 0;
}
html[lang="en"] .r34-cell-cta {
display: inline-flex;
align-items: center;
margin-top: 14px;
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ink-2, #4a463f);
transition: color .2s, transform .3s ease;
}
html[lang="en"] .r34-cell:hover .r34-cell-cta {
color: var(--ink, #1c1a16);
transform: translateX(4px);
}
/* Pricing first-class ------------------------------------------- */
html[lang="en"] .r34-price-quad {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid rgba(28,26,22,0.18);
border-left: 1px solid rgba(28,26,22,0.18);
}
html[lang="en"] .r34-price-cell {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(36px, 4.2vw, 56px) clamp(28px, 3vw, 48px);
border-right: 1px solid rgba(28,26,22,0.18);
border-bottom: 1px solid rgba(28,26,22,0.18);
text-decoration: none;
color: var(--ink, #1c1a16);
min-height: clamp(200px, 22vw, 280px);
transition: background .25s ease;
position: relative;
}
html[lang="en"] .r34-price-cell:hover {
background: rgba(28,26,22,0.04);
}
html[lang="en"] .r34-price-cell::after {
content: 'Start →';
position: absolute;
top: clamp(24px, 3vw, 36px);
right: clamp(28px, 3vw, 48px);
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--ink-2, #4a463f);
opacity: 0;
transition: opacity .25s, transform .3s ease;
transform: translateX(-4px);
}
html[lang="en"] .r34-price-cell:hover::after {
opacity: 1;
transform: translateX(0);
}
html[lang="en"] .r34-price-name {
display: block;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink, #1c1a16);
margin: 0 0 18px 0;
}
html[lang="en"] .r34-price-num {
display: block;
font-family: var(--f-display, 'Inter Tight', sans-serif);
font-weight: 600;
font-size: clamp(56px, 6.8vw, 96px);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--ink, #1c1a16);
margin: 0 0 18px 0;
}
html[lang="en"] .r34-price-note {
display: block;
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--ink-2, #4a463f);
max-width: 38ch;
}
html[lang="en"] .r34-price-foot {
margin: 28px 0 0 0;
font-family: 'Inter Tight', sans-serif;
font-size: 13px;
color: var(--ink-2, #4a463f);
}
/* Responsive ----------------------------------------------------- */
@media (max-width: 900px) {
html[lang="en"] .r34-cell-label {
font-size: clamp(36px, 9vw, 56px);
}
}
@media (max-width: 640px) {
html[lang="en"] .r34-quad,
html[lang="en"] .r34-price-quad {
grid-template-columns: 1fr;
}
html[lang="en"] .r34-cell-img {
aspect-ratio: 3/4;
}
html[lang="en"] .r34-shelf,
html[lang="en"] .r34-services,
html[lang="en"] .r34-pricing,
html[lang="en"] .r34-bottom-cta {
margin-top: 56px !important;
margin-bottom: 80px !important;
}
html[lang="en"] .r34-price-num {
font-size: 56px;
}
}
/* ============================================================
R35 — /retouch editorial rebuild (EN only)
Hero parity (uses r26-hero rules) · 3 truth cards · 4×3 first-class grid
============================================================ */
/* Hero block spacing (mirrors R34 photo hero) ------------------ */
html[lang="en"] .r35-retouch-hero {
margin-top: clamp(40px, 6vw, 96px) !important;
margin-bottom: clamp(96px, 12vw, 160px) !important;
text-align: left;
}
html[lang="en"] .r35-retouch-hero .hero-ctas {
justify-content: flex-start;
}
/* Three truth cards (no eyebrow, per user override) ----------- */
html[lang="en"] .r35-truth {
margin-top: clamp(48px, 7vw, 112px) !important;
margin-bottom: clamp(96px, 12vw, 160px) !important;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 3.2vw, 56px);
text-align: left;
border-top: 1px solid rgba(28,26,22,0.18);
padding-top: clamp(48px, 6vw, 88px);
}
html[lang="en"] .r35-truth-card {
display: flex;
flex-direction: column;
}
html[lang="en"] .r35-truth-h {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink, #1c1a16);
margin: 0 0 20px 0;
line-height: 1.1;
}
html[lang="en"] .r35-truth-body {
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6;
color: var(--ink-2, #4a463f);
margin: 0 0 28px 0;
max-width: 38ch;
}
html[lang="en"] .r35-truth-spec {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid rgba(28,26,22,0.12);
}
html[lang="en"] .r35-truth-spec li {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2, #4a463f);
padding: 14px 0;
border-bottom: 1px solid rgba(28,26,22,0.12);
line-height: 1.4;
}
/* Pricing wrap ------------------------------------------------- */
html[lang="en"] .r35-pricing {
margin-top: clamp(48px, 7vw, 112px) !important;
margin-bottom: clamp(96px, 12vw, 160px) !important;
text-align: left;
}
/* Override inline .retouch-grid rules when wrapper is .r35-grid */
html[lang="en"] #retouch-grid.r35-grid,
html[lang="en"] .r35-grid {
padding: 0 !important;
max-width: none !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
border-top: 1px solid rgba(28,26,22,0.18);
border-left: 1px solid rgba(28,26,22,0.18);
}
/* Cell — first-class card */
html[lang="en"] .r35-grid .r-cell {
padding: clamp(28px, 2.6vw, 40px) clamp(22px, 2vw, 32px) !important;
border-right: 1px solid rgba(28,26,22,0.18);
border-bottom: 1px solid rgba(28,26,22,0.18);
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
align-items: flex-start !important;
min-height: clamp(220px, 22vw, 280px);
background: transparent;
transition: background .25s ease;
position: relative;
}
html[lang="en"] .r35-grid .r-cell:hover {
background: rgba(28,26,22,0.04);
}
html[lang="en"] .r35-grid .r-cell .r-ic {
flex: 0 0 auto;
width: 36px;
height: 36px;
margin: 0 0 6px 0;
opacity: 0.85;
}
html[lang="en"] .r35-grid .r-cell .r-ic img {
width: 36px;
height: 36px;
}
html[lang="en"] .r35-grid .r-cell .r-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
html[lang="en"] .r35-grid .r-cell .rk {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink, #1c1a16);
margin: 0 0 10px 0 !important;
line-height: 1.25;
}
html[lang="en"] .r35-grid .r-cell .rp {
font-family: var(--f-display, 'Inter Tight', sans-serif);
font-weight: 600;
font-size: clamp(36px, 3.6vw, 52px) !important;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ink, #1c1a16);
margin: 0 0 14px 0 !important;
}
html[lang="en"] .r35-grid .r-cell .rn {
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
font-size: 13px !important;
line-height: 1.5;
color: var(--ink-2, #4a463f);
margin: 0 !important;
max-width: 32ch;
}
/* Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
html[lang="en"] #retouch-grid.r35-grid,
html[lang="en"] .r35-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 900px) {
html[lang="en"] .r35-truth {
grid-template-columns: 1fr;
gap: 40px;
}
html[lang="en"] #retouch-grid.r35-grid,
html[lang="en"] .r35-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
html[lang="en"] #retouch-grid.r35-grid,
html[lang="en"] .r35-grid {
grid-template-columns: 1fr !important;
}
html[lang="en"] .r35-grid .r-cell {
min-height: auto;
}
html[lang="en"] .r35-retouch-hero,
html[lang="en"] .r35-truth,
html[lang="en"] .r35-pricing {
margin-top: 56px !important;
margin-bottom: 80px !important;
}
html[lang="en"] .r35-grid .r-cell .rp {
font-size: 44px !important;
}
}
/* ============================================================
R38 — /ai page editorial rebuild
Hero parity / 7-stage bar / OS tag / Maharishi reorder / Decision tree
============================================================ */
/* Hero — matches homepage r26-hero spacing */
html[lang="en"] .r38-ai-hero {
padding-top: clamp(80px, 9vw, 140px) !important;
padding-bottom: clamp(40px, 5vw, 80px) !important;
text-align: left !important;
}
html[lang="en"] .r38-ai-eyebrow {
font-family: var(--f-mono) !important;
font-size: clamp(11px, 1vw, 13px) !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-2) !important;
margin: 0 0 clamp(20px, 2vw, 28px) 0 !important;
text-align: left !important;
}
html[lang="en"] .r38-ai-eyebrow .tm {
font-size: 0.7em;
vertical-align: super;
margin-left: 2px;
letter-spacing: 0;
}
html[lang="en"] .r38-ai-h {
font-family: var(--f-display) !important;
font-weight: 800 !important;
font-size: clamp(44px, 7vw, 100px) !important;
line-height: 0.98 !important;
letter-spacing: -0.025em !important;
margin: 0 0 clamp(32px, 4vw, 56px) 0 !important;
color: var(--ink) !important;
max-width: 22ch !important;
text-align: left !important;
white-space: normal !important;
}
html[lang="en"] .r38-ai-sub {
font-family: var(--f-serif) !important;
font-style: italic !important;
font-size: clamp(18px, 1.7vw, 24px) !important;
line-height: 1.45 !important;
color: var(--ink-2) !important;
max-width: 56ch !important;
margin: 0 0 clamp(40px, 5vw, 64px) 0 !important;
text-align: left !important;
}
html[lang="en"] .r38-ai-hero .hero-ctas-editorial {
justify-content: flex-start !important;
margin-top: 0 !important;
}
/* Seven-stage bar — centered, evenly spaced */
html[lang="en"] .r38-stages {
padding: clamp(40px, 5vw, 80px) 32px clamp(48px, 6vw, 88px) !important;
display: flex;
justify-content: center;
}
html[lang="en"] .r38-stage-bar {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: clamp(8px, 1.2vw, 18px);
align-items: stretch;
width: 100%;
max-width: 1100px;
}
html[lang="en"] .r38-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: clamp(14px, 1.4vw, 20px) clamp(6px, 0.8vw, 10px);
border: 1px solid var(--hair);
border-radius: 14px;
background: rgba(255,255,255,0.5);
text-align: center;
min-height: 78px;
}
html[lang="en"] .r38-stage-n {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--ink-3);
}
html[lang="en"] .r38-stage-t {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(10px, 1vw, 12.5px);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.2;
}
@media (max-width: 900px) {
html[lang="en"] .r38-stage-bar {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
html[lang="en"] .r38-stage-bar {
grid-template-columns: 1fr;
}
}
/* Production OS tagline */
html[lang="en"] .r38-os-tag {
padding: clamp(40px, 5vw, 80px) 32px clamp(32px, 4vw, 64px) !important;
text-align: left !important;
}
html[lang="en"] .r38-os-tag-h {
font-family: var(--f-display) !important;
font-weight: 800 !important;
font-size: clamp(28px, 4.4vw, 56px) !important;
line-height: 1.05 !important;
letter-spacing: -0.01em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
margin: 0 !important;
max-width: 28ch !important;
}
html[lang="en"] .r38-os-tag-h .tm {
font-size: 0.5em;
vertical-align: super;
letter-spacing: 0;
}
/* Maharishi reordered intro — cat first, MAHARISHI™ headline, single tagline */
html[lang="en"] .r38-maharishi {
padding-top: clamp(64px, 7vw, 112px) !important;
padding-bottom: clamp(48px, 5vw, 80px) !important;
}
html[lang="en"] .r38-mh-intro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(20px, 2.4vw, 32px);
margin-bottom: clamp(48px, 5vw, 80px);
}
html[lang="en"] .r38-mh-logo {
width: clamp(160px, 22vw, 280px) !important;
height: auto !important;
display: block;
margin: 0 auto;
}
html[lang="en"] .r38-mh-headline {
font-family: var(--f-display) !important;
font-weight: 800 !important;
font-size: clamp(36px, 5.5vw, 72px) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
line-height: 1 !important;
color: var(--ink) !important;
margin: 0 !important;
}
html[lang="en"] .r38-mh-headline .tm {
font-size: 0.45em;
vertical-align: super;
letter-spacing: 0;
}
html[lang="en"] .r38-mh-line {
font-family: var(--f-serif) !important;
font-style: italic !important;
font-size: clamp(18px, 1.8vw, 26px) !important;
line-height: 1.4 !important;
color: var(--ink-2) !important;
margin: 0 !important;
max-width: 32ch !important;
}
/* Five-stage decision tree — halved padding, no rule lines */
html[lang="en"] .r38-tree {
padding-top: clamp(24px, 2.5vw, 40px) !important; /* halved from original ~80 */
padding-bottom: clamp(24px, 2.5vw, 40px) !important;
border-top: 0 !important; /* no thin rule line */
border-bottom: 0 !important;
}
html[lang="en"] .r38-tree-row {
list-style: none;
margin: 0 0 clamp(20px, 2.4vw, 32px) 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(8px, 1vw, 16px);
}
html[lang="en"] .r38-tree-step {
border: 1px solid var(--hair);
border-radius: 14px;
background: rgba(255,255,255,0.55);
padding: clamp(16px, 1.6vw, 24px);
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
html[lang="en"] .r38-tree-h {
font-family: var(--f-display) !important;
font-weight: 800 !important;
font-size: clamp(13px, 1.2vw, 16px) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
html[lang="en"] .r38-tree-h .tm {
font-size: 0.7em;
vertical-align: super;
letter-spacing: 0;
}
html[lang="en"] .r38-tree-d {
font-family: var(--f-body) !important;
font-size: clamp(12.5px, 1vw, 14px) !important;
line-height: 1.55 !important;
color: var(--ink-2) !important;
margin: 0 !important;
}
html[lang="en"] .r38-tree-s {
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
margin: auto 0 0 0 !important;
}
html[lang="en"] .r38-tree-foot {
text-align: center;
font-family: var(--f-mono) !important;
font-size: clamp(11px, 1vw, 13px) !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-2) !important;
margin: 0 !important;
}
@media (max-width: 1024px) {
html[lang="en"] .r38-tree-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
html[lang="en"] .r38-tree-row { grid-template-columns: 1fr; }
}
/* Truth defs — restore left alignment on R38 */
html[lang="en"] .r38-truth { padding: clamp(40px, 5vw, 80px) 32px !important; }
/* ============================================================
R39 — /ai page refinement
- Hero eyebrow removed (handled in HTML)
- Maharishi intro (cat + MAHARISHI™ + tagline) lifted into LEFT column,
aligned top/bottom with the right questions panel
- Tree foot caption centered + 2x font size
============================================================ */
/* Cancel R38 centered standalone intro layout */
html[lang="en"] .r39-maharishi .r38-mh-intro { display: none !important; }
/* Grid: left and right columns share row alignment */
html[lang="en"] .r39-mh-grid {
align-items: stretch !important;
}
html[lang="en"] .r39-mh-grid > .r39-mh-copy {
display: flex !important;
flex-direction: column !important;
gap: clamp(24px, 2.4vw, 36px) !important;
padding-top: 0 !important;
}
html[lang="en"] .r39-mh-grid > .mb-panel {
align-self: stretch !important;
}
/* Intro inside the copy column — left-aligned stack */
html[lang="en"] .r39-mh-intro {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: clamp(14px, 1.6vw, 22px) !important;
margin: 0 !important;
}
html[lang="en"] .r39-mh-logo {
width: clamp(120px, 16vw, 200px) !important;
height: auto !important;
margin: 0 !important;
display: block !important;
}
html[lang="en"] .r39-mh-headline {
font-family: var(--f-display) !important;
font-weight: 800 !important;
font-size: clamp(32px, 4.8vw, 60px) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
line-height: 1 !important;
color: var(--ink) !important;
margin: 0 !important;
text-align: left !important;
}
html[lang="en"] .r39-mh-headline .tm {
font-size: 0.45em;
vertical-align: super;
letter-spacing: 0;
}
html[lang="en"] .r39-mh-line {
font-family: var(--f-serif) !important;
font-style: italic !important;
font-size: clamp(16px, 1.6vw, 22px) !important;
line-height: 1.4 !important;
color: var(--ink-2) !important;
margin: 0 !important;
text-align: left !important;
max-width: 36ch !important;
}
/* Tree foot — 2x font, centered to the diagram width */
html[lang="en"] .r38-tree-foot {
text-align: center !important;
font-size: clamp(22px, 2vw, 26px) !important;
letter-spacing: 0.22em !important;
margin: clamp(12px, 1.4vw, 20px) auto 0 !important;
width: 100% !important;
}
/* ============================================================
R40 — Hierarchy, pacing & hairline cleanup (EN-only)
============================================================ */
/* ---------- 1. ORPHAN FIX —
rendering rules ---------- */
/* Allow controlled line breaks; never let max-width crush a single line */
html[lang="en"] .r38-ai-h br,
html[lang="en"] .r38-os-tag-h br,
html[lang="en"] .os-category br {
display: inline; /* honored as line break */
}
/* OS tag: remove forced narrow max-width (was 28ch) so
is the only break source */
html[lang="en"] .r38-os-tag-h {
max-width: 100% !important;
font-size: clamp(28px, 4.4vw, 56px) !important;
line-height: 1.06 !important;
}
/* Hero H1: keep peak 100px display hierarchy; 3 controlled lines via
*/
html[lang="en"] .r38-ai-h {
max-width: 100% !important;
line-height: 0.98 !important;
}
/* Home os-category: ensure
renders cleanly, no wrap orphans */
html[lang="en"] .r26-clarity .os-category {
max-width: 100% !important;
white-space: normal !important;
}
/* ---------- 2. /ai P-SIZE NORMALIZATION (Font Rulebook) ----------
4 support tiers only:
T1 hero-sub = serif italic clamp(20px,2vw,28px)
T2 body lead = Inter Tight 17-18px
T3 body = Inter Tight 14-15px
T4 eyebrow = JetBrains Mono 11px
*/
html[lang="en"] .r38-ai-sub {
font-size: clamp(20px, 2vw, 28px) !important;
line-height: 1.45 !important;
}
html[lang="en"] .r38-maharishi .mb-architecture {
font-family: var(--f-body) !important;
font-size: clamp(16px, 1.4vw, 18px) !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
}
html[lang="en"] .r38-maharishi .r9-mb-taste-paragraph {
font-family: var(--f-body) !important;
font-size: clamp(14px, 1.1vw, 15px) !important;
line-height: 1.6 !important;
}
html[lang="en"] .r39-mh-line {
font-size: clamp(17px, 1.5vw, 20px) !important;
}
html[lang="en"] .r38-tree-d {
font-size: clamp(13px, 1vw, 14.5px) !important;
}
/* ---------- 3. EYEBROW RULE — single global token ---------- */
html[lang="en"] .eyebrow,
html[lang="en"] .hero-eyebrow,
html[lang="en"] .mb-eyebrow,
html[lang="en"] .r38-stage-n,
html[lang="en"] .r38-tree-s,
html[lang="en"] .r10-foot-brand,
html[lang="en"] .r10-foot-tag,
html[lang="en"] .r10-foot-copy {
font-family: 'JetBrains Mono', monospace !important;
}
html[lang="en"] .eyebrow,
html[lang="en"] .hero-eyebrow,
html[lang="en"] .mb-eyebrow {
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ink-2) !important;
}
/* ---------- 4. H3 FAMILY UNIFICATION → Manrope ---------- */
html[lang="en"] .v3-truth-definitions article h3,
html[lang="en"] .ai-truth-defs-r16 article h3,
html[lang="en"] .photo-grid h3,
html[lang="en"] .photo-cell h3,
html[lang="en"] .r35-grid h3 {
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* ---------- 5. PACING — major-block breathing ---------- */
/* Homepage: caps-row breathing */
html[lang="en"] .r26-caps {
padding-top: clamp(80px, 9vw, 160px) !important;
padding-bottom: clamp(80px, 9vw, 160px) !important;
}
/* Homepage: WHAT YOU SEE block breathing */
html[lang="en"] .r26-selected {
padding-top: clamp(72px, 8vw, 140px) !important;
padding-bottom: clamp(40px, 5vw, 80px) !important;
}
html[lang="en"] .r26-selected .r26-selected-h {
margin-bottom: clamp(40px, 5vw, 72px) !important;
}
/* Homepage: CLARITY block breathing */
html[lang="en"] .r26-clarity {
padding-top: clamp(72px, 8vw, 140px) !important;
padding-bottom: clamp(72px, 8vw, 140px) !important;
}
html[lang="en"] .r26-clarity .os-category {
margin-top: clamp(32px, 4vw, 56px) !important;
}
/* All pages: footer breathing room (lock-safe — footer markup untouched) */
html[lang="en"] .foot.foot-v7 {
margin-top: clamp(96px, 11vw, 200px) !important;
}
/* /ai pacing fine-tune */
html[lang="en"] .r38-stages {
padding-top: clamp(56px, 6vw, 96px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
}
html[lang="en"] .r38-os-tag {
padding-top: clamp(56px, 6vw, 96px) !important;
padding-bottom: clamp(40px, 5vw, 72px) !important;
}
html[lang="en"] .r38-truth {
padding-top: clamp(40px, 5vw, 80px) !important;
padding-bottom: clamp(80px, 9vw, 140px) !important;
}
html[lang="en"] .r38-tree {
padding-top: clamp(32px, 3.5vw, 56px) !important;
padding-bottom: clamp(80px, 9vw, 140px) !important;
}
html[lang="en"] .r38-tree-foot {
margin-top: clamp(24px, 2.5vw, 36px) !important;
margin-bottom: clamp(56px, 6vw, 96px) !important;
}
html[lang="en"] .ai-portfolio-merged-r16 {
margin-top: clamp(40px, 5vw, 80px) !important;
}
/* CTA gap from support tagline (homepage hero already handled via r26-hero; this targets subpage subs) */
html[lang="en"] .page-hero .ai-outcomes-line {
margin-bottom: clamp(40px, 5vw, 64px) !important;
}
/* ---------- 6. HAIRLINE REMOVALS (/photo & /retouch deliverable hairlines) ---------- */
html[lang="en"] .deliverables-row,
html[lang="en"] .deliverable-row,
html[lang="en"] .photo-deliverables,
html[lang="en"] .retouch-deliverables {
border-top: 0 !important;
}
html[lang="en"] .photo-services .photo-cell,
html[lang="en"] .photo-cell {
border-top: 0 !important;
}
/* Retouch r35-truth hairline removal (correct class) */
html[lang="en"] .r35-truth,
html[lang="en"] .r35-truth-card,
html[lang="en"] .r35-truth-row,
html[lang="en"] .retouch-truth,
html[lang="en"] .retouch-truth-row {
border-top: 0 !important;
}
/* /ai truth-defs hairline removal */
html[lang="en"] .r38-truth,
html[lang="en"] .ai-truth-defs-r16,
html[lang="en"] .v3-truth-definitions {
border-top: 0 !important;
}
/* ============================================================
R41 — /ai page micro-adjustments
1. Stage bar: 2x font on numbers + labels
2. OS tagline: align to hero margin (48px horizontal, matches .hero-editorial)
3. Tree-foot → portfolio gap: halve
============================================================ */
/* 1. Seven-stage bar — 2x font size for both number and label */
html[lang="en"] .r38-stage-n {
font-size: 21px !important; /* was 10.5px */
}
html[lang="en"] .r38-stage-t {
font-size: clamp(20px, 2vw, 25px) !important; /* was clamp(10, 1vw, 12.5) */
line-height: 1.15 !important;
}
html[lang="en"] .r38-stage {
min-height: 120px !important;
padding: clamp(20px, 2vw, 28px) clamp(10px, 1.2vw, 16px) !important;
}
/* 2. OS tagline — align to hero horizontal margin (48 / 32 / 20 across breakpoints) */
html[lang="en"] .r38-os-tag {
padding-left: 48px !important;
padding-right: 48px !important;
text-align: left !important;
}
@media (max-width: 1100px) {
html[lang="en"] .r38-os-tag {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (max-width: 720px) {
html[lang="en"] .r38-os-tag {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
html[lang="en"] .r38-os-tag-h {
text-align: left !important;
margin-left: 0 !important;
}
/* 3. Tree-foot → portfolio gap: halve */
/* Reduce r38-tree bottom padding AND ai-portfolio-merged-r16 top margin */
html[lang="en"] .r38-tree {
padding-bottom: clamp(12px, 1.2vw, 20px) !important; /* was 24-40 */
}
html[lang="en"] .ai-portfolio-merged-r16 {
margin-top: 24px !important; /* was 48px */
}
/* ============================================================
R42 — Homepage micro-adjustments
1. WHAT YOU SEE → photo gap: 1/4 of previous (40-72 → 10-18px)
2. THE CAMERA cp-h: match H1 hero font size
3. Homepage H1 top margin: +25% (140 → 175 / 130 → 163 / 110 → 138)
============================================================ */
/* 1. WHAT YOU SEE IS WHAT YOU MEANT — tighten gap to photo grid (homepage only) */
html[lang="en"] body:not(.subpage) .r26-selected .r26-selected-h {
margin-bottom: clamp(10px, 1.25vw, 18px) !important;
}
/* 2. THE CAMERA IS NOW A DATA-CAPTURE DEVICE — match H1 hero font size (R31 100px peak) */
html[lang="en"] body:not(.subpage) .r26-camera .cp-h {
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
letter-spacing: -0.045em !important;
font-weight: 700 !important;
}
@media (max-width: 720px) {
html[lang="en"] body:not(.subpage) .r26-camera .cp-h {
font-size: clamp(28px, 8vw, 44px) !important;
line-height: 1.0 !important;
}
}
/* 3. Homepage H1 top margin — +25% breathing room above hero */
html[lang="en"] body:not(.subpage) .hero.hero-editorial,
html[lang="en"] body:not(.subpage) .hero-editorial {
padding-top: 175px !important;
}
@media(max-width:1100px){
html[lang="en"] body:not(.subpage) .hero.hero-editorial,
html[lang="en"] body:not(.subpage) .hero-editorial {
padding-top: 163px !important;
}
}
@media(max-width:720px){
html[lang="en"] body:not(.subpage) .hero.hero-editorial,
html[lang="en"] body:not(.subpage) .hero-editorial {
padding-top: 138px !important;
}
}
/* ============================================================
R43 — Homepage type harmony + FAQ centered
1. CLARITY IN. BEAUTIFUL OUT. → match H1 size
2. (THE CAMERA already at H1 size from R42 — no change)
3. FAQ: question + answer centered in each box
============================================================ */
/* 1. CLARITY IN. BEAUTIFUL OUT. — match H1 hero font size (R31 sets H1 at clamp(56,6.95vw,100) peak) */
html[lang="en"] body:not(.subpage) .r26-clarity .big-statement {
white-space: normal !important;
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
letter-spacing: -0.045em !important;
font-weight: 700 !important;
}
@media (max-width: 720px) {
html[lang="en"] body:not(.subpage) .r26-clarity .big-statement {
font-size: clamp(28px, 8vw, 44px) !important;
line-height: 1.0 !important;
}
}
/* FAQ — center question and answer in each item (image.jpg reference) */
.faq-item summary {
text-align: center !important;
}
.faq-item summary > span:not(.ind) {
display: block;
text-align: center;
grid-column: 1 / -1;
}
/* Restore + indicator on right via absolute positioning */
.faq-item {
position: relative;
}
.faq-item summary {
grid-template-columns: 1fr !important;
padding-right: 56px;
}
.faq-item summary .ind {
position: absolute;
right: 0;
top: 28px;
}
.faq-item[open] summary .ind {
top: 28px;
}
.faq-item .ans {
text-align: center !important;
max-width: 60ch !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ============================================================
R44 — Font Rulebook v1.0 enforcement + H1 unification (EN only)
- All H1s match homepage: 100px / 700 / lh 0.95 / ls -0.045em
- Forbidden fonts (Helvetica primary, 'Inter' non-Tight) removed
- Allowed families: Manrope, Instrument Serif italic, Inter Tight, JetBrains Mono
============================================================ */
/* 1. /photo /retouch /ai — H1 anchored to homepage spec */
html[lang="en"] body.subpage .page-hero h1.page-h,
html[lang="en"] body.subpage .page-hero h1.page-h.photo-h-editorial,
html[lang="en"] body.subpage .page-hero h1.page-h.retouch-h-editorial,
html[lang="en"] body.subpage .page-hero h1.page-h.ai-h-editorial {
font-family: "Manrope", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
letter-spacing: -0.045em !important;
text-transform: uppercase !important;
}
/* 2. /photo /retouch /ai — page-hero top padding aligned to homepage (175px) */
html[lang="en"] body.subpage .page-hero {
padding-top: 175px !important;
}
@media (max-width: 1100px) {
html[lang="en"] body.subpage .page-hero {
padding-top: 163px !important;
}
}
@media (max-width: 720px) {
html[lang="en"] body.subpage .page-hero {
padding-top: 138px !important;
}
}
/* 3. /faq — H1 anchored to homepage spec */
html[lang="en"] h1.faq-page-h,
html[lang="en"] main h1.faq-page-h {
font-family: "Manrope", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
letter-spacing: -0.045em !important;
text-transform: uppercase !important;
}
/* 4. /privacy /terms — legal H1 stays Manrope; rulebook-compliant ls/lh */
html[lang="en"] body.subpage .lh h1 {
font-family: "Manrope", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 600 !important;
letter-spacing: -0.04em !important;
line-height: 1.0 !important;
}
html[lang="en"] body.subpage .lh h1 em {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
}
/* 5. /start — keep Tier 3 editorial italic (rulebook: emotion = serif italic);
nudge ls to -0.012em for rulebook Tier 3 compliance (-0.01em ± rounding) */
html[lang="en"] body.subpage h1.start-h {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, "Times New Roman", serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 1.0 !important;
letter-spacing: -0.012em !important;
text-transform: none !important;
}
/* 6. Global Helvetica purge — ensure no legacy Helvetica primary leaks through */
html[lang="en"] body.subpage h1,
html[lang="en"] body.subpage h2,
html[lang="en"] body.subpage h3 {
font-family: "Manrope", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
}
html[lang="en"] body.subpage h1 em,
html[lang="en"] body.subpage h2 em,
html[lang="en"] body.subpage h3 em {
font-family: "Instrument Serif", "Lora", ui-serif, Georgia, serif;
font-style: italic;
font-weight: 400;
}
/* ============================================================
R44b — actual subpage hero pattern (.hero.hero-editorial) + .r38-ai-h
The audit-discovered reality: /photo /retouch /ai use the homepage hero
shell .hero.hero-editorial, not .page-hero. Override here.
============================================================ */
/* 1. Subpage .hero.hero-editorial top padding = 175 (same as homepage) */
html[lang="en"] body.subpage .hero.hero-editorial,
html[lang="en"] body.subpage .hero-editorial {
padding-top: 175px !important;
}
@media (max-width: 1100px) {
html[lang="en"] body.subpage .hero.hero-editorial,
html[lang="en"] body.subpage .hero-editorial {
padding-top: 163px !important;
}
}
@media (max-width: 720px) {
html[lang="en"] body.subpage .hero.hero-editorial,
html[lang="en"] body.subpage .hero-editorial {
padding-top: 138px !important;
}
}
/* 2. /ai .r38-ai-h — rulebook compliant: weight 700, ls -0.045em (= -4.5px @100px) */
html[lang="en"] body.subpage .r38-ai-h,
html[lang="en"] body.subpage h1.r38-ai-h,
html[lang="en"] .r38-ai-h {
font-family: "Manrope", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
letter-spacing: -0.045em !important;
}
/* 3. /photo /retouch — hero-h-editorial sized like homepage */
html[lang="en"] body.subpage .hero-h.hero-h-editorial,
html[lang="en"] body.subpage h1.hero-h-editorial {
font-family: "Manrope", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(56px, 6.95vw, 100px) !important;
line-height: 0.95 !important;
letter-spacing: -0.045em !important;
}
/* ============================================================
R44c — References marquee (homepage only, EN)
Two-row stock-ticker, top→right, bottom→left, always-flowing,
full-bleed, body-tier typography per Font Rulebook v1.0.
============================================================ */
html[lang="en"] body:not(.subpage) .refs-marquee {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: clamp(48px, 5vw, 80px);
margin-bottom: clamp(40px, 4vw, 56px);
padding: 0;
overflow: hidden;
border-top: 1px solid rgba(26,26,26,0.10);
border-bottom: 1px solid rgba(26,26,26,0.10);
background: transparent;
}
html[lang="en"] body:not(.subpage) .refs-row {
width: 100%;
overflow: hidden;
position: relative;
padding: 18px 0;
}
html[lang="en"] body:not(.subpage) .refs-row + .refs-row {
border-top: 1px solid rgba(26,26,26,0.10);
}
html[lang="en"] body:not(.subpage) .refs-track {
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-wrap: nowrap;
will-change: transform;
}
/* Top row → flows right (visually: content moves right; CSS animates X from -50% to 0) */
html[lang="en"] body:not(.subpage) .refs-track-right {
animation: refsScrollRight 220s linear infinite;
}
/* Bottom row → flows left (X from 0 to -50%) */
html[lang="en"] body:not(.subpage) .refs-track-left {
animation: refsScrollLeft 220s linear infinite;
}
@keyframes refsScrollRight {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes refsScrollLeft {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
html[lang="en"] body:not(.subpage) .refs-item {
font-family: "Inter Tight", "Manrope", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.5;
letter-spacing: 0;
color: var(--ink, #1A1A1A);
padding: 0 14px;
display: inline-block;
}
html[lang="en"] body:not(.subpage) .refs-dot {
font-family: "Inter Tight", "Manrope", ui-sans-serif, sans-serif;
font-size: clamp(15px, 1.15vw, 18px);
color: #8B8580;
display: inline-block;
}
/* Pause on hover (rulebook spirit: human-readable, not a pure background animation) */
html[lang="en"] body:not(.subpage) .refs-track:hover {
animation-play-state: paused;
}
/* Mobile — slightly faster cadence so it doesn't appear frozen on narrow viewports */
@media (max-width: 720px) {
html[lang="en"] body:not(.subpage) .refs-marquee {
margin-top: clamp(32px, 8vw, 48px);
}
html[lang="en"] body:not(.subpage) .refs-row {
padding: 14px 0;
}
html[lang="en"] body:not(.subpage) .refs-track-right,
html[lang="en"] body:not(.subpage) .refs-track-left {
animation-duration: 160s;
}
}
/* Honor users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
html[lang="en"] body:not(.subpage) .refs-track-right,
html[lang="en"] body:not(.subpage) .refs-track-left {
animation: none;
}
}
/* ============================================================
R45 — /ai page : workflow cards + headline align + Maharishi combined box
Rulebook compliant (Manrope/Instrument Serif/Inter Tight/JetBrains Mono only)
EN scope only.
============================================================ */
/* ---------- 1. Workflow 7-stage cards — page-centered + uniform size ---------- */
html[lang="en"] section.r38-stages {
display: flex !important;
justify-content: center !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
html[lang="en"] .r38-stage-bar {
grid-template-columns: repeat(7, minmax(120px, 1fr)) !important;
max-width: 1200px !important;
margin: 0 auto !important;
justify-content: center !important;
align-items: stretch !important;
gap: 12px !important;
}
html[lang="en"] .r38-stage {
min-height: 110px !important;
padding: 22px 12px !important;
justify-content: center !important;
gap: 12px !important;
border-radius: 18px !important;
background: rgba(255,255,255,0.55) !important;
}
html[lang="en"] .r38-stage-n {
font-size: 11px !important;
letter-spacing: 0.2em !important;
}
html[lang="en"] .r38-stage-t {
font-size: clamp(11px, 0.95vw, 13px) !important;
letter-spacing: 0.08em !important;
}
@media (max-width: 900px) {
html[lang="en"] .r38-stage-bar {
grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
max-width: 560px !important;
}
html[lang="en"] .r38-stage { min-height: 96px !important; }
}
@media (max-width: 480px) {
html[lang="en"] .r38-stage-bar {
grid-template-columns: 1fr !important;
max-width: 360px !important;
}
}
/* ---------- 2. Headline "TRAINED ON YOUR TASTE..." — left-align to homepage margin ---------- */
html[lang="en"] .r38-os-tag {
max-width: 1440px !important;
margin: 0 auto !important;
padding-left: 48px !important;
padding-right: 48px !important;
text-align: left !important;
}
html[lang="en"] .r38-os-tag-h {
text-align: left !important;
margin-left: 0 !important;
font-weight: 700 !important; /* rulebook: Manrope max 700 */
}
@media (max-width: 1100px) {
html[lang="en"] .r38-os-tag {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (max-width: 720px) {
html[lang="en"] .r38-os-tag {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* ---------- 3. Maharishi block — single combined liquid-glass box ---------- */
/* Remove section default padding/border so combined box owns the framing; reserve top room for dangling cat */
html[lang="en"] section.r39-maharishi {
padding-top: clamp(180px, 16vw, 220px) !important;
padding-left: 48px !important;
padding-right: 48px !important;
max-width: 1440px !important;
margin: 0 auto !important;
}
@media (max-width: 1100px) {
html[lang="en"] section.r39-maharishi {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (max-width: 720px) {
html[lang="en"] section.r39-maharishi {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* Combined outer box: holds both columns inside */
html[lang="en"] .r39-maharishi .r39-mh-grid {
position: relative !important;
background: rgba(255,255,255,0.55) !important;
border: 1px solid var(--hair-strong, rgba(26,26,26,0.18)) !important;
border-radius: 32px !important;
padding: clamp(48px, 5vw, 80px) clamp(36px, 4vw, 64px) clamp(40px, 4vw, 64px) clamp(36px, 4vw, 64px) !important;
overflow: visible !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -30px rgba(26,26,26,0.15);
gap: clamp(40px, 4vw, 72px) !important;
align-items: stretch !important;
}
/* Cat logo: cropped PNG. Body underline sits flush on box top edge (paw dangles into the box top-left corner region).
Body bottom is ~19% above paw bottom in the source — negative margin-bottom drops the whole logo down so body underline = box top.
Paw aligned to box left interior (left:14px) and -2deg CCW tilt so paw curves toward the corner. */
html[lang="en"] .r39-maharishi .r39-mh-logo {
position: absolute !important;
bottom: 100% !important;
top: auto !important;
left: 9px !important;
width: clamp(260px, 30vw, 370px) !important;
height: auto !important;
z-index: 5 !important;
/* push logo down so body underline kisses box top edge */
margin: 0 0 -41px 0 !important;
display: block !important;
pointer-events: none;
transform: rotate(-2deg) !important;
transform-origin: 0% 100% !important;
}
/* Right panel: strip its own frame so it lives inside the combined box */
html[lang="en"] .r39-maharishi .mb-panel {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 100% !important;
}
/* Remove the "● MAHARISHI" panel header per R45 */
html[lang="en"] .r39-maharishi .mb-panel-head {
display: none !important;
}
/* Left column: distribute content top-to-bottom to match right column height */
html[lang="en"] .r39-maharishi .r39-mh-copy {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: clamp(24px, 2.4vw, 36px) !important;
min-height: 100% !important;
}
/* Enlarge left text to match right column footprint (preserve hierarchy) */
html[lang="en"] .r39-maharishi .r39-mh-headline {
font-size: clamp(44px, 6.4vw, 88px) !important;
font-weight: 700 !important; /* rulebook compliance */
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
line-height: 0.95 !important;
}
html[lang="en"] .r39-maharishi .r39-mh-line {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-size: clamp(20px, 2.2vw, 30px) !important;
line-height: 1.3 !important;
max-width: 30ch !important;
}
html[lang="en"] .r39-maharishi .mb-architecture {
font-family: "Inter Tight", "Manrope", system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: clamp(17px, 1.5vw, 22px) !important;
line-height: 1.45 !important;
color: var(--ink) !important;
margin: 0 !important;
}
html[lang="en"] .r39-maharishi .r9-mb-taste-paragraph {
font-family: "Inter Tight", "Manrope", system-ui, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(15px, 1.2vw, 18px) !important;
line-height: 1.5 !important;
color: var(--ink-2) !important;
max-width: 46ch !important;
margin: 0 !important;
}
/* Right column questions: rulebook fonts (Instrument Serif italic for editorial questions) */
html[lang="en"] .r39-maharishi .mb-questions {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
html[lang="en"] .r39-maharishi .mb-questions li {
font-family: "Instrument Serif", ui-serif, Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(20px, 1.7vw, 28px) !important;
line-height: 1.25 !important;
color: var(--ink) !important;
padding: clamp(12px, 1.2vw, 18px) 0 !important;
border-bottom: 1px solid var(--hair, rgba(26,26,26,0.10)) !important;
margin: 0 !important;
}
html[lang="en"] .r39-maharishi .mb-questions li:first-child {
padding-top: 0 !important;
}
html[lang="en"] .r39-maharishi .mb-questions li:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
html[lang="en"] .r39-maharishi .mb-foot {
font-family: "Manrope", system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
margin: clamp(20px, 2vw, 28px) 0 0 0 !important;
}
/* Single-column on small screens */
@media (max-width: 900px) {
html[lang="en"] .r39-maharishi .r39-mh-grid {
grid-template-columns: 1fr !important;
padding: clamp(64px, 10vw, 80px) clamp(24px, 4vw, 36px) clamp(32px, 4vw, 48px) !important;
border-radius: 24px !important;
}
html[lang="en"] .r39-maharishi .r39-mh-logo {
bottom: 100% !important;
top: auto !important;
left: 9px !important;
width: 200px !important;
margin: 0 0 -20px 0 !important;
display: block !important;
transform: rotate(-2deg) !important;
transform-origin: 0% 100% !important;
}
html[lang="en"] .r39-maharishi .r39-mh-headline {
font-size: clamp(36px, 9vw, 56px) !important;
}
}
/* ---------- 4. Decision-tree cards: rulebook font + color compliance ---------- */
html[lang="en"] .r38-tree-step {
border-radius: 18px !important; /* match liquid glass softness */
}
html[lang="en"] .r38-tree-h {
font-weight: 700 !important; /* rulebook: Manrope ≤700 */
}
html[lang="en"] .r38-tree-foot {
font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace !important;
font-weight: 500 !important;
color: var(--ink-2) !important;
}
/* Drop weight-800 anywhere on /ai down to 700 (rulebook ceiling) */
html[lang="en"] body.subpage.ai .r38-mh-headline,
html[lang="en"] body.subpage.ai .r38-os-tag-h,
html[lang="en"] body.subpage.ai .r38-tree-h,
html[lang="en"] body.subpage.ai .r38-stage-t {
font-weight: 700 !important;
}
/* ============================================================
R46 — /photo page polish (EN only)
1) Hero subtitle width tightened for 2-line wrap
2) Shelf→Services gap halved (1/2)
3) Pricing eyebrow text changed in HTML
4) Per-card disclaimer added
5) Services + Pricing cards → liquid glass (rulebook-compliant)
============================================================ */
/* 1) Hero subtitle — force 2-line layout (override nowrap) */
html[lang="en"] .hero-editorial .r46-hero-sub-2line {
white-space: normal !important;
text-wrap: balance !important;
max-width: 32ch !important;
}
html[lang="en"] .r46-hero-sub-2line br { display: inline; }
/* 2) Halve the gap between shelf and services (was 120-200px → 60-100px) */
html[lang="en"] .r34-shelf {
margin-bottom: clamp(60px, 7vw, 100px) !important;
}
/* 4) Per-card pricing disclaimer */
html[lang="en"] .r34-price-disclaimer {
display: block;
margin-top: 8px;
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.02em;
color: var(--ink-3, #8B8580);
font-style: italic;
}
/* 5a) Liquid glass — Services 2×2 image tiles */
html[lang="en"] .r46-glass-cell-photo .r34-cell-img {
background: linear-gradient(135deg, rgba(250,246,236,0.55), rgba(243,238,228,0.30)) !important;
backdrop-filter: blur(18px) saturate(1.25);
-webkit-backdrop-filter: blur(18px) saturate(1.25);
border: 1px solid rgba(255,255,255,0.45) !important;
border-radius: 18px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(26,26,26,0.04),
0 10px 30px rgba(28,26,22,0.06);
overflow: hidden;
}
html[lang="en"] .r46-glass-cell-photo .r34-cell-img::after {
border: 1px solid rgba(255,255,255,0.30) !important;
border-radius: 18px !important;
}
/* 5b) Liquid glass — Pricing 2×2 cards (replace hard grid borders) */
html[lang="en"] .r46-glass-quad {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 1.8vw, 24px) !important;
border: none !important;
}
html[lang="en"] .r46-glass-cell {
position: relative;
background: linear-gradient(135deg, rgba(250,246,236,0.58), rgba(243,238,228,0.32)) !important;
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
border: 1px solid rgba(255,255,255,0.45) !important;
border-radius: 18px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(26,26,26,0.04),
0 10px 30px rgba(28,26,22,0.06) !important;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
html[lang="en"] .r46-glass-cell:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(250,246,236,0.68), rgba(243,238,228,0.40)) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 -1px 0 rgba(26,26,26,0.05),
0 16px 40px rgba(28,26,22,0.10) !important;
}
@media (max-width: 640px) {
html[lang="en"] .r46-glass-quad {
grid-template-columns: 1fr;
}
}
/* ============================================================
R46 END
============================================================ */
/* ============================================================
R47 — Global pill navbar (canonical from homepage)
Ensures /faq, /start, /privacy, /terms — all langs — render
the same fixed pill nav as the homepage.
============================================================ */
.nav{position:fixed;top:18px;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none}
.nav-inner{pointer-events:auto;display:flex;align-items:center;gap:28px;padding:12px 12px 12px 22px;border-radius:999px;background:rgba(243,238,228,0.78);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--hair,rgba(14,14,16,0.10))}
.nav .brand{text-decoration:none;color:var(--ink,#0E0E10);display:inline-flex;align-items:center;line-height:1;font-family:var(--f-display,'Manrope',sans-serif);font-weight:600;letter-spacing:0.02em;font-size:14px}
.nav .brand .dot{width:6px;height:6px;border-radius:50%;background:var(--ink,#0E0E10);margin-right:8px;display:inline-block}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{color:var(--ink-2,rgba(14,14,16,0.66));text-decoration:none;padding:8px 12px;border-radius:999px;font-size:13px;transition:color .2s;white-space:nowrap;font-family:var(--f-display,'Manrope',sans-serif);font-weight:400}
.nav-links a:hover{color:var(--ink,#0E0E10)}
.nav .has-drop{position:relative;display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:999px;white-space:nowrap;line-height:1}
.nav .has-drop:hover{background:rgba(14,14,16,0.04)}
.nav .has-drop>a{padding:0 !important;background:transparent}
.nav .has-drop>.chev{font-size:11px;color:var(--ink-2);transition:transform .25s;pointer-events:none;line-height:1;margin-left:2px}
.nav .has-drop:hover>.chev,.nav .has-drop:focus-within>.chev{transform:rotate(180deg);color:var(--ink)}
.nav .has-drop:hover>a{color:var(--ink)}
.nav .cap-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:300px;padding:8px;border-radius:18px;background:rgba(255,255,255,0.92);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--hair);box-shadow:0 18px 48px rgba(14,14,16,0.10),0 2px 6px rgba(14,14,16,0.04);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:80}
.nav .has-drop:hover .cap-drop,.nav .has-drop:focus-within .cap-drop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav .cap-drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:14px}
.nav .cap-drop a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:11px 13px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .15s}
.nav .cap-drop a:hover{background:var(--paper-2,#ECE6D9)}
.nav .cap-drop a .cd-n{font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:10px;letter-spacing:0.16em;color:var(--ink-3);min-width:18px}
.nav .cap-drop a .cd-t{font-family:var(--f-display,'Manrope',sans-serif);font-size:14.5px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);line-height:1.2}
.nav .cap-drop a .cd-d{font-size:11.5px;color:var(--ink-3);grid-column:2;margin-top:2px;line-height:1.4}
.nav-cta{padding:10px 16px;border-radius:999px;background:var(--ink,#0E0E10);color:var(--paper,#F3EEE4);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;font-family:var(--f-display,'Manrope',sans-serif);transition:opacity .15s}
.nav-cta:hover{opacity:.88}
.nav-cta-back{background:transparent;color:var(--ink,#0E0E10);border:1px solid var(--hair,rgba(14,14,16,0.18))}
.nav-cta-back:hover{background:rgba(14,14,16,0.05)}
.nav .lang{position:relative;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:0.14em}
.nav .lang-trigger{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--ink-2);cursor:pointer;font:inherit;letter-spacing:inherit}
.nav .lang-trigger:hover{color:var(--ink);border-color:var(--hair-2,rgba(14,14,16,0.18))}
.nav .lang-trigger .chev{transition:transform .25s}
.nav .lang.is-open .lang-trigger .chev,.nav .lang.open .lang-trigger .chev{transform:rotate(180deg)}
.nav .lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:6px;border-radius:14px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hair);box-shadow:0 12px 40px rgba(14,14,16,0.08);opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:80}
.nav .lang.is-open .lang-menu,.nav .lang.open .lang-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav .lang-menu a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink-2);font-family:var(--f-body,'Inter Tight',sans-serif);font-size:13px;letter-spacing:-0.005em;transition:background .15s,color .15s}
.nav .lang-menu a:hover,.nav .lang-menu a.on,.nav .lang-menu a[aria-current="true"]{background:var(--paper-2,#ECE6D9);color:var(--ink)}
.nav .lang-menu a .code{font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:10.5px;letter-spacing:0.16em;color:var(--ink-3)}
@media(max-width:900px){
.nav-links{display:none}
.nav-inner{gap:14px;padding:10px 10px 10px 18px}
.nav-cta{padding:9px 14px;font-size:12px}
.nav .cap-drop{display:none}
}
@media(max-width:560px){
.nav{top:12px}
.nav-inner{gap:10px;padding:8px 8px 8px 14px}
.nav .brand{font-size:13px}
.nav-cta{padding:8px 12px;font-size:12px}
}
/* ============================================================
R47 END
============================================================ */
/* ============================================================
R49 — REFERENCES MARQUEE → FOOTER PARTNER
Global (all langs, all pages). Sits flush above the footer's
"PRACTICE RADICAL PROGRESS" hairline. Preserves the foot-mani
top breathing space by zeroing only the marquee's bottom margin.
============================================================ */
.refs-marquee{
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
margin-top:0;
margin-bottom:0;
padding:0;
overflow:hidden;
border-top:1px solid rgba(26,26,26,0.10);
border-bottom:0;
background:transparent;
}
.refs-row{
width:100%;
overflow:hidden;
position:relative;
padding:18px 0;
}
.refs-row + .refs-row{
border-top:1px solid rgba(26,26,26,0.10);
}
.refs-track{
display:inline-flex;
align-items:center;
white-space:nowrap;
flex-wrap:nowrap;
will-change:transform;
}
.refs-track-right{ animation:refsScrollRight 220s linear infinite; }
.refs-track-left { animation:refsScrollLeft 220s linear infinite; }
@keyframes refsScrollRight{
from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)}
}
@keyframes refsScrollLeft{
from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}
}
.refs-item{
font-family:"Inter Tight","Manrope","Helvetica Neue",ui-sans-serif,system-ui,sans-serif;
font-weight:400;
font-size:clamp(15px,1.15vw,18px);
line-height:1.5;
letter-spacing:0;
color:var(--ink,#1A1A1A);
padding:0 14px;
display:inline-block;
}
.refs-dot{
font-family:"Inter Tight","Manrope",ui-sans-serif,sans-serif;
font-size:clamp(15px,1.15vw,18px);
color:#8B8580;
display:inline-block;
}
.refs-track:hover{ animation-play-state:paused; }
@media (max-width:720px){
.refs-row{ padding:14px 0; }
.refs-track-right, .refs-track-left{ animation-duration:160s; }
}
@media (prefers-reduced-motion:reduce){
.refs-track-right, .refs-track-left{ animation:none; }
}
/* R49 FINAL — Marquee now lives INSIDE the footer as its first child.
This makes it physically a footer part, and the footer's own
top padding becomes the marquee's container — but we shift
the P.R.P. breathing room INSIDE the footer-inner instead. */
/* The marquee fills the full footer width, ignores footer side padding */
footer > .refs-marquee{
width:100vw !important;
position:relative !important;
left:50% !important;
right:50% !important;
margin-left:-50vw !important;
margin-right:-50vw !important;
margin-top:0 !important;
margin-bottom:0 !important;
padding:0 !important;
border-top:1px solid rgba(26,26,26,0.10);
border-bottom:0 !important;
}
/* The footer itself now has no top padding — the marquee takes that slot.
The P.R.P. breathing space lives on the inner container instead. */
.foot.foot-v7{
padding-top:0 !important;
margin-top:0 !important;
}
.foot.foot-v7 > .foot-inner,
.foot.foot-v7 > .r8-foot-inner,
.foot.foot-v7 > .r10-foot-inner{
padding-top:clamp(56px,6vw,96px) !important;
}
/* Minimal legal footer (