/* ============================================================
   NORDIC TALENT — v6 draft
   Standalone. Does not touch main.css or v5.css.
   Only locked value is the logo teal. Everything else is new.

   THREE RULES THIS FILE KEEPS
   1. Content is visible by default. A rule may only hide something
      when it is gated behind .js-motion, which JS adds.
   2. Responsive from the first line. Every component carries its own
      media queries directly beneath it. There is no responsive tail.
   3. Banned constructs:
        - 100vw anywhere (it includes the scrollbar)
        - overflow-x: hidden on html/body (it kills position: sticky)
        - dvh on anything scroll-driven (it relayouts on the iOS URL bar)
        - a transition on transform/translate/scale that JS also writes
        - a clamp() middle term without a rem component (breaks text zoom)
   ============================================================ */

/* ---------- 01. scrub channels ---------- */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- 02. fonts ---------- */
/* The display serif carries the LCP headline, so it is self-hosted and
   preloaded. font-display:optional means a slow network gets the fallback
   for the whole page rather than a 112px reflow halfway through reading. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400;
  font-display: optional;
  src: url("../assets/fonts/instrument-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400;
  font-display: optional;
  src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
/* metric-matched stand-in so the optional swap is not a visible jump */
@font-face {
  font-family: "Serif fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 94%; ascent-override: 90%; descent-override: 22%;
}

/* ---------- 03. tokens ---------- */
:root {
  /* locked identity, split into steps by where it is used.
     #128577 as 11px text on warm paper is 4.02:1 and fails, so teal-as-text
     gets its own darker step. */
  --nt:       #128577;   /* surfaces and display-size text */
  --nt-text:  #0C6659;   /* teal as small text on paper. 6.86:1 / 6.10:1 */
  --nt-deep:  #0B5F55;   /* hover on filled surfaces */
  --nt-lift:  #16A392;   /* teal on ink. 6.08:1 */
  --nt-tint:  #E7F1EF;

  /* Exceptional status only, per DESIGN.md: never decoration. One word on
     this whole page carries it. */
  --flag:     #C22D14;
  --flag-lift:#FF7A5E;

  /* grounds. Three only: paper, a warm paper for the last act, and ink.
     No grey. Full-bleed imagery does the separating between paper sections. */
  --paper:      #FFFFFF;
  --paper-warm: #F6F1E9;
  --ink:        #0D1011;

  /* ink on paper, warm neutral rather than blue-grey */
  --on:      #12100E;
  --on-dim:  #57544F;
  --on-mute: #6E6A64;    /* was #8A8681, which was 3.62:1 on white */
  --hair:    #E6E2DB;
  --surface: #F7F4EF;

  /* contextual signal roles, re-declared on ink */
  --key:     var(--nt-text);   /* dossier keys and section marks */
  --accent:  var(--nt);        /* the payoff clause of a two-tone heading */
  --flag-on: var(--flag);

  /* type */
  --sans:  "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Serif fallback", Georgia, serif;
  --mono:  "Fragment Mono", ui-monospace, Menlo, monospace;

  /* every middle term carries rem so text-only zoom still scales */
  --fs-display: clamp(2.5rem,  1.15rem + 6vw,   7rem);
  --fs-h2:      clamp(1.75rem, 1.05rem + 3.1vw, 3.5rem);
  --fs-h3:      clamp(1.15rem, 1.02rem + .62vw, 1.5rem);
  --fs-lede:    clamp(1.0625rem, 1rem + .5vw,   1.375rem);
  --fs-body:    clamp(1rem,    .97rem + .15vw,  1.0625rem);
  --fs-small:   .9375rem;
  --fs-meta:    .6875rem;

  /* space */
  --gutter:    clamp(1.25rem, .65rem + 2.4vw, 2.75rem);
  --pad-block: clamp(3.5rem,  1.9rem + 6.2vw, 8.5rem);
  --sp-1: .5rem;  --sp-2: .75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;   --sp-6: 3rem;   --sp-7: 4.5rem;

  /* geometry */
  --wrap: 1480px;
  --read: 62ch;
  --nav-h: 62px;
  /* Two corner steps, and nothing else. Controls take the tight corner,
     larger panels take the wider one, because a big surface needs a bigger
     radius to read as the same curvature. Images are never rounded. */
  --r-btn:     4px;       /* buttons, inputs, the menu toggle, the skip link */
  --r-surface: 10px;      /* the nav bar, the form card, the error summary */
  --r-pill:  999px;       /* read-only state chips only, never a control */
  --r-card:    4px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast: 180ms; --d-mid: 320ms; --d-slow: 720ms;
}

