/* ==========================================================================
   TURYA Home V3
   Implementation of the approved high-fidelity design.

   Colour discipline (ADR-009): every colour literal in this file appears ONLY
   as the value of a registered canonical token in :root. Components reference
   var(--token) and never a raw value.

   Responsive discipline: every scale below is a clamp() token declared in
   DESIGN_INVARIANTS.yaml `responsive`, calibrated so 1440 reproduces the
   approved composition exactly.
   ========================================================================== */

/* ------------------------------------------------------------ 1. FONTS -- */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/intertight-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/intertight-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------- 2. TOKENS -- */
:root {
  /* master palette */
  --color-warm-white: #F4F6F8;
  --color-midnight:   #0B1420;
  --color-graphite:   #2A3642;
  --color-teal:       #4FD1C9;

  /* surfaces */
  --surface-page:     #F5F5F7;
  --surface-elevated: #FFFFFF;
  --surface-dark:     #0B1420;

  /* derived neutrals: each registered with a measured contrast */
  --color-text-primary:           #1D1D1F;
  --color-text-secondary:         #6E6E73;
  --color-divider:                #D9D9DE;
  --color-accent-accessible:      #17756F;
  --color-rule-on-dark:           #26323F;
  --color-text-secondary-on-dark: #A7B4C1;

  /* typefaces */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* shell + measure */
  --shell-max:   1440px;
  --shell-ratio: 83.4vw;
  --shell:       min(var(--shell-ratio), var(--shell-max));
  --measure-max: 640px;

  /* Hero: height-driven, with an ultrawide aspect floor so it never
     letterboxes and never reads shallow on a short wide display */
  --hero-h: clamp(620px, max(calc(88vh + 88px), calc(100vw / 2.35)), 2000px);
  --nav-h: 72px;

  /* type ramps */
  --t-h1:   clamp(40px, 5.42vw, 120px);
  --t-h2:   clamp(30px, 3.50vw,  72px);
  --t-h3:   clamp(34px, 4.45vw,  88px);
  --t-body: clamp(16px, 1.32vw,  22px);
  --t-body-sm: clamp(15px, 1.25vw, 21px);
  --t-annotation: clamp(11px, 0.904vw, 15px);
  --t-nav:  clamp(14px, 1.042vw, 18px);

  /* spacing ramps */
  --section-pad: clamp(56px, 6.95vw, 180px);
  --block-gap:   clamp(24px, 3.060vw, 76px);

  /* shell-relative ramps for pre-broken canonical statement blocks. These are
     bounded by their longest line, so they are sized against the SHELL. */
  --t-stmt-h1:     clamp(34px, calc(var(--shell) * 0.1508), 62px);
  --t-stmt-method: clamp(26px, calc(var(--shell) * 0.1067), 44px);
  --t-stmt-priv:   clamp(18px, calc(var(--shell) * 0.0680), 30px);
  --t-stmt-close:  clamp(22px, calc(var(--shell) * 0.0862), 38px);
  --t-stmt-fs:     clamp(16px, calc(var(--shell) * 0.0630), 28px);
  --t-stmt-co:     clamp(22px, calc(var(--shell) * 0.0920), 38px);

  /* Scrim steps. Derived from the registered surface tokens via color-mix so
     no component ever carries a raw colour value. */
  --pearl-93: color-mix(in srgb, var(--surface-page) 93%, transparent);
  --pearl-88: color-mix(in srgb, var(--surface-page) 88%, transparent);
  --pearl-62: color-mix(in srgb, var(--surface-page) 62%, transparent);
  --pearl-16: color-mix(in srgb, var(--surface-page) 16%, transparent);
  --pearl-00: color-mix(in srgb, var(--surface-page)  0%, transparent);
  --pearl-96: color-mix(in srgb, var(--surface-page) 96%, transparent);
  --pearl-94: color-mix(in srgb, var(--surface-page) 94%, transparent);
  --pearl-91: color-mix(in srgb, var(--surface-page) 91%, transparent);
  --pearl-86: color-mix(in srgb, var(--surface-page) 86%, transparent);
  --pearl-80: color-mix(in srgb, var(--surface-page) 80%, transparent);
  --pearl-73: color-mix(in srgb, var(--surface-page) 73%, transparent);
  --pearl-72: color-mix(in srgb, var(--surface-page) 72%, transparent);
  --pearl-89: color-mix(in srgb, var(--surface-page) 89%, transparent);
  --pearl-27: color-mix(in srgb, var(--surface-page) 27%, transparent);
  --navy-98: color-mix(in srgb, var(--surface-dark) 98%, transparent);
  --navy-96: color-mix(in srgb, var(--surface-dark) 96%, transparent);
  --navy-95: color-mix(in srgb, var(--surface-dark) 95%, transparent);
  --navy-94: color-mix(in srgb, var(--surface-dark) 94%, transparent);
  --navy-86: color-mix(in srgb, var(--surface-dark) 86%, transparent);
  --navy-82: color-mix(in srgb, var(--surface-dark) 82%, transparent);
  --navy-84: color-mix(in srgb, var(--surface-dark) 84%, transparent);
  --navy-72: color-mix(in srgb, var(--surface-dark) 72%, transparent);
  --navy-62: color-mix(in srgb, var(--surface-dark) 62%, transparent);
  --navy-99: color-mix(in srgb, var(--surface-dark) 99%, transparent);
  --navy-92: color-mix(in srgb, var(--surface-dark) 92%, transparent);
  --navy-88: color-mix(in srgb, var(--surface-dark) 88%, transparent);
  --navy-90: color-mix(in srgb, var(--surface-dark) 90%, transparent);
  --navy-78: color-mix(in srgb, var(--surface-dark) 78%, transparent);
  --pearl-45: color-mix(in srgb, var(--surface-page) 45%, transparent);
  --navy-65: color-mix(in srgb, var(--surface-dark) 65%, transparent);
  --navy-53: color-mix(in srgb, var(--surface-dark) 53%, transparent);
  --navy-47: color-mix(in srgb, var(--surface-dark) 47%, transparent);
  --navy-35: color-mix(in srgb, var(--surface-dark) 35%, transparent);
  --navy-18: color-mix(in srgb, var(--surface-dark) 18%, transparent);
  --navy-09: color-mix(in srgb, var(--surface-dark)  9%, transparent);
  --navy-00: color-mix(in srgb, var(--surface-dark)  0%, transparent);
}

