/* ===========================================================================
   Apollo Global Solutions
   ---------------------------------------------------------------------------
   Visual world: operations, shown. Photographs carry the argument; type states
   it once and stops. The logo is the palette: slate navy is ink and dark
   ground, amber is the single accent and the closing band. Paper is a near
   white with a faint warm cast so nothing reads clinical.

   Rules this stylesheet enforces:
     1. No page runs more than ~1200px without a photograph.
     2. Section shape alternates. Contained row, full bleed media, asymmetric
        split. Never the same shape twice in a row.
     3. Uppercase is allowed in exactly two places: the 11px eyebrow and
        nothing else. Headings are mixed case Archivo.
     4. Body copy is ink, not grey. Grey is for metadata only.
     5. Bands are square. Only media carries a radius.
   =========================================================================== */

/* --- faces ---------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/local/archivo-latin.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, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/local/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/local/inter-latin.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, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/local/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  /* the logo, and the paper it prints on */
  --navy: #12283e;
  --navy-2: #1c3a58;
  --slate: #34506e;
  --amber: #f5a93b;
  --amber-deep: #d9891a;
  --amber-ink: #6f4205;

  /* two papers a real step apart, not three beiges inside 1.15:1 */
  --paper: #fcfbf8;
  --sand: #efe6d6;
  --mist: #e6ebf1;
  --white: #ffffff;

  /* semantic roles. reassigned inside dark and amber bands. */
  --ground: var(--paper);
  --fg: #14283c;
  --fg-2: #55677c;
  --rule: rgba(20, 40, 62, 0.13);
  --rule-2: rgba(20, 40, 62, 0.26);
  --accent: var(--amber-ink);
  --card: var(--white);
  --card-line: rgba(52, 80, 110, 0.16);
  --field: rgba(255, 255, 255, 0.9);

  /* measure. --edge is the page gutter: it collapses to --gutter on small
     screens and grows to keep the wide rail centred on large ones. Bands carry
     it as padding; anything that should touch the viewport edge pulls back by
     exactly the same value, so a bleed is a negative margin rather than a
     100vw guess. */
  --shell-wide: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --edge: max(var(--gutter), calc((100vw - var(--shell-wide)) / 2));

  /* The sticky header sits in flow above the hero: 74px of bar plus its 1px
     rule. Anything that wants the rest of the first screen subtracts it. */
  --hdr-h: 75px;

  /* band weight: three tiers, assigned by how much the section is carrying */
  --band-lg: clamp(60px, 6vw, 92px);
  --band-md: clamp(44px, 4.4vw, 68px);
  --band-sm: clamp(30px, 3vw, 46px);

  /* only media is round */
  --r-media: 14px;
  --r-sm: 6px;
  --r-pill: 999px;

  --s1: 6px;
  --s2: 12px;
  --s3: 20px;
  --s4: 30px;
  --s5: 46px;
  --s6: 72px;

  /* type ramp: six steps, all of them used.

     The top two steps are sized against the column they land in, not against
     the viewport. Both hero compositions give the copy roughly half the page,
     so the old 5.4vw display resolved to 78px inside a 646px column and broke
     a twelve word headline into six lines of two words. The coefficients below
     are read off that column: a display line now carries about 24 characters
     at every width, which is three lines for the longest headline on the
     site. */
  --t-display: clamp(2.1rem, 1rem + 2.2vw, 3.05rem);
  --t-h1: clamp(1.8rem, 0.9rem + 1.8vw, 2.55rem);
  --t-h2: clamp(1.6rem, 2.3vw, 2.25rem);
  /* h3 and lead were both landing near 17px, which collapsed the middle of the
     ramp into one tier. Each now clears its floor before its cap, so there is a
     real step at every joint. */
  --t-h3: clamp(1.3rem, 1rem + 0.7vw, 1.55rem);
  --t-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.6875rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 400ms;

  --shadow-media: 0 24px 60px -34px rgba(18, 40, 62, 0.5);
  --shadow-lift: 0 30px 70px -40px rgba(18, 40, 62, 0.55);
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, not hidden. `overflow-x: hidden` forces overflow-y to compute to
     auto, which turns the element into a scroll container and makes every
     view() timeline inside it resolve against that box instead of the
     viewport, collapsing the scroll reveals to nothing. `clip` suppresses the
     same horizontal overflow without creating a scroll container. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--fg);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--amber-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.ground-navy :focus-visible { outline-color: var(--amber); }

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy); color: var(--paper);
  padding: 12px 20px; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: 16px; }

/* --- typography ----------------------------------------------------------- */

h1, h2, h3, h4, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: 'Archivo', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.t-display, .t-h1 { text-wrap: balance; }
.t-display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.03em; }
.t-h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.028em; }
.t-h2 { font-size: var(--t-h2); line-height: 1.06; max-width: 20ch; }
.t-h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }

.t-lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg);
  max-width: 38ch;
}
.t-body { font-size: var(--t-body); line-height: 1.6; max-width: 62ch; }
.t-small { font-size: var(--t-small); line-height: 1.55; color: var(--fg-2); }
.t-muted { color: var(--fg-2); }

/* the single permitted uppercase tier */
.label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ground-navy .label, .ground-slate .label { color: var(--amber); }
.ground-amber .label { color: var(--amber-ink); }

.t-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

strong, b { font-weight: 650; }

/* --- layout --------------------------------------------------------------- */

/* The rail. Pure max width: the page gutter lives on the full width parent, so
   nothing ever double pads and a child can bleed back out by --edge exactly. */
.shell, .shell-wide { width: 100%; margin-inline: auto; }
.shell-wide { max-width: var(--shell-wide); }
/* A genuine second width, not an alias. Every band on every page used to run at
   shell-wide, so the page had shapes but no rhythm — one column of full-width
   slabs, thirty pages deep. Text-dense shapes now pull in to a reading measure,
   which is what makes a wide band read as wide. */
.shell { max-width: 900px; }

.band, .hero, .media-band, .site-header, .site-footer, .mega, .mobile-nav {
  padding-inline: var(--edge);
}

.band { padding-block: var(--band-md); position: relative; }
.band-lg { padding-block: var(--band-lg); }
.band-sm { padding-block: var(--band-sm); }
.band-flush { padding-block: 0; }

/* The rail does not widen on a big screen. At 1920 the content stays a
   centred 1200px object with the band grounds running out to the edges, which
   is what makes it read as a page rather than as a stretched sheet. */

.ground-paper { background: var(--paper); }
.ground-sand { background: var(--sand); }
.ground-mist { background: var(--mist); }

.ground-navy {
  background: var(--navy);
  --ground: var(--navy);
  --fg: #eef3f8;
  --fg-2: #9fb2c6;
  --rule: rgba(255, 255, 255, 0.16);
  --rule-2: rgba(255, 255, 255, 0.3);
  --accent: var(--amber);
  --card: rgba(255, 255, 255, 0.055);
  --card-line: rgba(255, 255, 255, 0.14);
  --field: rgba(255, 255, 255, 0.08);
  color: var(--fg);
}
.ground-slate {
  background: var(--slate);
  --ground: var(--slate);
  --fg: #f4f8fc;
  --fg-2: #c3d2e0;
  --rule: rgba(255, 255, 255, 0.2);
  --rule-2: rgba(255, 255, 255, 0.34);
  --accent: var(--amber);
  --card: rgba(255, 255, 255, 0.08);
  --card-line: rgba(255, 255, 255, 0.16);
  color: var(--fg);
}
.ground-amber {
  background: var(--amber);
  --ground: var(--amber);
  --fg: #2a1a02;
  --fg-2: #5b3c08;
  --rule: rgba(42, 26, 2, 0.22);
  --rule-2: rgba(42, 26, 2, 0.4);
  --accent: var(--navy);
  --card: rgba(255, 255, 255, 0.6);
  --card-line: rgba(42, 26, 2, 0.18);
  color: var(--fg);
}