/* ---------- 04. reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { min-width: 0; }                    /* flex and grid children default to min-content */

html {
  /* clip, never hidden: hidden on the root silently disables position:sticky */
  overflow-x: clip;
  background: var(--paper);
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
/* class-gated, not media-gated: ?noanim has to reach this too, or the QA
   switch and the OS setting render differently */
html.js-motion:not(.is-tabbing) { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--on);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;               /* a faux italic must fail visibly, not ship */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* <picture> is a real box: left as a grid or flex item it eats a track (it
   was consuming the hero's 1fr row) and it breaks height:100% on the img
   inside it. display:contents makes the img the layout box everywhere. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
/* any component that sets its own display outranks the hidden attribute,
   so state it once and loudly */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--sp-3); top: -4rem; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--ink); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--r-btn);
  transition: top var(--d-fast) var(--ease);
}
.skip:focus { top: calc(var(--nav-h) + var(--sp-3)); }

/* ---------- 05. layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec  { padding-block: var(--pad-block); position: relative; }
/* a section that ends on a full-bleed image must not leave a band of
   ground under it */
.sec--flush { padding-bottom: 0; }
/* vertical rhythm: a closing call gets more air, a statement band gets less */
.sec--tall  { padding-block: calc(var(--pad-block) * 1.35); }
.sec--tight { padding-block: calc(var(--pad-block) * .72); }
.read { max-width: var(--read); }

/* three grounds. Nothing else tints a section. */
.sec--paper { background: var(--paper); }
.sec--warm  { background: var(--paper-warm); }
.sec--ink  {
  background: var(--ink); color: #EFEDE9;
  --on: #F2EFE9; --on-dim: rgba(242,239,233,.74); --on-mute: rgba(242,239,233,.6);
  --hair: rgba(242,239,233,.16); --surface: rgba(242,239,233,.05);
  --key: var(--nt-lift); --accent: var(--nt-lift); --flag-on: var(--flag-lift);
}

/* ---------- 06. type utilities ---------- */
.mono {
  font-family: var(--mono); font-size: var(--fs-meta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-mute);
}
/* the mark that opens a section is a key, not a caption */
.head > .mono, .duo__copy > .mono, .join__say > .mono, .sec__k { color: var(--key); }
.serif {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -.01em;
}
.serif em { font-style: italic; }
.h2 {
  font-size: var(--fs-h2); font-weight: 640;
  line-height: 1.06; letter-spacing: -.028em; text-wrap: balance;
  overflow-wrap: break-word;
}
.h2 span { display: block; color: var(--accent); }
.h3 { font-size: var(--fs-h3); font-weight: 620; line-height: 1.2; letter-spacing: -.018em; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--on-dim); }
.body { color: var(--on-dim); overflow-wrap: break-word; }

/* ---------- 07. nav ---------- */
/* The un-stuck bar already carries its own translucent ground. v5's is fully
   transparent, which would be illegible here the moment the page ground
   changes underneath it, and with JS off it never gets a background at all. */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; padding: 10px var(--gutter); }
.nav__bar {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-surface);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(18,24,30,.34);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: max-width var(--d-slow) var(--ease),
              background var(--d-mid) var(--ease),
              border-color var(--d-mid) var(--ease),
              box-shadow var(--d-mid) var(--ease);
}
.nav__brand { justify-self: start; display: flex; align-items: center; min-height: 44px; }
.nav__brand img { height: 30px; width: auto; max-width: none; flex: none; }
.nav__brand .is-dark { display: none; }
.nav__links { display: none; justify-self: center; }
.nav__links a {
  font-size: var(--fs-small); font-weight: 500; color: rgba(255,255,255,.8);
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem;
  transition: color var(--d-fast) var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: var(--sp-2); }

