/* =========================================================================
   KOVA Consulting — site stylesheet
   Framework-free: plain HTML + CSS + vanilla JS.
   Content source of truth: docs/kova-consulting-context.md

   Layout language follows the Lumena Partners reference: editorial Swiss
   minimalism — everything at font-weight 400, display type set very large with
   tight negative tracking, hairlines instead of cards, sharp corners except
   fully-round pill buttons, full-bleed media bands between content, and
   asymmetric two-column composition.

   KOVA's own palette (dark green + copper) and Poppins are unchanged.
   ========================================================================= */

:root {
  /* ---- Brand palette (unchanged) ---- */
  --bg: #10322f;
  --bg-deep: #0b2624;
  --bg-raise: #16403c;
  --text: #ffffff;
  --muted: #c8d0c4;
  --muted-2: rgba(200, 208, 196, 0.72);
  --accent: #ac5e2a;
  --accent-bright: #c47a3e;
  --accent-text: #d4824a;

  /* Hairlines carry the structure now that cards are gone, so they sit a
     little stronger than before. */
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.08);

  /* ---- Type scale ----
     The reference runs 76px hero / 51–59px section / 21px sub, all at weight
     400. Matching those proportions is most of what reads as "premium". */
  --t-display: clamp(36.8px, 6.44vw, 92px);
  --t-h2:      clamp(27.6px, 3.864vw, 55.2px);
  /* The row/title tier. Was 42.32px max and unused while three bespoke clamps
     did its job; retuned to the value .sgrid__name and .keys__ptitle already
     shared, and every row title now points here. */
  --t-row:     clamp(18.4px, calc(14.72px + 1.022vw), 36.8px);
  --t-lead:    clamp(15.64px, 1.38vw, 23px);
  --t-body:    clamp(12.88px, 0.92vw, 15.18px);
  --t-small:   clamp(11.96px, 0.828vw, 13.8px);
  --t-label:   10.58px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 84px;

  /* ---- Side padding ----
     Measured off the Lumena reference. Above 1280px their padding is exactly
     3.2rem of a fluid root (root = 5px + vw/288), which resolves to
     16px + 1.1111vw. Below 1280px the root pins at 10px and the padding
     follows a shallower curve instead. Both formulas reproduce the measured
     values to within 0.1px:

       1280 -> 30.2   1440 -> 32.0   1600 -> 33.8   1920 -> 37.3
        390 -> 18.3    768 -> 24.7   1024 -> 29.1

     There is deliberately no centred max-width cap — the reference runs
     edge-to-edge minus this padding, and the old min(94vw, 1560px) container
     was what actually produced the oversized margins. */
  --gutter: calc(11.5px + 1.72vw);
  --section-y: clamp(72px, 8.5vw, 132px);
  --font: "Poppins", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }   /* JS drives the smooth scrolling */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip, not hidden, so position:sticky keeps working */
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
em { font-style: normal; color: var(--accent-text); }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 1px solid var(--accent-bright); outline-offset: 4px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  padding: 12px 22px; background: var(--text); color: var(--bg-deep);
  font-family: var(--font-mono); font-size: 11.04px; border-radius: 999px;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Above 1280px the reference's root font-size goes fluid and its padding
   becomes 3.2rem of it. */
@media (min-width: 1280px) {
  :root { --gutter: calc(16px + 1.1111vw); }
}

/* ---------- Layout ---------- */
.wrap { width: 100%; margin: 0; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Typography primitives ---------- */
/* Weight 400 throughout is the discipline — no headings step up to 500/600.
   Size and space create hierarchy instead of weight. */
.display {
  margin: 0; font-weight: 400; font-size: var(--t-display);
  line-height: 1.02; letter-spacing: -0.032em;
}
.h2 {
  margin: 0; font-weight: 400; font-size: var(--t-h2);
  line-height: 1.06; letter-spacing: -0.025em;
}
.lead {
  margin: 0; font-weight: 400; font-size: var(--t-lead);
  line-height: 1.42; letter-spacing: -0.012em; color: var(--text);
}
.body { margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.65; }
.small { margin: 0; color: var(--muted-2); font-size: var(--t-small); line-height: 1.6; }

/* Mono label — used for eyebrows, numbers, and meta keys. */
.label {
  display: block; margin: 0;
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2);
}
.label--accent { color: var(--accent-text); }
/* Section head pattern — every numbered section opens with the same stack:
   eyebrow -> h2 (--t-h2, the single section scale) -> hairline -> lead.
   The type scale has exactly three display tiers: --t-display (hero h1 and
   the footer close only), --t-h2 (every section h2), --t-row (row/panel
   titles). Do not introduce a fourth. */
.eyebrow { display: block; margin-bottom: calc(14px + 0.9vw); }
.eyebrow--span { grid-column: 1 / -1; }

/* ---------- Pill buttons ----------
   The reference's one piece of geometry: fully round, uppercase, letterspaced,
   small. Everything else on the page has sharp corners. */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 32px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 10.58px;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pill--solid { background: var(--text); color: var(--bg-deep); }