/* ------------------------------------------------------------ 3. RESET -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

:where(a, button):focus-visible {
  outline: 2px solid var(--color-accent-accessible);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--surface-dark); color: var(--color-warm-white);
  padding: 12px 20px; font-size: 15px; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------------ 4. SHELL -- */
.shell {
  width: var(--shell);
  max-width: calc(100% - 32px);
  margin-inline: auto;
}

/* The approved measure cap: running body copy never runs to shell width. */
.measure { max-width: var(--measure-max); }

/* ----------------------------------------------------- 5. TYPE CLASSES -- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--color-text-primary);
}
.display--h2 { font-size: var(--t-h2); line-height: 1.12; }

.annotation {
  font-family: var(--font-mono);
  font-size: var(--t-annotation);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.prose {
  font-size: var(--t-body-sm);
  line-height: 1.66;
  color: var(--color-text-secondary);
}
.prose--primary { color: var(--color-text-primary); }

.statement {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

/* ---------------------------------------------------------- 6. ACTIONS -- */
.actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-dark);
  color: var(--color-warm-white);
  font-family: var(--font-text);
  font-size: var(--t-body-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 19px 34px;
  border: 0; border-radius: 8px;
  min-height: 48px;
  transition: background .18s ease, transform .18s ease;
}
.button:hover { background: var(--color-graphite); }
.button:active { transform: translateY(1px); }

/* Editorial route link. ADR-010: the arrow is drawn, never a text glyph :
   all three production webfaces lack U+2192. */
.route {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-body-sm);
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text-primary);
  min-height: 44px;
}
.route::after {
  content: ""; width: 15px; height: 9px; flex: none;
  background: currentColor;
  transition: transform .18s ease;
  -webkit-mask: var(--route-arrow) no-repeat center / contain;
  mask: var(--route-arrow) no-repeat center / contain;
}
:root {
  --route-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.3h12.2L9.1 1.2 9.9.4 14.4 4.5 9.9 8.6l-.8-.8 3.1-3z'/%3E%3C/svg%3E");
}
.route:hover::after { transform: translateX(4px); }
.route--on-dark { color: var(--color-warm-white); }