/* condensed: lands on light ground, so the whole bar inverts */
.nav.is-stuck .nav__bar {
  max-width: 860px;
  background: rgba(255,255,255,.86);
  border-color: var(--hair);
  box-shadow: 0 12px 34px -20px rgba(13,16,17,.42);
}
.nav.is-stuck .nav__brand .is-light { display: none; }
.nav.is-stuck .nav__brand .is-dark  { display: block; }
.nav.is-stuck .nav__links a { color: var(--on-dim); }
/* the bar inverts, so a white pill on it would vanish */
.nav.is-stuck .nav__right .btn { background: var(--ink); color: #fff; }
.nav.is-stuck .nav__right .btn:hover { background: #000; }
.nav.is-stuck .nav__links a:hover { color: var(--on); }

.nav__toggle {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; border-radius: var(--r-btn);
}
.nav__toggle span {
  display: block; width: 17px; height: 1.5px; background: #fff;
  transition: background var(--d-mid) var(--ease);
}
.nav__toggle span + span { margin-top: 4px; }
.nav.is-stuck .nav__toggle span { background: var(--on); }

.nav__mobile {
  margin-top: 8px; padding: var(--sp-3);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: var(--r-surface);
  display: grid; gap: 2px;
}
.nav__mobile a { display: flex; align-items: center; min-height: 48px; padding: .5rem .6rem; font-weight: 520; color: var(--on); }
.nav__mobile a[aria-current] { color: var(--nt-deep); }

/* the full label does not fit beside a menu button on a phone */
.nav__cta-long { display: none; }
@media (min-width: 56rem) {
  :root { --nav-h: 68px; }
  /* equal outer tracks so the links sit on the true page centre */
  .nav__bar { grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); }
  .nav__links { display: flex; gap: clamp(1.1rem, 2vw, 1.9rem); }
  .nav__toggle, .nav__mobile { display: none; }
  .nav__cta-long { display: inline; }
  .nav__cta-short { display: none; }
}

/* ---------- 08. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-small); font-weight: 560; line-height: 1;
  /* shorter, with more horizontal air than vertical: a wide shallow button
     reads as considered, a tall round one reads as a toggle */
  min-height: 44px; padding: .7rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--r-btn);
  cursor: pointer; text-align: center;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}
/* press feedback uses the independent scale property, never transform:
   a transition on transform swallows a value JS commits to it */
.btn:active { scale: .985; }

.btn--nt    { background: var(--nt); color: #fff; }
.btn--nt:hover { background: var(--nt-deep); }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #F0F1F2; }
.btn--line  { border-color: var(--hair); color: var(--on); }
.btn--line:hover { border-color: var(--on-mute); }
/* a destination that does not exist yet is stated, never faked as a link */
.btn--pending {
  border: 1px dashed var(--on-mute); color: var(--on-mute);
  font-family: var(--mono); font-size: var(--fs-meta);
  letter-spacing: .1em; text-transform: uppercase; cursor: default;
}
.btn--glass { background: rgba(7,13,24,.44); border-color: rgba(255,255,255,.58); color: #fff; }
.btn--glass:hover { background: rgba(7,13,24,.62); border-color: #fff; }
.btn--lg    { font-size: .9875rem; min-height: 48px; padding: .82rem 1.75rem; }

/* The arrow is a glyph with air around it, not a chip. A badge inside the
   button is a 2025 SaaS-landing convention, and the fill already separates
   primary from secondary without one. */
.btn__badge {
  font-size: 1.05em; line-height: 1;
  transition: translate var(--d-fast) var(--ease);
}
.btn:hover .btn__badge { translate: 4px 0; }
.btn:hover .btn__badge { translate: 3px 0; }

/* ---------- 09. hero ---------- */
.hero {
  position: relative; isolation: isolate;
  overflow: clip;                      /* the scaled art must not widen the document */
  min-height: max(34rem, 100svh);
  display: grid; grid-template-rows: 1fr auto;
  background: #0B1A2B;                 /* ground behind the art, never a flash of white */
}
.hero__art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* the scrim carries the contrast floor, not the artwork */
  background:
    linear-gradient(180deg,
      rgba(6,12,24,.30) 0%,
      rgba(6,12,24,.42) 38%,
      rgba(6,12,24,.30) 66%,
      rgba(6,12,24,.20) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  isolation: isolate;
  grid-row: 1; align-self: start;
  width: 100%; max-width: 1040px; margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(1.5rem, 9svh, 6.5rem)) var(--gutter) var(--sp-5);
  text-align: center; color: #fff;
  display: grid; justify-items: center; gap: var(--sp-4);
}
.hero__inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 46%; translate: -50% -50%;
  width: min(150%, 1500px); height: 165%;
  background: radial-gradient(56% 52% at 50% 50%,
    rgba(4,9,18,.66), rgba(4,9,18,.40) 52%, rgba(4,9,18,.14) 72%, transparent 84%);
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.08; letter-spacing: -.012em;
  text-wrap: balance; overflow-wrap: break-word;
  text-shadow: 0 2px 30px rgba(5,10,18,.4);
}
.hero__title em { font-style: italic; }
.hero__lede {
  font-size: var(--fs-lede); line-height: 1.5;
  color: rgba(255,255,255,.92); max-width: 36rem;
  text-shadow: 0 1px 18px rgba(5,10,18,.5);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.hero__foot {
  grid-row: 2;
  position: relative; z-index: 2;
  /* Its own gradient: the main scrim is tuned for the copy block, and a
     bright image (the contact hero is a lit interior) pushes these marks
     under the floor. */
  padding: var(--sp-6) var(--gutter) var(--sp-4);
  background: linear-gradient(to top, rgba(6,12,24,.76), rgba(6,12,24,.34) 58%, transparent);
  display: flex; justify-content: space-between; gap: var(--sp-3);
  color: rgba(255,255,255,.9);
}
.hero__foot .mono { color: inherit; }
.hero__foot span:last-child { text-align: right; }
@media (max-width: 39.99rem) {
  /* side by side they each wrap to two lines and read as one muddle */
  .hero__foot { flex-direction: column; gap: 2px; }
  .hero__foot span:last-child { text-align: left; }
}

@media (min-width: 56rem) {
  .hero__title { line-height: 1.02; letter-spacing: -.022em; }
  .hero__inner { gap: var(--sp-5); }
}
@media (max-width: 55.99rem) {
  .only-wide { display: none; }   /* a hard <br> orphans words on a phone */
}

/* subpage heroes: the homepage owns the full screen, the rest do not */
.hero--page  { min-height: max(30rem, 76svh); }
.hero--short { min-height: max(24rem, 58svh); }
.hero--page .hero__inner, .hero--short .hero__inner {
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 6svh, 4rem));
}

