/* =====================================================================
   InvestorCheq
   Ivory field, navy type: the exact inversion of the GP site. The navy
   ground survives only in the closing CTA block and the footer.

   Tokens are declared once here. Brass is governed by the brass law,
   revised for this site (one place shorter than the GP list, because
   the logo itself now carries brass): the e. mark inside the logo
   images, kicker labels, step numerals, and the primary CTA button.
   Plus ::selection, carried over deliberately. Nowhere else.
   Section-title rules and row hairlines are SLATE on this site.
   The step and advantage icons are navy line art and must never be
   recoloured brass.

   MOTION: quiet fades and reveals only, per the brief. Every animation
   runs once and never loops. All of it is disabled under
   prefers-reduced-motion.
   ===================================================================== */

/* ------------------------------- fonts ------------------------------ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-400.woff2') format('woff2');
}
/* No italic face is declared on purpose, and the brief bans italics on
   this site outright (§5.1, §7). Playfair is a Didone: its thin strokes
   thin further when sloped. Every voice here is Playfair roman. The
   deploy script excludes the italic woff2; do not add a face back. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}

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

:root {
  --navy:        #131A26;
  --navy-tone:   #111722;   /* kept for the navy blocks (close, footer) */
  --navy-deep:   #0E141D;
  --ivory:       #F2EFE9;
  /* Alternation band, reverted to the original subtle step (pass 4 §2):
     the hero sketch and icon scale now carry the page's dimension. */
  --ivory-tone:  #ECE8E0;
  --slate:       #8A93A1;
  --brass:       #B4915C;
  --brass-hi:    #C29E69;
  --hairline:    rgba(19, 26, 38, 0.14);
  /* Row and contrast dividers: slate per the revised brass law. */
  --hairline-slate: rgba(138, 147, 161, 0.45);

  --tone: #F2EFE9;          /* current section ground, see room-tone */

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap:    1140px;
  --gutter:  clamp(20px, 5vw, 48px);
  /* The single section-padding token: the FULL visual gap at every
     section join. Each section carries half on each side, so every join
     on the page measures exactly this value. */
  --section: clamp(120px, 12vw, 176px);
  --nav-h:   68px;

  /* single easing for every entrance transform */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);

  interpolate-size: allow-keywords;
}

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

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow-x here on purpose: it would create a scroll container and
     break the sticky nav. Elements that bleed are clipped by their own
     sections instead. */
}

h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection {
  background: rgba(180, 145, 92, 0.35);
  color: var(--navy);
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy-deep);
  color: var(--ivory);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------- room tone ------------------------------ */

/* Alternating section grounds. --tone is inherited, so anything that has
   to match its section's background (the step-rail icon pads) reads it
   rather than hard-coding a colour. */
.section { background: var(--tone); }
.tone-deep { --tone: var(--ivory-tone); }

/* Navy fields: the closing CTA and footer keep the GP ground, so their
   hairlines and focus rings flip back to ivory inside them. */
.close,
.footer {
  --hairline: rgba(242, 239, 233, 0.14);
}
.close :focus-visible,
.footer :focus-visible { outline-color: var(--ivory); }

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

.kicker {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass);
}

/* Masked headline wrapper. The mask carries the type scale so its padding
   can be expressed in em of the headline, which is what clears descenders
   without shifting anything: padding down, equal negative margin back. */
.h2mask {
  --mask-pad: 0.09em;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  overflow: hidden;
  padding-bottom: var(--mask-pad);
  margin-bottom: calc(var(--mask-pad) * -1);
}
.h2mask--center { font-size: clamp(2.6rem, 5.2vw, 4rem); }

.sec-head h2,
.h2mask h2 {
  font-size: inherit;
  line-height: 1.1;
  color: var(--navy);
  margin-top: 22px;
  max-width: 20ch;
}

/* Section-title hairline: slate on this site per the revised brass law. */
.sec-head .rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--slate);
  margin-top: 34px;
  transform: scaleX(0);
  transform-origin: left center;
}

