/* Syncretic — inner pages (About, Services, Recruitment, Press, Press articles, Contact). Loaded after style.css; same tokens, same motion engine (js/app.js, body[data-inner]). */
:root { --u: calc(var(--vw) * var(--s)); }

/* ---------- curtain: the plum sheet (title centred) that the menu route-swap ends on; lifted by app.js ---------- */
#inner-curtain { position: fixed; inset: 0; z-index: 1200; background: var(--ink); color: var(--ground); display: grid; place-items: center; pointer-events: none; }
#inner-curtain h2 { white-space: nowrap; font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 476; font-stretch: 75%; text-transform: uppercase; font-size: calc(var(--vw) * 17 * var(--s)); line-height: 0.95; letter-spacing: -0.05em; word-spacing: 0.1em; text-align: center; }
/* the curtain contrasts with the hero it is about to reveal: cream over dark heroes, plum over cream heroes */
body.hdr-light #inner-curtain { background: var(--ground); color: var(--ink); }
html:not(.js-ready) body[data-inner]:not(.is-ready) .site-nav { visibility: hidden; }

/* header colours over dark heads */
body.hdr-light .site-nav, .incoming-page.hdr-light .site-nav { color: var(--ground); }
body.hdr-light .logo__p, .incoming-page.hdr-light .logo__p { opacity: 0; }
body.hdr-light .logo__w, .incoming-page.hdr-light .logo__w { opacity: 1; }
body[data-inner] .site-nav .nav-link[aria-current] { text-decoration: none; }
body[data-inner] .site-nav .nav-link[aria-current]::after { transform: scaleX(1); }

/* ---------- shared blocks ---------- */
.sec { position: relative; z-index: 2; background: var(--ground); }
.sec--ink { background: var(--ink); color: var(--ground); }
.sec--p2 { background: var(--plum2); color: var(--ground); }
.eyebrow { font-family: "Aeonik", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: calc(var(--u) * 1.2); line-height: 1.25; color: var(--accent); margin: 0; }
.eyebrow--l { font-size: calc(var(--u) * 1.9); line-height: 1.12; max-width: 26em; }
.h-xl { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 4.4); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; word-spacing: 0; }
.h-l { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 3.4); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; word-spacing: 0; }
.txt { font-size: var(--fs-body); line-height: 1.6; max-width: 34em; }
.txt p + p, .txt + .txt { margin-top: 1.1em; }
.txt strong { font-weight: 700; }
.btn-o { position: relative; display: inline-block; isolation: isolate; overflow: clip; border: 1px solid var(--accent); color: var(--accent); background: transparent; padding: 1.15em 2em; font-family: "Aeonik", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-stamp); line-height: 1; transition: color 0.55s var(--ease); }
.btn-o::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.6s var(--ease); }
@media (hover: hover) { .btn-o:hover, .btn-o:focus-visible { color: var(--ground); } .btn-o:hover::before, .btn-o:focus-visible::before { transform: scaleX(1); transform-origin: 0% 50%; } }
.sec--ink .btn-o, .sec--p2 .btn-o { }

/* CTA panel + marquee strip shared by every page */
.ctawrap { padding: calc(var(--sec) * 0.7) var(--pad) calc(var(--sec) * 0.9); }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--plum2); color: var(--ground); overflow: clip; min-height: calc(var(--u) * 27); }
.cta__t { padding: calc(var(--u) * 4.5); }
.cta__t .txt { margin: 1.4em 0 2.2em; color: var(--ground); }
.cta__img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.svc { text-align: center; padding: calc(var(--sec) * 0.5) var(--pad) calc(var(--sec) * 0.6); }
.svc .eyebrow { margin-bottom: 1.2em; }
.svc .txt { margin: 0 auto 2em; }

