/* ==========================================================================
   UnderOath.ai — landing page
   Port of LandingPage.dc.html. Values carried over verbatim from the design
   component; only the inline styles have been lifted into classes.
   ========================================================================== */

/* --- display scaling ------------------------------------------------------
   The design is authored against a 1240px content column inside a 1440px
   frame. Left alone, that column just floats in the middle of a larger
   display — 244px of dead margin each side at 1728px logical, 408px at 2056px
   — while the type stays the size it was drawn at, so the whole page reads as
   small and over-spaced.

   --u grows the design proportionally above its authored width instead of
   stretching it. Every size, space and fixed dimension is expressed as a
   multiple of it, so the relationships the design defines are preserved exactly
   and only the overall scale changes. Below 1440px it pins to 1px, which is what
   keeps this pixel-identical to the design component at its authored size.

   Line length is the reason this is a scale and not a fluid width: widening the
   column alone would push body copy well past a readable measure.
   -------------------------------------------------------------------------- */
:root{
  /* One scaled unit. Below 1440px it pins to exactly 1px, so every token keeps
     the design's literal value and the page stays pixel-identical to the design
     component at its authored size. Above 1440px it grows with the viewport,
     capped at 1.32px.

     It is a LENGTH, not a unitless ratio, on purpose: `(100vw - 1440px) / 3400`
     evaluates to a length, so `1 + <length>` is invalid arithmetic and silently
     invalidates every token that references it — every size falls back to the
     16px default. `100vw / 1440` divides a length by a number, which is a valid
     length, so sizes are written `calc(<n> * var(--u))`.

     Cap 1.45px = proportional scaling all the way to a 2088px viewport, which
     covers every scaled mode a 16" MacBook offers. Past that it stops growing,
     so a 2560px or ultrawide external monitor keeps readable type instead of
     billboard headlines — it reintroduces margin there by design. */
  --u:clamp(1px, calc(100vw / 1440), 1.45px);
  --header-h:calc(72 * var(--u));
}

/* Design-system tokens, re-expressed against the scaled unit. The numbers are
   the design's own — see ds/tokens/. */
:root{
  --container-max:calc(1240 * var(--u));
  --container-wide:calc(1440 * var(--u));
  --container-narrow:calc(760 * var(--u));
  --gutter:calc(32 * var(--u));

  --size-display-1:calc(80 * var(--u));
  --size-display-2:calc(64 * var(--u));
  --size-h1:calc(52 * var(--u));
  --size-h2:calc(40 * var(--u));
  --size-h3:calc(30 * var(--u));
  --size-h4:calc(24 * var(--u));
  --size-body-lg:calc(19 * var(--u));
  --size-body:calc(17 * var(--u));
  --size-body-sm:calc(15 * var(--u));
  --size-caption:calc(13 * var(--u));
  --size-eyebrow:calc(12 * var(--u));

  --space-1:calc(4 * var(--u));
  --space-2:calc(8 * var(--u));
  --space-3:calc(12 * var(--u));
  --space-4:calc(16 * var(--u));
  --space-5:calc(20 * var(--u));
  --space-6:calc(24 * var(--u));
  --space-8:calc(32 * var(--u));
  --space-10:calc(40 * var(--u));
  --space-12:calc(48 * var(--u));
  --space-16:calc(64 * var(--u));
  --space-20:calc(80 * var(--u));
  --space-24:calc(96 * var(--u));
  --space-32:calc(128 * var(--u));
  --space-40:calc(160 * var(--u));
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page)}
img,video{display:block;max-width:100%}
.page{background:var(--surface-page)}

/* --- shared -------------------------------------------------------------- */

/* The header is sticky at 72px, so anchored sections have to clear it. */
section[id]{scroll-margin-top:var(--header-h)}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.section{padding:var(--space-32) 0}
.section--raised{background:var(--surface-raised)}
.section--inverse{background:var(--surface-inverse)}
.rule-top{border-top:1px solid var(--line-hairline)}
.rule-bottom{border-bottom:1px solid var(--line-hairline)}