/* ---------- 10. what we do ---------- */
/* This is the plain statement of the business, directly under a hero that is
   deliberately evocative. It carries real weight so a first-time visitor is
   never more than one screen from a sentence that says what this company is. */
.ledger { border-bottom: 1px solid var(--hair); padding-block: calc(var(--pad-block) * .8); }
.ledger__grid { display: grid; gap: var(--sp-5); }
.ledger__say {
  margin-top: var(--sp-3);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  font-weight: 560; line-height: 1.3; letter-spacing: -.018em;
  max-width: 26ch; text-wrap: balance;
}
.ledger__say span { color: var(--accent); }
.facts { display: grid; gap: var(--sp-3); align-content: start; }
.facts div { display: grid; gap: .3rem; padding-top: var(--sp-2); border-top: 1px solid var(--hair); }
.ledger__grid > :first-child { padding-top: calc(var(--fs-meta) * .4); }
.facts dt { color: var(--key); }
.facts dd { color: var(--on-dim); font-family: var(--sans); font-size: var(--fs-small);
            letter-spacing: 0; text-transform: none; }
@media (min-width: 56rem) {
  .ledger__grid { grid-template-columns: 1.15fr 1fr; align-items: start; gap: var(--sp-7); }
  .ledger__say { max-width: 24ch; }
  .facts { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
}
/* The subpages carry longer prose here, so the homepage's 18ch display
   measure would run it into a tall skinny column. Quieter, wider, shorter. */
.ledger--plain { padding-block: var(--sp-6); }
.ledger--plain .ledger__say {
  margin-top: 0;
  font-size: var(--fs-lede); font-weight: 400; line-height: 1.5;
  letter-spacing: 0; max-width: 46ch;
}
.ledger__cells { display: grid; gap: var(--sp-2); align-content: start; }
.ledger__cells span { color: var(--on-mute); }
@media (min-width: 56rem) {
  .ledger--plain .ledger__grid { grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); }
  .ledger--plain .ledger__say { max-width: 52ch; }
  .ledger__cells { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
}

/* ---------- the closing band ---------- */
.closer { position: relative; isolation: isolate; overflow: clip; background: #0B1A2B; }
.closer__art { width: 100%; height: 100%; min-height: 22rem; object-fit: cover;
               position: absolute; inset: 0; z-index: 0; }
.closer__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,12,24,.34), rgba(6,12,24,.62)); }
.closer__inner {
  position: relative; z-index: 2;
  padding-block: clamp(4rem, 2rem + 8vw, 9rem);
  display: grid; justify-items: center; gap: var(--sp-4); text-align: center; color: #fff;
}
.closer__inner .mono { color: rgba(255,255,255,.66); }
.closer__line {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.012em; text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 2px 26px rgba(5,10,18,.45);
}

/* ---------- 11. section heads ---------- */
/* Every section opens the way the hero opens: mono mark, then the line,
   then the lede, all centred on one axis. The content below spreads. */