/* ---------- ABOUT ---------- */
.ahead { min-height: calc(var(--svh) * 100); padding: calc(var(--u) * 10.5) var(--pad) calc(var(--u) * 5); overflow: clip; }
.ahead__txt { position: relative; z-index: 2; padding-left: calc(var(--u) * 8); max-width: calc(var(--u) * 52); }
.ahead__txt .h-xl { margin: 0.55em 0 1.3em; }
.ahead__fig { position: absolute; right: 0; bottom: calc(var(--svh) * -6); width: min(54vw, 800px); margin: 0; z-index: 1; }
.ahead__fig img { display: block; width: 100%; height: auto; }
.manifest { padding: calc(var(--sec) * 1.1) var(--pad); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; overflow: clip; }
.manifest__t { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 8.4); line-height: 1; color: var(--accent); letter-spacing: -0.02em; margin: 0 0 0.6em; padding-left: calc(var(--u) * 4); }
.manifest__c { padding-left: calc(var(--u) * 9); }
.manifest__fig { margin: 0 calc(var(--pad) * -1) 0 0; grid-column: 2; grid-row: 1 / span 2; }
.manifest__fig img { display: block; width: 100%; height: auto; }
.team { padding: calc(var(--sec) * 0.3) var(--pad) calc(var(--sec) * 1.3); }
.team__wrap { width: calc(var(--u) * 72.4); margin: 0 auto; }
.team .eyebrow--l { padding-left: 0; margin-bottom: calc(var(--u) * 6.4); max-width: 26em; font-size: calc(var(--u) * 1.7); }
.team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 5.2); }

.member { position: relative; margin: 0; min-height: calc(var(--u) * 52); background: var(--plum2) no-repeat top left / 100% auto; color: var(--ground); padding: calc(var(--u) * 21.4) calc(var(--u) * 3.4) calc(var(--u) * 4.2); }
.member__b { padding: 0; }
.member__n { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 3.44); line-height: 1.25; margin: 0 0 0.45em; }
.member__b p { font-size: calc(var(--u) * 1); line-height: 1.8; max-width: 24.3em; }
.plr { padding: calc(var(--sec) * 1.1) var(--pad) calc(var(--sec) * 0.8); }
.plr .eyebrow { margin-bottom: 1.1em; }
.plr .h-l { max-width: 22em; }

/* ---------- SERVICES ---------- */
.shead { min-height: calc(var(--svh) * 96); padding: calc(var(--u) * 10.5) var(--pad) calc(var(--u) * 6); overflow: clip; }
.shead__txt { position: relative; z-index: 2; padding-left: calc(var(--u) * 8); max-width: calc(var(--u) * 56); }
.shead__txt .h-xl { margin: 0.5em 0 1em; color: var(--ground); }
.shead__fig { position: absolute; right: -2vw; top: 0; width: min(46vw, 760px); margin: 0; z-index: 1; }
.shead__fig img { display: block; width: 100%; height: auto; }
.voicewrap { padding: 0 var(--pad) calc(var(--sec) * 0.9); }
.voice { position: relative; background: var(--plum2); color: var(--ground); overflow: clip; padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 5); min-height: calc(var(--u) * 42); display: flex; flex-direction: column; justify-content: space-between; }
.voice__img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 62%; object-fit: cover; object-position: left center; z-index: 0; }
.voice > *:not(.voice__img) { position: relative; z-index: 1; }
.voice__q { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--accent); font-size: calc(var(--u) * 1.9); line-height: 1.18; max-width: 26em; letter-spacing: 0; }
.voice__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); max-width: calc(var(--u) * 46); margin-top: calc(var(--u) * 9); }
.voice__lists h3 { font-family: "Aeonik", sans-serif; font-weight: 700; font-size: var(--fs-body); margin: 0 0 0.9em; }
.voice__lists ul { list-style: disc; padding-left: 1.1em; font-size: calc(var(--fs-body) * 0.92); line-height: 1.6; }
.voice__lists li { padding: 0.12em 0; }
.partners--dark { background: var(--ink); color: var(--ground); padding: calc(var(--sec) * 0.9) 0 calc(var(--sec) * 0.8); text-align: center; }
.partners--dark .partners__eyebrow { font-size: calc(var(--u) * 1.7); }
.partners--dark .logos { margin-top: calc(var(--sec) * 0.8); }
.method--intro .method__intro { max-width: 44em; text-align: center; font-size: calc(var(--fs-body) * 0.95); line-height: 1.55; }
.method--intro .method__intro p + p { margin-top: 0.8em; }