.pill--solid:hover { background: var(--accent-bright); color: #fff; transform: translateY(-2px); }
.pill--ghost { border-color: var(--line); color: var(--text); }
.pill--ghost:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.pill--copper { background: var(--accent); color: #fff; }
.pill--copper:hover { background: var(--accent-bright); transform: translateY(-2px); }
.pill--sm { padding: 12px 22px; font-size: 9.66px; }
.pill .arr { transition: transform 0.35s var(--ease); }
.pill:hover .arr { transform: translateX(4px); }

/* Quiet text link with a rule that draws in on hover. */
.tlink {
  display: inline-flex; align-items: center; gap: 10px; position: relative;
  padding-bottom: 6px; font-size: var(--t-body); color: var(--text);
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.tlink:hover { color: var(--accent-text); }
.tlink:hover::after { transform: scaleX(0); transform-origin: right; }

/* ---------- Motion ---------- */
.enter { opacity: 0; transform: translateY(26px); }
.enter.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
/* Hairlines draw in from the left instead of rising. */
.reveal.rule-draw { opacity: 1; transform: scaleX(0); transform-origin: left; }
.reveal.rule-draw.is-visible { transform: scaleX(1); transition: transform 1.3s var(--ease); }
/* Media frames: the wrapper fades/rises with the normal reveal while the
   image settles from a slight overscale inside its crop. */
.reveal--img { overflow: hidden; }
.reveal--img img { transform: scale(1.07); transition: transform 1.5s var(--ease); }
.reveal--img.is-visible img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .enter, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal--img img { transform: none !important; transition: none !important; }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: center;
  /* Always-on hairline, edge to edge, the way the reference carries it —
     previously this was transparent until scroll, so the landing view had no
     rule under the bar at all. */
  border-bottom: 1px solid var(--line);
  transition: height 0.3s var(--ease), background 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav.is-scrolled {
  height: 68px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav__logo { display: inline-flex; align-items: baseline; gap: 11px; }
.brand-logo { height: 24px; width: auto; }
.nav__logo-sub {
  font-family: var(--font-mono); font-size: 10.12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-text);
}
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__link { font-size: 13.8px; color: var(--muted); transition: color 0.25s ease; }
.nav__link:hover, .nav__link.active { color: var(--text); }
.nav__burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 24px; height: 1px; background: #fff; display: block; }

/* ============================ HERO ============================
   Reference composition: display type top-left with a lot of air beneath it,
   then a baseline row carrying a small label on the left and the lead
   paragraph on the right.

   The reference runs no media behind its hero type. We do, at the client's
   direction: a photograph on a parallax layer under a scrim. The scrim is the
   whole reason this stays readable — see .hero__scrim below before touching
   either. Layer order is bg (0) -> scrim (1) -> content (2). */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + clamp(50px, 9vh, 120px)) 0 clamp(40px, 6vh, 72px);
  background: var(--bg);
}
/* Both wraps have to clear the scrim, or the type sits under it. */
.hero > .wrap { position: relative; z-index: 2; }

/* Oversized on every side: the vertical slack is parallax runway (travel is
   depth x height = 10%, so 14% covers it), the horizontal slack keeps the
   blur's soft edge outside the frame. initParallax() writes transform on the
   img, so the blur lives on the wrapper — putting it on the img would be
   overwritten on the first frame. */
.hero__bg {
  position: absolute; inset: -14% -2%; z-index: 0;
  /* brightness() is doing the legibility work, not the scrim. Copper
     (--accent-text) only clears 4.67:1 on the flat --bg to begin with, so it
     has almost no headroom to give — knocking the photograph's own highlights
     down scales every bright pixel proportionally and keeps the panel texture,
     where stacking more flat scrim opacity would just wash it grey. */
  filter: blur(3px) saturate(0.92) brightness(0.55);
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
}
/* Tinted in --bg / --bg-deep rather than black, so the photograph reads as
   part of the palette instead of a grey plate behind it.

   The stops are positioned against measured text positions, not by eye. The
   photograph gets a window between roughly 30% and 44% of the hero height,
   then the scrim closes down. That upper bound is set by MOBILE, not desktop:
   at 390px the foot row stacks and lifts .label--accent from 89% (desktop) to
   57% of the hero, and small copper text needs 4.5:1. If you widen the window
   past ~46%, that label goes under threshold on phones while still looking
   fine on your desktop.

   Re-measure after any change here — the desktop and mobile constraints bind
   at different stops. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(16, 50, 47, 0.90) 0%,
      rgba(16, 50, 47, 0.62) 30%,
      rgba(16, 50, 47, 0.62) 44%,
      rgba(11, 38, 36, 0.78) 54%,
      rgba(11, 38, 36, 0.88) 64%,
      rgba(11, 38, 36, 0.92) 100%),
    linear-gradient(to right,
      rgba(11, 38, 36, 0.45) 0%,
      rgba(11, 38, 36, 0.08) 60%,
      rgba(11, 38, 36, 0.18) 100%);
}
.hero__title { max-width: 16ch; }
.hero__title em { color: var(--accent-text); }
.hero__foot {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 80px); align-items: end;
  margin-top: clamp(48px, 8vh, 110px);
}
.hero__meta { display: flex; flex-direction: column; gap: 14px; }
.hero__lead { max-width: 46ch; }
.hero__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Full-bleed media band ----------
   Edge-to-edge, sharp corners, no overlay. Used to punctuate between content
   blocks the way the reference does. */
.band {
  position: relative; width: 100%; overflow: hidden;
  background: var(--bg-deep);
  height: clamp(240px, 42svh, 460px);
}
/* Oversized 12% each side so initParallax's 0.12-depth travel never uncovers
   the frame — same slack-to-depth pairing the quote section uses. */
.band img {
  position: absolute; left: 0; right: 0; top: -12%;
  width: 100%; height: 124%; object-fit: cover; display: block;
  will-change: transform;
}

/* ---------- Two-column composition ----------
   Statement left, content right. The left column pins where there's runway. */
.two {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 110px); align-items: start;
}
.two__side--sticky { position: sticky; top: calc(var(--nav-h) + 34px); }
.two__body { max-width: 58ch; }
.two__body--wide { max-width: none; }
.two__body > * + * { margin-top: clamp(20px, 2.2vw, 30px); }