.head {
  display: grid; gap: var(--sp-3); justify-items: center;
  text-align: center; text-wrap: balance;
  max-width: 54rem; margin-inline: auto; margin-bottom: var(--sp-7);
}
.head .lede { max-width: 60ch; }
.head--left { justify-items: start; text-align: left; margin-inline: 0; }

/* ---------- 12. the three route plates ---------- */
/* Edge to edge, hairline-divided, with the dossier line laid over the picture
   exactly as the hero lays its corner marks over the art. A caption printed
   underneath would read as a product grid. */
.plates { display: grid; gap: 1px; background: var(--hair); }
.plate { position: relative; margin: 0; background: var(--ink); }
.plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.plate figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--gutter);
  display: grid; gap: .45rem; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(7,11,16,.28) 32%, rgba(7,11,16,.78));
}
.plate__k { display: flex; gap: .6rem; align-items: baseline; color: rgba(255,255,255,.72); }
.plate__k b { font-weight: 400; color: #fff; }
.plate__line {
  font-size: var(--fs-h3); font-weight: 560;
  letter-spacing: -.015em; line-height: 1.25; text-wrap: balance;
}
@media (min-width: 48rem) {
  .plates { grid-template-columns: repeat(3, 1fr); }
  .plate img { aspect-ratio: 3 / 4; }
  .plates--two { grid-template-columns: repeat(2, 1fr); }
  .plates--two .plate img { aspect-ratio: 3 / 2; }
}
@media (min-width: 90rem) {
  .plate img { aspect-ratio: 4 / 5; }
  .plates--two .plate img { aspect-ratio: 16 / 10; }
}

/* ---------- 13. copy beside an image that runs to the edge ---------- */
.duo { display: grid; }
.duo__copy {
  padding: var(--pad-block) var(--gutter);
  max-width: 44rem; margin-inline: auto; width: 100%;
}
.duo__media { position: relative; background: var(--ink); }
.duo__media img { width: 100%; height: 100%; min-height: 60svh; object-fit: cover; }
@media (min-width: 56rem) {
  .duo { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .duo__copy {
    /* The grid track already caps this at half the viewport, so no max-width:
       a max-width plus a large padding-inline fights itself under border-box
       and collapses the text column on wide screens. */
    padding-inline: max(var(--gutter), calc(50vw - (var(--wrap) / 2))) var(--sp-7);
    margin-inline: 0; max-width: none;
    align-self: center;
  }
  .duo__media img { min-height: 0; height: 100%; }
}

/* ---------- 14. terms list ---------- */
.terms { display: grid; margin-top: var(--sp-5); list-style: none; }
.terms li {
  display: grid; gap: .3rem;
  padding-block: var(--sp-3); border-top: 1px solid var(--hair);
}
.terms li:last-child { border-bottom: 1px solid var(--hair); }
.terms .mono { color: var(--key); }
/* Exceptional status is a property of the word, never of its position in a
   list. Opt in explicitly. */
.terms .is-flag { color: var(--flag-on); }
.terms .body { color: var(--on); }
@media (min-width: 34rem) {
  /* both tracks shrinkable: at 200% text a fixed key column starves the statement */
  .terms li { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
}
/* full-width variant for a list that is not beside an image */
.terms--wide { max-width: 46rem; margin-inline: auto; }
@media (min-width: 48rem) {
  .terms--wide li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}

/* ---------- the two contact routes ---------- */
.routes { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.route {
  background: var(--paper); padding: var(--gutter);
  display: grid; gap: var(--sp-2); align-content: start;
}
.route--alt { background: var(--surface); }
.route .body { max-width: 44ch; }
.route__pending { font-size: var(--fs-small); color: var(--on-dim); margin-top: var(--sp-2); }
.route__pending .mono { display: block; color: var(--key); margin-bottom: .2rem; }
.route .btn { justify-self: start; margin-top: var(--sp-3); }
@media (min-width: 48rem) { .routes { grid-template-columns: 1fr 1fr; } }

/* a badge that sits on an outline button rather than a filled one */

/* ---------- 15. the four steps ---------- */
.steps { display: grid; gap: var(--sp-4); list-style: none; counter-reset: none; }
.step { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--hair); }
/* Base is the finished state: filled. JS empties them and fills them back in
   sequence, so with JS off or under reduced motion they read as complete
   rather than as four blank chips waiting for something. */
.step__k {
  justify-self: start; white-space: nowrap;
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38rem .7rem; border-radius: var(--r-pill);
  border: 1px solid var(--key); background: transparent; color: var(--key);
  transition: border-color var(--d-slow) var(--ease), color var(--d-slow) var(--ease);
}
.js-motion .step__k { border-color: var(--hair); color: var(--on-mute); }
.js-motion .step.is-in .step__k { border-color: var(--key); color: var(--key); }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-6); }
}
@media (min-width: 90rem) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  /* the method page runs longer copy per stage, so it keeps two columns */
  .steps--deep { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-7); }
}