/* case slides, light variant (Services): cream frame, photo fades in from the right */
.case--light { background: var(--ground); color: var(--ink); }
.case--light .case__title { color: var(--accent); }
.case--light .case__p { color: var(--ink); }
.case--light .case__bg { object-position: right center; }
.case--light .case__btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.cases--light .cases__arrow { background: var(--accent); color: var(--ground); }

/* ---------- RECRUITMENT ---------- */
.rhead { padding: calc(var(--u) * 10.5) var(--pad) 0; overflow: clip; }
.rhead__txt { padding-left: calc(var(--u) * 8); }
.rhead__txt .h-xl { margin: 0.55em 0 0; max-width: 14em; }
.rhead__fig { margin: calc(var(--u) * 3) calc(var(--pad) * -1) 0; aspect-ratio: 1800 / 1060; overflow: hidden; }
.rhead__fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rfail { background: linear-gradient(to bottom, transparent 0, var(--ink) calc(var(--u) * 6)); margin-top: calc(var(--u) * -11); padding: 0 var(--pad) calc(var(--sec) * 1.1); position: relative; z-index: 3; }
.rfail__in { width: calc(var(--u) * 46); max-width: 100%; margin: 0 auto; }
.rfail .eyebrow { font-size: calc(var(--u) * 1.6); max-width: none; margin-bottom: 1.4em; }
.rfail .txt { color: var(--ground); }

.strategy { padding: calc(var(--sec) * 0.9) var(--pad) calc(var(--sec) * 1.3); }
.strategy__in { width: calc(var(--u) * 72); max-width: 100%; margin: 0 auto; }
.strategy .eyebrow { margin-bottom: 1.2em; }
.strategy .h-l { color: inherit; max-width: 20em; margin-bottom: 0.8em; }
.strategy .txt { color: inherit; margin-bottom: calc(var(--u) * 4); }
.rcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); max-width: calc(var(--u) * 72); }
.rcard { background: var(--plum2); color: var(--ground); min-height: calc(var(--u) * 21); padding: calc(var(--u) * 2.4); display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.rcard__n { position: absolute; left: calc(var(--u) * 2.4); top: calc(var(--u) * 2.2); font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 3.2); line-height: 1; color: rgba(242, 242, 237, 0.55); }
.rcard__n::after { content: ""; display: block; width: 0.35em; margin-top: 0.22em; border-top: 0.07em solid var(--accent); }
.rcard h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--accent); font-size: calc(var(--u) * 1.45); margin: 0 0 0.6em; }
.rcard p { font-size: calc(var(--fs-body) * 0.92); line-height: 1.5; max-width: 28em; }

/* ---------- PRESS (list) ---------- */
.phead { padding: calc(var(--u) * 11) var(--pad) calc(var(--u) * 2); }
.phead .h-xl { font-size: calc(var(--u) * 9); margin: 0.35em 0 0; padding-left: calc(var(--u) * 4); }
.phead__e { padding-left: calc(var(--u) * 4.82); } /* + the optical side-bearing of the giant P */
.plist { padding: calc(var(--u) * 3) var(--pad) calc(var(--sec) * 1.2); display: grid; gap: calc(var(--u) * 4.5); }
.pr { display: block; color: var(--ink); }
.pr__fig { aspect-ratio: 16 / 8.6; overflow: hidden; margin: 0; background: var(--accent); }
.pr__fig img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pr__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 2); align-items: baseline; padding-top: calc(var(--u) * 1.4); }
.pr__t { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 3); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; order: 1; }
.pr__d { font-family: "Aeonik", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-stamp); color: var(--accent); order: 2; white-space: nowrap; }