.sec-head--center { text-align: center; }
.sec-head--center h2 { margin-inline: auto; }
.sec-head--center .rule { margin-inline: auto; }

.section { padding-block: calc(var(--section) / 2); }

/* Pull-quote voice: Playfair roman, never italic, never bold. Em-based
   measure so it scales with the clamped type and each paragraph lands on
   about two lines. */
.pull {
  margin: 46px auto 0;
  max-width: 35em;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.6;
  color: rgba(19, 26, 38, 0.94);
}
.pull p {
  font-weight: 400;
  /* pretty, not balance: balance narrows the effective measure per
     paragraph, which left paragraphs on visibly different widths.
     pretty keeps the full measure and only guards the last line. */
  text-wrap: pretty;
}
.pull p + p { margin-top: 0.9em; }

/* Left-aligned variant for the left-headed sections. */
.pull--left { margin-inline: 0; }

/* ---------------------------- vetting checks ------------------------ */

/* The Access checklist: a featured standard, not a footnote and not a
   feature grid. Type sits between the body scale and the card-heading
   scale; the checkmark inherits it. Single column at every width,
   generous line spacing, no boxes. Checkmarks are navy, never brass. */
.checks {
  margin-top: 34px;
  max-width: 56ch;
}
.checks li {
  padding-block: 9px;
  font-size: 1.18rem;
  line-height: 1.65;
  color: rgba(19, 26, 38, 0.88);
}
.checks li::before {
  content: '\2713';
  margin-right: 16px;
  color: var(--navy);
  font-weight: 600;
}

/* ------------------------------ button ------------------------------ */

.btn {
  display: inline-block;
  white-space: nowrap;
  background: var(--brass);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid transparent;
  padding: 16px 34px;
  border-radius: 2px;
  transition: background-color 150ms ease-out,
              transform 150ms ease-out,
              box-shadow 150ms ease-out;
}
.btn:hover {
  background: var(--brass-hi);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Header CTA: outline brass. The hero and closing CTAs are the only two
   filled brass elements on the page. */
.btn--outline {
  background: transparent;
  color: var(--brass);
  border-color: var(--brass);
}
.btn--outline:hover {
  background: rgba(180, 145, 92, 0.12);
  color: var(--brass-hi);
  border-color: var(--brass-hi);
  box-shadow: none;
}

/* -------------------------------- nav ------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.nav.is-scrolled {
  background: rgba(242, 239, 233, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--hairline);
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo { display: block; line-height: 0; }
.nav__logo img { height: 30px; width: auto; }

.nav__right { display: flex; align-items: center; gap: 36px; }

.nav__link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.nav__link:hover { color: var(--navy); }

/* hairline draws left to right under the link */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease-out;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

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

/* No background image on this hero, per the brief: ivory field, generous
   vertical space, navy Playfair headline, slate subline. The primary CTA
   stands alone; there is no secondary path. */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 96px));
  overflow: hidden;
}

/* Architectural sketch, right region. The asset is full-contrast navy
   line art; the on-page value lives entirely in this opacity, so it stays
   tunable here. background-position: right keeps the building's cut edge
   flush with the viewport edge. If the file is absent nothing renders. */