/* ---------- 16. marks and the pull line ---------- */
.step__note {
  font-size: var(--fs-small); line-height: 1.5; color: var(--on-dim);
  padding-top: var(--sp-2); border-top: 1px solid var(--hair);
}
.step__note .mono { display: block; color: var(--key); margin-bottom: .25rem; }

.marks { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); margin-block: var(--sp-5); }
.marks span {
  font-size: clamp(3rem, 1.4rem + 6vw, 5.5rem); font-weight: 700;
  letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px #C9C2B4;
}
/* the first milestone is the one that has already happened */
.marks span:first-child { -webkit-text-stroke-color: var(--nt); }
.sec--ink .marks span { -webkit-text-stroke-color: rgba(242,239,233,.34); }
.sec--ink .marks span:first-child { -webkit-text-stroke-color: var(--nt-lift); }

/* ---------- 17. the scrubbed image moment ---------- */
/* Base state is the finished frame. The scrubbed version only exists under
   .js-motion at >=56rem, so JS off, reduced motion and phones all land here. */
.moment { position: relative; }
.moment__stage { display: grid; place-items: center; }
.moment__media {
  position: relative; width: 100%; border-radius: 0; height: clamp(20rem, 58svh, 34rem);
  overflow: hidden; background: var(--ink);
}
.moment__media img { width: 100%; height: 100%; object-fit: cover; }
.moment__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,14,.22), rgba(8,12,14,.62));
}
.moment__line {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--gutter);
  display: grid; gap: .5rem; justify-items: start;
  color: #fff;
}
.moment__line .mono { color: rgba(255,255,255,.72); }

/* ---------- annotation ----------
   The brand's documented visual world lists annotations as a motif. Used
   sparingly: one per page at most, and only where it makes an idea in the
   picture legible that the picture alone cannot say. Repeating it on every
   image would be scaffolding, not voice. */
.anno {
  --x: 50%; --y: 70%;                 /* JS refines these from the real crop */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; margin-top: var(--sp-2);
}
.anno__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--nt-lift); box-shadow: 0 0 0 3px rgba(22,163,146,.26);
}
.anno__stem { display: none; }
.anno__label {
  font-family: var(--mono); font-size: var(--fs-meta);
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.4;
  color: var(--on-dim);
}
/* above 56rem it lifts off the page and pins to a point in the picture */
@media (min-width: 56rem) {
  .anno {
    position: absolute; z-index: 3; margin: 0;
    left: var(--x); top: var(--y);
    translate: -4px calc(-100% + 4px);
    align-items: flex-start;
  }
  .anno__stem {
    display: block; width: 1px; height: 46px;
    background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.8));
    margin-left: 4px;
    transform-origin: bottom;
  }
  .anno__dot { order: 3; }
  .anno__stem { order: 2; }
  .anno__label {
    order: 1; color: #fff; max-width: 17rem; white-space: normal;
    background: rgba(9,15,22,.74);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
    padding: .45rem .65rem; border-radius: 4px;
    margin-bottom: 6px;
  }
  .js-motion .anno__stem { scale: 1 0; transition: scale .6s var(--ease) .15s; }
  .js-motion .anno__label,
  .js-motion .anno__dot { opacity: 0; transition: opacity .5s var(--ease); }
  .js-motion .anno__label { transition-delay: .55s; }
  .js-motion .is-in .anno__stem { scale: 1 1; }
  .js-motion .is-in .anno__label,
  .js-motion .is-in .anno__dot { opacity: 1; }
  /* the anchor point can be cropped out of frame entirely */
  .anno.is-off { display: none; }
}

/* ---------- the route strip ----------
   Short wide vignettes read as a departures board rather than four postcards,
   which is both the cheaper layout and the one that stays furthest from a
   travel brochure. */