/* ---------- PRESS (article) ---------- */
.ahd { padding: calc(var(--u) * 10.5) var(--pad) calc(var(--u) * 3); }
.ahd__in { max-width: calc(var(--u) * 62); margin: 0 auto; }
.ahd .eyebrow { margin-bottom: 1.2em; }
.ahd .h-xl { font-size: calc(var(--u) * 4.6); }
.ahd__dek { margin-top: 1.1em; font-family: "Aeonik", sans-serif; font-weight: 500; font-size: calc(var(--u) * 1.6); line-height: 1.35; max-width: 28em; color: var(--plum2); }
.afig { margin: calc(var(--u) * 2.5) var(--pad) 0; aspect-ratio: 16 / 7.4; overflow: hidden; background: var(--accent); }
.afig img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.abody { padding: calc(var(--u) * 5) var(--pad) calc(var(--u) * 5); }
.abody__in { max-width: calc(var(--u) * 46); margin: 0 auto; font-size: calc(var(--u) * 1.32); line-height: 1.62; }
.abody__in p { margin: 0 0 1.15em; }
.abody__in h2 { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 2.5); line-height: 1.1; margin: 1.6em 0 0.6em; }
.abody__in h3 { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.9); line-height: 1.15; margin: 1.9em 0 0.5em; color: var(--ink); }
.abody__in h3.is-num { color: var(--accent); }
.abody__in h4 { font-family: "Aeonik", sans-serif; font-weight: 700; font-size: calc(var(--u) * 1.4); margin: 1.4em 0 0.4em; }
.abody__in ul, .abody__in ol { list-style: disc; padding-left: 1.3em; margin: 0 0 1.2em; }
.abody__in blockquote { margin: 1.6em 0; padding-left: 1.2em; border-left: 3px solid var(--accent); font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 1.9); line-height: 1.25; }
.abody__in em { font-style: italic; color: var(--plum2); }
.abody__in a { text-decoration: underline; text-underline-offset: 0.2em; }
.anav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--pad) calc(var(--u) * 5 + var(--svh) * 38); }
.anav a { display: block; border-top: 1px solid var(--ink); padding-top: calc(var(--u) * 1.4); }
.anav a:last-child { text-align: right; }
.anav small { display: block; font-family: "Aeonik", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-stamp); color: var(--accent); margin-bottom: 0.7em; }
.anav span { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 2); line-height: 1.12; text-wrap: balance; }
.anav a:only-child { grid-column: 2; }

/* ---------- CONTACT ---------- */
.chead { padding: calc(var(--u) * 10.5) var(--pad) calc(var(--sec) * 0.8); }
.chead__in { padding-left: calc(var(--u) * 8); }
.chead .h-xl { color: inherit; margin: 0.5em 0 1.4em; font-weight: 500; }
.cgrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: calc(var(--u) * 2.5); max-width: calc(var(--u) * 80); }
.cform { display: grid; gap: calc(var(--u) * 1.3); }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.cform label { display: block; font-size: calc(var(--fs-body) * 0.9); margin-bottom: 0.5em; }
.cform label i { font-style: normal; opacity: 0.6; font-size: 0.85em; margin-left: 0.4em; }
.cform input, .cform textarea { width: 100%; background: var(--plum2); color: var(--ground); border: 1px solid transparent; font: inherit; font-size: var(--fs-body); padding: 0.85em 1em; outline: none; transition: border-color 0.3s; }
.cform input:focus, .cform textarea:focus { border-color: var(--accent); }
.cform textarea { min-height: calc(var(--u) * 10); resize: vertical; }
.cform__send { justify-self: start; cursor: pointer; }
.cform__note { font-size: calc(var(--fs-body) * 0.9); color: var(--accent); min-height: 1.5em; }
.cform label { line-height: 1.3; }
.cside { display: grid; gap: calc(var(--u) * 1.2); align-content: start; margin-top: calc(var(--fs-body) * 0.9 * 1.8); }
.cbox { background: var(--plum2); color: var(--ground); padding: calc(var(--u) * 2.4); }
.cbox .h-l { font-size: calc(var(--u) * 2.6); margin: 0 0 1.1em; }
.cbox a.go { font-family: "Aeonik", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-stamp); color: var(--accent); }
.cbox .txt { margin-top: 1em; max-width: 22em; }
.know { padding: calc(var(--sec) * 0.9) var(--pad) calc(var(--sec) * 1.5); color: var(--ink); }
.know__in { width: calc(var(--u) * 62); max-width: 100%; margin: 0 auto; }
.know__t { font-family: "Aeonik", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: calc(var(--u) * 1.4); margin: 0 0 calc(var(--u) * 2.2); }
.know__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.kcard { position: relative; display: block; aspect-ratio: 470 / 820; max-height: calc(var(--svh) * 80); color: var(--ground); overflow: hidden; }
.kcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transition: transform 0.9s var(--ease); }
.kcard span { position: absolute; left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.8); line-height: 1.1; }
@media (hover: hover) { .kcard:hover img { transform: scale(1.05); } }