/* ---------- Meta rows (label left, value right) ---------- */

/* ============================ INDEX ROWS ============================
   The reference's core content pattern: a hairline row with a parenthetical
   number, a large title, and an arrow. Used here for services and sectors. */
.idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.idx > li { border-bottom: 1px solid var(--line); }
/* Four columns: number, large title, supporting text, arrow. Keeping the
   description in its own right-hand column stops it crowding under the title
   and leaving the right half of the row empty. */
.idx__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 0.85fr) auto;
  gap: clamp(18px, 3vw, 56px); align-items: baseline;
  padding: clamp(22px, 2.8vw, 40px) 0;
  transition: padding-left 0.5s var(--ease);
}
.idx__row:hover { padding-left: clamp(6px, 1vw, 18px); }
.idx__num {
  font-family: var(--font-mono); font-size: 11.04px; color: var(--accent-text);
  min-width: 3.5ch;
}
.idx__name {
  display: block; font-weight: 400; font-size: var(--t-row);
  line-height: 1.08; letter-spacing: -0.025em; color: var(--text);
  transition: color 0.35s var(--ease);
}
.idx__desc { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.idx__arr {
  font-size: 18.4px; color: var(--muted-2); padding-top: 0.4em;
  transition: transform 0.45s var(--ease), color 0.35s var(--ease);
}
.idx__row:hover .idx__name { color: var(--accent-text); }
.idx__row:hover .idx__arr { transform: translate(5px, 5px); color: var(--accent-text); }

/* ============================ FIGURE CARDS ============================
   Reference pattern: a title, a hairline, then an oversized number sitting
   beside a short explanation. Outlined rather than filled so the band stays
   quiet. */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 22px); }
.fig { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg); }
/* min-height reserves two lines so a one-line and a two-line title still put
   their numbers on the same baseline across the row. */
.fig__head {
  padding: clamp(18px, 1.8vw, 26px); border-bottom: 1px solid var(--line);
  min-height: calc(2.6em + 2 * clamp(18px, 1.8vw, 26px));
  display: flex; align-items: flex-start;
}
.fig__title { margin: 0; font-weight: 400; font-size: var(--t-body); letter-spacing: -0.01em; line-height: 1.3; }
.fig__body {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 1.8vw, 26px);
  align-items: center; padding: clamp(20px, 2.2vw, 34px) clamp(18px, 1.8vw, 26px);
  flex: 1;
}
.fig__note { color: var(--muted); font-size: var(--t-small); line-height: 1.45; }

/* Numbers: weight 400, tabular, copper affixes. */
.stat__num {
  display: block; font-weight: 400; font-size: clamp(34.96px, 4.232vw, 66.24px);
  line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__prefix, .stat__suffix { color: var(--accent-text); }
.stat__label {
  display: block; margin-top: 12px;
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
}

/* ================= FACT CARDS =================
   The reference's "Fact Based Insights" block, measured at 1600px and
   expressed against its fluid root (5px + vw/288):

     section padding / gaps  8rem   -> 40px + 2.7778vw   (84.4px)
     section heading         4.8rem -> 24px + 1.6667vw   (51px)
     grid                    4 cols, gap 2rem -> 10px + 0.6944vw (21.1px)
     card padding            1.6rem -> 8px + 0.5556vw    (16.9px)
     card height                                          453px
     card title              2rem   -> 10px + 0.6944vw   (21px)
     number                  7.2rem -> 36px + 2.5vw      (76px)
     note                    1.4rem -> 7px + 0.4861vw    (14.8px)
     note inset              3.2rem top, 0.8rem sides
     card paragraph          1.6rem -> 8px + 0.5556vw    (16.9px)

   Structure per card: title, hairline, number | hairline | note, hairline,
   then the paragraph pushed to the card floor. The reference runs white cards
   on a saturated band; on KOVA's dark ground the cards take --bg-deep with a
   hairline so they still read as objects sitting on the page. */
.facts { padding: calc(40px + 2.7778vw) 0; }
.facts__title {
  margin: 0 0 calc(40px + 2.7778vw);
  font-weight: 400; font-size: var(--t-h2);
  line-height: 1.06; letter-spacing: -0.025em; max-width: 18ch;
}
.facts__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: calc(10px + 0.6944vw);
}
.fact {
  /* Hairlines inside a copper card need far more alpha than --line (16%),
     which is calibrated for the dark-green ground and all but vanishes on
     this fill. Scoped to the card so the global token stays as it is. */
  --line-on-copper: rgba(255, 255, 255, 0.32);
  display: flex; flex-direction: column;
  min-height: calc(180px + 17vw);
  padding: calc(8px + 0.5556vw);
  background: var(--accent);
  border: 1px solid var(--line-on-copper);
}
.fact__title {
  margin: 0; padding-bottom: calc(8px + 0.5556vw);
  font-weight: 400; font-size: clamp(13.8px, calc(9.2px + 0.639vw), 22.08px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--text);
}
/* Number and note share the row 50/50 — the reference's vertical rule sits at
   the card's midpoint regardless of how wide the figure is. */