.eyebrow{
  font:var(--text-label);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:var(--space-6);
}
.eyebrow--inverse{color:var(--text-on-inverse-muted)}
.eyebrow--hero{color:rgba(248,246,241,.82);margin-bottom:var(--space-8)}
.eyebrow--accent{color:var(--text-accent);margin:var(--space-4) 0 0}

.section-title{
  font:var(--text-h2);
  letter-spacing:var(--tracking-heading);
  color:var(--text-strong);
  margin:0;
}
.section-title--inverse{color:var(--ink-050)}
.section-lead{font:var(--text-lead);color:var(--text-muted);margin:var(--space-6) 0 0}
.section-lead--inverse{color:var(--text-on-inverse-muted)}

.hairline{height:1px;background:var(--line-hairline)}

/* Quiet links — footer + inline nav lists. */
a.uo-quiet{color:var(--text-body);text-decoration:none}
a.uo-quiet:hover{color:var(--text-accent);text-decoration:none}

/* --- buttons ------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  border:0;
  border-radius:var(--radius-md);
  font:var(--text-default);
  font-weight:var(--weight-medium);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:var(--transition-color);
}
.btn:hover{text-decoration:none}

.btn--lg{height:calc(52 * var(--u));padding:0 var(--space-8)}
.btn--md{height:calc(44 * var(--u));padding:0 var(--space-6);font:var(--text-small);font-weight:var(--weight-medium)}
.btn--sm{height:calc(34 * var(--u));padding:0 var(--space-4);font:var(--text-label);font-size:var(--size-caption)}

.btn--ivory{background:var(--ink-050);color:var(--ink-900)}
.btn--ivory:hover{background:var(--white);color:var(--ink-900)}
.btn--ghost-inverse{border:1px solid rgba(248,246,241,.24);color:var(--ink-050);background:transparent}
.btn--ghost-inverse:hover{border-color:rgba(248,246,241,.5);color:var(--ink-050)}
.btn--outline{background:var(--white);border:1px solid var(--line-strong);color:var(--ink-900)}
.btn--outline:hover{border-color:var(--ink-400);color:var(--ink-900)}
.btn--accent{background:var(--burgundy-700);color:var(--white);width:100%}
.btn--accent:hover{background:var(--burgundy-600);color:var(--white)}

/* Mirrors the design system's Icon component, which renders as
   <span role="img" style="display:inline-flex;width:N;height:N;flex:0 0 auto">.
   The inline-level box matters: it sits on the text baseline and generates a
   line box ~8px taller than the icon itself. Using display:block here instead
   collapsed that, making each service card 463px against the design's 471px
   and drifting the page 41px short by the footer. */
.icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

/* The sprite carries literal width/height attributes; CSS has to restate them
   against the scale or icons stay 24px on a 2000px display. */