.hero__sketch {
  position: absolute;
  top: clamp(24px, 8vh, 72px);
  bottom: clamp(24px, 8vh, 72px);
  right: 0;
  width: min(38vw, 560px);
  background: url('/assets/web/hero-sketch.png') right center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__title {
  font-size: clamp(2.7rem, 5.6vw, 4.8rem);
  line-height: 1.08;
  color: var(--navy);
  text-wrap: pretty;
}

/* Each H1 line rides in its own mask. Padding clears the descenders, the
   equal negative margin puts the next line back where it was. */
.hline {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hline__in { display: block; }

.nb { white-space: nowrap; }

/* Two text treatments only, matching the GP hero's discipline: the
   Playfair headline and this slate subline. */
.hero__sub {
  margin-top: 34px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--slate);
  max-width: 52ch;
}

/* Deliberate two-line subline at desktop: the second sentence always
   starts the second line. Dissolves to natural wrapping at mobile. */
.hero__sub-b { display: block; }

.hero__cta { margin-top: 46px; }

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

/* Horizontal timeline: the GP site's step-rail pattern. Brass numerals,
   navy line-art icons riding the rail. The icon pad reads --tone so the
   rail is masked behind each icon on any section ground. If an icon file
   is absent its <img> removes itself (inline onerror) and the numeral
   carries the step alone. */
.steps {
  position: relative;
  margin-top: clamp(64px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(24px, 3.5vw, 44px);
}

/* The rail crosses the vertical centre of the fixed 128px icon boxes:
   the per-icon optical widths vary, so the box height is pinned to the
   tallest and every icon centres inside it. Navy at 1px, per pass 4 §5:
   colour changed from the slate-value tint, thickness deliberately not. */
.steps::before {
  content: '';
  position: absolute;
  top: 64px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--navy);
}

.step { text-align: center; }

.step__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* top-aligned in its line box: the per-icon img heights vary, and
     baseline alignment would let each image's bottom edge shift its
     whole column a few pixels */
  vertical-align: top;
  height: 128px;
  background: var(--tone);
}
.step__icon img { width: 120px; height: 120px; object-fit: contain; }

/* Optical pass: per-icon display widths equalize perceived weight within
   the set, from measured ink mass, then nudged by eye (pass 4 §5: the
   finely-stroked calendar +10%, the handshake +5%, which the mass
   formula under-serves).
   Connector inset: each icon's padding-inline is compensated for its ink
   width (158/141/150/164 on 240) so the rail meets every icon at a
   consistent 40px optical inset on both sides. */
.step:nth-child(1) .step__icon img { width: 126px; height: 126px; }
.step:nth-child(2) .step__icon img { width: 119px; height: 119px; }
.step:nth-child(3) .step__icon img { width: 124px; height: 124px; }
.step:nth-child(4) .step__icon img { width: 128px; height: 128px; }
.step:nth-child(1) .step__icon { padding-inline: 18px; }
.step:nth-child(2) .step__icon { padding-inline: 16px; }
.step:nth-child(3) .step__icon { padding-inline: 17px; }
.step:nth-child(4) .step__icon { padding-inline: 20px; }

.step__num {
  display: block;
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--brass);
}

/* Standard body scale, left-aligned inside the centred column. */
.step__body {
  margin-top: 18px;
  font-size: 1.06rem;
  line-height: 1.65;
  color: rgba(19, 26, 38, 0.8);
  max-width: 30ch;
  margin-inline: auto;
  text-align: left;
}
.step__lead {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--navy);
}

/* ---------------------------- advantage ----------------------------- */

/* Six cards, 3x2: icon, heading, short body. Navy line-art icons on a
   uniform square canvas; same graceful degradation as the steps. */
.adv {
  margin-top: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(32px, 4vw, 48px);
  row-gap: clamp(48px, 5vw, 64px);
}

.adv__cell {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(19, 26, 38, 0.8);
}

.adv__icon {
  display: flex;
  align-items: center;
  height: 88px;
  margin-bottom: 20px;
}
.adv__icon img { width: 80px; height: 80px; object-fit: contain; }

/* Optical pass: per-icon widths from measured ink mass. Positions track
   the pass 4 §6 card order (funnel, magnifier, door, envelope, figure,
   scale): the light person figure steps up, the heavy envelope and scale
   step down. */
.adv__cell:nth-child(1) .adv__icon img { width: 86px; height: 86px; }
.adv__cell:nth-child(2) .adv__icon img { width: 77px; height: 77px; }
.adv__cell:nth-child(3) .adv__icon img { width: 80px; height: 80px; }
.adv__cell:nth-child(4) .adv__icon img { width: 72px; height: 72px; }
.adv__cell:nth-child(5) .adv__icon img { width: 88px; height: 88px; }
.adv__cell:nth-child(6) .adv__icon img { width: 70px; height: 70px; }