.fact__row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-on-copper);
  border-bottom: 1px solid var(--line-on-copper);
}
.fact__num {
  display: block; font-weight: 400;
  font-size: clamp(34.96px, calc(33.12px + 2.3vw), 77.28px);
  line-height: 1.02; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  padding: calc(4px + 0.28vw) calc(4px + 0.28vw) calc(4px + 0.28vw) 0;
}
.fact__note {
  margin: 0; border-left: 1px solid var(--line-on-copper);
  padding: calc(16px + 1.1111vw) calc(4px + 0.2778vw) calc(4px + 0.2778vw);
  color: var(--text);
  font-size: clamp(11.04px, calc(6.44px + 0.447vw), 15.64px);
  line-height: 1.22;
}
/* margin-top:auto drops the paragraph to the card floor, which is what creates
   the reference's deliberate empty middle.

   This was --muted to sit below the title and number in the hierarchy. On the
   copper fill --muted measures 3.02:1 and fails AA, and nothing short of
   effectively pure white clears 4.5:1 on #ac5e2a — even 92% white only reaches
   4.32:1. So the text is white and weight 300 alone carries the step down,
   which is what the rest of the sheet does anyway (hierarchy from size and
   space, never from colour tricks that break contrast). */
.fact__body {
  margin: auto 0 0; padding-top: calc(18px + 1.4vw);
  font-weight: 300; color: var(--text);
  font-size: clamp(11.96px, calc(6.44px + 0.479vw), 17.48px);
  line-height: 1.45; letter-spacing: -0.01em;
}
.facts__statement {
  margin: calc(40px + 2.7778vw) 0 0;
  font-weight: 400; font-size: clamp(14.72px, calc(11.96px + 0.69vw), 27.6px);
  line-height: 1.32; letter-spacing: -0.015em; max-width: 50ch;
}
@media (max-width: 1100px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .fact { min-height: calc(200px + 20vw); }
}
@media (max-width: 620px) {
  .facts__grid { grid-template-columns: 1fr; }
  .fact { min-height: 0; }
  .fact__body { margin-top: calc(26px + 3vw); }
}

/* ================= STATEMENT BAND =================
   The reference's "Back to Human" section, measured at 1600px against its
   fluid root:

     section          100vh, zero padding, full-bleed colour
     paragraph        2rem   -> 10px + 0.6944vw   (21px), lh 1.4,
                      max-width 32.4rem -> 162px + 11.25vw (342px),
                      sitting at the left gutter
     statement        11.2rem -> 56px + 3.8889vw  (118px), lh 1.0, -0.02em,
                      starting at ~49% across

   The reference fills this band with its bright accent and sets near-black
   type on it. KOVA's equivalent bold surface is copper; dark green on copper
   only reaches 2.7:1, so the type is white, which measures 4.79:1. */
.statement {
  position: relative; overflow: hidden;
  min-height: 100svh; padding: 0 var(--gutter);
  background: var(--accent); color: #fff;
  display: grid; align-content: center;
}
/* Decorative skyline behind the type.
   booming.jpeg is a JPEG on a solid white ground, and JPEG carries no alpha,
   so it cannot simply be laid over the copper. invert() turns the white field
   black, `screen` then drops black out entirely, and the contrast/brightness
   boost lifts the near-white line art far enough to read. The result is a
   white wireframe on copper with no white box. */
/* No z-index here on purpose: any value other than auto would make this a
   stacking context, and the image would then blend against an empty backdrop
   instead of the section's copper. */
.statement__art {
  position: absolute; inset: 0; pointer-events: none;
}
.statement__art img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center 78%;
  /* The line art is near-white (~238), so inverted it sits around 17 and needs
     amplifying to read at all. No contrast() in the chain: the source's white
     field is genuinely 255, so there is no noise to crush, and pivoting around
     mid-grey only destroyed the fainter lines — the building bodies dropped out
     entirely and left just the tower tops. Brightness alone keeps the whole
     drawing with its tonal range intact. */
  filter: invert(1) brightness(7);
  mix-blend-mode: screen;
  opacity: 0.75;
}
/* Type sits above the artwork. */
.statement__grid { position: relative; z-index: 1; }
.statement__grid {
  display: grid; grid-template-columns: 46% minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px); align-items: center;
}
.statement__para {
  margin: 0; font-weight: 400;
  font-size: clamp(13.8px, calc(9.2px + 0.639vw), 23.92px);
  line-height: 1.4; letter-spacing: -0.01em;
  max-width: calc(162px + 11.25vw);
}
/* Sized to hold "The market is booming." on one line. The right column tracks
   roughly 0.509vw - 29px, and the string sets ~11.2x its own font-size, so the
   type has to scale on vw with a NEGATIVE offset — a fixed base (28px + 2.1vw)
   held at 1600 but left only 2px of slack by 1280 and wrapped below it.
   This keeps ~9% headroom from 900px up to 2560px. */
.statement__big {
  margin: 0; font-weight: 400;
  font-size: clamp(27.6px, calc(3.772vw - 2.116px), 73.6px);
  line-height: 1.05; letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .statement { min-height: 0; padding: calc(64px + 8vw) var(--gutter); }
  .statement__grid { grid-template-columns: 1fr; row-gap: clamp(28px, 5vw, 52px); }
  .statement__para { order: 2; max-width: none; }
  /* Stacked, so the statement gets the full width back and can grow again. */
  .statement__big { order: 1; font-size: clamp(29.44px, 6.808vw, 62.56px); }
}