.icon[width="16"]{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.icon[width="18"]{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.icon[width="20"]{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.icon[width="22"]{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.icon[width="24"]{width:calc(24 * var(--u));height:calc(24 * var(--u))}

/* --- header -------------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(23,23,23,0);
  backdrop-filter:var(--blur-panel);
  -webkit-backdrop-filter:var(--blur-panel);
  border-bottom:1px solid transparent;
  transition:background-color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled{
  background:rgba(23,23,23,.82);
  border-bottom-color:var(--line-inverse);
}
.site-header__inner{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:0 var(--gutter);
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-10);
}
.site-header__logo{display:flex;align-items:center;text-decoration:none}
.site-header__logo img{height:calc(26 * var(--u));filter:invert(1) brightness(1.7)}

/* Stand-in for assets/logo-lockup.png until it is exported from the design
   project. Swapped in by initLogoFallback(). */
.wordmark{
  font-family:var(--font-serif);
  font-size:calc(21 * var(--u));
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-heading);
  line-height:calc(26 * var(--u));
  color:var(--ink-050);
}
.footer-brand .wordmark{color:var(--ink-900)}
.site-nav{display:flex;gap:var(--space-8);align-items:center}
.site-nav a{
  font:var(--text-small);
  font-size:calc(15 * var(--u));
  color:rgba(248,246,241,.82);
  text-decoration:none;
}
.site-nav a:hover{color:var(--ink-050);text-decoration:none}
.site-header__toggle{display:none}

/* --- hero ---------------------------------------------------------------- */

.hero{
  position:relative;
  margin-top:calc(-1 * var(--header-h));
  padding-top:var(--header-h);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#12161f;
  overflow:hidden;
}
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 1400ms ease-in-out;
  opacity:0;
}
.hero__video.is-active{opacity:1}
.hero__video--a{object-position:center 40%;opacity:1}
.hero__video--b,
.hero__video--c{object-position:center 50%}

/* Fallback plate — shown until a hero video is actually available. */
.hero__plate{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(139,13,18,.28) 0%,rgba(139,13,18,0) 70%),
    linear-gradient(165deg,#1b2130 0%,#12161f 45%,#0b0e14 100%);
}
.hero.has-video .hero__plate{display:none}

/* Autoplay refused at device level (iOS Low Power Mode, Auto-Play Previews
   off, Save-Data): the video elements are hidden and the plate carries the
   poster, so the hero reads as an intentional still — no tap-to-play glyph
   over a frozen frame. Declared after .has-video so it wins if both are set. */
.hero.is-still .hero__video{display:none}
.hero.is-still .hero__plate{
  display:block;
  background:url("../assets/hero-cleveland-skyline.webp") center 40%/cover no-repeat, #12161f;
}

.hero__scrim-linear{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,18,.18) 0%,rgba(10,12,18,.08) 45%,rgba(10,12,18,.34) 100%);
}
.hero__scrim-radial{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 52% at 50% 52%,rgba(8,10,15,.42) 0%,rgba(8,10,15,.26) 55%,rgba(8,10,15,0) 100%);
}
/* Extra darkening while the interior/office clip is on screen. */
.hero__scrim-b{
  position:absolute;inset:0;
  background:rgba(10,12,18,.22);
  opacity:0;
  transition:opacity 1400ms ease-in-out;
}
.hero__scrim-b.is-active{opacity:1}
.hero__scrim-top{
  position:absolute;left:0;right:0;top:0;height:calc(120 * var(--u));
  background:linear-gradient(180deg,rgba(8,10,15,.4) 0%,rgba(8,10,15,0) 100%);
}
.hero__body{
  position:relative;
  z-index:2;
  max-width:var(--container-wide);
  margin:0 auto;
  width:100%;
  padding:140px var(--gutter) 120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero__title{
  font:var(--text-display);
  letter-spacing:var(--tracking-display);
  color:var(--ink-050);
  max-width:16ch;
  margin:0;
  text-wrap:balance;
}
.hero__lead{
  font:var(--text-lead);
  color:rgba(248,246,241,.9);
  max-width:56ch;
  margin:var(--space-8) 0 0;
  text-wrap:pretty;
}
.hero__actions{
  display:flex;
  gap:var(--space-4);
  margin-top:var(--space-12);
  justify-content:center;
  flex-wrap:wrap;
}

/* --- what we do ---------------------------------------------------------- */

.what__title{max-width:20ch}
.what__lead{max-width:58ch}
.what__divider{margin:var(--space-16) 0 var(--space-12)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16)}
.pillar h3{
  font:var(--text-h3);
  font-size:var(--size-h4);
  color:var(--text-strong);
  margin:0;
}
.pillar p{font:var(--text-small);color:var(--text-muted);margin:var(--space-4) 0 0}

/* --- courthouse gallery -------------------------------------------------- */