/* --------------------------------------------------------- 7. MASTHEAD -- */
.masthead {
  position: sticky; inset-inline: 0; top: 0; z-index: 40;
  height: var(--nav-h);
  background: transparent;
  color: var(--color-text-primary);
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--color-teal) 1.5%, transparent) 38%,
    color-mix(in srgb, var(--color-teal) 4.5%, transparent) 68%,
    color-mix(in srgb, var(--color-teal) 10%, transparent) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.masthead__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; height: 100%;
  gap: 24px;
}
.brand {
  position: relative;
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--color-text-primary);
}
.brand__lockup {
  display: block;
  width: clamp(135px, 10.1vw, 155px);
  height: auto;
  max-width: 100%;
}
.masthead[data-surface="dark"] { color: var(--color-warm-white); }
.masthead[data-surface="dark"] .site-nav a,
.masthead[data-surface="dark"] .nav-toggle { color: var(--color-warm-white); }
.masthead[data-surface="dark"] .site-nav a:hover { color: var(--color-teal); }

.site-nav__list {
  display: flex; align-items: center; gap: clamp(26px, 3.3vw, 58px);
}
.site-nav a {
  font-size: var(--t-nav); text-decoration: none;
  color: var(--color-text-primary);
  padding-block: 10px;
}
.site-nav a:hover { color: var(--color-accent-accessible); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 10px; cursor: pointer;
  color: var(--color-text-primary);
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: flex-end;
}
.nav-toggle__bars { display: block; width: 24px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor;
  margin-block: 5px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------- 8. SECTIONS -- */
.section { padding-block: var(--section-pad); }
main[id], section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* A full-bleed environmental band. The picture is positioned, the scrims are
   gradients above it, and the top/bottom feathers dissolve the photograph into
   the surface so no rectangular image boundary is ever visible (§9b). */
.band { position: relative; isolation: isolate; }
.band__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.band__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.band__scrim { position: absolute; inset: 0; z-index: -1; }

/* Structured brand artwork is not a photographic fill. Keep the source
   composition in a bounded, proportional visual layer and let the section's
   registered surface colour carry the field. */
.band--structured .band__media {
  overflow: visible;
}
.band--structured .band__media picture {
  display: block;
  position: absolute;
  top: 50%; right: 0;
  width: min(58vw, 1050px);
  transform: translateY(-50%);
}
.band--structured .band__media img {
  display: block;
  width: 100%; height: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------- 9. HERO -- */
.hero {
  position: relative;
  min-height: var(--hero-h);
  display: flex; align-items: center;
  padding-block: 0;
  background: var(--surface-page);
}
.hero .band__media img { object-position: center 42%; }
.hero .band__media::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 22.7%;
  background: linear-gradient(to bottom,
              var(--pearl-00), var(--surface-page));
}
.hero__scrim {
  background:
    linear-gradient(to bottom,
      var(--pearl-88) 0%, var(--pearl-16) 17%,
      var(--pearl-00) 26%),
    linear-gradient(to right,
      var(--pearl-93) 0%, var(--pearl-62) 55%,
      var(--pearl-00) 100%);
}
.hero__inner { padding-block: calc(var(--hero-h) * .17) var(--section-pad); }
.hero__title { font-size: var(--t-stmt-h1); line-height: 1.08; letter-spacing: -0.028em; }
.hero__lede { margin-top: var(--block-gap); max-width: min(45%, var(--measure-max)); }
.hero__actions { margin-top: calc(var(--block-gap) * 1.227); }

/* ---------------------------------------------------- 10. FOURTH STATE -- */
.fourth-state {
  position: relative;
  background: var(--surface-dark);
  color: var(--color-warm-white);
  overflow: hidden;
}
.fourth-state__scrim {
  z-index: 0;
  background:
    linear-gradient(to bottom,
      var(--surface-dark) 0%, var(--navy-00) 12%,
      var(--navy-00) 88%, var(--surface-dark) 100%),
    linear-gradient(to right,
      var(--navy-98) 0%, var(--navy-92) 42%,
      var(--navy-53) 68%, var(--navy-18) 100%);
}
.fourth-state .display, .fourth-state .statement { color: var(--color-warm-white); }
.fourth-state .prose { color: var(--color-warm-white); }
.fourth-state .annotation { color: var(--color-text-secondary-on-dark); }

.fs__composition { position: relative; z-index: 1; }
.fs__lead { font-size: clamp(34px, 3.15vw, 62px); line-height: 1.10; }
.fs__body { margin-top: clamp(14px, 1.35vw, 22px); }
.fs__stage { position: relative; }
.fs__artwork, .fs__artwork-base, .fs__artwork img { display: block; }
.fs__artwork { isolation: isolate; }
.fs__artwork img { width: 100%; height: auto; object-fit: contain; }
.fs__artwork-base {
  position: relative; z-index: 0;
}
.fs__planes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fs__plane {
  position: absolute; inset: 0;
  transition: transform .3s cubic-bezier(.22,.72,.18,1),
              filter .3s ease;
  will-change: transform;
}
.states { list-style: none; }
.state { position: relative; outline: none; }
.state .annotation,
.state .states__name,
.state .states__desc {
  transition: color .3s ease;
}
.state:focus-visible {
  outline: 1px solid var(--color-teal);
  outline-offset: 8px;
}
.states__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 1.3vw, 25px);
  letter-spacing: -0.012em; line-height: 1.2;
  margin-top: 3px;
}
.states__desc { font-size: clamp(13px, .82vw, 15px); line-height: 1.42; margin-top: 4px; }
.fourth-state[data-active="01"] .fs__plane--01,
.fourth-state[data-active="02"] .fs__plane--02 {
  filter: brightness(1.16) saturate(1.05);
  transform: translateY(-5px);
}
.fourth-state[data-active="03"] .fs__plane--03 {
  filter: brightness(1.16) saturate(1.05);
  transform: translateY(-6px);
}
.fourth-state[data-active="04"] .fs__plane--04 {
  filter: brightness(1.13) saturate(1.08);
  transform: translateY(-8px);
}
.fourth-state[data-active="01"] .state--established :is(.annotation, .states__name),
.fourth-state[data-active="02"] .state--refined :is(.annotation, .states__name),
.fourth-state[data-active="03"] .state--augmented :is(.annotation, .states__name),
.fourth-state[data-active="04"] .state--beyond :is(.annotation, .states__name) {
  color: var(--color-teal);
}
.fourth-state[data-active="01"] .state--established .states__desc,
.fourth-state[data-active="02"] .state--refined .states__desc,
.fourth-state[data-active="03"] .state--augmented .states__desc,
.fourth-state[data-active="04"] .state--beyond .states__desc {
  color: var(--color-warm-white);
}
.fourth-state[data-active="01"] .state--established::after,
.fourth-state[data-active="02"] .state--refined::after,
.fourth-state[data-active="03"] .state--augmented::after,
.fourth-state[data-active="04"] .state--beyond::after {
  background: var(--color-teal);
  transform: scaleX(1.04);
}
.fs__qualify { max-width: 47ch; }
.fs__close {
  margin-top: clamp(18px, 1.55vw, 26px);
  font-size: var(--t-stmt-fs); line-height: 1.34;
}
.fs__route { margin-top: clamp(14px, 1.25vw, 22px); }