/* A bleed is a pull back through the page gutter, never a 100vw guess. */
.bleed-l { margin-left: calc(-1 * var(--edge)); }
.bleed-r { margin-right: calc(-1 * var(--edge)); }

/* --- media ---------------------------------------------------------------- */

.shot {
  position: relative;
  /* clip, not hidden: `overflow: hidden` makes this a scroll container, and a
     view() timeline on the image inside would then resolve against this box
     instead of the viewport and never advance. clip crops identically,
     border-radius included, without becoming a scroller. */
  overflow: clip;
  border-radius: var(--r-media);
  background: var(--mist);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-4x3 { aspect-ratio: 4 / 3; }
.shot-3x2 { aspect-ratio: 3 / 2; }
.shot-16x9 { aspect-ratio: 16 / 9; }
.shot-1x1 { aspect-ratio: 1 / 1; }
.shot-4x5 { aspect-ratio: 4 / 5; }
.shot-square-lg { aspect-ratio: 5 / 4; }
.shot-21x9 { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .shot-21x9 { aspect-ratio: 3 / 2; } }

/* a photographic band, held inside the rail rather than run to the edges */
.media-band {
  position: relative;
  padding-inline: 0;
  max-width: var(--shell-wide);
  margin-inline: auto;
  border-radius: var(--r-media);
  min-height: clamp(200px, 20vw, 300px);
  display: grid;
  align-items: end;
  overflow: clip;  /* not hidden — see .shot */
  isolation: isolate;
}
.media-band > img {
  position: absolute;
  /* Overscanned top and bottom so the photograph has somewhere to travel.
     Without the extra 18% the parallax would drag the frame's own edge into
     view.

     The height is stated rather than left auto. On auto the box takes the
     picture's own aspect and object-fit has nothing to crop against, so
     --focus never applied and a band showed whatever happened to be in the top
     third of the frame: sky, above a row of houses. */
  inset: -9% 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: var(--focus, center 42%);
  z-index: -2;
}
/* Parallax: the photograph drifts against the band it sits in, so a full-bleed
   picture reads as depth rather than wallpaper. Transform only, so it stays on
   the compositor across the ~60 bands in the site. */
@media (prefers-reduced-motion: no-preference) {
  .media-band > img {
    animation-name: band-drift;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@keyframes band-drift {
  from { transform: translateY(-7%); }
  to   { transform: translateY(7%); }
}
/* Two scrims, not one wash. The vertical pass guarantees the foot of the band
   is dark enough for white type whatever the photograph does; the horizontal
   pass does the same for the left column, where the type actually sits. */
.media-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 40, 62, 0.58) 0%, rgba(18, 40, 62, 0.22) 46%, rgba(18, 40, 62, 0) 70%),
    linear-gradient(180deg, rgba(18, 40, 62, 0.2) 0%, rgba(18, 40, 62, 0.46) 45%, rgba(18, 40, 62, 0.92) 100%);
}
/* No type on the band, no legibility scrim. The photograph is the argument; a
   faint tint is all that ties it to the palette. */
.media-band-plain::after {
  background: linear-gradient(180deg, rgba(18, 40, 62, 0.06) 0%, rgba(18, 40, 62, 0.1) 100%);
}
/* The establishing photograph on a page is tall; a second one is a slim rule,
   so two bands on one page never read as the same stripe twice. */
.media-band-tall { min-height: clamp(300px, 32vw, 460px); }
/* The band no longer touches the viewport, so its ground is the page and it
   needs air above and below to read as a frame rather than a stripe. */
.media-band { margin-block: clamp(28px, 3vw, 44px); }
.media-band + .band, .band + .media-band { border-top: 0; }