.adv__lead {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--navy);
}

/* ---------------------------- deal types ----------------------------- */

/* Five quiet boxes in a brick pattern: a row of three, then a row of two
   offset so each bottom box sits centred under a joint between two top
   boxes. Six-column grid; every box spans 2, so all five are identical.
   No imagery of specific properties; nothing that resembles a live
   offering listing. */
.desk__grid {
  margin-top: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* every implicit row tracks the tallest box, so all five boxes stay
     identical-size with the longer bodies at every breakpoint */
  grid-auto-rows: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
}

.desk__card {
  grid-column: span 2;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  padding: clamp(24px, 3vw, 34px);
}
.desk__card:nth-child(4) { grid-column: 2 / span 2; }
.desk__card:nth-child(5) { grid-column: 4 / span 2; }

.desk__lead {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 12px;
}

.desk__card p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(19, 26, 38, 0.75);
}

/* Runs at the standard content width: one line at desktop, natural
   wrapping below. */
.desk__note {
  margin-top: clamp(36px, 4.5vw, 52px);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--slate);
}

/* ------------------------ experience band --------------------------- */

.cred__sub {
  margin-top: 40px;
  max-width: 54ch;
  color: rgba(19, 26, 38, 0.88);
}

/* Four stats, identical visual size, as a 2x2 grid at every viewport
   width. The GP centre-emphasis treatment is deliberately absent. Rows
   come in pairs (numeral row, caption row) per grid row of stats. */
.stats__list {
  margin-top: clamp(56px, 7vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(28px, 5vw, 88px);
  /* the caption datum: the numeral row's descent plus --mask-pad, plus
     this gap, lands every caption's first line ~26px under the shared
     baseline. One value, so the datum stays identical across all four. */
  row-gap: 10px;
  /* left-aligned to the same content margin as the heading and body */
  text-align: left;
}
/* standard rhythm between the two stat rows */
.stats__list .stat:nth-child(n+3) .stat__mask { margin-top: clamp(20px, 2.5vw, 32px); }

/* Subgrid puts each row-pair's numerals into one shared row and their
   captions into another, so a taller numeral cannot push its own caption
   down. Baseline alignment then gives the two datums: one shared numeral
   baseline, one shared caption top line. */
.stat {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: baseline;
}

.stat__mask {
  /* smaller than the headline masks: it doubles as the caption datum, and
     these numerals only have to clear the descender in "$49.6M". The 2x2
     cells are wide, so the numerals run at the GP scale again, with a
     vw-tracked floor that keeps "225,000" on one line at 360px. */
  --mask-pad: 0.05em;
  display: block;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  /* clip-path rather than overflow: any overflow other than visible forces
     a box to report its bottom margin edge as its baseline, which would
     break the shared baseline. clip-path hides the pre-reveal translate
     without touching baseline calculation. */
  clip-path: inset(-100% 0 0 0);
  padding-bottom: var(--mask-pad);
}

.stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: inherit;
  line-height: 1.05;
  color: var(--navy);
}

/* Playfair's $ carries a tall struck stem that collides with the 4 at
   display sizes: one step smaller keeps it a currency mark, not a
   strikethrough. */
.stat__cur {
  font-size: 0.72em;
  margin-right: 0.03em;
}

.stat__cap {
  margin: 0;
  max-width: 24ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate);
}

/* Asterisked footnote. All figures are past tense and describe the
   principals' prior experience. */
.stats__attr {
  margin-top: clamp(32px, 4vw, 44px);
  text-align: left;
  font-size: 0.9rem;
  color: var(--slate);
}

/* ------------------------------- faq -------------------------------- */

/* Single column on the GP site's details mechanics, running the full
   content measure. */
.faq__list {
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--hairline-slate);
}

.faq__item { border-bottom: 1px solid var(--hairline-slate); }

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding-block: 26px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(19, 26, 38, 0.88);
  list-style: none;
  transition: color 200ms ease-out;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: var(--navy); }