.strip { display: grid; gap: 1px; background: var(--hair); list-style: none; }
.strip li { position: relative; background: var(--ink); }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.strip__k {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--sp-3);
  display: flex; gap: .55rem; align-items: baseline; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(7,11,16,.34) 40%, rgba(7,11,16,.8));
}
.strip__k b { font-weight: 400; color: #fff; }
.strip__k span { color: rgba(255,255,255,.72); }
@media (min-width: 40rem) { .strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .strip { grid-template-columns: repeat(4, 1fr); } }

/* a closing band that speaks in the page's ordinary voice, not the serif */
.closer--plain .closer__inner { max-width: 46rem; gap: var(--sp-3); }
.closer--plain .body + .body { margin-top: 0; }
.closer--plain .btn { margin-top: var(--sp-3); }
.closer--plain .h2 { color: #fff; }
.closer--plain .body { color: rgba(255,255,255,.82); }

/* ---------- is this you ---------- */
.you { display: grid; gap: var(--sp-5); }
.you__list { list-style: none; display: grid; gap: 0; }
.you__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-3); border-top: 1px solid var(--hair);
  font-size: var(--fs-lede); line-height: 1.45; text-wrap: pretty;
}
.you__list li:last-child { border-bottom: 1px solid var(--hair); }
.you__list li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); translate: 0 -.35em;
}
.you__close { font-size: var(--fs-lede); color: var(--on-dim); max-width: 46ch; }
@media (min-width: 62rem) {
  .you { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: var(--sp-7); align-items: start; }
  .you__media { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
}
.you__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- 18. employers band ---------- */
.emp__row { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-block: var(--sp-4); }

/* ---------- 19. join ---------- */
.join { position: relative; overflow: clip; }
.join__art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 70%; opacity: .22;
}
.join__wash {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--paper-warm), rgba(246,241,233,.9) 42%, var(--paper-warm));
}
.join__grid { position: relative; z-index: 2; display: grid; gap: var(--sp-5); }
.join__say { display: grid; gap: var(--sp-3); align-content: start; }
.join__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem);
  line-height: 1.05; letter-spacing: -.015em; overflow-wrap: break-word;
}
.join__title em { font-style: italic; }
@media (min-width: 62rem) {
  .join__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-7); align-items: start; }
  .join__say { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
}

/* ---------- 20. the form ---------- */
.form {
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-surface); padding: var(--gutter);
  display: grid; gap: var(--sp-4);
  box-shadow: 0 40px 90px -60px rgba(18,16,14,.45);
}
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-small); font-weight: 560; }
.field .req { font-weight: 400; color: var(--on-mute); }
.field input, .field textarea, .field select {
  /* 16px minimum, or iOS zooms the page on focus and leaves it zoomed */
  font-size: 16px; min-height: 48px;
  padding: .7rem .85rem;
  background: var(--surface); color: var(--on);
  border: 1px solid var(--hair); border-radius: var(--r-btn);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--on-mute); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3301A; }
.field .hint { font-size: var(--fs-small); color: var(--on-mute); }
.field .err:not(:empty) {
  font-size: var(--fs-small); color: #8E2412; font-weight: 520;
}
.route-row { display: grid; gap: var(--sp-3); align-items: end; }
.route-row .to { display: none; }
@media (min-width: 34rem) {
  .route-row { grid-template-columns: 1fr auto 1fr; }
  .route-row .to { display: block; padding-bottom: .95rem; color: var(--on-mute); }
}

.ready { border: 0; display: grid; gap: .5rem; }
.ready legend { font-size: var(--fs-small); font-weight: 560; padding: 0; margin-bottom: .2rem; }
.ready__opts { display: grid; gap: .4rem; }
.ready__opt {
  display: flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .55rem .85rem;
  border: 1px solid var(--hair); border-radius: var(--r-btn);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.ready__opt:has(input:checked) { border-color: var(--nt); background: var(--nt-tint); }
.ready__opt input { width: 18px; height: 18px; min-height: 0; accent-color: var(--nt); flex: none; }
@media (min-width: 40rem) { .ready__opts { grid-template-columns: repeat(3, 1fr); } }

.consent { border: 0; display: grid; gap: .4rem; padding-top: var(--sp-2); border-top: 1px solid var(--hair); }
.consent legend { font-size: var(--fs-small); font-weight: 560; padding: 0; margin-bottom: .3rem; }
.consent__row { display: flex; gap: .7rem; align-items: flex-start; }
.consent__row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--nt); flex: none; }
.consent__row label { font-size: var(--fs-small); line-height: 1.45; color: var(--on-dim); }