.gallery{position:relative;height:280vh;background:var(--ink-800);--gallery-w:132vw}
.gallery__sticky{
  position:sticky;
  top:var(--header-h);
  height:calc(100vh - var(--header-h));
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink-800);
}
.gallery__stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
}
.gallery__grid{
  display:flex;
  gap:var(--space-5);
  /* flex:none is load-bearing. .gallery__stage is a flex container, so without
     it flex-shrink:1 collapses this back to the stage width and `width` below
     never takes effect — which left the rotated grid short of the left edge at
     every viewport. */
  flex:none;
  width:var(--gallery-w);
  transform-style:preserve-3d;
  will-change:transform;
}
.gallery__col{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  flex:1;
  min-width:0;
  will-change:transform;
}
.gallery__col image-slot{width:100%}
.slot--tall{height:calc(340 * var(--u))}
.slot--short{height:calc(280 * var(--u))}
.gallery__fade-y{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,18,.95) 0%,rgba(10,12,18,0) 18%,rgba(10,12,18,0) 82%,rgba(10,12,18,.95) 100%);
}
.gallery__fade-x{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,12,18,.95) 0%,rgba(10,12,18,0) 14%,rgba(10,12,18,0) 86%,rgba(10,12,18,.95) 100%);
}
.gallery__caption{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;z-index:5;
  padding:0 var(--gutter);
}
.gallery__caption-scrim{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(6,8,12,.9) 0%,rgba(6,8,12,.74) 45%,rgba(6,8,12,.3) 75%,rgba(6,8,12,0) 100%);
}
.gallery__eyebrow{
  position:relative;
  color:rgba(248,246,241,.92);
  margin-bottom:var(--space-5);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.gallery__title{
  position:relative;
  font:var(--text-h1);
  letter-spacing:var(--tracking-display);
  color:var(--ink-050);
  max-width:16ch;
  margin:0;
  text-wrap:balance;
  text-shadow:0 4px 24px rgba(0,0,0,.65);
}

/* --- bottlenecks --------------------------------------------------------- */

.bottlenecks__title{max-width:24ch;margin:0 0 var(--space-16)}
.bottleneck-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-hairline);
  border:1px solid var(--line-hairline);
}
.bottleneck{background:var(--surface-raised);padding:var(--space-10)}
.bottleneck h3{font:var(--text-h4);color:var(--text-strong);margin:var(--space-6) 0 0}
.bottleneck p{font:var(--text-small);color:var(--text-muted);margin:var(--space-3) 0 0}

/* --- services ------------------------------------------------------------ */

.services__title{max-width:24ch;margin:0 0 var(--space-16)}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.service-card{
  background:var(--surface-card);
  border:1px solid var(--line-hairline);
  border-radius:var(--radius-md);
  padding:var(--space-10);
}
.service-card h3{
  font:var(--text-h3);
  font-size:var(--size-h4);
  color:var(--text-strong);
  margin:var(--space-6) 0 0;
}
.service-card > p{font:var(--text-small);color:var(--text-muted);margin:var(--space-3) 0 0}
.capabilities{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:0}
.capabilities li{
  display:flex;
  gap:var(--space-4);
  padding:10px 0;
  border-top:1px solid var(--line-hairline);
  font:var(--text-small);
  font-size:calc(14 * var(--u));
  color:var(--text-body);
}
.capabilities li::before{content:"—";color:var(--burgundy-700)}

/* --- partnership --------------------------------------------------------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-24);align-items:start}
.partnership__title{max-width:18ch}
.partnership__lead{max-width:46ch}
.partnership__cta{margin-top:var(--space-12)}
.inclusions{border-top:1px solid var(--line-inverse)}
.inclusion{padding:var(--space-8) 0;border-bottom:1px solid var(--line-inverse)}
.inclusion h3{font:var(--text-h4);color:var(--ink-050);margin:0}
.inclusion p{font:var(--text-small);color:var(--text-on-inverse-muted);margin:var(--space-2) 0 0}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-16);
  margin-top:var(--space-24);
  padding-top:var(--space-12);
  border-top:1px solid var(--line-inverse);
}
.stat__figure{
  font-family:var(--font-serif);
  font-size:var(--size-h2);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-display);
  line-height:1;
  color:var(--ink-050);
}
.stat p{
  font:var(--text-small);
  font-size:var(--size-caption);
  color:var(--text-on-inverse-muted);
  margin:var(--space-2) 0 0;
  max-width:32ch;
}

/* --- process ------------------------------------------------------------- */