/* --------------------------------------------------------- 11. PRODUCT -- */
.product__name {
  font-size: clamp(38px, 4.45vw, 84px); line-height: 1.1;
  letter-spacing: -0.03em; margin-top: 18px;
}
.product__prop {
  font-size: clamp(22px, 2.22vw, 44px); line-height: 1.3;
  letter-spacing: -0.016em; margin-top: 16px; max-width: 56%;
}
.product__body { margin-top: var(--block-gap); }

/* A major premium product surface: permitted at 18–28px radius by ADR-013.
   This is NOT a card: it is the product presentation surface. */
.product__figure {
  position: relative;
  margin: calc(var(--block-gap) * 1.5) auto 0;
  width: 92%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 66px var(--navy-09);
}
.product__figure picture,
.product__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.product__concept {
  position: absolute;
  right: clamp(10px, 1vw, 16px);
  bottom: clamp(10px, 1vw, 16px);
  padding: 7px 9px;
  border-radius: 4px;
  background: var(--surface-elevated);
  color: var(--color-text-secondary);
  font-size: max(11px, var(--t-annotation));
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.product__meta {
  margin-top: calc(var(--section-pad) * 1.32);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.product__capability { letter-spacing: 0.06em; text-transform: none; }

/* ---------------------------------------------------------- 12. METHOD -- */
/* A complete five-stage progression, integrated with a purpose-built
   architectural visual. The steps remain content, not cards. */
.method {
  position: relative;
  overflow: hidden;
  background: var(--surface-page);
}
.method > .shell { position: relative; z-index: 1; }
.method__visual {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.method__visual picture {
  display: block;
  position: absolute; top: 0; right: 0;
  width: min(72vw, 1300px);
}
.method__visual img {
  display: block; width: 100%; height: auto;
  object-fit: contain;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 68% at 74% 42%, black 0%, black 48%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 78% 68% at 74% 42%, black 0%, black 48%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 68%, transparent 100%);
  mask-composite: intersect;
}
.method__head {
  max-width: calc(var(--shell) * .52);
  font-size: calc(var(--t-h2) * .99); line-height: 1.12;
}
.method__list {
  margin-top: clamp(110px, 11vw, 180px);
  /* Step markers are the visible 01–05 annotations in the markup; suppress the
     <ol> default "1." list markers so each step is numbered exactly once. */
  list-style: none;
}
.method__item { min-width: 0; }
.method__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(25px, 2.05vw, 38px);
  letter-spacing: -0.02em; line-height: 1.1;
  margin-top: 6px;
}
.method__desc {
  font-size: clamp(16px, .98vw, 17px); line-height: 1.5; margin-top: 10px;
  max-width: 28ch;
  color: var(--color-text-primary);
}
.method__item > .annotation {
  font-size: clamp(12px, 1vw, 16px);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------- 13. INTELLIGENCE -- */
.intelligence { position: relative; }
.intelligence .structured-artwork picture { width: min(70vw, 1400px); }
.intelligence .structured-artwork img {
  -webkit-mask-image: radial-gradient(ellipse at 72% 50%, black 0%, black 52%, transparent 80%);
  mask-image: radial-gradient(ellipse at 72% 50%, black 0%, black 52%, transparent 80%);
}
.intelligence .band__media img { object-position: center 50%; }
.intelligence__scrim {
  background:
    linear-gradient(to bottom,
      var(--surface-page) 0%, var(--pearl-00) 19%,
      var(--pearl-00) 81%, var(--surface-page) 100%),
    linear-gradient(to right,
      var(--pearl-96) 0%, var(--pearl-00) 52%);
}
.intelligence__head {
  font-size: calc(var(--t-h2) * 1.24); line-height: 1.10;
  letter-spacing: -0.026em;
}
.intelligence__body { margin-top: calc(var(--block-gap) * 1.05); }
.intelligence__body p + p { margin-top: calc(var(--block-gap) * .62); }
.intelligence__close {
  margin-top: var(--block-gap);
  font-size: calc(var(--t-h2) * .62); line-height: 1.34;
}

/* ------------------------------------------ 14. PRIVACY + COMPANY FIELD -- */
/* One light architectural environment joins two semantic sections. The
   artwork remains atmospheric and its edge dissolves into Premium Pearl. */
.trust-sequence {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--surface-page);
}
.trust-sequence__media,
.trust-sequence__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.trust-sequence__media { z-index: -2; }
.trust-sequence__media picture,
.trust-sequence__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.trust-sequence__media img {
  object-fit: cover;
  object-position: 64% center;
  filter: saturate(.76) contrast(.94);
}
.trust-sequence__wash {
  z-index: -1;
  background:
    linear-gradient(to right,
      var(--surface-page) 0%, var(--pearl-96) 34%,
      var(--pearl-72) 62%, var(--pearl-27) 100%),
    linear-gradient(to bottom,
      var(--surface-page) 0%, var(--pearl-00) 12%,
      var(--pearl-00) 82%, var(--navy-18) 100%);
}
.trust-sequence .section { position: relative; z-index: 1; }

/* Open and cardless. No container, shield, icon grid, or panel. */
.privacy {
  padding-block: clamp(64px, 6.2vw, 108px) clamp(48px, 4.5vw, 78px);
}
.privacy__statement {
  font-size: calc(var(--t-h2) * 1.12); line-height: 1.12;
  letter-spacing: -0.026em;
}
.privacy__cols {
  margin-top: clamp(28px, 3vw, 46px);
  display: grid; gap: clamp(22px, 2.6vw, 44px);
}
.privacy__cols .prose {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.58;
  color: var(--color-text-primary);
}
.privacy__foot {
  margin-top: clamp(26px, 2.4vw, 38px);
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 48px);
  flex-wrap: wrap;
}
.privacy__mark { font-size: calc(var(--t-h2) * .60); }

