/* ============================================================
   BOXRAW — "WE DON'T PLAY BOXING / HAGLER SUIT" case study
   Built one-for-one from Figma frame 6:72
   "Case Study Template — Desktop 1440"
   nVAWZQ4sKDO2Xl1zk2U7k8

   Design width 1440. Full-bleed sections span the viewport;
   contained sections sit in a 1140px column (150px gutters).
   Every px value below is taken from get_design_context /
   get_variable_defs — nothing is eyeballed.

   Display type uses clamp() whose MAXIMUM is the Figma value,
   reached exactly at 1440px. At the design width the page is
   pixel-exact; below it, type scales down.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --page:        #f2f2f2;   /* page / most sections            */
  --page-alt:    #f5f5f5;   /* sections 04, 06                 */
  --panel-dark:  #212327;   /* section 10                      */
  --panel-dark-2:#222327;   /* section 23                      */
  --deep:        #0c0a18;   /* section 37 · results            */
  --accent:      #983731;   /* BOXRAW brick — sections 12, 19  */
  --accent-lit:  #bf3a32;   /* highlighted spans in section 10 */
  --brand:       #3d3bff;   /* FortyFour blue — footer labels  */
  --paper:       #eee;      /* light-on-dark foreground        */
  --stat-card:   #eeeeee;   /* results panels — warm off-white */

  /* Ink */
  --ink:      #0c0a18;
  --ink-80:   rgba(12, 10, 24, 0.8);
  --ink-65:   rgba(12, 10, 24, 0.65);
  --ink-45:   rgba(12, 10, 24, 0.45);
  --ink-12:   rgba(12, 10, 24, 0.12);
  --grey:     #696869;
  --white-75: rgba(255, 255, 255, 0.75);

  /* Layout */
  --col:      1140px;  /* the contained column                     */
  --col-lead: 1240px;  /* section 02 — sits 50px wider each side    */
  --frame:    1440px;  /* Figma design width                       */
  --inset:    100px;   /* Figma page padding on 12 / 37 / footer    */
  --nav-h:    96px;
  --pad:      40px;    /* side padding below the column            */

  /* Type — max values are the Figma values at 1440 */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --t-h1:    clamp(2.5rem,   4.1667vw, 3.75rem);   /* 60px */
  --t-h2:    clamp(1.625rem, 2.2222vw, 2rem);      /* 32px */
  --t-lead:  clamp(1.375rem, 1.9444vw, 1.75rem);   /* 28px */
  --t-stat:  clamp(1.125rem, 1.4583vw, 1.3125rem); /* 21px */
  --t-body:  1.0625rem;                            /* 17px */
  --t-meta:  0.95rem;                              /* 15.2px */
  --t-eyebrow: 0.65rem;                            /* 10.4px */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; }
img, video, svg { max-width: 100%; }
a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   HEADER — fixed, dark theme (Figma 6:338)
   height 96px · padding-inline 100px · logo 34px
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 100px;
  background: transparent;
  transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              backdrop-filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Once past the hero the bar picks up a dark scrim so the
   #eee chrome stays legible over the light sections. */
.site-header.is-scrolled {
  background: rgba(12, 10, 24, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-logo { display: block; line-height: 0; }
.nav-logo img { display: block; height: 34px; width: auto; }

.nav-menu-btn {
  display: flex;
  align-items: center;
  gap: 10.4px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--paper);
  font: inherit;
}

.nav-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--paper);
}

.nav-menu-text {
  font-size: 0.8rem;          /* 12.8px */
  line-height: 1.2;
  letter-spacing: 0.512px;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 20px;
  background: var(--paper);
  border: 1px solid var(--paper);
  color: #141314;
  font-size: 0.8125rem;       /* 13px */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-cta:hover { background: transparent; color: var(--paper); }

.nav-plus {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 1.04px;
  color: var(--paper);
}

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */

/* The 1140px column. One class, used by every contained block. */
.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}