.form__notice {
  font-size: var(--fs-small); line-height: 1.5; color: var(--on-dim);
  padding: var(--sp-3); border: 1px dashed var(--on-mute); border-radius: var(--r-btn);
}
.form__notice .mono { display: block; color: var(--flag-on); margin-bottom: .25rem; }
.form__notice a { text-decoration: underline; text-underline-offset: 2px; }
.done .btn { justify-self: start; margin-top: var(--sp-2); }

.summary {
  border: 1px solid #C9836F; background: #FDF3F0;
  border-radius: var(--r-btn); padding: var(--sp-3); display: grid; gap: .5rem;
}
.summary h3 { font-size: var(--fs-small); font-weight: 640; color: #8E2412; }
.summary ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.summary a { font-size: var(--fs-small); color: #8E2412; text-decoration: underline; }

.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form__send { display: grid; gap: .6rem; justify-items: start; }
.form__note { color: var(--on-mute); }

.done { display: grid; gap: var(--sp-3); }
.done__k { color: var(--nt-deep); }
.done ul { list-style: none; display: grid; gap: .6rem; margin-top: var(--sp-2); }
.done li { display: grid; gap: .2rem; padding-top: .7rem; border-top: 1px solid var(--hair); }

/* ---------- 21. questions ---------- */
.qa { display: grid; gap: 0; margin-top: var(--sp-5); }
.qa__item { border-top: 1px solid var(--hair); padding-block: var(--sp-4); display: grid; gap: .5rem; }
.qa__item:last-child { border-bottom: 1px solid var(--hair); }
.qa__q { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
@media (min-width: 56rem) {
  .qa__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-5); }
}

/* ---------- 22. footer ---------- */
.foot { background: var(--ink); color: #EFEDE9; padding-block: var(--pad-block) var(--sp-5); }
.foot__grid { display: grid; gap: var(--sp-5); }
.foot__logo { height: 34px; width: auto; opacity: .9; }
.foot__tag { margin-top: var(--sp-3); color: rgba(239,237,233,.62); }
.foot__col { display: grid; gap: .55rem; align-content: start; }
.foot__k { color: rgba(239,237,233,.58); margin-bottom: .2rem; }
.foot__col a { color: rgba(239,237,233,.82); display: inline-flex; align-items: center; min-height: 44px; }
.foot__col a:hover { color: #fff; }
.foot__meta span { color: rgba(239,237,233,.58); }
.foot__base {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid rgba(239,237,233,.14);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between; color: rgba(239,237,233,.58);
}
@media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 68rem) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.ailo-credit {
  display: flex; justify-content: center;
  padding: var(--sp-5) var(--gutter) var(--sp-2);
}

/* ---------- 23. atmosphere ---------- */
/* Fixed so it never repaints on scroll. Also dithers any banding in the
   large flat grounds, which is why it is load-bearing rather than decoration. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: .42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   24. MOTION
   Everything below is additive. Remove every class JS adds and the
   page above is already the finished page.
   ============================================================ */

/* hero entrance: pure CSS, armed by the inline head script so it cannot
   flash before the end-of-body script runs */
@media (prefers-reduced-motion: no-preference) {
  .anim-ready .rise {
    animation: rise var(--d-slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } }

/* scroll reveals */
.js-motion [data-reveal] {
  opacity: 0; translate: 0 22px;
  transition: opacity var(--d-slow) var(--ease), translate var(--d-slow) var(--ease);
  transition-delay: calc(min(var(--i, 0), 5) * 70ms);
}
.js-motion [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (min-width: 56rem) {
  /* hero parallax. Independent properties only, and never transitioned. */
  .js-motion .hero__art { scale: 1.08; translate: 0 calc(var(--p) * -54px); }

  /* the scrubbed moment */
  .js-motion .moment { height: 240svh; }
  .js-motion .moment__stage {
    position: sticky; top: 0; height: 100svh; overflow: hidden;
  }
  .js-motion .moment__media {
    width: calc(58% + 42% * var(--p));
    height: calc(46svh + 54svh * var(--p));
    border-radius: calc(var(--r-card) * (1 - var(--p)));
  }
  .js-motion .moment__scrim { opacity: calc(.25 + var(--t) * .75); }
  .js-motion .moment__line {
    opacity: var(--t);
    translate: 0 calc(18px * (1 - var(--t)));
  }
}

/* ---------- 25. reduced motion ---------- */
/* JS folds ?noanim and the media query into one boolean and adds .no-motion,
   so the two paths cannot diverge. This block only covers the pure-CSS
   entrance, which must also work with JS off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
.no-motion .nav__bar, .no-motion .step__k { transition: none; }