/* --------------------------------------------------------- 15. COMPANY -- */
.company {
  position: relative;
  padding-block: clamp(50px, 4.8vw, 82px) clamp(74px, 6vw, 108px);
  border-top: 1px solid var(--color-rule);
}
.company__head {
  font-size: calc(var(--t-h2) * 1.02); line-height: 1.14;
  letter-spacing: -0.022em;
}
.company__body {
  margin-top: clamp(24px, 2.4vw, 36px);
  max-width: var(--measure-max);
}
.company__route { margin-top: clamp(22px, 2vw, 30px); }
/* The approved transition: a restrained surface shift, not a container. The
   pearl cools toward the closing band so Company hands over to it. */
.company::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: clamp(44px, 5vw, 84px);
  pointer-events: none;
  background: linear-gradient(to bottom,
              var(--navy-00), var(--navy-18));
}

/* ----------------------------------------------------------- 16. CLOSE -- */
.close {
  position: relative;
  background: var(--surface-dark);
  color: var(--color-warm-white);
}
.close .structured-artwork picture { width: min(68vw, 1360px); }
.close .structured-artwork img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
}
.close .band__media img { object-position: center 72%; }
.close__scrim {
  background:
    /* The closing statement sits in the upper third. That region is held dark
       so the text reads; the band then opens to the artwork below, which is
       where the approved render puts the reflective floor. */
    linear-gradient(to bottom,
      var(--surface-dark) 0%, var(--navy-90) 30%,
      var(--navy-00) 58%, var(--navy-00) 82%,
      var(--surface-dark) 100%),
    linear-gradient(to right,
      var(--navy-95) 0%, var(--navy-35) 100%);
}
.close__statement {
  font-size: var(--t-stmt-close); line-height: 1.26;
  color: var(--color-warm-white);
}
.close__brandline { margin-top: clamp(16px, 2vh, 24px); color: var(--color-warm-white); }
.close__actions { margin-top: clamp(14px, 1.8vh, 22px); }