/* Media slot. Height always comes from aspect-ratio, never a
   fixed px height, so slots scale with the column. */
.media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.media img,
.media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Two-up grid (cs-grid-2) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: center;
}

/* Three-up grid (cs-grid-3) — sections 08 and 18 */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  align-items: center;
}

/* ---------- Editorial text block (cs-intro / cs-lead) ---------- */
.intro {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}
.intro--lead { max-width: var(--col-lead); }   /* section 02 */

.intro-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 790px;            /* Figma right padding 500 */
}
.intro-text--lead { max-width: 990px; }  /* section 02: pr 350 */

/* Section 10 — Figma now centres this block across the full column */
.intro-text--center {
  max-width: none;
  text-align: center;
}

.eyebrow {
  margin: 0;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.456px;
  text-transform: uppercase;
  color: var(--accent);
}

.headline {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.02em;      /* -1.2px at 60px */
  color: var(--ink);
  text-wrap: balance;
}
.headline--caps {
  text-transform: uppercase;
  letter-spacing: -0.025em;     /* -1.5px at 60px */
}

.subhead {
  margin: 0;
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.025em;     /* -0.8px at 32px */
  text-transform: uppercase;
}

.lead-para {
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
}

.intro-body {
  display: flex;
  flex-direction: column;
  gap: 1.8em;
  padding-top: 12px;
  color: var(--ink-65);
}
.intro-body p { margin: 0; }
.intro-body strong { font-weight: 700; }

.intro-body ol {
  display: flex;
  flex-direction: column;
  gap: 1.8em;
  margin: 0;
  padding-left: 1.5em;
  list-style: decimal;
}

/* ---------- Meta list ---------- */
.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 11.2px;
  margin: 0;
  padding-top: 8px;
  font-size: var(--t-meta);
  line-height: 1.45;
}
.cs-meta div { display: flex; gap: 5.6px; flex-wrap: wrap; }
.cs-meta dt { font-weight: 700; color: var(--ink); }
.cs-meta dd { margin: 0; color: var(--ink-80); }

/* ============================================================
   01 · cs-hero  (6:73) — 1440 x 900, image -6 cover
   ============================================================ */
.s-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 900;
  min-height: 560px;
  overflow: hidden;
  background: var(--deep);
}
.s-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-chevron {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--paper);
  text-decoration: none;
}
.hero-chevron svg { display: block; width: 48px; height: 48px; }

/* ============================================================
   02 · cs-intro-wrap.cs-lead  (6:93)
   bg #f2f2f2 · pl 100 · pr 350 · py 100
   ============================================================ */
.s02 {
  background: var(--page);
  padding-block: 100px;
}

/* ============================================================
   03 · cs-image-cluster  (8020:331) — 1440 x 1078.46
   Four absolutely-placed slots, percentages taken from Figma.
   ============================================================ */
.cluster {
  position: relative;
  width: 100%;
}
.cluster .media { position: absolute; }

.s03 .cluster { aspect-ratio: 1440 / 1078.4629; }
.s03 .c1 { left: 0;        top: 14.4814%; width: 50.0427%; height: 76.0553%; }
.s03 .c2 { left: 50.0427%; top: 37.4008%; width: 26.1315%; height: 38.6552%; }
.s03 .c3 { left: 50.0427%; top: 0;        width: 49.9573%; height: 37.4008%; }
.s03 .c4 { left: 76.1742%; top: 68.1867%; width: 23.8258%; height: 31.8133%; }

.s03 .c1 img { object-position: 61.1% 50%; }
.s03 .c2 img { object-position: 50.1% 50%; }
.s03 .c4 img { object-position: 17.4% 0%; }

/* ============================================================
   04 · cs-intro-wrap.cs-lead  (8024:342)
   bg #f5f5f5 · pl 150 · pr 500 · pb 100 (no top padding)
   ============================================================ */
.s04 {
  background: var(--page-alt);
  padding-bottom: 100px;
}