/* ---------- tablet / phone ---------- */
@media (max-width: 1024px) and (min-width: 651px) {
  .ahead__fig { width: 62vw; } .shead__fig { width: 56vw; } .cta { min-height: 0; }
}
@media (max-width: 650px) {
  .eyebrow { font-size: 3.1vw; } .eyebrow--l { font-size: 5vw; }
  .h-xl { font-size: 10.4vw; } .h-l { font-size: 8.4vw; }
  .txt { font-size: 4vw; }
  .ahead { min-height: 0; padding: 26vw var(--pad) 0; display: flex; flex-direction: column; }
  .ahead__txt, .shead__txt, .rhead__txt, .chead__in { padding-left: 0; max-width: none; }
  .ahead__fig { position: relative; right: auto; bottom: calc(var(--svh) * -5); width: 96vw; margin: 6vw 0 0 auto; }
  .manifest { grid-template-columns: 1fr; padding: 16vw var(--pad) 0; }
  .manifest__t { font-size: 17vw; padding-left: 0; }
  .manifest__c { padding-left: 0; }
  .manifest__fig { grid-column: 1; grid-row: auto; margin: 6vw calc(var(--pad) * -1) 0; }
  .team { padding: 6vw var(--pad) 22vw; } .team__wrap { width: auto; } .team .eyebrow--l { margin-bottom: 8vw; }
  .team__grid { grid-template-columns: 1fr; gap: 6vw; }
  .member { min-height: 0; padding: 59vw 7vw 11vw; } .member__n { font-size: 10vw; } .member__b p { font-size: 3.8vw; max-width: none; }
  .plr { padding: 20vw var(--pad) 10vw; }
  .ctawrap { padding: 8vw var(--pad) 16vw; }
  .cta { grid-template-columns: 1fr; } .cta__t { padding: 9vw 7vw 4vw; } .cta__img { height: 62vw; object-position: center; }
  .shead { min-height: 0; padding: 26vw var(--pad) 8vw; }
  .shead__fig { position: relative; right: auto; top: auto; width: 82vw; margin: -2vw 0 0 auto; }
  .shead__txt .h-xl { font-size: 9.4vw; }
  .voice { padding: 8vw 6vw 8vw; min-height: 0; }
  .voice__img { max-width: 100%; opacity: 0.9; }
  .voice__q { font-size: 6.2vw; margin-bottom: 40vw; }
  .voice__lists { grid-template-columns: 1fr; gap: 7vw; margin-top: 0; }
  .voice__lists ul, .voice__lists h3 { font-size: 3.8vw; }
  .partners--dark .partners__eyebrow { font-size: 4.2vw; }
  .method--intro .method__intro { font-size: 3.6vw; }
  .rhead { padding: 26vw var(--pad) 0; } .rhead__fig { margin-top: 8vw; }
  .rfail { margin-top: 0; padding: 12vw var(--pad) 18vw; background: var(--ink); } .rfail__in { width: auto; } .rfail .eyebrow { font-size: 5vw; }
  .strategy { padding: 14vw var(--pad) 22vw; } .strategy__in { width: auto; }
  .rcards { grid-template-columns: 1fr; gap: 3vw; } .rcard { min-height: 62vw; padding: 7vw; } .rcard__n { left: 7vw; top: 6vw; font-size: 9vw; } .rcard h3 { font-size: 4.6vw; } .rcard p { font-size: 3.8vw; }
  .phead { padding: 28vw var(--pad) 6vw; } .phead .h-xl { font-size: 22vw; padding-left: 0; } .phead__e { padding-left: 2.2vw; }
  .plist { gap: 14vw; padding-bottom: 24vw; }
  .pr__fig { aspect-ratio: 4 / 3; }
  .pr__meta { grid-template-columns: 1fr; gap: 2vw; padding-top: 4vw; } .pr__t { font-size: 7.4vw; order: 2; } .pr__d { order: 1; }
  .ahd { padding: 26vw var(--pad) 7vw; } .ahd .h-xl { font-size: 9.2vw; } .ahd__dek { font-size: 4.6vw; }
  .afig { margin-top: 7vw; aspect-ratio: 4 / 3; }
  .abody { padding: 12vw var(--pad); } .abody__in { font-size: 4.2vw; } .abody__in h2 { font-size: 7vw; } .abody__in h3 { font-size: 5.8vw; } .abody__in h4 { font-size: 4.6vw; } .abody__in blockquote { font-size: 5.6vw; }
  .anav { grid-template-columns: 1fr; gap: 8vw; padding-bottom: 18vw; } .anav a:last-child { text-align: left; } .anav span { font-size: 6vw; } .anav a:only-child { grid-column: 1; }
  .chead { padding: 26vw var(--pad) 12vw; } .cgrid { grid-template-columns: 1fr; gap: 6vw; } .cform__row { grid-template-columns: 1fr; gap: 3.5vw; } .cform { gap: 4.4vw; }
  .cside { margin-top: 0; } .cbox { padding: 7vw; } .cbox .h-l { font-size: 8vw; }
  .know { padding: 6vw var(--pad) 22vw; } .know__in { width: auto; } .know__t { font-size: 4vw; margin-bottom: 7vw; }
  .know__g { grid-template-columns: 1fr; gap: 3vw; } .kcard { aspect-ratio: 16 / 11; max-height: none; } .kcard span { font-size: 6.4vw; left: 6vw; bottom: 5vw; }
  .case--light { color: var(--ink); }
}