/* ---------------------------------------------------------- 17. FOOTER -- */
.footer {
  background: transparent; color: var(--color-warm-white);
  padding: 0;
  margin-top: clamp(42px, 10vw, 64px);
}
.footer__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
}
.footer__head {
  color: var(--color-text-secondary-on-dark);
  margin-bottom: 8px;
}
.footer__links li + li { margin-top: 2px; }
.footer__links a {
  text-decoration: none; font-size: clamp(14px, 1vw, 16px);
  display: inline-block; padding-block: 2px;
}
.footer__links a:hover { color: var(--color-teal); }
.footer__rule {
  border: 0; border-top: 1px solid var(--color-rule-on-dark);
  margin: clamp(18px, 2.5vh, 28px) 0 0;
}
.footer__meta {
  margin-top: 12px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--color-text-secondary-on-dark);
}
.footer__meta span, .footer__meta a {
  font-family: var(--font-mono); font-size: var(--t-annotation);
  letter-spacing: 0.12em; text-decoration: none;
}

/* =========================================================== 18. MOBILE = */
/* Mobile is art-directed, not a shrunken desktop. */
@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .nav-toggle { display: none; }
  .js-nav .nav-toggle { display: inline-flex; }

  /* No-JS: the panel stays in flow and the links remain reachable. Only when
     site.js has taken over (html.js-nav) does it become a disclosure. */
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; }

  .js-nav .site-nav {
    position: absolute; inset-inline: 0; top: 100%; z-index: 30;
    background: var(--surface-page); color: var(--color-text-primary);
    padding: 14px 16px 20px;
    border-bottom: 1px solid var(--color-divider);
    transform: translateY(-8px);
    transition: transform .28s ease;
    visibility: hidden;
    opacity: 0;
  }
  .js-nav .site-nav[data-open="true"] {
    transform: translateY(0); visibility: visible; opacity: 1;
  }
  .js-nav .site-nav a { color: var(--color-text-primary); }
  .js-nav .masthead[data-surface="dark"] .site-nav a {
    color: var(--color-text-primary);
  }
  .site-nav a { font-size: 18px; padding-block: 11px; }
  .brand__lockup { width: clamp(105px, 28vw, 120px); }

  .hero .band__media img { object-position: 68% 30%; }
  .hero__scrim {
    background: linear-gradient(to bottom,
      var(--pearl-89) 0%, var(--pearl-62) 58%, var(--pearl-27) 100%);
  }
  .hero__lede { max-width: none; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 26px; }
  .hero__actions .button { width: 100%; }
  .hero__actions .route { justify-content: flex-start; }

  .fourth-state__scrim {
    background: linear-gradient(to bottom,
      var(--navy-82) 0%, var(--navy-65) 55%, var(--navy-47) 100%);
  }
  .fourth-state { padding-block: clamp(52px, 12vw, 74px); }
  .fs__stage { margin-top: clamp(24px, 7vw, 38px); }
  .fs__artwork {
    position: relative;
    aspect-ratio: 1.6;
    overflow: hidden;
  }
  .fs__artwork-base img {
    width: auto; max-width: none; height: 100%;
    transform: translateX(-18%);
  }
  .fs__planes { display: none; }
  .states {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    margin-top: 26px;
  }
  .state--beyond { order: 4; }
  .fs__conclusion { margin-top: clamp(30px, 8vw, 44px); }
  .fs__qualify { max-width: 36ch; }
  .intelligence__scrim {
    background: linear-gradient(to bottom,
      var(--pearl-91) 0%, var(--pearl-62) 55%, var(--pearl-27) 100%);
  }
  .close__scrim {
    background: linear-gradient(to bottom,
      var(--navy-84) 0%, var(--navy-65) 55%, var(--navy-35) 100%);
  }

  /* On small screens the artwork follows the reading flow visually: it is
     still a complete, proportional composition rather than a giant crop. */
  .band--structured .band__media picture {
    top: auto; right: 0; bottom: clamp(24px, 8vw, 72px);
    width: min(calc(100vw - 32px), 560px);
    transform: none;
  }

  .product__prop { max-width: none; }
  .product__figure { width: 100%; border-radius: 18px; }
  .product__meta { margin-top: calc(var(--section-pad) * 1.85); display: block; }
  .product__meta .route { margin-top: 28px; }

  .method__head { font-size: var(--t-stmt-method); }
  .method__visual picture {
    top: clamp(145px, 36vw, 190px); right: -12%;
    width: min(112vw, 760px);
  }
  .method__list { margin-top: clamp(230px, 67vw, 320px); }
  .method__desc { max-width: 34ch; }
  .trust-sequence__media img { object-position: 72% center; }
  .trust-sequence__wash {
    background:
      linear-gradient(to bottom,
        var(--pearl-96) 0%, var(--pearl-86) 52%, var(--pearl-62) 100%),
      linear-gradient(to right,
        var(--surface-page) 0%, var(--pearl-73) 100%);
  }
  .privacy { padding-block: clamp(54px, 13vw, 72px) clamp(42px, 10vw, 58px); }
  .privacy__cols { gap: 18px; }
  .privacy__statement { font-size: var(--t-stmt-priv); }
  .privacy__foot { align-items: flex-start; flex-direction: column; gap: 14px; }
  .company { padding-block: clamp(44px, 10vw, 60px) clamp(70px, 16vw, 94px); }
  .company__head { font-size: var(--t-stmt-co); }
  .fs__close { font-size: var(--t-stmt-fs); }
}