/* ================= ADVISORY ACCORDION =================
   The reference's advisory list, measured at 1600px against its fluid root:

     section padding   8rem   -> 40px + 2.7778vw   (84.4px)
     row padding       2.4rem vertical, 1.6rem right
     number column                                  129px
     number            1.4rem -> 7px + 0.4861vw    (14.8px)
     title             4.8rem -> 24px + 1.6667vw   (51px), lh 0.99, -0.02em
     arrow box                                      32px
     panel summary     3.2rem -> 16px + 1.1111vw   (34px)
     panel body        1.6rem -> 8px + 0.5556vw    (16.9px)

   The reference toggles with a bare checkbox overlaying the row; this uses a
   real <button aria-expanded> so screen readers announce the state. The panel
   animates grid-template-rows 0fr -> 1fr, which transitions to the content's
   natural height without needing to measure it. */
.advisory { padding: calc(40px + 2.7778vw) 0; }
.advisory__head { margin-bottom: calc(28px + 2vw); }
/* max-width sized so the line holds on one row at desktop — at 16ch it broke
   after "engage" and left "us." stranded as a widow. */
.advisory__title {
  margin: 0; font-weight: 400; font-size: var(--t-h2);
  line-height: 1.06; letter-spacing: -0.025em; max-width: 24ch;
}
.advisory__rule {
  height: 1px; border: 0; background: var(--line);
  margin: calc(20px + 1.6vw) 0 calc(18px + 1.2vw);
}
.advisory__lead {
  margin: 0; max-width: 62ch; color: var(--muted); font-weight: 300;
  font-size: var(--t-body); line-height: 1.6;
}

.adv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.adv__top {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: calc(61px + 4.24vw) minmax(0, 1fr) auto;
  align-items: center; width: 100%;
  padding: calc(12px + 0.8333vw) calc(8px + 0.5556vw) calc(12px + 0.8333vw) 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: inherit; text-align: left; font-family: inherit; cursor: pointer;
  transition: background 0.35s var(--ease);
}
/* The copper fill is bounded by the row itself, so it spans exactly the same
   width as the divider above and below it and never reaches into the side
   padding. It wipes in from the left on a transform, which the compositor
   handles on the GPU — animating background-color instead would repaint the
   row on every frame.
   inset:0 resolves against the padding box, so the fill stops short of the
   border-bottom and the divider stays visible through the hover. */
/* Grows down from the top divider and retracts back up to it. The origin is
   pinned to the top in both states on purpose: flipping it to bottom on exit
   made the block slide down and out, which read as the fill travelling between
   rows rather than belonging to one.
   Gentler than the default --ease, which is near-exponential and snapped. */
.adv__top::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.62s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.adv__top:hover::before { transform: scaleY(1); }
/* Children ride above the fill. */
.adv__num, .adv__name, .adv__arr { position: relative; z-index: 1; }

/* The open row keeps a quiet copper tint so it stays identifiable once the
   pointer moves away; hovering it still wipes the solid fill over the top. */
.adv[data-open] > .adv__top { background: color-mix(in srgb, var(--accent) 16%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .adv__top::before { transition: none; }
}
.adv__num {
  font-family: var(--font-mono); color: var(--accent-text);
  font-size: clamp(10.12px, calc(6.44px + 0.447vw), 15.64px);
  /* Nudged right on hover, timed to the fill so the two read as one motion. */
  transition: color 0.35s var(--ease),
              transform 0.62s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.adv__top:hover .adv__num { transform: translateX(clamp(6px, 0.62vw, 12px)); }
@media (prefers-reduced-motion: reduce) {
  .adv__top:hover .adv__num { transform: none; }
}
.adv__name {
  font-weight: 400; color: var(--text);
  font-size: var(--t-row);
  line-height: 1.1; letter-spacing: -0.02em;
  transition: color 0.35s var(--ease);
}
.adv__arr {
  width: calc(15px + 1.04vw); height: calc(15px + 1.04vw);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  transition: transform 0.55s var(--ease), color 0.35s var(--ease);
}
.adv__arr svg { width: 100%; height: 100%; display: block; }
/* Nothing in the row turns copper — the bar behind it does. Over solid copper
   everything goes white, including the number, which is copper by default and
   would otherwise disappear into the fill. */
.adv__top:hover .adv__num,
.adv__top:hover .adv__name,
.adv__top:hover .adv__arr { color: #fff; }
.adv[data-open] .adv__arr { transform: rotate(180deg); }

.adv__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.adv[data-open] .adv__panel { grid-template-rows: 1fr; }
.adv__inner { overflow: hidden; }
/* The panel indents to the row title's x — the empty first column is the same
   width as .adv__top's number column, so an open panel lines up under the
   heading that opened it instead of jumping out to the page gutter. Keep the
   three column widths here identical to .adv__top's grid or the alignment
   silently drifts.

   No max-width caps on the children: the columns themselves do the measuring,
   so the second one ends flush at the right gutter. Capping the text instead
   left ~370px of dead space at 1600 and made the panel look like it floated
   in the middle of the page. */
.adv__dual {
  display: grid;
  grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
  gap: 0 clamp(24px, 2.2vw, 44px);
  /* The indent is padding, NOT a first grid column: as a column the
     column-gap would be added on top of it and push the summary ~35px past
     the row title. Width must equal .adv__top's number column exactly. */
  padding: calc(20px + 1.6vw) 0 calc(28px + 2.2vw) calc(61px + 4.24vw);
}
.adv__summary {
  grid-column: 1;
  margin: 0; color: var(--text); font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.28; letter-spacing: -0.02em;
}
.adv__detail { grid-column: 2; }
.adv__detail p {
  margin: 0 0 clamp(14px, 1.2vw, 22px); color: var(--muted); font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.55; max-width: 68ch;
}
.adv__detail p:last-of-type { margin-bottom: clamp(16px, 1.4vw, 24px); }
.adv__area {
  display: inline-block; font-family: var(--font-mono);
  font-size: 10.12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-text);
}

@media (max-width: 900px) {
  .adv__top { grid-template-columns: calc(38px + 3vw) minmax(0, 1fr) auto; }
  /* Stacked under 900, and the indent is dropped — 50-78px of it would eat
     most of a phone's width, and .adv__top's number column narrows here too. */
  .adv__dual { grid-template-columns: 1fr; gap: 18px; padding-left: 0; }
  .adv__summary, .adv__detail { grid-column: 1; }
}

/* ---------- Marker list (the reference uses ">" for bullets) ---------- */
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.marks li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 15px 0; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: var(--t-body); line-height: 1.5;
}
.marks li:last-child { border-bottom: 1px solid var(--line-soft); }
.marks .mk { color: var(--accent-text); font-family: var(--font-mono); font-size: 11.04px; padding-top: 3px; }
.marks--2 { grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4vw, 80px); }
.marks--2 li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }

/* The band had no rule at all, so it sat flush against the hero's bottom edge
   and its own logo strip ran to the section floor — that collision is what read
   as the marquee overlapping the landing page. Padding uses the fluid-root
   formula (5.6rem -> 59px at 1600) like the rest of the sheet.

   The divider is a pseudo-element inset by --gutter, not a border on the
   section: the band is deliberately full-bleed so the logos can run edge to
   edge, but every other hairline on the page aligns to the content column, and
   a full-width rule here would break that alignment. */
.marquee-band {
  position: relative;
  padding: calc(28px + 1.9444vw) 0;
}
.marquee-band::after {
  content: ""; position: absolute; bottom: 0;
  left: var(--gutter); right: var(--gutter); height: 1px;
  background: var(--line);
}

.marquee-band__label {
  margin-bottom: clamp(20px, 2.4vw, 30px);
  font-family: var(--font-mono); font-size: 10.12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted-2);
}
.marquee-viewport { position: relative; overflow: hidden; }
/* Soft fade at both edges so logos dissolve in/out rather than hard-cut. */
.marquee-viewport::before, .marquee-viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: clamp(48px, 10vw, 170px);
}
/* Fade to the band's own colour — these must track .marquee-band's background
   or the logos dissolve into the wrong tone at the edges. */
.marquee-viewport::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.marquee-viewport::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.marquee { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center;
  gap: clamp(48px, 6vw, 96px); padding-right: clamp(48px, 6vw, 96px);
}
/* Real brand logos: monochrome SVGs tinted white and dimmed so they read as a
   uniform, premium "trusted by" row on the dark-green band. Brighten on hover. */
.marquee__logo {
  height: clamp(36px, 3.6vw, 52px); width: auto; flex: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}
.marquee__logo:hover { opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none !important; } }


/* ====================== HOW WE CREATE VALUE ======================
   The reference's Keynotes block, measured at 1600px against its fluid root:

     section padding  8rem top / 13.6rem bottom -> 40px + 2.7778vw / 68px + 4.7222vw
     title            11.2rem -> 56px + 3.8889vw  (118px), lh 1.44, -0.02em
     section number   5.6rem  -> 28px + 1.9444vw  (59px), right-aligned
     intro paragraph  2rem    -> 10px + 0.6944vw  (21px), offset into col 2
     rail             30.3% wide, sticky; rows 464px, 1.6rem vertical padding
     rail heading     4.8rem  -> 24px + 1.6667vw  (51px)
     panel title      4.8rem;  panel subtitle 3.2rem, muted

   The reference fills the selected row with its dark green and sets its pale
   accent on top; KOVA's equivalent is a solid copper block with white type. */
.keys {
  background: var(--bg-deep);
  padding: calc(40px + 2.7778vw) 0 calc(68px + 4.7222vw);
}
.keys__title {
  margin: 0; font-weight: 400; font-size: var(--t-h2);
  line-height: 1.06; letter-spacing: -0.025em;
}
.keys__rule { height: 1px; border: 0; background: var(--line); margin: calc(20px + 1.6vw) 0 0; }
.keys__lead {
  margin: clamp(30px, 4vw, 68px) 0 0 45.4%;
  max-width: 44ch; color: var(--muted); font-weight: 300;
  font-size: clamp(13.8px, calc(9.2px + 0.639vw), 23.92px); line-height: 1.42;
}

/* No align-items:start here — that collapses the rail to its content height
   and leaves position:sticky with no runway, so it scrolls away with the
   panels. Stretching the rail to the full row height is what lets it pin. */
.keys__grid {
  display: grid; grid-template-columns: 30.3% minmax(0, 1fr);
  column-gap: 15.1%;
  margin-top: clamp(44px, 6vw, 96px);
  align-items: stretch;
}
/* Pinned just under the nav; the panels scroll past it. */
.keys__rail-inner { position: sticky; top: calc(var(--nav-h) + 20px); }
.keys__rail-title {
  margin: 0 0 clamp(16px, 1.8vw, 26px); font-weight: 400;
  font-size: clamp(22.08px, calc(22.08px + 1.533vw), 57.04px);
  line-height: 1.07; letter-spacing: -0.02em;
}
.keys__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.keys__list > li { border-bottom: 1px solid var(--line); }
.keys__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; background: transparent; border: 0; color: var(--muted);
  font-family: inherit; text-align: left; cursor: pointer;
  padding: calc(8px + 0.5556vw) calc(6px + 0.4vw);
  font-size: clamp(11.96px, calc(8.28px + 0.331vw), 16.56px); line-height: 1.3;
  transition: background 0.4s var(--ease), color 0.35s var(--ease),
              padding-left 0.4s var(--ease);
}
.keys__item:hover { color: var(--text); padding-left: calc(12px + 0.8vw); }
.keys__item-num { flex: none; font-family: var(--font-mono); font-size: 0.82em; }
/* Selected row is a solid copper block, matching the reference's filled state. */
.keys__item.is-active {
  background: var(--accent); color: #fff;
  padding-left: calc(12px + 0.8vw);
}
.keys__cta { margin-top: clamp(30px, 4vw, 62px); }