.process__split{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-24);align-items:start}
.process__aside{position:sticky;top:calc(120 * var(--u))}
.process__title{max-width:16ch}
.process__lead{max-width:38ch}
.process__cta{margin-top:var(--space-10)}
.step{display:grid;grid-template-columns:calc(64 * var(--u)) 1fr;gap:var(--space-6)}
.step:not(:last-child){
  padding-bottom:var(--space-10);
  border-bottom:1px solid var(--line-hairline);
  margin-bottom:var(--space-10);
}
.step__num{
  font-family:var(--font-mono);
  font-size:var(--size-caption);
  letter-spacing:var(--tracking-mono);
  color:var(--text-accent);
  padding-top:calc(6 * var(--u));
}
.step h3{
  font-family:var(--font-serif);
  font-size:var(--size-h4);
  font-weight:var(--weight-regular);
  color:var(--text-strong);
  margin:0;
}
.step p{
  font:var(--text-default);
  font-size:var(--size-body-sm);
  color:var(--text-muted);
  margin:var(--space-3) 0 0;
  max-width:58ch;
}

/* --- security ------------------------------------------------------------ */

.security__title{max-width:20ch}
.security__lead{margin:var(--space-6) 0 var(--space-16);max-width:58ch}
.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-10);
  margin-bottom:var(--space-20);
}
.principle{border-top:var(--rule-accent-weight) solid var(--burgundy-700);padding-top:var(--space-6)}
.principle h3{font:var(--text-h4);color:var(--text-strong);margin:var(--space-5) 0 0}
.principle p{font:var(--text-small);color:var(--text-muted);margin:var(--space-3) 0 0}

.faq{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 var(--space-16);
  border-top:1px solid var(--line-hairline);
}
.faq__item{padding:var(--space-8) 0;border-bottom:1px solid var(--line-hairline)}
.faq__item h4{
  font-family:var(--font-serif);
  font-size:calc(22 * var(--u));
  font-weight:var(--weight-regular);
  color:var(--text-strong);
  margin:0;
}
.faq__item p{font:var(--text-small);color:var(--text-muted);margin:var(--space-3) 0 0}

/* --- contact ------------------------------------------------------------- */

/* The CTA closes the page on a single statement and one button — no panel, so
   no split. Width is held to a readable measure rather than the full column. */
.contact__body{max-width:calc(720 * var(--u))}
.contact__cta{margin-top:var(--space-10)}

.contact__title{
  font:var(--text-h1);
  letter-spacing:var(--tracking-display);
  color:var(--ink-050);
  max-width:14ch;
  margin:0;
}
.contact__lead{margin:var(--space-8) 0 0;max-width:52ch}
.contact__meta{
  margin-top:var(--space-12);
  padding-top:var(--space-8);
  border-top:1px solid var(--line-inverse);
  font:var(--text-small);
  color:var(--text-on-inverse-muted);
}
.contact__meta a{color:var(--ink-050)}
.contact__meta a:hover{color:var(--white)}

.contact__panel{background:var(--surface-raised);border-radius:var(--radius-md);padding:var(--space-10)}

.contact-form{display:grid;gap:var(--space-5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field label{
  display:block;
  font:var(--text-label);
  color:var(--ink-600);
  margin-bottom:var(--space-2);
}
.field input,
.field select{
  width:100%;
  height:calc(46 * var(--u));
  padding:0 var(--space-4);
  font:var(--text-default);
  font-size:var(--size-body-sm);
  color:var(--ink-900);
  background:var(--white);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  outline:none;
}
.field textarea{
  width:100%;
  padding:12px var(--space-4);
  font:var(--text-default);
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
  color:var(--ink-900);
  background:var(--white);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  outline:none;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-subtle)}

.contact__confirmation{
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
  padding:var(--space-6) 0;
}
.contact__confirmation strong{
  display:block;
  font:var(--text-default);
  font-weight:var(--weight-medium);
  color:var(--ink-900);
}
.contact__confirmation span{
  display:block;
  font:var(--text-small);
  color:var(--text-muted);
  margin-top:var(--space-1);
}
[hidden]{display:none !important}

/* --- footer -------------------------------------------------------------- */

.site-footer{
  background:var(--surface-page);
  border-top:1px solid var(--line-hairline);
  padding:var(--space-20) 0 var(--space-10);
}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-16)}
.footer-brand img{height:calc(26 * var(--u))}
.footer-brand p{font:var(--text-small);color:var(--text-muted);margin:var(--space-6) 0 0;max-width:30ch}
.footer-col__title{
  font:var(--text-label);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-subtle);
  margin-bottom:var(--space-5);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.footer-col a{font:var(--text-small)}