/* ========================================================== 19. DESKTOP = */
@media (min-width: 900px) {
  .hero__title { font-size: var(--t-h1); }

  .fourth-state { padding-block: clamp(38px, 3.3vw, 60px); }
  .fs__composition { height: clamp(600px, calc(100vh - 100px), 760px); }
  .fs__intro {
    position: absolute; top: 0; left: 0; z-index: 3;
    width: min(48%, 650px);
  }
  .fs__stage { position: absolute; inset: 0; }
  .fs__artwork {
    position: absolute;
    top: 13%; left: 29%;
    width: min(74vw, 1390px);
    pointer-events: none;
  }
  .fs__artwork-base img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 16%, black 100%);
  }
  .states { position: absolute; inset: 0; }
  .state {
    position: absolute;
    z-index: 3;
    width: clamp(205px, 17vw, 255px);
  }
  .state::after {
    content: "";
    position: absolute;
    top: 20px;
    height: 1px;
    background: var(--color-rule-on-dark);
  }
  .state--established { left: 44%; top: 79%; }
  .state--refined { left: 44%; top: 61%; }
  .state--augmented { left: 44%; top: 43%; }
  .state--beyond { left: 44%; top: 25%; }
  .state--established::after,
  .state--refined::after,
  .state--augmented::after,
  .state--beyond::after {
    left: calc(100% + 10px);
    width: clamp(58px, 6vw, 108px);
    transform-origin: left center;
  }
  .fs__conclusion {
    position: absolute; left: 0; bottom: 4%; z-index: 3;
    width: min(43%, 560px);
  }

  .method__list {
    display: grid;
    grid-template-columns: 1.08fr .96fr .96fr .96fr 1.14fr;
    gap: clamp(14px, 1.5vw, 28px);
  }
  .method__item {
    transform: translateY(calc(var(--step, 0) * 10px));
  }
  .method__item + .method__item { margin-top: 0; }

  .intelligence__head { max-width: calc(var(--shell) * .48); }
  .intelligence__body { max-width: calc(var(--shell) * .40); }

  .privacy__statement { max-width: calc(var(--shell) * .78); }
  .privacy__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc(var(--shell) * .74);
  }

  .company__head { max-width: calc(var(--shell) * .78); }
  /* The body now belongs to the headline instead of floating at the far edge. */
  .company__body, .company__route {
    margin-left: 0;
    max-width: min(var(--measure-max), calc(var(--shell) * .52));
  }

  .close__statement, .close__brandline { max-width: calc(var(--shell) * .60); }
  .close__actions { flex-direction: row; }

  .close.section {
    min-height: calc(100vh - var(--nav-h));
    padding-block: clamp(36px, 5vh, 58px);
    display: flex;
  }
  .close__layout {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .close__message { max-width: 48%; }
  .close__statement { font-size: clamp(28px, 2.5vw, 36px); }
  .close__actions { gap: clamp(22px, 2.4vw, 38px); }
  .footer { margin-top: auto; }
  .footer__cols {
    grid-template-columns: 1.18fr 1.08fr .82fr .72fr;
    gap: clamp(30px, 4vw, 64px);
    margin-left: 44%;
  }
}