/* All six panels are stacked and scroll past the pinned rail; initScrollSpy
   lights the matching rail row as each one passes the reference line. */
.keys__panel + .keys__panel { margin-top: clamp(56px, 8vw, 132px); }
/* scroll-margin so anchor jumps from the rail clear the fixed nav. */
.keys__panel { scroll-margin-top: calc(var(--nav-h) + 40px); }
.keys__media { margin-bottom: clamp(22px, 2.6vw, 40px); }
.keys__media img { width: 100%; height: clamp(180px, 24vw, 340px); object-fit: cover; display: block; }
.keys__ptitle {
  margin: 0 0 clamp(12px, 1.4vw, 20px); font-weight: 400; color: var(--text);
  font-size: var(--t-row);
  line-height: 1.15; letter-spacing: -0.02em;
}
.keys__psub {
  margin: 0 0 clamp(22px, 2.6vw, 38px); font-weight: 400; color: var(--muted);
  font-size: clamp(13.8px, calc(9.2px + 0.639vw), 23.92px);
  line-height: 1.35; letter-spacing: -0.015em; max-width: 34ch;
}
.keys__plabel {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);
}
.keys__pbody {
  margin: 0 0 clamp(24px, 2.8vw, 40px); color: var(--muted); font-weight: 300;
  font-size: clamp(12.42px, calc(6.44px + 0.46vw), 15.64px); line-height: 1.6; max-width: 60ch;
}
.keys__panel .marks { max-width: 60ch; }
.keys__panel .marks li { font-size: clamp(12.42px, calc(6.44px + 0.46vw), 15.64px); }

@media (max-width: 1000px) {
  .keys__grid { grid-template-columns: 1fr; row-gap: clamp(34px, 6vw, 60px); column-gap: 0; }
  .keys__rail-inner { position: static; }
  .keys__lead { margin-left: 0; }
}

/* ====================== SECTOR FOCUS ======================
   The reference's "Executive & Academic Education" block, measured at 1600px
   against its fluid root:

     intro heading   4.8rem -> 24px + 1.6667vw  (51px), lh 1.07, -0.02em
     intro paragraph 1.6rem -> 8px + 0.5556vw   (17px)
     grid            4 equal columns, gap 0, FULL BLEED — it runs edge to edge
                     rather than sitting inside the gutter
     item padding    4rem   -> 20px + 1.3889vw  (42.2px)
     item title      3.2rem -> 16px + 1.1111vw  (34px), lh 1.19, -0.02em
     item body       1.4rem -> 7px + 0.4861vw   (15px), muted

   The vertical rules are a border-left on every item, which is what makes the
   columns read as one ruled sheet rather than four separate blocks. */
.sectors { padding: var(--section-y) 0 0; }
.sectors__intro {
  display: grid; grid-template-columns: 62% minmax(0, 1fr);
  column-gap: clamp(20px, 2vw, 32px); align-items: start;
  padding-bottom: clamp(44px, 5.5vw, 92px);
}
.sectors__title {
  margin: 0; font-weight: 400; font-size: var(--t-h2);
  line-height: 1.06; letter-spacing: -0.025em; max-width: 16ch;
}
.sectors__lead {
  margin: 0; color: var(--muted); font-weight: 300;
  font-size: clamp(12.88px, calc(7.36px + 0.511vw), 18.4px);
  line-height: 1.55; max-width: 46ch;
}

/* Vertical dividers between the columns only. No rule across the top of the
   grid and none under the titles. */
.sgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
/* Tall on purpose: the height is the runway the sticky title pins through
   while its caption travels up and passes behind it. */
.sgrid__item {
  position: relative;
  min-height: 88svh;
  padding: 0 clamp(22px, calc(20px + 1.3889vw), 52px);
  display: flex; flex-direction: column;
}
/* The rules are pseudo-elements rather than borders so their length is set
   independently of the item. As borders they ran the item's full height, which
   is sized for the sticky runway and made them far too long. */
.sgrid__item::before,
.sgrid__item:last-child::after {
  content: ""; position: absolute; top: 0;
  width: 1px; height: clamp(340px, 66svh, 700px);
  background: var(--line);
}
.sgrid__item::before { left: 0; }
.sgrid__item:last-child::after { right: 0; }
/* Pins just under the condensed nav. The teal background is what hides the
   caption as it scrolls up underneath, and z-index puts it over the caption —
   without an opaque background the two would simply overlap. */
.sgrid__name {
  position: sticky; top: calc(var(--nav-h) - 16px); z-index: 2;
  margin: 0; padding: clamp(18px, 2vw, 30px) 0 clamp(16px, 1.8vw, 26px);
  background: var(--bg);
  font-weight: 400; color: var(--text);
  font-size: var(--t-row);
  line-height: 1.19; letter-spacing: -0.02em;
}
/* Sits far down the column, with runway left below it so it can travel all the
   way up behind the title before the item ends and the pin releases. */