.ahead__fig img, .shead__fig img, .manifest__fig img, .member img { height: auto; }
.cta__img { height: 100%; }

.rhead { background: linear-gradient(var(--ground) 0, var(--ground) calc(100% - 2px), var(--ink) calc(100% - 2px)); padding-bottom: 0; }
.rhead__fig { margin-bottom: -1px; }
.voice__img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%); mask-image: linear-gradient(90deg, transparent 0, #000 32%); }

/* ---------- route swap: the incoming sheet IS the next page's real hero (header + first section), clipped open from the strip / footer preview ---------- */
html.handoff #inner-curtain { display: none; }
#page-stage-incoming.incoming-page { display: block; place-items: unset; }
.incoming-page__in { position: relative; width: 100%; min-height: calc(var(--svh) * 100); }
.incoming-page .site-nav { pointer-events: none; }

/* ---------- inner footers: the footer IS the band = the NEXT page's hero art, half a screen tall, with a "Next" chip, its name and a line; no other strip ---------- */
.foot.foot--next { background: transparent; height: calc(var(--svh) * 50); min-height: 0; padding: 0; overflow: visible; display: block; color: var(--pv-ink, var(--ground)); }
body.wash .foot.foot--next { background: transparent; }
.foot--next .foot__top { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.foot--next .foot__bottom { color: var(--pv-ink, var(--ground)); pointer-events: auto; }
.foot--next .foot__bottom a { color: inherit; }
.foot__preview { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: block; overflow: hidden; background: var(--pv-bg, var(--plum2)); height: calc(var(--svh) * 50 * (1 + 0.6 * var(--pull-n, 0))); }
.foot__hero { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--svh) * 100); overflow: hidden; pointer-events: none; }
.foot__hero > section { margin: 0; }
.foot__hero [data-reveal], .foot__hero [data-wipe] { visibility: hidden; } /* text is animated by the page that opens, never shown half-way here */
.foot__fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--pv-fit, cover); object-position: var(--pv-pos, center); }
.foot__fb[hidden] { display: none; }
.foot__nextbox { position: absolute; z-index: 2; left: 0; right: 0; top: 46%; transform: translateY(-50%); text-align: center; display: grid; justify-items: center; gap: calc(var(--u) * 0.9); padding: 0 var(--pad); color: var(--pv-ink, var(--ground)); }
.foot__chip { border: 1px solid currentColor; padding: 0.55em 1.1em 0.5em; font-family: "Aeonik", sans-serif; font-weight: 500; font-size: var(--fs-stamp); line-height: 1; }
.foot__nextbox > * { position: relative; z-index: 1; }