/* Navy-leaning chevron (darker than slate for interactive affordance),
   never brass. */
.faq__mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(19, 26, 38, 0.6);
  border-bottom: 2px solid rgba(19, 26, 38, 0.6);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 250ms ease-out;
}
.faq__item[open] .faq__mark { transform: rotate(-135deg) translateY(-2px); }

.faq__a {
  padding-bottom: 30px;
  padding-right: 44px;
  max-width: 68ch;
  color: rgba(19, 26, 38, 0.8);
}

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 250ms ease-out, content-visibility 250ms allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* ------------------------------ close ------------------------------- */

/* Navy field for contrast against the ivory page: mirrors the GP site's
   closing block, inverted. Deliberately shorter than the GP close. No
   constellation here: its brass node would be a fifth brass location, and
   restraint is the message. */
.close {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  padding-block: calc(var(--section) / 2);
  overflow: hidden;
  background: var(--navy);
}

.close__inner { position: relative; z-index: 1; }

/* Sized so the one-line title holds one line at full desktop width. */
.close .h2mask--center { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }

/* Two classes deep so it outranks `.h2mask h2`, which would otherwise
   paint this navy on the navy field. */
.close .close__title {
  line-height: 1.1;
  color: var(--ivory);
  max-width: none;
  margin-inline: auto;
}

.close__sub {
  margin-top: 26px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(242, 239, 233, 0.7);
}

.close__cta { margin-top: 40px; }

.close__mail {
  margin-top: 40px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(242, 239, 233, 0.6);
}
.close__mail a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease-out;
}
.close__mail a:hover { color: var(--ivory); }

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

/* Compressed institutional footer: identity left, reach right, a
   hairline, then one centred legal bar. Collapses to a centred stack on
   small screens. */
.footer {
  background: var(--navy-deep);
  border-top: 1px solid var(--hairline);
  padding-top: 48px;
  padding-bottom: 32px;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer__logo { height: 36px; width: auto; }

.footer__contact { text-align: right; }

.footer__reach {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(242, 239, 233, 0.85);
}

.footer__place {
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--slate);
}

.footer__rule {
  height: 1px;
  background: var(--hairline);
  margin-block: 26px;
}

/* One centred bar: copyright, brand line, legal links. Slate. */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--slate);
}

.footer__reach a,
.footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease-out;
}
.footer__reach a:hover,
.footer__legal a:hover { color: var(--ivory); }

.footer__sep { padding-inline: 10px; }

/* ============================ legal pages =========================== */

.legal { padding-block: clamp(72px, 9vw, 132px); }

.legal__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  color: var(--navy);
}

.legal__meta { margin-top: 20px; font-size: 0.9rem; color: var(--slate); }

.legal__body { margin-top: clamp(40px, 5vw, 56px); max-width: 68ch; }

.legal__body h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
  margin-top: 44px;
  max-width: none;
}
.legal__body h2:first-child { margin-top: 0; }

.legal__body p { margin-top: 14px; color: rgba(19, 26, 38, 0.8); }

.legal__body ul {
  margin-top: 14px;
  padding-left: 20px;
  list-style: disc;
  color: rgba(19, 26, 38, 0.8);
}
.legal__body li { margin-top: 6px; }
.legal__body a { color: var(--navy); text-decoration: underline; }

.legal__back { margin-top: clamp(48px, 6vw, 72px); font-size: 0.9rem; color: var(--slate); }
.legal__back a { color: var(--slate); text-decoration: none; }
.legal__back a:hover { color: var(--navy); }

/* ------------------------------- 404 -------------------------------- */

.nf {
  min-height: 68vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding-block: clamp(72px, 10vw, 140px);
}
.nf__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
  color: var(--navy);
  max-width: 16ch;
  margin-inline: auto;
}
.nf__line {
  margin-top: 26px;
  font-size: 1.1rem;
  color: var(--slate);
}
.nf__cta { margin-top: 44px; }
.nf__home { margin-top: 26px; font-size: 0.9rem; color: var(--slate); }
.nf__home a { color: var(--slate); text-decoration: none; }
.nf__home a:hover { color: var(--navy); }