@media (min-width: 900px) {
  .method__item:nth-child(1) { --step: 0; }
  .method__item:nth-child(2) { --step: 1; }
  .method__item:nth-child(3) { --step: 2; }
  .method__item:nth-child(4) { --step: 2.7; }
  .method__item:nth-child(5) { --step: 3.4; }
}

/* Method steps stack without drift on mobile. */
@media (max-width: 899px) {
  .method__item { transform: none; }
  .method__item + .method__item { margin-top: 34px; }
}

/* The absolute desktop composition needs enough horizontal room for three
   independent columns. At compact desktop widths (and laptop zoom levels
   that produce the same layout viewport), keep the artwork and annotations
   in flow so no state can enter another state's annotation zone. */
@media (min-width: 900px) and (max-width: 1199px) {
  .fourth-state { padding-block: clamp(52px, 7vw, 72px); }
  .fs__composition { height: auto; }
  .fs__intro,
  .fs__stage,
  .fs__artwork,
  .state,
  .fs__conclusion {
    position: relative;
    inset: auto;
  }
  .fs__intro,
  .fs__conclusion { width: min(100%, 650px); }
  .fs__stage { margin-top: 38px; }
  .fs__artwork {
    left: auto;
    top: auto;
    width: min(100%, 920px);
    margin-left: auto;
  }
  .fs__artwork-base img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .states {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 44px;
    margin-top: 30px;
  }
  .state {
    width: auto;
    min-width: 0;
  }
  .state::after { content: none; }
  .state--beyond { order: 4; }
  .fs__conclusion { margin-top: 44px; }
}

/* ================================================== 20. USER PREFERENCES = */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .fourth-state .fs__artwork-base { opacity: 1 !important; }
  .js .fourth-state .fs__plane { transform: none !important; }
}

@media (prefers-contrast: more) {
  .hero__scrim { background: var(--pearl-94); }
  .intelligence__scrim { background: var(--pearl-94); }
  .fourth-state__scrim { background: var(--navy-94); }
  .close__scrim { background: var(--navy-94); }
}

@media print {
  .masthead, .band__media, .band__scrim { display: none !important; }
  body { background: var(--surface-elevated); color: var(--color-text-primary); }
}