.foot__ntitle { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 5.6); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.foot__ndesc { font-family: "Aeonik", sans-serif; font-weight: 400; font-size: calc(var(--u) * 1.4); line-height: 1.3; max-width: 26em; }
@media (max-width: 650px) {
  .foot.foot--next { height: calc(var(--svh) * 50); min-height: 0; padding: 0; }
  .foot--next .foot__bottom { left: 3vw; right: 3vw; bottom: calc(var(--btn-b) + var(--btn-h) + 6vw); flex-direction: row; padding-right: 0; }
  .foot__nextbox { top: 40%; }
  .foot__preview.is-contain img { top: auto; bottom: 0; height: 56%; }
  .foot__preview.is-contain .foot__nextbox { top: 27%; }
  .foot__ntitle { font-size: 11vw; } .foot__ndesc { font-size: 4vw; max-width: 18em; } .foot__chip { font-size: 3.2vw; }
}

/* ---------- Syncretic Method on inner pages: title + paragraph in normal flow ABOVE; the six cards are then pinned alone in the middle of the screen while they travel sideways ---------- */
.method--intro { padding-top: calc(var(--sec) * 1.1); }
.method--intro .method__head { padding: 0 var(--pad) calc(var(--sec) * 0.9); text-align: center; }
.method--intro .method__logo { margin: 0 auto calc(var(--sec) * 0.7); }
.method--intro .method__intro { margin: 0 auto; }
.method--intro .method__pin { justify-content: center; align-items: flex-start; gap: 0; }
.method--intro .steps { --card-h: calc(var(--svh) * 68); }
@media (max-width: 650px) { .method--intro .steps { --card-h: calc(var(--svh) * 66); } .method--intro .method__head { padding-bottom: 14vw; } }

html.handoff:not(.handoff-ready) #page-flow > section.sec:first-of-type [data-reveal],
html.handoff:not(.handoff-ready) .site-nav .logo, html.handoff:not(.handoff-ready) .site-nav .nav-link, html.handoff:not(.handoff-ready) .site-nav .lang-btn, html.handoff:not(.handoff-ready) .site-nav .nav-cta { opacity: 0; }

/* rectangles that wipe in start closed from the very first paint (no one-frame flash before app.js hides them); app.js sets the inline clip-path and clears it when the wipe ends */
body[data-inner] [data-wipe] { clip-path: inset(100% 0% 0% 0%); }
.foot__hero [data-wipe] { clip-path: none; }
@media (prefers-reduced-motion: reduce) { body[data-inner] [data-wipe] { clip-path: none; } }

/* empty zone at the end of a fading section: the background colour changes while ONLY empty space is on screen */
.fadezone { height: calc(var(--svh) * 85); pointer-events: none; }
@media (max-width: 650px) { .fadezone { height: calc(var(--svh) * 60); } }
.team, .strategy { padding-bottom: 0; }

/* ONE continuous background: the stage colour is tweened by app.js (data-fade-to); the fading section and every cream section after it are transparent, so no seam can ever show */
.fadezone { display: none; }
body[data-inner] [data-fade-to] { background: transparent !important; }
body[data-inner] .sec:not(.sec--ink):not(.sec--p2):not(.cases) { background: transparent; }
.team { padding-bottom: calc(var(--sec) * 1.3); }
.strategy { padding-bottom: calc(var(--sec) * 1.3); }
body[data-inner] .method, body[data-inner] .studies, body[data-inner] .partners, body[data-inner] .intro, body[data-inner] .proof, body[data-inner] .strip, body[data-inner] .ctawrap, body[data-inner] .svc, body[data-inner] .know, body[data-inner] .phead, body[data-inner] .plist, body[data-inner] .ahd, body[data-inner] .abody { background: transparent; }
/* inside the footer window and the opening sheet the hero must keep its own opaque colour (the page's continuous stage background is not behind them) */
.foot__hero > .sec:not(.sec--ink), .incoming-page__in > .sec:not(.sec--ink) { background-color: var(--ground) !important; }