/* ============================================================
   05 · cs-banner  (8052:781) — full bleed, contain.
   No background of its own; the page shows through the letterbox.
   ============================================================ */
/* The slot takes the artwork's own ratio (2556x1002), so `contain` fits
   edge to edge with no letterbox — that band was the gap against 06.
   1440 / 2.5509 = 564px, which is also Figma's 561px frame. */
.s05 .media { aspect-ratio: 2556 / 1002; }
.s05 .media img { object-fit: contain; }

/* ============================================================
   06 · cs-banner  (8026:397) — full bleed, no padding
   ============================================================ */
.s06 { background: var(--page); }
.s06 .media { aspect-ratio: 1440 / 671; }

/* ============================================================
   07 · cs-banner  (4005:1123) — contained, dark panel
   ============================================================ */
.s07 { background: var(--panel-dark); }
.s07 .media { aspect-ratio: 1140 / 769; }

/* ============================================================
   08 · cs-grid-3  (8068:995) — dark, three animated GIFs
   px 150 · py 25 · gap 25 · slots 363.333 x 437
   ============================================================ */
.s08 { background: var(--panel-dark); padding-block: 25px; }
.s08 .media { aspect-ratio: 363.333 / 437; }

/* ============================================================
   09 · cs-banner  (8068:1130) — dark, full bleed
   ============================================================ */
.s09 { background: var(--panel-dark); }
.s09 .media { aspect-ratio: 1440 / 673; }

/* ============================================================
   10 · cs-intro-wrap.cs-lead  (8027:422) — dark panel, centred
   px 150 · pt 50 · pb 100 · text-align center, full column measure
   ============================================================ */