.sgrid__body {
  position: relative; z-index: 1;
  margin: 26svh 0 0; color: var(--muted); font-weight: 300;
  font-size: clamp(11.96px, calc(6.44px + 0.447vw), 15.64px);
  line-height: 1.6;
}
@media (max-width: 1100px) {
  .sgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sectors__intro { grid-template-columns: 1fr; row-gap: clamp(20px, 4vw, 34px); }
  .sectors__title { max-width: none; }
  /* Four stacked columns at 150svh each would be six screens of scrolling, so
     the pin and the runway both come off below this width. */
  .sgrid { grid-template-columns: 1fr; }
  /* Stacked, so the vertical rules become horizontal ones between the rows. */
  .sgrid__item {
    min-height: 0;
    padding: clamp(22px, 5vw, 40px) clamp(22px, 5vw, 40px) clamp(28px, 6vw, 48px);
  }
  .sgrid__item::before,
  .sgrid__item:last-child::after { display: none; }
  .sgrid__item + .sgrid__item { border-top: 1px solid var(--line); }
  .sgrid__name { position: static; padding-top: 0; }
  .sgrid__body { margin-top: clamp(24px, 5vw, 40px); }
}

/* ====================== CLIENT VOICE (parallax quote) ======================
   Full-bleed photograph with a scroll-driven parallax layer behind centred
   type. The image box is inset -14% top and bottom, making it 128% of the
   section height, so the +/-12% translate never exposes an edge. */
/* Geometry matched to the reference's claim section, measured at 1600px:
     height            120vh   (100vh at <=1024)
     vertical padding  12rem of its fluid root -> 60px + 4.1667vw  (126.7px)
     quote             5.6rem  -> 28px + 1.9444vw  (59px), weight 400,
                       line-height 1.2, tracking -0.02em, LEFT-aligned
     block             90rem   -> 450px + 31.25vw  (949px), centred in the
                       viewport while the text inside stays left-aligned
     attribution       2rem    -> 10px + 0.6944vw  (21px), same colour as the
                       quote, name and role stacked tight
   The reference tints both in its pale accent; KOVA's equivalent over
   photography is plain white — copper goes muddy at this size on an image. */
.quote {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 120svh;
  padding: calc(60px + 4.1667vw) var(--gutter);
}
@media (max-width: 1024px) { .quote { min-height: 100svh; } }

.quote__bg { position: absolute; inset: -14% 0; z-index: 0; }
.quote__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
}
/* The reference runs no scrim at all because its photograph is already dark.
   Ours has to hold white type over whatever image gets dropped in, so this is
   the lightest wash that still guarantees legibility. */
.quote__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(11, 38, 36, 0.56) 0%, rgba(11, 38, 36, 0.40) 50%, rgba(11, 38, 36, 0.62) 100%);
}
.quote__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: calc(450px + 31.25vw); margin: 0 auto;
  text-align: left;
}
.quote__text {
  margin: 0 0 calc(20px + 3vw);
  font-weight: 400;
  font-size: clamp(27.6px, calc(25.76px + 1.789vw), 64.4px);
  line-height: 1.2; letter-spacing: -0.02em;
  max-width: none;
}
.quote__cite { font-style: normal; }
/* Name and role are the same size and colour, stacked with no gap — the
   reference sets both at 2rem / line-height 1.15. */
.quote__name, .quote__role {
  display: block; color: var(--text);
  font-family: var(--font); font-weight: 400; text-transform: none;
  font-size: clamp(13.8px, calc(9.2px + 0.639vw), 22.08px);
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0;
}

/* ====================== FOOTER ====================== */
.footer { background: var(--bg-deep); border-top: 1px solid var(--line-soft); }
.footer__cta { padding: clamp(70px, 9vw, 130px) 0 clamp(50px, 6vw, 80px); }
.footer__cta-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: clamp(30px, 3.6vw, 48px); }
.footer__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  padding: clamp(42px, 5vw, 62px) 0; border-top: 1px solid var(--line-soft);
}
.footer__brand-logo { display: inline-flex; align-items: baseline; gap: 11px; }
.footer__brand-sub { font-family: var(--font-mono); font-size: 10.12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); }
.footer__tagline { margin: 18px 0 0; max-width: 34ch; color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.footer__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer__col-label { margin-bottom: 6px; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
.footer__col a, .footer__contact-line { font-size: var(--t-small); color: var(--muted); }
.footer__col a { transition: color 0.25s ease; }
.footer__col a:hover { color: var(--text); }
.footer__title { max-width: 14ch; }
.footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; border-top: 1px solid var(--line-soft);
}
.footer__copy { color: var(--muted-2); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.08em; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) {
  .figs { grid-template-columns: 1fr; }
  .fig__body { grid-template-columns: auto 1fr; }
}
@media (max-width: 900px) {
  .nav__links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 20px;
    padding: 26px var(--gutter) 34px;
    background: var(--bg-deep); border-top: 1px solid var(--line-soft);
  }
  .nav__links.is-open { display: flex; }
  .nav__burger { display: flex; }
  .hero__foot { grid-template-columns: 1fr; gap: 30px; }
  .two { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 44px); }
  .two__side--sticky { position: static; }
  .idx__row { grid-template-columns: auto 1fr; }
  .idx__arr { display: none; }
  .marks--2 { grid-template-columns: 1fr; }
  .marks--2 li:nth-last-child(-n+2) { border-bottom: 0; }
  .marks--2 li:last-child { border-bottom: 1px solid var(--line-soft); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fig__body { grid-template-columns: 1fr; gap: 14px; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .quote__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .pill, .idx__row, .idx__arr { transition-duration: 0.001ms !important; }
}