/* Explore menu open: ES/EN where the header has it (top-left) and Press top-right — SAME text treatment as the header (no fills, no boxes of their own) */
.menu-chrome { position: fixed; inset: 0 0 auto 0; z-index: 7; pointer-events: none; visibility: hidden; color: var(--ink); }
body.selection-open .menu-chrome { visibility: visible; }
.menu-chrome__l { position: absolute; left: var(--pad); top: calc(var(--pad) * 0.62 + var(--vw) * 0.7 * var(--s)); font-size: var(--fs-stamp); line-height: 1; pointer-events: auto; }
.menu-chrome__r { position: absolute; right: var(--pad); top: calc(var(--pad) * 0.62 + var(--vw) * 0.7 * var(--s) - 0.95em); pointer-events: auto; background: transparent; color: inherit; }
.menu-chrome .lang-btn { background: transparent; padding: 0; margin: 0; }
@media (max-width: 650px) { .menu-chrome__l { top: calc(var(--vw) * 6 + 1.1vw); } .menu-chrome__r { top: calc(var(--vw) * 6 - 2.2vw); } }

/* more air between the "Let's work together" box and the footer band (the band grows upward while pulling) */
.ctawrap { padding-bottom: calc(var(--sec) * 0.9 + var(--svh) * 34); }
@media (max-width: 650px) { .ctawrap { padding-bottom: calc(16vw + var(--svh) * 30); } }

/* footers: the end of a page is DARK when the band that follows is light (stage colour interpolated by app.js, data-endark); Contact is dark throughout */
.endark { position: relative; z-index: 2; }
body.page-dark .know { color: var(--ground); }
body.page-dark .know__t { color: var(--ground); }
.foot__ntitle--long { font-size: calc(var(--u) * 3.3); max-width: 22em; line-height: 1.1; }
@media (max-width: 650px) { .foot__ntitle--long { font-size: 6.6vw; } }

/* carousels whose frame colour is the page cream are transparent (continuous stage behind them: no line against a darkening neighbour) */
body[data-inner] .cases--flat { background: transparent !important; }
/* wider copy column so titles run on ~3 lines instead of a tall narrow stack */
.case__body { width: 66%; }
.case__title { font-size: calc(var(--u) * 3.7); max-width: none; line-height: 1.08; text-wrap: pretty; }
.case__p { max-width: 38em; }
@media (max-width: 650px) { .case__body { width: 100%; } .case__title { font-size: 8.4vw; } }

/* article body: both languages are in the page, the active one shows */
html[lang="es"] .abody__in[lang="en"], html[lang="en"] .abody__in[lang="es"] { display: none; }

#page-stage-incoming .incoming-title { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 476; font-stretch: 75%; text-transform: uppercase; letter-spacing: -0.05em; }

/* arriving by walking back: everything except the footer band stays hidden until app.js fades it in (the band is already in place, so nothing pops) */
html.back #page-flow { transform: translateY(calc(var(--svh) * 100 - 100%)); } /* first paint = the bottom of the page (before any script) */
html.back [data-wipe] { clip-path: none !important; }
html.embed body { overflow: hidden; }
html.embed .cursor-loader, html.embed .site-nav__actions { display: none; }
html.back #inner-curtain { display: none; }

/* the band's copy of the next hero is a still: its text is never shown here (the page that opens animates it) */
.foot__hero :is(h1, h2, h3, p, a, li, span, small) { visibility: hidden; }
.foot__hero :is(img, figure) { visibility: visible; } /* a card that is a link keeps its picture: only the words are hidden */
#back-frame { position: fixed; inset: 0; width: 100vw; height: calc(var(--svh) * 100); border: 0; z-index: 1; pointer-events: none; visibility: hidden; background: transparent; }

html.back .foot__nextbox, html.back .foot__bottom, html.embed .foot__nextbox, html.embed .foot__bottom { visibility: hidden; }

html.back:not(.embed) .site-nav__actions { visibility: visible !important; }

.foot__preview { cursor: pointer; }

.foot__hero [data-hide], .foot__hero [data-hide] * { visibility: hidden !important; } /* what the real page draws on arrival (form, cards, photos) is not in the band */

html.back .foot--next, html.embed .foot--next { --pull-n: 1; --pull: 100%; } /* walking back lands on the band at its tallest */