/* =====================================================================
   MOTION
   Hero entrance is pure CSS so it plays with or without JS. Everything
   scroll-triggered is guarded on .js, so a no-JS page renders complete.
   Nothing here uses pointer-events or overlays, so scrolling and clicking
   are available from the first frame, mid-sequence included.
   ===================================================================== */

/* ------------------------- 1. hero entrance ------------------------- */

.hline__in {
  transform: translateY(115%);
  animation: line-rise 600ms var(--ease-entrance) forwards;
  animation-delay: calc(350ms + var(--i) * 90ms);
}
@keyframes line-rise { to { transform: none; } }

.hero__sub {
  opacity: 0;
  animation: rise-in 500ms var(--ease-entrance) 600ms forwards;
}
.hero__cta {
  opacity: 0;
  animation: rise-in 500ms var(--ease-entrance) 700ms forwards;
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Scoped to pages that actually run the hero sequence, so the legal and
   404 pages show their nav immediately. Browsers without :has() drop the
   rule entirely, which also leaves the nav visible: a safe fallback. */
body:has(.hero) .nav {
  opacity: 0;
  animation: nav-in 500ms var(--ease-entrance) 780ms forwards;
}
@keyframes nav-in { to { opacity: 1; } }

/* -------------------- 2. section headline reveals ------------------- */

.js .reveal .kicker {
  opacity: 0;
  transition: opacity 500ms var(--ease-entrance);
}
.js .reveal.is-visible .kicker { opacity: 1; }

.js .reveal .h2mask h2 {
  transform: translateY(110%);
  transition: transform 650ms var(--ease-entrance) 150ms;
}
.js .reveal.is-visible .h2mask h2 { transform: none; }

.js .rule { transition: transform 600ms var(--ease-entrance) 850ms; }
.reveal.is-visible .rule { transform: scaleX(1); }
.no-js .rule { transform: scaleX(1); }

/* generic content riser */
.js .reveal .rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-entrance) 450ms,
              transform 550ms var(--ease-entrance) 450ms;
}
.js .reveal .rise--late {
  transition-delay: 620ms;
}
.js .reveal.is-visible .rise { opacity: 1; transform: none; }

/* ------------------------ 3. stat band entrance --------------------- */

.js .stats .stat__num {
  transform: translateY(110%);
  transition: transform 650ms var(--ease-entrance);
  transition-delay: calc(var(--i) * 120ms);
}
.js .stats.is-visible .stat__num { transform: none; }

.js .stats .stat__cap {
  opacity: 0;
  transition: opacity 500ms var(--ease-entrance);
  transition-delay: calc(380ms + var(--i) * 120ms);
}
.js .stats.is-visible .stat__cap { opacity: 1; }

/* --------------------- 4. staggered list reveals --------------------- */

/* Steps, advantage cells, deal boxes and FAQ items share one uniform
   fade + rise; only their staggers differ. */
.js .reveal .step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-entrance),
              transform 550ms var(--ease-entrance);
  transition-delay: calc(400ms + var(--i) * 90ms);
}
.js .reveal.is-visible .step { opacity: 1; transform: none; }

.js .reveal .adv__cell {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-entrance),
              transform 550ms var(--ease-entrance);
  transition-delay: calc(400ms + var(--i) * 80ms);
}
.js .reveal.is-visible .adv__cell { opacity: 1; transform: none; }

.js .reveal .desk__card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-entrance),
              transform 550ms var(--ease-entrance);
  transition-delay: calc(400ms + var(--i) * 80ms);
}
.js .reveal.is-visible .desk__card { opacity: 1; transform: none; }

.js .reveal .faq__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-entrance),
              transform 550ms var(--ease-entrance);
  transition-delay: calc(400ms + var(--i) * 60ms);
}
.js .reveal.is-visible .faq__item { opacity: 1; transform: none; }