.s10 {
  background: var(--panel-dark);
  padding-top: 50px;
  padding-bottom: 100px;
  color: #fff;
}
.s10 .intro-body { color: #fff; padding-top: 12px; }
.s10 .lead-para  { line-height: 1.2; }
.s10 .hl         { color: var(--accent-lit); }

/* ============================================================
   11 · cs-banner  (8027:404) — dark, full bleed, pb 100
   ============================================================ */
.s11 { background: var(--panel-dark); padding-bottom: 100px; }
.s11 .media { aspect-ratio: 1440 / 673; }

/* ============================================================
   12 · cs-outcome  (4078:3232) — accent panel, p 100
   text 501px | gap 40 | media
   ============================================================ */
.s12 {
  background: var(--accent);
  padding-block: 100px;
  color: #fff;
}
.s12-inner {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--inset);
  display: grid;
  grid-template-columns: 501px 1fr;
  gap: 40px;
  align-items: center;
}
.s12 .intro-text { max-width: none; gap: 20px; }
.s12 .headline,
.s12 .subhead,
.s12 .intro-body { color: #fff; }
.s12 .intro-body { padding-top: 0; }
.s12 .media { aspect-ratio: 700 / 460; }

/* ============================================================
   13 · cs-image-cluster  (8052:647) — 1440 x 1078.14
   ============================================================ */
/* The top tile sits flush at top:0, and section 12 above is the red outcome
   band — the only colour seam a freed tile can reach. 28px matches the drift
   cap, so the tile always has page-coloured room to move into. */
.s13 { padding-top: 28px; }
.s13 .cluster { aspect-ratio: 1440 / 1078.1367; }
.s13 .c1 { left: 0;        top: 14.4858%; width: 50.0427%; height: 76.0783%; }
.s13 .c2 { left: 50.0427%; top: 0;        width: 49.9573%; height: 37.4121%; }
.s13 .c3 { left: 67.1528%; top: 56.1289%; width: 32.8472%; height: 43.8711%; }
.s13 .c4 { left: 50.0694%; top: 37.3925%; width: 18.75%;   height: 44.5215%; }

.s13 .c1 img { object-position: 27.3% 0%; }
.s13 .c3 img { object-position: 50.2% 0.4%; }
.s13 .c4 img { object-fit: contain; }

/* ============================================================
   14 · cs-banner  (8051:581) — full bleed, contain
   ============================================================ */
.s14 { background: var(--page); }
.s14 .media { aspect-ratio: 1440 / 811; }
.s14 .media img { object-fit: contain; }

/* ============================================================
   15 · cs-banner  (8048:567) — full bleed, contain
   ============================================================ */
.s15 { background: var(--page); }
/* contain letterboxes -10 by ~54px top and bottom inside the 673 band,
   which is already more room than the 28px of drift needs. */
.s15 .media { aspect-ratio: 1440 / 673; }
.s15 .media img { object-fit: contain; }

/* ============================================================
   16 · cs-banner  (8051:609) — contained
   ============================================================ */
.s16 { background: var(--page); }
.s16 .media { aspect-ratio: 1140 / 673; }

/* ============================================================
   17 · cs-banner  (8051:587) — contained.
   Figma fits the image to the column width and top-aligns it
   inside a 673-tall slot, leaving ~32px of page below. That is
   contain + top, NOT cover.
   ============================================================ */
.s17 { background: var(--page); }
.s17 .media { aspect-ratio: 1140 / 673; }
.s17 .media img { object-fit: contain; object-position: top; }

/* ============================================================
   18 · cs-grid-3  (8068:1119) — a still between the two videos
   px 150 · pb 25 · gap 25 · slots 363.333 x 641, all cover
   ============================================================ */
.s18 { background: var(--page); padding-bottom: 25px; }
.s18 .media { aspect-ratio: 363.333 / 641; }

/* ============================================================
   19 · cs-grid-2  (8052:657)
   The accent panel IS the 1140 column (Figma places this
   section at x=150, w=1140), with 150px inner gutters and
   no seam between the two slots.
   ============================================================ */
.s19-panel {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  background: var(--accent);
  padding: 25px 150px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.s19 .media { aspect-ratio: 420 / 728; }

/* ============================================================
   20 · cs-banner  (8047:560) — contained, py 25
   ============================================================ */
.s20 { background: var(--page); padding-block: 25px; }
.s20 .media { aspect-ratio: 1140 / 673; }

/* ============================================================
   21 · cs-banner  (8047:504) — contained, pt 25
   ============================================================ */
.s21 { background: var(--page); padding-top: 25px; }
.s21 .media { aspect-ratio: 1140 / 673; }

/* ============================================================
   22 · cs-banner  (8052:627) — contained, pt 25.
   Same fit-to-width + top alignment as section 17.
   ============================================================ */
.s22 { background: var(--page); padding-top: 25px; }
.s22 .media { aspect-ratio: 1140 / 673; }
.s22 .media img { object-fit: contain; object-position: top; }

/* ============================================================
   23 · cs-intro-wrap.cs-lead  (8052:704) — dark panel
   ============================================================ */
.s23 {
  background: var(--panel-dark-2);
  padding-block: 100px;
  color: #fff;
}
.s23 .headline { color: #fff; }
.s23 .subhead  { color: #fff; }
.s23 .intro-body { color: #fff; }

/* ============================================================
   24 · cs-banner  (8047:521) — full bleed, drifts left
   -33 is transparent artwork on the page field: the shirt, the red mark
   and the black pull-quote are drawn straight onto it, so the band must
   stay page-coloured or the quote disappears.
   It bleeds to both side edges with no transparent margin, so sliding it
   needs overhang to slide into. The band height moves onto the section
   (full-bleed, so 100% width gives the Figma 726 exactly) and the slot is
   widened by twice the travel, pulled back by half of that. The section
   clips the overhang, which sits off-viewport anyway.
   ============================================================ */
.s24 {
  aspect-ratio: 1440 / 726;
  overflow: hidden;
}
.s24 .media {
  width: calc(100% + 56px);
  height: 100%;
  margin-inline: -28px;
}

/* ============================================================
   25 · cs-banner  (8052:771) — contained
   ============================================================ */
.s25 { background: var(--page); }
.s25 .media { aspect-ratio: 1140 / 641; }

/* ============================================================
   26 · cs-banner  (8052:793) — contained, pt 25
   ============================================================ */
.s26 { background: var(--page); padding-top: 25px; }
.s26 .media { aspect-ratio: 1140 / 616; background: #fff; }

/* ============================================================
   27 · cs-banner  (8052:787) — full bleed, static
   ============================================================ */
.s27 .media { aspect-ratio: 1440 / 569; }

/* ============================================================
   28 · cs-grid-2  (8052:749) — pt 25
   ============================================================ */
.s28 { background: var(--page); padding-top: 25px; }
.s28 .media { aspect-ratio: 558 / 350; }
.s28 .g1 img { object-position: 0% 50%; }

/* ============================================================
   29 · cs-banner  (8052:732) — contained, pt 25
   ============================================================ */
.s29 { background: var(--page); padding-top: 25px; }
.s29 .media { aspect-ratio: 1140 / 616; }

/* ============================================================
   30 · cs-banner  (8053:817) — contained, pt 25
   ============================================================ */
.s30 { background: var(--page); padding-top: 25px; }
.s30 .media { aspect-ratio: 1140 / 616; }

/* ============================================================
   31 · cs-grid-2  (8047:531) — py 25
   ============================================================ */
.s31 { background: var(--page); padding-block: 25px; }
.s31 .media { aspect-ratio: 558 / 350; }

/* ============================================================
   32 · cs-banner  (8053:823) — contained, pt 25
   ============================================================ */
.s32 { background: var(--page); padding-top: 25px; }
.s32 .media { aspect-ratio: 1140 / 616; }

/* ============================================================
   33 · cs-grid-2  (8068:1137) — pt 25
   ============================================================ */
.s33 { background: var(--page); padding-top: 25px; }
.s33 .media { aspect-ratio: 558 / 350; }
.s33 .g1 img { object-position: 0% 50%; }

/* ============================================================
   34–35 · cs-banner — contained, pt 25
   ============================================================ */
.s34, .s35 { background: var(--page); padding-top: 25px; }
.s34 .media,
.s35 .media { aspect-ratio: 1140 / 616; }

/* ============================================================
   36 · cs-banner  (8053:829) — full bleed, pt 25
   ============================================================ */
.s36 { background: var(--page); padding-top: 25px; }
.s36 .media { aspect-ratio: 1440 / 1776; }

/* ============================================================
   37 · cs-results  (4020:1542)
   bg #0c0a18 · p 100 · text 429 | gap 40 | 3 stat cards
   ============================================================ */
.s37 {
  background: var(--deep);
  padding-block: 100px;
  color: #fff;
}
.s37-inner {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--inset);
  display: grid;
  grid-template-columns: 429px 1fr;
  gap: 40px;
  align-items: stretch;       /* text column matches the stat-card row */
}
.results-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.results-text .headline { color: #fff; }
.results-text .intro-body {
  color: var(--white-75);
  padding-top: 0;
}

.results-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;           /* sits on the cards' bottom edge */
  flex-shrink: 0;
  padding-block: 13px;
  background: var(--paper);
  border: 1px solid var(--paper);
  color: #141314;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.results-cta:hover { background: #983731; border-color: #983731; color: var(--paper); }

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 563px;          /* min, not fixed — text can grow */
  padding: 24px 20px 20px;
  background: var(--stat-card);
  color: var(--deep);         /* ink matches the section ground */
  font-weight: 700;
}
.stat-value {
  font-size: var(--t-h1);
  line-height: 0.93;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.stat-label {
  font-size: calc(var(--t-stat) - 4px);
  line-height: 1.2;
  text-transform: uppercase;
}

/* ============================================================
   FOOTER  (6:302 / 5:77)
   bg #f2f2f2 · pt 48 · padding-inline 100 · grid 1.8fr 1fr×3
   ============================================================ */
.site-footer {
  background: var(--page);
  padding-top: 48px;
}
.footer-inner {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--inset);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ink-12);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-logo { display: block; line-height: 0; }
.footer-logo img { display: block; height: 44px; width: auto; }
.footer-tagline {
  margin: 0;
  font-size: 0.75rem;         /* 12px */
  line-height: 1.85;
  letter-spacing: 0.48px;
  color: var(--ink-45);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-col-label {
  margin: 0;
  font-size: 0.85rem;         /* 13.6px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2.176px;
  text-transform: uppercase;
  color: var(--brand);
}
.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* set on the list so the <li> strut is 12/1.5, not the body's 17/1.8 */
  font-size: 0.75rem;
  line-height: 1.5;
}
.footer-nav-list a {
  letter-spacing: 0.72px;
  color: var(--ink-45);
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.footer-nav-list a:hover { color: var(--ink); }

.footer-status {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding-top: 28px;
  font-size: 0.625rem;        /* 10px */
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--grey);
}
.status-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 32px;
}
.footer-copyright {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--grey);
}

/* ============================================================
   MOTION

   Two systems, both opt-in and both silenced by
   prefers-reduced-motion (see the block at the foot of the file).

   1. Split-line reveal — the site-wide heading animation from
      style.css, reproduced here verbatim: a 110% masked rise on
      cubic-bezier(.76,0,.24,1) over 1.5s, staggered per line.
      main.js is not loaded on this page, so the line wrapping and
      the .is-visible trigger are done by the inline script.

   2. Scroll drift — scroll-linked parallax. Cluster tiles move as
      whole tiles; banner artwork moves inside a still frame, with a
      1.09 scale supplying the headroom so no edge is ever exposed.
      Travel is a fraction of the element, so it holds at any width.
   ============================================================ */

/* ---------- 1. Split-line reveal ---------- */
.split-line-mask {
  display: block;
  overflow: clip;
}
.split-line {
  display: block;
  transform: translateY(110%);
  transition: transform 1.5s cubic-bezier(.76, 0, .24, 1);
}
[data-animate].is-visible .split-line { transform: translateY(0); }

/* Lines stagger within a label; --card-delay cascades the three cards */
[data-animate].is-visible .split-line-mask:nth-child(1) .split-line { transition-delay: calc(var(--card-delay, 0s) + 0s);    }
[data-animate].is-visible .split-line-mask:nth-child(2) .split-line { transition-delay: calc(var(--card-delay, 0s) + 0.06s); }
[data-animate].is-visible .split-line-mask:nth-child(3) .split-line { transition-delay: calc(var(--card-delay, 0s) + 0.12s); }
[data-animate].is-visible .split-line-mask:nth-child(4) .split-line { transition-delay: calc(var(--card-delay, 0s) + 0.18s); }

.results-grid .stat-card:nth-child(1) .stat-label { --card-delay: 0s;    }
.results-grid .stat-card:nth-child(2) .stat-label { --card-delay: 0.09s; }
.results-grid .stat-card:nth-child(3) .stat-label { --card-delay: 0.18s; }

/* ---------- 2. Scroll drift ---------- */
/* Promoted only while in view — the script adds .is-drifting */
[data-par].is-drifting {
  will-change: transform;
}

/* ============================================================
   FIGMA BAND HEIGHTS
   Several text sections are drawn taller in Figma than their
   copy strictly needs — the extra air is part of the design
   (each frame is justify-center with 100px minimum padding).
   These are FLOORS, never caps: the copy is free to grow past
   them and nothing can clip. Applied only at the design width
   and above, so the bands collapse to content on small screens.

   Section 12 has no floor in rev 2: Figma shrank it to 649 and the
   copy now needs ~660, so the content sets the height.
   ============================================================ */
@media (min-width: 1140px) {
  .s02, .s04, .s10, .s23, .s37 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .s02 { min-height: 713.4px; }   /* Figma 6:93      */
  .s04 { min-height: 646px;   }   /* Figma 8024:342  */
  .s10 { min-height: 366px;   }   /* Figma 8027:422  */
  .s23 { min-height: 721px;   }   /* Figma 8052:704  */
  .s37 { min-height: 775px;   }   /* Figma 4020:1542 */
}

/* ============================================================
   RESPONSIVE
   Below the 1140 column the page goes fluid: the column takes
   side padding, two-up grids stack and the clusters unpack
   into a simple grid. Phase-one behaviour — legible and
   unbroken at every width, not a bespoke redesign.
   ============================================================ */

/* --- Tablet & below: column goes full width --- */
@media (max-width: 1139px) {
  :root { --pad: 40px; }

  .wrap,
  .intro,
  .s12-inner,
  .s37-inner,
  .footer-inner,
  .s19-panel {
    max-width: none;
    padding-inline: var(--pad);
  }

  .intro-text,
  .intro-text--lead { max-width: 62ch; }
  .intro-text--center { max-width: none; }

  .site-header { padding-inline: var(--pad); }

  /* Outcome + results stack */
  .s12-inner,
  .s37-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .s12 .media { aspect-ratio: 16 / 10; }

  .stat-card { min-height: 380px; }

  /* Section 19: its own gutters shrink with the page */
  .s19-panel { padding: 25px var(--pad); }

  /* Hero can breathe on shorter, wider tablet viewports */
  .s-hero { aspect-ratio: 3 / 2; }
}

/* --- Clusters unpack --- */
@media (max-width: 1023px) {
  .cluster,
  .s03 .cluster,
  .s13 .cluster {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding-inline: var(--pad);
  }
  .cluster .media {
    position: static;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .s03 .c1, .s13 .c1 { aspect-ratio: 720 / 820; }
  .s03 .c4 { aspect-ratio: 1 / 1; }
  .s13 .c3 { aspect-ratio: 1 / 1; }
  .s13 .c4 { aspect-ratio: 270 / 480; }
}

/* --- Footer collapses (Figma: 1fr 1fr at ≤900px) --- */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  :root {
    --pad: 20px;
    --nav-h: 72px;
    --t-h1:   clamp(2rem, 9vw, 2.5rem);
    --t-h2:   clamp(1.375rem, 5.5vw, 1.625rem);
    --t-lead: clamp(1.125rem, 4.8vw, 1.375rem);
    --t-body: 1rem;
  }

  body { line-height: 1.75; }

  .s-hero { aspect-ratio: 3 / 4; min-height: 480px; }
  .hero-chevron { bottom: 24px; width: 48px; height: 48px; }
  .hero-chevron svg { width: 36px; height: 36px; }

  /* Header: drop the centre menu label, keep logo + CTA */
  .nav-menu-btn { display: none; }
  .nav-cta {
    height: 38px;
    padding-inline: 14px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
  .nav-logo img { height: 26px; }

  /* Text blocks */
  .s02, .s10, .s12, .s23, .s37 { padding-block: 64px; }
  .s04 { padding-bottom: 64px; }
  .intro-text { gap: 16px; }
  .intro-body { gap: 1.5em; }

  /* Two- and three-up grids stack */
  .grid-2,
  .grid-3,
  .s19-panel,
  .cluster,
  .s03 .cluster,
  .s13 .cluster {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Stacked slots: give the tall portrait pairs a sane height */
  .s19 .media  { aspect-ratio: 9 / 16; }
  .s36 .media  { aspect-ratio: 4 / 5; }
  .s12 .media  { aspect-ratio: 3 / 2; }

  .cluster .media { aspect-ratio: 4 / 3; }
  .s03 .c1, .s13 .c1 { aspect-ratio: 4 / 5; }
  .s13 .c4 { aspect-ratio: 9 / 16; }

  /* Results */
  .results-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card {
    min-height: 0;
    gap: 1.5rem;
    padding: 20px;
  }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { padding-block: 24px; }
}

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  /* The script bails out too; this covers anything already written. */
  [data-par] { transform: none !important; }
  .split-line { transform: none !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}