.media-band .shell-wide { padding-block: clamp(36px, 4vw, 64px); }
.media-band h2, .media-band p { color: #f4f8fc; }
.media-band h2 { max-width: 22ch; }
.media-band p { max-width: 46ch; margin-top: 16px; color: #d5e0eb; }

/* --- buttons and links ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn .ico { width: 12px; height: 12px; flex: none; }

/* States flip between two pre checked pairs rather than darkening, so a hover
   can never land on a contrast ratio nobody measured. */
.btn-solid { background: var(--navy); color: #f4f8fc; border-color: var(--navy); }
.btn-solid:hover { background: var(--amber); border-color: var(--amber); color: #2a1a02; }

.btn-amber { background: var(--amber); color: #2a1a02; border-color: var(--amber); }
.btn-amber:hover { background: var(--navy); border-color: var(--navy); color: #f4f8fc; }

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--rule-2); }
.btn-ghost:hover { background: var(--fg); color: var(--ground); border-color: var(--fg); }

.ground-navy .btn-solid, .ground-slate .btn-solid { background: var(--amber); color: #2a1a02; border-color: var(--amber); }
.ground-navy .btn-solid:hover, .ground-slate .btn-solid:hover { background: #ffffff; border-color: #ffffff; color: var(--navy); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 3px;
  transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tlink:hover { gap: 13px; border-color: var(--fg); }
.tlink .ico { width: 11px; height: 11px; }

.ico { stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.hdr {
  display: flex;
  align-items: center;
  /* The rail is 1200px at every width above 1296, so the bar never gains room.
     A gap that kept growing to 24px was spending the width the savings
     calculator now needs, and past 1800 the row fitted to the pixel. */
  gap: clamp(14px, 1.4vw, 20px);
  min-height: 74px;
}
.brand { flex: none; display: block; text-decoration: none; }
.brand img { width: clamp(132px, 12vw, 168px); height: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a, .navbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Eight items fit on one line from 1140px up only because they are set tight.
   The rail is 1200px at every width above it, so they stay tight: the room a
   wide screen adds goes to the margins, not to the bar. */
.nav { flex: none; }
.nav a:hover, .navbtn:hover { background: rgba(52, 80, 110, 0.08); }
.nav a[aria-current="page"], .navbtn[aria-current="page"] { color: var(--amber-ink); font-weight: 650; }
.navbtn .chev { width: 11px; height: 11px; transition: transform var(--dur) var(--ease); }
.navbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-about { position: relative; }
.nav-about summary { list-style: none; cursor: pointer; }
.nav-about summary::-webkit-details-marker { display: none; }
.nav-about summary[data-current="true"] { color: var(--amber-ink); font-weight: 650; }
.nav-about[open] .chev { transform: rotate(180deg); }
.about-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  padding: 12px;
  background: var(--navy);
  box-shadow: 0 12px 28px rgba(18, 40, 62, 0.18);
}
.nav .about-menu a { display: block; padding: 10px 12px; color: #eef3f8; }
.nav .about-menu a:first-child, .nav .about-menu a[aria-current="page"] { color: var(--amber); }
.nav .about-menu a:hover { background: rgba(255, 255, 255, 0.08); }

.hdr-calc {
  display: none;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(245, 169, 59, 0.2);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--amber-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hdr-calc .ico { width: 13px; height: 13px; }
.hdr-calc:hover { background: var(--amber); color: #2a1a02; }
.hdr-calc[aria-current="page"] { background: var(--amber); color: #2a1a02; }
@media (min-width: 1360px) { .hdr-calc { display: inline-flex; } }

/* Below that width the pill is in the drawer instead, where it keeps the tint
   so it does not read as the ninth link in a list of eight. */
.mobile-nav .mob-calc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border-bottom: 0;
  border-radius: var(--r-pill);
  background: rgba(245, 169, 59, 0.2);
  color: var(--amber-ink);
  font-weight: 650;
}
.mobile-nav .mob-calc .ico { width: 13px; height: 13px; }

.hdr .btn { flex: none; padding: 11px 20px; }

.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
  content: '';
  display: block;
  width: 19px; height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity 160ms linear;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg) translateY(0); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(-2px); }

@media (max-width: 1139px) {
  .nav, .hdr .btn { display: none; }
  .burger { margin-left: auto; }
}
@media (min-width: 1140px) { .burger { display: none; } }

/* mega panel */
.mega {
  display: none;
  /* The header already carries the page gutter, and this panel sits inside
     the header, so it takes none of its own. With both, the panel's content
     was squeezed to the rail width minus two more gutters: 380px at 1920. */
  padding-inline: 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  /* drop-shadow, not box-shadow: clip-path would cut a box-shadow off at the
     panel's edge, but a filter applies to the already-clipped silhouette, so
     the shadow survives and travels down with the unrolling edge. */
  filter: drop-shadow(0 16px 20px rgba(18, 40, 62, 0.16));
  /* The panel belongs to the header, so it unrolls from the header's bottom
     edge rather than appearing whole. clip-path is composited; animating
     height here would force layout on every frame. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 180ms var(--ease), display 180ms allow-discrete;
}
.mega[data-open="true"] {
  display: block;
  clip-path: inset(0 0 0 0);
  transition: clip-path 240ms var(--ease), display 240ms allow-discrete;
}
/* Entry needs a from-state the element has never held; @starting-style supplies
   it, which is what lets this run off data-open with no JavaScript. */
@starting-style {
  .mega[data-open="true"] { clip-path: inset(0 0 100% 0); }
}
.mega-col {
  transform: translateY(-8px);
  transition: transform 240ms var(--ease);
}
.mega[data-open="true"] .mega-col { transform: none; }
.mega[data-open="true"] .mega-col:nth-child(2) { transition-delay: 50ms; }
.mega[data-open="true"] .mega-col:nth-child(3) { transition-delay: 100ms; }
.mega-grid {
  width: min(100%, var(--shell-wide));
  margin-inline: auto;
  padding-block: 34px 40px;
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mega-col h3 { font-size: 1rem; margin-bottom: 4px; }
.mega-col h3 a { text-decoration: none; }
.mega-col > p { font-size: var(--t-small); color: var(--fg-2); margin-bottom: 14px; max-width: 34ch; }
.mega-col a.mrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mega-col a.mrow:hover { color: var(--amber-ink); padding-left: 7px; }
.mega-col a.mrow .ico { width: 11px; height: 11px; flex: none; }

/* mobile nav */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 18px var(--gutter) 32px;
  max-height: calc(100dvh - var(--hdr-h));
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 180ms var(--ease), display 180ms allow-discrete;
}
.mobile-nav[data-open="true"] {
  display: block;
  clip-path: inset(0 0 0 0);
  transition: clip-path 240ms var(--ease), display 240ms allow-discrete;
}
@starting-style {
  .mobile-nav[data-open="true"] { clip-path: inset(0 0 100% 0); }
}
.mobile-nav a { display: block; padding: 11px 0; text-decoration: none; font-weight: 550; border-bottom: 1px solid var(--rule); }
.mobile-nav .grp { margin-top: 20px; margin-bottom: 4px; }
.mobile-nav .sub a { padding-left: 14px; font-weight: 400; font-size: 0.9375rem; color: var(--fg-2); }
.mobile-nav .btn { margin-top: 22px; width: 100%; justify-content: center; }

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

/* The hero takes the height its copy and photograph need, and no more. It
   used to claim the whole first screen, which on a 1920 by 1080 display meant
   a headline, a paragraph and a great deal of ground; the second band now
   starts where the first one ends. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  overflow: clip;  /* not hidden — see .shot */
  display: grid;
  align-content: start;
  /* Every page opens one rem under the header. The old 64px top pushed the
     headline down the screen for no reason: the header rule already separates
     the chrome from the page, and the hero carries its own bottom weight. */
  padding-block: 1rem clamp(36px, 4.5vw, 64px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  height: 100%;
}
/* Stacked below 900px the two halves are a column, and flex is what makes the
   photograph take the slack whichever half is written first — .hero-reverse
   puts its media before its copy. */
@media (max-width: 899px) {
  .media-band { margin-inline: var(--edge); }
  .hero-grid { display: flex; flex-direction: column; }
  .hero-copy { flex: 0 0 auto; }
  .hero-media { flex: 1 1 auto; }
}
.hero-copy { padding-block: clamp(8px, 1.5vw, 24px); max-width: 600px; }
.hero-home .hero-copy { max-width: 640px; }
.hero-copy .label { margin-bottom: 18px; }
.hero-copy .t-lead { margin-top: 22px; max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: var(--t-small);
  color: var(--fg-2);
}
.hero-note b { color: var(--fg); font-weight: 650; }

/* the media plate sits inside the rail, rounded on every corner */
.hero-media { position: relative; min-height: clamp(260px, 40vw, 520px); }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-media);
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(36px, 4vw, 72px);
  }
  /* The homepage headline is the longest on the site and set at the top of the
     ramp, so an even split gave it eighteen characters a line. */
  .hero-home .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hero-media {
    height: 100%;
    min-height: clamp(380px, 32vw, 520px);
  }
  .hero-media img { position: absolute; inset: 0; border-radius: var(--r-media); }
}

/* interior page hero: same skeleton, a lower media floor */
.hero-page .hero-media { min-height: clamp(240px, 30vw, 420px); }
@media (min-width: 900px) {
  .hero-page .hero-media { min-height: clamp(320px, 28vw, 440px); }
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 16px;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--amber-ink); }

/* --- section heads -------------------------------------------------------- */

.sec-head {
  display: grid;
  gap: clamp(14px, 2vw, 34px);
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .sec-head.sec-head-center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  /* lede under the heading rather than beside it, so a narrow band does not
     open with the same two-column head as the wide band above it */
  .sec-head.sec-head-stack { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
  .sec-head.sec-head-center .t-h2 { max-width: 24ch; }
  .sec-head.sec-head-center .t-lead { max-width: 52ch; }
}
.sec-head .t-h2 { max-width: 24ch; }
.sec-head .t-lead { max-width: 46ch; }
.sec-head-stack .t-lead { max-width: 60ch; }
.sec-head .label { margin-bottom: 14px; }

/* --- hero variants -------------------------------------------------------- */
/* A second and third arrangement of the same hero content, so twenty-two
   template-generated pages do not all open the way the homepage does. */

/* stacked: copy across the measure, photograph wide beneath */
.hero-stack {
  grid-template-rows: auto auto;
}
.hero-stack .hero-stack-copy { display: grid; gap: clamp(18px, 2vw, 28px); }
/* This composition owns the whole rail rather than a column of it, so the cap
   is the reading measure and nothing else. At 18ch the headline filled under
   half the band and read as a layout fault. */
.hero-stack .t-h1 { max-width: min(100%, 34ch); }
.hero-stack-foot { display: grid; gap: 22px; align-items: end; }
@media (min-width: 900px) {
  .hero-stack-foot { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); }
}
.hero-stack-foot .t-lead { max-width: 54ch; }
.hero-stack-foot .btn { justify-self: start; }
.hero-stack-media {
  position: relative;
  margin-top: clamp(28px, 3.5vw, 48px);
  width: 100%;
  max-width: var(--shell-wide);
  justify-self: center;
  aspect-ratio: 21 / 9;
  max-height: 460px;
  border-radius: var(--r-media);
  overflow: clip;
}
@media (max-width: 700px) { .hero-stack-media { aspect-ratio: 3 / 2; } }
.hero-stack-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* reverse: photograph first, copy to its right */
@media (min-width: 900px) {
  .hero-reverse .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- shape 1: photo tiles ------------------------------------------------- */

.tiles {
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;  /* not hidden — see .shot */
  border-radius: var(--r-media);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--card-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile-media { position: relative; aspect-ratio: 5 / 4; overflow: clip; }
.tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.tile:hover .tile-media img { transform: scale(1.035); }
.tile-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 40, 62, 0) 30%, rgba(18, 40, 62, 0.62) 66%, rgba(18, 40, 62, 0.94) 100%);
}
.tile-label {
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  z-index: 1;
  color: #ffffff;
}
/* Amber cannot carry 11px type over a photograph and stay above 4.5:1, however
   heavy the scrim. So the eyebrow is white and the amber becomes a rule above
   it, where it is a non text mark and only needs 3:1. */
.tile-label .label {
  color: #ffffff;
  margin-bottom: 7px;
  padding-top: 9px;
  border-top: 2px solid var(--amber);
  display: inline-block;
}
.tile-label h3 { font-size: clamp(1.2rem, 1.5vw, 1.55rem); color: #ffffff; line-height: 1.14; }
.tile-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tile-body p { font-size: var(--t-small); color: var(--fg); line-height: 1.55; }
.tile-body .tlink { margin-top: auto; align-self: flex-start; }

/* a tall tile with no body, used where the picture is the whole message */
.tile-tall .tile-media { aspect-ratio: 4 / 5; }
/* Two tiles take half the rail each. A 4:5 crop then turns a 651px cell into an
   813px slab taller than the hero, so at two up the tile takes the landscape
   crop the wider cell can actually carry. */
@media (min-width: 900px) { .tiles-duo .tile-tall .tile-media { aspect-ratio: 16 / 10; } }

/* --- shape 2b: the stacked checklist --------------------------------------- */
/* A wide picture across the band with the list set underneath it in columns.
   Deliberately not another side-by-side: split, cards and steps already hold
   content beside a photograph, and a fourth made every page read alike. */
.stack-check { display: grid; gap: clamp(24px, 3vw, 40px); }
.stack-check .stack-head { display: grid; gap: 14px; }
.stack-check .stack-head .t-h2 { max-width: 24ch; }
.stack-check .stack-head .t-lead { max-width: 60ch; }
.ticks-cols { gap: 13px clamp(24px, 3.4vw, 56px); }
@media (min-width: 760px) {
  .ticks-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticks-cols[data-n="5"], .ticks-cols[data-n="6"],
  .ticks-cols[data-n="7"], .ticks-cols[data-n="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ticks-cols[data-n="6"], .ticks-cols[data-n="7"],
  .ticks-cols[data-n="8"], .ticks-cols[data-n="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stack-check .t-small { color: var(--fg-2); }

/* --- shape 2: asymmetric split -------------------------------------------- */

.split {
  display: grid;
  gap: clamp(26px, 3.5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-wide-media { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .split-reverse .split-media { order: -1; }
  /* The bleed classes still name which side the picture is on, for the
     motion, but the picture stays inside the rail on both. */
  /* The copy beside a split does not grow with the viewport, but a fixed
     aspect ratio does. A 4:5 crop that reads well at 1440 becomes a 1434px
     slab against a 324px column at 2560, and the band turns into mostly gap.
     Capping the height lets the picture take the landscape crop the wider cell
     can actually carry, the same trade .tiles-duo makes above. Nothing below
     ~1600px changes; object-fit does the cropping. */
  .split-media .shot { width: 100%; max-height: 560px; }
}
.split-copy > * + * { margin-top: 20px; }
.split-copy .t-h2 { max-width: 18ch; }
.split-copy .btn, .split-copy .tlink { margin-top: 30px; }

/* rows left, picture right: the opening argument on a page with no split.
   The rows set the height and the picture crops to it, so the heading and
   the first row sit together rather than either side of a tall plate. */
.split-cards { align-items: start; }
@media (min-width: 900px) {
  .split-cards { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: stretch; }
  .split-cards .split-media { display: grid; }
  .split-cards .split-media .shot { aspect-ratio: auto; height: 100%; min-height: 360px; max-height: 600px; }
}
.split-cards .col-item:first-child { border-top: 0; padding-top: 0; }

/* the mirrored split used by list sections: picture left, list right */
.split-check { align-items: center; }
@media (min-width: 900px) {
  /* The copy sets the height and the picture crops to it. A fixed 4:5 plate
     beside a six word list was leaving 400px of empty ground. */
  .split-check { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: stretch; }
  .split-check .split-media { display: grid; }
  .split-check .split-media .shot {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
    max-height: 520px;
  }
  .split-check .split-copy { align-self: center; padding-block: clamp(28px, 3.5vw, 56px); }
}

/* --- shape 3: the numbered rail ------------------------------------------- */

.rail-wrap { display: grid; gap: clamp(26px, 3vw, 56px); }
@media (min-width: 1080px) {
  .rail-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); align-items: start; }
  .rail-media { position: sticky; top: 108px; }
}
@media (max-width: 1079px) { .rail-media { display: none; } }

.rail { display: grid; gap: 0; }
.rail-step {
  display: grid;
  gap: clamp(16px, 2.4vw, 44px);
  padding-block: clamp(26px, 3vw, 46px);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.rail-step:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) {
  .rail-step { grid-template-columns: 74px minmax(0, 1fr); }
  .rail-step-need { grid-template-columns: 74px minmax(0, 1fr) minmax(0, 0.9fr); }
}
.rail-n {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--amber);
  letter-spacing: -0.04em;
}
/* The timeline variant: a year in the marker column instead of an ordinal.
   Four figures do not fit the 74px step column at step size, so the column
   widens and the marker drops a size. Tabular figures keep the six years
   optically aligned down the rail, which is the whole point of a date column. */
@media (min-width: 860px) {
  .rail-time .rail-step { grid-template-columns: 116px minmax(0, 1fr); }
}
.rail-year {
  font-size: clamp(1.375rem, 1.85vw, 1.8rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding-top: 0.14em;
}

.rail-step h3 { margin-bottom: 8px; }
.rail-step p { color: var(--fg); max-width: 44ch; }
.rail-need { display: grid; gap: 9px; align-content: start; }
.rail-need .label { margin-bottom: 2px; }
.rail-need li {
  display: flex;
  gap: 10px;
  font-size: var(--t-small);
  color: var(--fg-2);
  line-height: 1.5;
}
.rail-need li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; background: var(--amber); border-radius: 50%; }

/* --- shape 4: the fact strip ---------------------------------------------- */

/* The rules are drawn by the cells, not by a background showing through a 1px
   gap, so a short last row can only ever be ground. Column count follows the
   item count rather than the viewport, so there is no short last row anyway. */
.facts {
  display: grid;
  gap: 0;
  background: var(--ground);
  border-block: 1px solid var(--rule);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}
@media (min-width: 560px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .facts[data-n="3"], .facts[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts[data-n="4"], .facts[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .facts[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fact {
  background: var(--ground);
  box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule);
  padding: clamp(22px, 2.4vw, 34px) clamp(16px, 1.8vw, 28px);
  display: grid;
  gap: 7px;
  /* subgrid so every caption in the strip shares one baseline even when a
     figure wraps */
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 7px;
}
.fact b {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.fact span { font-size: var(--t-small); color: var(--fg-2); line-height: 1.45; }

/* the statement: one line, set large enough to fill the band it sits in */
.stmt { max-width: none; }
.stmt .t-h2 {
  max-width: 24ch;
  font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.stmt .stmt-turn { color: var(--accent); }
.stmt .t-lead { max-width: 46ch; margin-top: 24px; }

/* --- shape 5: ruled columns (no cards) ------------------------------------ */

.cols {
  display: grid;
  gap: 0 clamp(28px, 4vw, 72px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .cols[data-n="3"], .cols[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols[data-n="4"], .cols[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.cols.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.col-item {
  padding-block: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--rule);
}
.col-item h3 { margin-bottom: 8px; }
.col-item p { font-size: var(--t-small); color: var(--fg-2); line-height: 1.55; max-width: 46ch; }

/* a plain ticked list */
.ticks { display: grid; gap: 13px; }
.ticks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  line-height: 1.5;
}
.ticks li::before {
  content: '';
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.4l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.4l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat;
}
/* Held off --t-lead on purpose: a six item list at lead size is the bloat the
   brief is trying to remove. */
.ticks.ticks-lg li { font-size: 1.1875rem; font-weight: 500; line-height: 1.5; }

/* Linked ruled columns: a category's roles, each with the one line the copy
   gives it. Wide enough that a sentence never sets three words to a line. */
.link-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
a.col-item { display: block; text-decoration: none; color: inherit; }
a.col-item h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; transition: color var(--dur) var(--ease); }
a.col-item h3 .ico { width: 12px; height: 12px; flex: none; opacity: 0; transform: translateX(-3px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.col-item:hover h3 { color: var(--amber-ink); }
a.col-item:hover h3 .ico { opacity: 1; transform: none; }
/* A link card closes on its own label rather than on a caret in the heading, so
   the destination is stated before a reader hovers to find it. The label needs
   air under the paragraph it follows. */
.link-item .tlink { margin-top: 16px; }

/* --- the rate tables, the category chips and the page signup -------------- */

.rate-block + .rate-block { margin-top: clamp(38px, 4vw, 62px); }
.rate-block .t-h2 { margin-bottom: clamp(18px, 2vw, 26px); }
.rate-block .t-body { max-width: 62ch; }
.rate-block .t-small { margin-top: 12px; }
table.cmp th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-2); }
table.cmp th a:hover { color: var(--amber-ink); border-bottom-color: currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 2.4vw, 32px); }
.chip {
  padding: 7px 15px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: var(--fg-2);
}

.signup { display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 860px) { .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; } }
.signup .t-lead { margin-top: 12px; }
.signup form { display: flex; flex-wrap: wrap; gap: 12px; }
.signup input {
  flex: 1 1 220px;
  padding: 13px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
  color: #f4f8fc;
}
.signup input::placeholder { color: #8ea3ba; }
.signup input:focus { border-color: var(--amber); }
.signup .form-note { width: 100%; color: #9fb2c6; }

/* --- shape 6: the role index ---------------------------------------------- */

/* Four even columns of link rows. Grouping by pillar left one column more than
   half empty, so the group is carried by a label on the row instead. */
.role-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0 clamp(24px, 3vw, 52px);
}
.role-index .rlabel {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 3px;
}
.ground-navy .role-index .rlabel, .ground-slate .role-index .rlabel { color: var(--amber); }
.role-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-weight: 550;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.role-index a > span { display: block; }
.role-index a .ico { width: 11px; height: 11px; opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.role-index a:hover { color: var(--amber-ink); padding-left: 8px; }
.role-index a:hover .ico { opacity: 1; transform: translateX(3px); }

/* --- shape 7: the ledger (terms, comparisons) ----------------------------- */

.ledger {
  display: grid;
  gap: 0;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .ledger[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger[data-n="4"], .ledger[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ledger[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.ledger-cell {
  background: var(--ground);
  box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule);
  padding: clamp(20px, 2vw, 26px);
}
.ledger-cell dt { margin-bottom: 9px; }
.ledger-cell dd b { display: block; font-weight: 650; margin-bottom: 3px; }
.ledger-cell dd { font-size: var(--t-small); color: var(--fg-2); line-height: 1.5; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-sm); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: var(--t-small); }
table.cmp th, table.cmp td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.cmp thead th { font-size: 0.8125rem; font-weight: 700; background: var(--mist); color: var(--fg); }
table.cmp tbody th { font-weight: 650; color: var(--fg); width: 20%; }
table.cmp td b { display: block; font-weight: 650; color: var(--fg); }
table.cmp td s { display: block; text-decoration: none; color: var(--fg-2); margin-top: 3px; }
table.cmp tbody tr:hover td, table.cmp tbody tr:hover th { background: rgba(245, 169, 59, 0.07); }
.cmp-note { font-size: var(--t-small); color: var(--fg-2); margin-top: 16px; max-width: 78ch; }

/* --- shape 8: pricing plates ---------------------------------------------- */

.plans {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-media);
}
.plan-feature { background: var(--slate); color: #f4f8fc; border-color: var(--slate); }
.plan-feature .plan-blurb, .plan-feature .plan-points li { color: #d3e0ec; }
.plan-feature .plan-per { color: #c3d2e0; }
.plan-fig { font-family: 'Archivo', sans-serif; font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-wrap: nowrap; }
.plan-from { font-size: 0.42em; font-weight: 700; letter-spacing: 0.01em; color: var(--fg-2); margin-right: 0.32em; }
.plan-feature .plan-from { color: #c3d2e0; }
@media (min-width: 560px) {
  .plan { padding-top: calc(clamp(24px, 2.4vw, 32px) + 42px); }
  .plan h3.t-h3 { min-height: 2.4em; }
}
.plan-per { font-size: var(--t-small); color: var(--fg-2); }
.plan-blurb { font-size: var(--t-small); color: var(--fg-2); line-height: 1.5; }
.plan-points { display: grid; gap: 10px; font-size: var(--t-small); line-height: 1.5; }
.plan-points li { display: grid; grid-template-columns: 15px 1fr; gap: 10px; }
.plan-points li::before { content: ''; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--amber); }
.plan .btn { margin-top: auto; justify-content: center; }
/* Taken out of flow so the pill cannot push the featured card's price off the
   baseline the other three sit on. */
.plan-tag {
  position: absolute;
  top: clamp(24px, 2.4vw, 32px);
  left: clamp(24px, 2.4vw, 32px);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: #2a1a02;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- shape 9: FAQ --------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2v12M2 8h12' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2v12M2 8h12' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; max-width: 68ch; color: var(--fg-2); }

/* --- the limits rail (compact restatement) -------------------------------- */

.limit-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border-block: 1px solid var(--rule);
}
.limit-rail li {
  padding: 18px clamp(16px, 2vw, 28px);
  font-size: var(--t-small);
  font-weight: 550;
  color: var(--fg);
  flex: 1 1 auto;
  border-left: 1px solid var(--rule);
}
.limit-rail li:first-child { border-left: 0; padding-left: 0; }

/* --- CTA ------------------------------------------------------------------ */

/* A rule across the full rail ties the two ends together, so the air between
   them reads as deliberate rather than as a hole at 2560. */
.cta-inner {
  display: grid;
  gap: clamp(22px, 3vw, 48px);
  column-gap: clamp(40px, 5vw, 96px);
  align-items: start;
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 2px solid var(--amber-deep);
}
@media (min-width: 860px) {
  .cta-inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
}
.cta-inner .t-h2 { max-width: 20ch; font-size: var(--t-h1); margin-bottom: 0; }
.cta-side p { max-width: 34ch; margin-bottom: 22px; }
.cta-note { font-size: var(--t-small); margin-top: 16px; }

/* --- forms ---------------------------------------------------------------- */

/* The form is the point of the contact page, so it gets the wider column and
   the copy sits at the top of its own rather than floating mid band. */
#form .split { align-items: start; }
@media (min-width: 900px) { #form .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: var(--t-small); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--field);
  color: var(--fg);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber-deep); }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-note { font-size: var(--t-small); color: var(--fg-2); margin-top: 12px; }
.form-note[data-state="error"] { color: #a3331d; font-weight: 600; }
.form-note[data-state="ok"] { color: var(--amber-ink); font-weight: 600; }
.field .err { font-size: var(--t-small); color: #a3331d; font-weight: 600; }

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

.site-footer { background: var(--navy); color: #dde6ee; padding-block: clamp(50px, 5vw, 80px) 30px; }
.site-footer a { color: #dde6ee; text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.f-grid {
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  padding-bottom: clamp(34px, 4vw, 56px);
}
@media (min-width: 900px) { .f-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); } }
.f-sign img { width: 176px; margin-bottom: 22px; }
.f-sign h2 { font-size: 1.3rem; color: #f4f8fc; margin-bottom: 8px; }
.f-sign p { font-size: var(--t-small); color: #9fb2c6; max-width: 36ch; margin-bottom: 20px; }
.f-sign form { display: flex; flex-wrap: wrap; gap: 10px; }
.f-sign input {
  flex: 1 1 200px;
  padding: 12px 15px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
  color: #f4f8fc;
}
.f-sign input::placeholder { color: #8ea3ba; }
.f-sign input:focus { border-color: var(--amber); }
.f-sign .btn { background: var(--amber); color: #2a1a02; border-color: var(--amber); }
.f-sign .btn:hover { background: #ffffff; border-color: #ffffff; color: var(--navy); }
.f-sign .form-note { color: #9fb2c6; width: 100%; }

.f-links { display: grid; gap: clamp(20px, 2.6vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
.f-col h3 { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
.f-col a { display: block; padding: 6px 0; font-size: 0.9375rem; }

.f-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-small);
  color: #9fb2c6;
}
.f-bottom nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* --- motion --------------------------------------------------------------- */

/* An uncover, not a fade: the band is masked and the mask retracts downward, so
   content is disclosed in place instead of drifting into existence.

   Driven by scroll position rather than a timer, so the reveal tracks the
   reader's own pace. This is not a stylistic preference. A clip-path-hidden
   element is never reported as intersecting by IntersectionObserver, so the
   observer this file used to rely on would never have fired and every band
   below the fold would have stayed invisible for good.

   animation-fill-mode: backwards is load-bearing. Before the range the
   from-state holds, so a band waiting below the fold is hidden. After the
   range no fill applies at all, so a settled band carries no clip and cannot
   cut its own hover shadows, focus rings, or the sticky rail media.

   Where animation-timeline is unsupported the animation resolves instantly to
   its unfilled base state, which is the fully visible band. */
@keyframes rise-uncover {
  from { clip-path: inset(0 -100% 100% -100%); }
  to   { clip-path: inset(0 -100% 0 -100%); }
}
@keyframes rise-lift {
  from { transform: translateY(26px); }
  to   { transform: none; }
}
/* Split open: a photograph parts from its centre outward as it arrives, so the
   picture opens rather than simply appearing. Applied to the image, not to its
   frame, so the rounded corners and the mist backing stay put and the photo
   opens inside them.

   fill-mode backwards again: nothing is filled after the range, so a settled
   photograph carries no clip and the .tile hover scale is unaffected. */
/* One gesture repeated on every shape is just a slower kind of monotony, so
   each shape moves the way its own content reads:

     a photograph that bleeds off an edge   enters from that edge
     a card grid                            opens from the centre, staggered
     a numbered process                     arrives a step at a time
     a scan list                            barely moves at all
     a full-bleed band                      drifts (parallax, see .media-band)
     everything else                        uncovers downward (.rise) */

@keyframes photo-split {
  from { clip-path: inset(0 50% 0 50%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-from-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe-from-left  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* the card grid: opens from the centre. The tile clips at the wrapper, not
     the image, so the legibility scrim in .tile-media::after opens with the
     photograph instead of hanging over the card while it is still closed. */
  .tile-media {
    animation-name: photo-split;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-timeline: view();
    animation-range: entry 14% entry 68%;
  }
  /* Three tiles sit side by side, so their view() ranges are identical and they
     would open in unison. Offsetting each range by 6% of the entry phase makes
     the row cascade left to right off the scroll itself, with no delay to
     desynchronise. */
  .tiles > .tile:nth-child(2) .tile-media { animation-range: entry 20% entry 74%; }
  .tiles > .tile:nth-child(3) .tile-media { animation-range: entry 26% entry 80%; }
  /* the tiles carry their own motion, so the block around them does not repeat it */
  .tiles.rise { animation-name: none; }

  /* the editorial split: a photograph that runs off an edge of the page enters
     from the edge it runs off, rather than opening in place. This is the one
     that was doing the same centre-split as the cards. */
  .split-bleed-right .split-media .shot > img,
  .split-bleed-left  .split-media .shot > img {
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-timeline: view();
    animation-range: entry 12% entry 66%;
  }
  .split-bleed-right .split-media .shot > img { animation-name: wipe-from-right; }
  .split-bleed-left  .split-media .shot > img { animation-name: wipe-from-left; }

  /* the numbered process: sequence is the content, so each step takes its own
     scroll range and the rail assembles itself a step at a time. No delays are
     needed — the steps are at different heights, so geometry staggers them. */
  .rail-wrap.rise { animation-name: none; }
  .rail-step {
    animation-name: rise-uncover;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-timeline: view();
    animation-range: entry 6% entry 40%;
  }

  /* the scan list: fifteen links people read to find one. Motion here delays
     the only job the list has, so it gets a short, nearly invisible pass. */
  .role-index.rise { animation-range: entry 4% entry 22%; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Longhands, not the shorthand: `animation:` resets animation-duration to 0s,
     and a scroll-driven animation needs `auto` to take its length from the
     range instead. With 0s it attaches, reports as running, and renders
     nothing. */
  .rise {
    animation-name: rise-uncover;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-timeline: view();
    animation-range: entry 8% entry 58%;
  }
  /* Section heads already wrap their heading in a div, so the type can
     counter-move inside its own mask: a curtain lift rather than a slide. */
  .rise .sec-head > div {
    animation-name: rise-lift;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-timeline: view();
    animation-range: entry 8% entry 64%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise, .rise .sec-head > div { animation: none; clip-path: none; transform: none; }
  .media-band > img, .shot > img, .tile-media, .rail-step { animation: none; clip-path: none; transform: none; }
  .mega, .mega[data-open="true"],
  .mobile-nav, .mobile-nav[data-open="true"] { transition-duration: 120ms; }
  .mega-col { transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* --- print ---------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .skip, .hero-media, .tile-media { display: none; }
  body { background: #fff; color: #000; }
}

/* --- the savings calculator ----------------------------------------------- */

/* The one page that opens on a form rather than a photograph. The band is
   navy and square; the form is a white plate that sits half over the band
   beneath, so the page reads as one object with a tool set into it. */
.calc-hero { padding-block: 1rem 0; text-align: center; }
.calc-hero-copy {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: 18px;
  justify-items: center;
  padding-bottom: clamp(36px, 4.4vw, 60px);
}
.calc-hero-copy .crumb { justify-content: center; margin-bottom: 4px; }
.calc-hero-copy .crumb a:hover { color: var(--amber); }
.calc-hero .t-h1 { max-width: 22ch; }
.calc-hero .t-lead { max-width: 58ch; }

.calc-card {
  --fg: #14283c;
  --fg-2: #55677c;
  --rule: rgba(20, 40, 62, 0.13);
  --rule-2: rgba(20, 40, 62, 0.26);
  --field: #ffffff;
  position: relative;
  z-index: 2;
  color: var(--fg);
  background: #ffffff;
  border-radius: var(--r-media);
  box-shadow: var(--shadow-lift), 0 2px 0 rgba(18, 40, 62, 0.08);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid;
  gap: 16px 18px;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  text-align: left;
  margin-inline: auto;
  margin-bottom: calc(-1 * var(--calc-lip));
  --calc-lip: 84px;
}
@media (min-width: 900px) { .calc-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) auto; } }
.calc-card .field { margin-bottom: 0; }
.calc-card .field select { padding-right: 38px; appearance: none; background: var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 4L6 8.5 10.5 4' fill='none' stroke='%2314283c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 14px center / 12px no-repeat; }
.calc-card .btn { justify-content: center; padding-block: 14px; }
.calc-card :focus-visible { outline-color: var(--amber-deep); }
.calc-card-note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--fg-2); }
.calc-card-note[data-state="error"] { color: #a3331d; font-weight: 600; }
.calc-card-note .tlink { margin-left: 6px; }

/* Whichever band follows the hero makes room for the plate's lower half. */
.calc-hero + .band, .calc-hero + [hidden] + .band { padding-top: calc(var(--band-md) + 84px); }

/* results */
.calc-results-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px 32px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.calc-results-head .label { display: block; margin-bottom: 12px; }
.calc-results-head .t-h2 { outline: none; }
.calc-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1.5px solid var(--rule-2);
  border-radius: var(--r-pill);
  background: var(--card);
}
.calc-toggle button {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.calc-toggle button[aria-pressed="true"] { background: var(--navy); color: #f4f8fc; }
.calc-toggle button:focus-visible { outline-offset: 1px; }

table.calc-table { min-width: 820px; }
table.calc-table td, table.calc-table tfoot th { font-variant-numeric: tabular-nums; }
table.calc-table tbody th { width: 30%; }
table.calc-table .calc-sub { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--fg-2); margin-top: 3px; }
table.calc-table td b { font-size: 1.0625rem; }
table.calc-table .calc-save b { color: var(--amber-ink); }
table.calc-table tfoot th, table.calc-table tfoot td { background: var(--mist); border-bottom: 0; font-weight: 700; color: var(--fg); }
table.calc-table tfoot td b { font-family: 'Archivo', sans-serif; font-size: clamp(1.25rem, 1.6vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; }
table.calc-table tfoot .calc-save b { color: var(--amber-ink); }
table.calc-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.calc-remove {
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--fg-2);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.calc-remove:hover { color: #a3331d; border-color: #a3331d; }
.calc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(24px, 3vw, 36px);
}
.calc-actions button.tlink { background: none; border: 0; cursor: pointer; }

/* how to use it: three plates, each opening on a photograph */
.calc-howto .tile { background: var(--mist); border-color: transparent; }
.calc-howto .tile-media { aspect-ratio: 16 / 10; }
.calc-howto .tile-media::after { display: none; }
.calc-howto .tile-body { padding: 22px 24px 28px; gap: 10px; }
.calc-howto .tile-body .label { color: var(--fg-2); }
.calc-howto .tile-body p { color: var(--fg); }

/* --- the closing card ----------------------------------------------------- */

/* The last thing on every page. It straddles the seam between the page and
   the footer: the band paints the footer's navy across its own lower edge,
   the card sits over the seam, and the professional stands past the card's
   top edge. Kept short: one heading, one line, one button. */
.close-cta { position: relative; padding-block: clamp(52px, 5.5vw, 76px) 0; overflow: visible; }
.close-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(72px, 8vw, 104px);
  background: var(--navy);
}
.close-cta .shell-wide { position: relative; z-index: 1; }
.close-cta .rise { animation-name: none; }
.close-card {
  position: relative;
  border-radius: var(--r-media);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  min-height: clamp(200px, 17vw, 260px);
  display: grid;
  align-items: center;
  box-shadow: var(--shadow-lift);
}
.close-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(245, 169, 59, 0.34) 1.3px, transparent 1.7px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 42%, #000 68%);
  pointer-events: none;
}
.close-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 520px;
}
.close-copy .t-h2 { max-width: 20ch; color: #ffffff; }
.close-copy p { max-width: 42ch; color: #d5e0eb; font-size: var(--t-body); }
.close-copy .btn { margin-top: 6px; }
.close-copy .cta-note { font-size: var(--t-small); color: #c3d2e0; margin-top: 2px; }
.close-person {
  position: absolute;
  right: clamp(8px, 3vw, 48px);
  bottom: 0;
  height: 116%;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.38));
  pointer-events: none;
}
@media (max-width: 899px) {
  .close-card { padding-bottom: 0; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .close-copy { padding-bottom: 8px; }
  .close-person { position: static; height: auto; max-width: 70%; margin-left: auto; margin-top: 8px; }
}
}


/* ---- how it works -------------------------------------------------------- */
/* The four step page. Its shapes are its own: a card row that indexes the
   steps, a numeral beside each step's heading, plates for the detail, the five
   day cards, and the three Standing Watch phases. The tokens are the site's. */

.hiw-hero { text-align: center; padding-block: 1rem clamp(40px, 5vw, 72px); }
.hiw-hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 2.6vw, 34px);
  max-width: 900px;
  margin-inline: auto;
}
.hiw-hero-copy .crumb { justify-content: center; margin-bottom: 0; }
/* The turn is a block, so the headline breaks where the sentence does: the
   claim on one line, the promise under it. Left to wrap on its own the amber
   started mid line and the h1 read as three ragged fragments. */
.hiw-hero .t-h1 { max-width: 38ch; }
.hiw-hero .t-h1 .hiw-turn { display: block; }
.hiw-hero .t-lead { max-width: 60ch; }
.hiw-hero-shot { width: min(100%, 680px); box-shadow: var(--shadow-media); }
.hiw-hero .hero-actions { margin-top: 0; justify-content: center; }

.hiw-turn { color: var(--amber-ink); }
.ground-navy .hiw-turn, .ground-slate .hiw-turn { color: var(--amber); }

/* the four step cards */
.hiw-steps { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hiw-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hiw-step {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-media);
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hiw-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.hiw-step-ongoing { box-shadow: inset 0 0 0 1.5px var(--amber-deep); }
.hiw-step-ongoing:hover { box-shadow: inset 0 0 0 1.5px var(--amber-deep), var(--shadow-lift); }
.hiw-step-icon { display: grid; place-items: center; height: 96px; margin-bottom: var(--s4); }
.hiw-step-icon img { height: 96px; width: auto; max-width: 100%; object-fit: contain; }
.hiw-step .label { margin-bottom: 6px; }
.hiw-step-ongoing .label { color: var(--amber-ink); }
.hiw-step h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.hiw-step p { font-size: var(--t-small); line-height: 1.5; }
.hiw-step-go { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--s3); color: var(--amber-ink); }
.hiw-step-go > span { flex: 1 1 auto; height: 2px; background: var(--amber-deep); }
.hiw-step-go .ico { width: 12px; height: 12px; }

/* a step's head: the numeral beside the heading, the argument to the right */
.hiw-step-head { display: grid; gap: clamp(20px, 3vw, 56px); align-items: start; }
@media (min-width: 860px) { .hiw-step-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hiw-step-title { display: flex; align-items: baseline; gap: var(--s3); }
.hiw-num { font-size: clamp(3rem, 6.2vw, 5.4rem); line-height: 0.92; color: var(--rule-2); }
.hiw-step-title .t-h2 { max-width: 14ch; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1; }
.hiw-step-head .t-body { padding-top: 8px; max-width: 46ch; }
.hiw-step-head .t-small { margin-top: 14px; }
.hiw-frame { margin: clamp(24px, 3vw, 44px) auto 0; box-shadow: var(--shadow-media); }

/* the plates under a step */
.hiw-plates { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin-top: clamp(26px, 3vw, 44px); }
@media (min-width: 640px) { .hiw-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .hiw-plates[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hiw-plates[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hiw-plate {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: var(--s3);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-media);
}
.hiw-plate-mark { box-shadow: inset 0 0 0 1.5px var(--amber-deep); }
.hiw-plate .label { margin-bottom: 2px; }
.hiw-plate-mark .label { color: var(--amber-ink); }
.hiw-plate h3 { font-size: 1rem; }
.hiw-plate p { font-size: var(--t-small); line-height: 1.5; }
.hiw-plate .t-small { margin-top: 4px; }
.hiw-foot { margin-top: clamp(22px, 2.4vw, 32px); }

/* the screening path: five stages, no figures */
.hiw-path { margin-top: clamp(26px, 3vw, 44px); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.hiw-path .label { margin-bottom: var(--s3); }
/* Five columns, each a share of the people who apply. The bars are true to
   the figures rather than eased into a shape that looks better: the drop from
   100 to 1.5 is the whole argument, so a bar for 1.5% is a sliver, and the
   floor of 5px is there only so it does not vanish. Every figure is printed,
   so the chart is read from the numbers and shaped by the bars. */
.hiw-funnel { display: grid; gap: clamp(8px, 1.2vw, 18px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hiw-funnel li { display: grid; gap: 10px; align-content: start; }
.hiw-funnel-name {
  font-size: var(--t-small);
  line-height: 1.3;
  color: var(--fg-2);
  min-height: 2.6em;
}
.hiw-funnel-share { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1; color: var(--fg); }
.hiw-funnel-track {
  display: flex;
  align-items: flex-end;
  height: clamp(120px, 16vw, 210px);
  background: var(--mist);
  border-radius: var(--r-sm);
}
.hiw-funnel-bar { display: block; width: 100%; height: max(5px, var(--share)); background: var(--slate); border-radius: var(--r-sm); }
.hiw-funnel li:first-child .hiw-funnel-bar { background: var(--navy); }
.hiw-funnel li:nth-child(4) .hiw-funnel-bar { background: var(--amber-deep); }
.hiw-funnel li:last-child .hiw-funnel-bar { background: var(--amber); }
.hiw-funnel li:last-child .hiw-funnel-share { color: var(--amber-ink); }
/* Below the point where five labels stop fitting, the chart turns on its side:
   the label reads across, the bar runs from it, and 1.5% of a full width track
   is still something a thumb can see. */
@media (max-width: 720px) {
  .hiw-funnel { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .hiw-funnel li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s3); }
  .hiw-funnel-name { min-height: 0; }
  .hiw-funnel-share { text-align: right; }
  .hiw-funnel-track { grid-column: 1 / -1; display: block; height: 14px; }
  .hiw-funnel-bar { height: 100%; width: max(5px, var(--share)); }
}

/* step four, part one: getting started */
.hiw-part { display: grid; gap: 10px; margin-top: clamp(30px, 3.6vw, 52px); }
.hiw-part .t-h3, .hiw-part .t-h2 { max-width: 26ch; }
.hiw-part .t-lead { max-width: 60ch; }
.ground-navy .hiw-part { margin-top: 0; }
.hiw-days { display: grid; gap: clamp(8px, 1.2vw, 18px); grid-template-columns: minmax(0, 1fr); margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 560px) { .hiw-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hiw-days { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hiw-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s3);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-media);
}
.hiw-day .t-num { font-size: 1.5rem; line-height: 1; color: var(--amber-ink); }
.hiw-day-rule { height: 2px; background: var(--rule); }
.hiw-day-last .hiw-day-rule { background: var(--amber); }
.hiw-day b { font-family: 'Archivo', 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.hiw-day span:last-child { font-size: var(--t-small); line-height: 1.5; }
.hiw-need { display: grid; gap: var(--s3); margin-top: clamp(30px, 3.6vw, 52px); }
.hiw-need .t-h3 { max-width: 26ch; }
.hiw-need .t-small { color: var(--fg-2); }
.hiw-pilot {
  display: grid;
  gap: var(--s2) var(--s4);
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-media);
}
@media (min-width: 860px) { .hiw-pilot { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.hiw-pilot .t-body + .t-body { margin-top: 10px; }

/* step four, part two: Standing Watch */
.hiw-watch { margin-top: clamp(28px, 3.4vw, 48px); }
.hiw-phases { display: grid; gap: var(--s2); }
.hiw-phase {
  display: grid;
  gap: var(--s2) clamp(18px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-media);
}
@media (min-width: 780px) { .hiw-phase { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.hiw-phase-mark { border-left: 4px solid var(--amber); }
.hiw-phase h3 { font-size: 1.25rem; }
.hiw-phase .t-small { color: var(--fg-2); margin-top: 4px; }
.hiw-phase > p { line-height: 1.6; }
.hiw-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: #2a1a02;
  font-size: var(--t-small);
  font-weight: 650;
}
.hiw-watch-close {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  margin-top: clamp(30px, 3.6vw, 52px);
  padding-top: var(--s4);
  border-top: 2px solid var(--amber);
}
.hiw-watch-close .t-lead { max-width: 64ch; }

/* the rate note */
.hiw-note { display: grid; gap: clamp(20px, 3vw, 56px); align-items: center; }
@media (min-width: 860px) { .hiw-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.hiw-note .t-h3 { max-width: 20ch; }
.hiw-note .t-body { max-width: 56ch; }
.hiw-note .t-small { margin-top: 12px; }