.footer-legal{
  display:flex;
  justify-content:space-between;
  margin-top:var(--space-20);
  padding-top:var(--space-6);
  border-top:1px solid var(--line-hairline);
  font:var(--text-small);
  font-size:var(--size-caption);
  color:var(--text-subtle);
}
.footer-legal__links{display:flex;gap:var(--space-8)}

/* --- responsive ----------------------------------------------------------
   The design component is authored desktop-only. These breakpoints keep the
   same rhythm at narrower widths rather than introducing new layout ideas.
   ------------------------------------------------------------------------- */

@media (max-width:1120px){
  :root{--size-display-1:64px;--size-h1:44px;--size-h2:34px}
  .split,.process__split{gap:var(--space-16)}
  .footer-grid{gap:var(--space-10)}
}

/* --- mobile gallery cost ---------------------------------------------------
   The gallery is the heaviest thing on the page: 30 images inside a
   perspective/preserve-3d layer, retransformed every scroll frame. On phone
   GPUs that rasterises as stutter. Below 900px the 3D context is removed
   entirely and JS drops the rotations to match, which is where nearly all the
   cost was. All five columns are kept: dropping columns was tried and it
   destroyed the collage — the section became a plain vertical image strip.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  /* The frosted header re-samples a 14px backdrop blur on every scrolled
     frame. On iOS that is both slow and visibly shimmery over moving content
     — the "staticy" look. Phones get a plain translucent plate instead; the
     scrolled state goes near-opaque so legibility is unchanged. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header.is-scrolled{background:rgba(23,23,23,.97)}

  .gallery__stage{perspective:none}
  .gallery__grid{transform-style:flat;will-change:auto}
  /* will-change on 5 columns is real memory pressure on mobile; the columns
     still animate, they just are not permanently promoted. */
  .gallery__col{will-change:auto}
}
@media (max-width:900px){
  .section{padding:var(--space-20) 0}
  .site-nav{display:none}
  .site-header.is-open .site-nav{
    display:flex;
    position:absolute;
    top:72px;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-5);
    padding:var(--space-6) var(--gutter) var(--space-8);
    background:rgba(23,23,23,.96);
    border-bottom:1px solid var(--line-inverse);
  }
  .site-header__toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;height:34px;
    margin-left:auto;
    border:1px solid rgba(248,246,241,.24);
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--ink-050);
    cursor:pointer;
  }
  .site-header__inner{gap:var(--space-4);position:relative}
  .pillars,.bottleneck-grid,.principles,.stat-row{grid-template-columns:1fr;gap:var(--space-10)}
  .bottleneck-grid{gap:1px}
  .service-grid,.split,.process__split,.faq,.field-row{grid-template-columns:1fr}
  .split,.process__split{gap:var(--space-16)}
  .process__aside{position:static}
  .faq{gap:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery{height:220vh}
  .gallery{--gallery-w:180vw}
}

@media (max-width:640px){
  :root{--size-display-1:44px;--size-h1:34px;--size-h2:28px;--size-h3:24px;--gutter:20px}
  .hero__body{padding:120px var(--gutter) 96px}
  .hero__actions{width:100%;flex-direction:column;align-items:stretch}
  .btn--lg{padding:0 var(--space-6)}
  .service-card,.bottleneck,.contact__panel{padding:var(--space-6)}
  .step{grid-template-columns:44px 1fr;gap:var(--space-4)}
  .footer-grid{grid-template-columns:1fr}
  .footer-legal{flex-direction:column;gap:var(--space-4)}
  .gallery{--gallery-w:280vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__video,.hero__scrim-b{transition:none}
  .gallery{height:auto;min-height:100vh}
  .gallery__sticky{position:relative;top:0;height:100vh}
  .gallery__grid,.gallery__col{transform:none !important}
}