/* ============================ responsive ============================ */

@media (max-width: 980px) {
  .adv { grid-template-columns: repeat(2, 1fr); }

  /* deal boxes: 2 + 2 + 1 */
  .desk__grid { grid-template-columns: repeat(2, 1fr); }
  .desk__card,
  .desk__card:nth-child(n+4) { grid-column: span 1; }
}

@media (max-width: 860px) {
  .nav__link { display: none; }

  /* the lockup holds its own against the CTA at mobile */
  .nav__logo img { height: 36px; }

  /* hero: roughly half the desktop vertical padding, natural headline
     wrapping (the desktop line breaks dissolve to inline), and the
     sketch withdraws rather than crowd the text */
  .hero {
    min-height: 0;
    padding-block: clamp(40px, 9vw, 64px);
    padding-top: calc(var(--nav-h) + clamp(32px, 8vw, 56px));
  }
  .hero__sketch { display: none; }
  .hline,
  .hline__in { display: inline; padding: 0; margin: 0; overflow: visible; }
  .hline__in { transform: none; animation: none; }
  /* the final two words stay together, so the last line is never a
     single orphan word */
  .hline:last-of-type { white-space: nowrap; }

  /* subline returns to natural wrapping at mobile */
  .hero__sub-b { display: inline; }
  .hero__title {
    opacity: 0;
    animation: rise-in 500ms var(--ease-entrance) 350ms forwards;
  }

  .faq__a { padding-right: 0; }

  /* steps: vertical rail, icon column left; icons step down from the
     120px desktop size so the text column keeps its measure */
  .steps { grid-template-columns: 1fr; row-gap: 48px; }
  .steps::before {
    top: 0;
    bottom: 0;
    left: 44px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .step {
    display: grid;
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      'icon num'
      'icon body';
    column-gap: 24px;
    text-align: left;
  }
  .step__icon,
  .step:nth-child(n) .step__icon {
    grid-area: icon;
    align-items: flex-start;
    height: auto;
    padding-inline: 0;
    padding-block: 8px;
  }
  /* per-icon optical widths carried down at ~0.73 of desktop scale */
  .step__icon img { width: 88px; height: 88px; }
  .step:nth-child(1) .step__icon img { width: 92px; height: 92px; }
  .step:nth-child(2) .step__icon img { width: 87px; height: 87px; }
  .step:nth-child(3) .step__icon img { width: 91px; height: 91px; }
  .step:nth-child(4) .step__icon img { width: 93px; height: 93px; }
  .step__num { grid-area: num; margin-top: 4px; }
  .step__body { grid-area: body; margin-top: 12px; margin-inline: 0; max-width: none; }
}

@media (max-width: 640px) {
  .adv { grid-template-columns: 1fr; row-gap: 44px; }
  .desk__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* centred stack: logo, contact, Miami, then the legal bar */
  .footer__top {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
  }
  .footer__contact { text-align: center; }
  .footer__place { margin-top: 6px; }

  .footer__reach,
  .footer__place { line-height: 2; }
}

@media (max-width: 480px) {
  .hero__sub { font-size: 1.15rem; }
}

@media (max-width: 360px) {
  .hero__title { font-size: 2.3rem; }
}

/* =====================================================================
   REDUCED MOTION
   Everything renders in its final state, instantly. No animation, no
   transition, no transform, anywhere.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .hline__in,
  .js .reveal .h2mask h2,
  .js .stats .stat__num { transform: none; }

  .hero__title,
  .hero__sub,
  .hero__cta,
  .nav,
  .js .reveal .kicker,
  .js .stats .stat__cap { opacity: 1; }

  .js .reveal .rise,
  .js .reveal .step,
  .js .reveal .adv__cell,
  .js .reveal .desk__card,
  .js .reveal .faq__item {
    opacity: 1;
    transform: none;
  }

  .rule,
  .js .rule { transform: scaleX(1); }
}