/* ===========================================================================
 * style.css — the site's single stylesheet.
 * ===========================================================================
 * Organised in load order: design tokens first, then base/reset/typography,
 * then one banner'd section per UI block. Components depend on the tokens and
 * base layer above them. Strict BEM, single-class selectors, every value drawn
 * from the tokens in the first section.
 *
 * Sections are banner'd in load order: TOKENS and BASE first, then one section
 * per UI block — the shared site chrome, the homepage bands, and the sector,
 * case-study, legal, about and contact page blocks.
 * =========================================================================== */

/* ###########################################################################
   TOKENS — design tokens (:root custom properties); single source of truth
   ########################################################################### */

/* ==========================================================================
   Stealth Accelerators — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for every design decision across the site.
   Sections compose ONLY these tokens — never raw hex, px, or magic numbers.

   Tokens carry semantic names describing their role in the system. Compose
   sections from these names; do not introduce opaque identifier-style names.

   Breakpoints are documented here as comments because CSS custom properties
   cannot be used inside @media query conditions. The canonical breakpoints are:
     - desktop : default (no query)
     - tablet  : @media (max-width: 1199px) and (min-width: 810px)
     - mobile  : @media (max-width: 809px)
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     COLOR — palette
     Named for what each color IS in the system (surface / text / accent /
     border), not where it happens to appear. Near-black anchors the dark
     sections; light greys + white carry the light surfaces; a single gold is
     the only chromatic accent, used sparingly.
     ---------------------------------------------------------------------- */

  /* Backgrounds — near-black (page + dark sections) */
  --color-bg-deep:            #040404; /* deepest near-black page/section bg */
  --color-bg-deep-rgb:        4 4 4;   /* channels of --color-bg-deep for rgb()/alpha composition */

  /* Surfaces — dark */
  --color-surface-dark:       #1e1e1f; /* raised dark panel, one step up from bg-deep */
  --color-surface-dark-muted: #29292b; /* inset/secondary dark panel */
  --color-border-dark:        #333333; /* hairline / divider on the dark sections */

  /* Surfaces — light (greys + white) */
  --color-surface-cream:        #f4f4f4; /* primary light page background */
  --color-surface-cream-bright: #ffffff; /* brightest near-white card surface */
  --color-surface-sand:         #e0e0e0; /* deepest of the light surfaces */

  /* Text / ink */
  --color-text-ink:        #040404; /* primary near-black ink on light surfaces */
  --color-text-ink-brown:  #1e1e1f; /* dark neutral ink for headings/emphasis */
  --color-text-muted:      #6b6b6b; /* muted grey secondary/caption text on light */
  --color-text-muted-warm: #6b6b6b; /* muted grey for warm-toned text and marks */

  /* Accent — a SINGLE gold, used sparingly. The other three --accent-* tokens
     carry neutral black/grey roles (their values say so). */
  --color-accent:       #cbb57e; /* the one gold accent (pills, focus, markers) */
  --color-accent-deep:  #1e1e1f; /* neutral near-black: links/labels/hovers on light + dark duotone stop */
  --color-accent-muted: #333333; /* neutral dark border (panels, inputs) */
  --color-accent-sand:  #d8d8d8; /* neutral light: highlights + light duotone stop */

  /* Borders / dividers (hairlines) */
  --color-border-sage:  #bfbfbf; /* muted light text on dark + faint hairline */
  --color-border-stone: #d8d8d8; /* hairline / divider on light surfaces */

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — families
     Two real families: a display serif (Neco) for headings/eyebrows/serif
     leads, and a body sans (Inter) for body/UI/small text. Each is paired
     with a metric-matched "*Placeholder" fallback so the system font occupies
     the SAME box while the webfont swaps in (zero layout shift). The @font-face
     declarations and the placeholder metric overrides are in the FONTS section
     below.
     ---------------------------------------------------------------------- */
  --font-family-display: "Neco", "Neco Placeholder", serif;        /* all display/heading roles */
  --font-family-body:    "Inter", "Inter Placeholder", sans-serif; /* all body/UI/small roles */

  /* Inter OpenType features applied to all body/UI text */
  --font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;

  /* Font weights — 400 regular base everywhere; 700 bold.
     (Italics exist at 400 + 700.) */
  --font-weight-regular:  400;
  --font-weight-bold:     700;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — type scale (role-based)
     Root font-size is never overridden, so 1rem = 16px. Each role carries its
     size, line-height and letter-spacing per breakpoint. Responsive size swaps
     use the *-mobile / *-tablet tokens, applied in the component sections below.
     ---------------------------------------------------------------------- */

  /* display — hero headline (h1). Serif. */
  --font-size-display:         72px;
  --font-size-display-tablet:  48px;
  --font-size-display-mobile:  40px;
  --line-height-display:       1.1;
  --letter-spacing-display:    -0.3px;

  /* h1 — major section titles (rendered as h2). Serif. */
  --font-size-h1:        40px;
  --font-size-h1-mobile: 32px;         /* tablet keeps 40px */
  --line-height-h1:      1.2;
  --letter-spacing-h1:   -0.3px;

  /* h2 — large stat figures / sub-leads (e.g. "$18M"). Sans.
     NOTE: the only role that GROWS on mobile (24px -> 32px). */
  --font-size-h2:        24px;
  --font-size-h2-mobile: 32px;
  --line-height-h2:      1.2;
  --letter-spacing-h2:   -1px;

  /* h3 — card / list-item titles (e.g. "Agritech"). Serif. */
  --font-size-h3:        20px;
  --font-size-h3-mobile: 19.2px;
  --line-height-h3:      1.2;
  --letter-spacing-h3:   0;

  /* h3-feature — value-prop titles (e.g. "We move on conviction"). Serif. */
  --font-size-h3-feature:             20px;
  --font-size-h3-feature-mobile:      18.08px;
  --line-height-h3-feature:           1.2;  /* desktop/tablet */
  --line-height-h3-feature-mobile:    1.4;
  --letter-spacing-h3-feature:        -0.3px;

  /* eyebrow — section eyebrows / labels. Serif, accent-deep.
     NOTE: text-transform is `none` (NOT uppercase). */
  --font-size-eyebrow:        24px;
  --font-size-eyebrow-mobile: 20.8px;
  --line-height-eyebrow:      1.4;
  --letter-spacing-eyebrow:   0;

  /* lead-serif — serif lead/intro paragraphs. Serif. */
  --font-size-lead:             18.08px;
  --font-size-lead-mobile:      16px;
  --line-height-lead:           1.3;   /* desktop/tablet */
  --line-height-lead-mobile:    1.2;
  --letter-spacing-lead:        -0.36px;
  --letter-spacing-lead-mobile: 0;

  /* body — dominant body copy. Sans, muted ink. Constant across breakpoints. */
  --font-size-body:      16px;
  --line-height-body:    1.5;
  --letter-spacing-body: 0;

  /* small — captions / inline CTAs (e.g. "Read Case Study ->"). */
  --font-size-small:        14.08px;
  --line-height-small:      1.5;
  --letter-spacing-small:   0;

  /* Paragraph rhythm — vertical space between stacked rich-text blocks. */
  --paragraph-spacing:       20px;

  /* ----------------------------------------------------------------------
     SPACE — 8px-based scale
     4 -> 96 follow the 8px rhythm; the 100 -> 148 tier is the coarse section
     vertical-padding set. Off-scale gap/padding/margin values are folded to
     the nearest token per context.
     ---------------------------------------------------------------------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;   /* most common value; also mobile/page edge gutter */
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  40px;
  --space-2xl: 48px;
  --space-3xl: 56px;
  --space-4xl: 72px;   /* section vertical padding (desktop) */
  --space-5xl: 96px;
  --space-6xl: 100px;  /* largest recurring section vertical padding */
  --space-7xl: 130px;  /* extra-tall desktop section padding */
  --space-8xl: 148px;  /* tallest desktop section padding */

  /* ----------------------------------------------------------------------
     LAYOUT — containers + responsive gutter
     ---------------------------------------------------------------------- */
  --container-max:        1120px; /* primary centered content max-width */
  --container-gutter:     var(--space-sm); /* horizontal page gutter (16px) */

  /* ----------------------------------------------------------------------
     RADIUS — corner rounding
     ---------------------------------------------------------------------- */
  --radius-sm:     2px;   /* tight chips/inputs/tags */
  --radius-md:     4px;   /* default control/card rounding */
  --radius-xl:     10px;  /* framed media */
  --radius-pill:   999px; /* full pill / round badges */
  --radius-circle: 50%;   /* true circle for square-aspect elements */

  /* ----------------------------------------------------------------------
     SHADOW — elevation
     ---------------------------------------------------------------------- */
  --shadow-header-scrolled-dark: 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.32); /* sticky header once scrolled */

  /* ----------------------------------------------------------------------
     Z-INDEX — stacking layers
     A small, intentional ladder. Use the named layer, never a raw number.
     ---------------------------------------------------------------------- */
  --z-base:          0;   /* in-flow / decorative background layers */
  --z-raised:        1;   /* raised above same-context siblings (overlapping cards) */
  --z-overlap:       2;   /* second overlap tier within a composition */
  --z-sticky-header: 10;  /* fixed/sticky site header */
  --z-overlay:       100; /* top-most floating overlay (search dropdown / popovers) */

  /* ----------------------------------------------------------------------
     MOTION — duration + easing
     House defaults for the site's hover/reveal micro-interactions.
     Honoured by the prefers-reduced-motion block in the BASE section below.
     ---------------------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* decelerate-to-rest */
}

/* ###########################################################################
   BASE — reset, @font-face, base typography, layout primitives, accessibility
   ########################################################################### */

/* ==========================================================================
   Stealth Accelerators — Base
   --------------------------------------------------------------------------
   Foundation layer, applied after the TOKENS section above. Responsibilities:
     1. @font-face — self-hosted Inter + Fontshare Neco (+ metric fallbacks)
     2. A modern, minimal reset
     3. :root document setup + base typography wired to tokens
     4. Element defaults (links, media, forms)
     5. Layout primitives (.container, .section, .visually-hidden)
     6. Accessibility (:focus-visible) + prefers-reduced-motion

   This section declares NO colors/sizes/spacing as literals — everything comes
   from the TOKENS section above. The only literals here are @font-face metric
   overrides and font URLs, which are font-file facts, not design decisions.
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   --------------------------------------------------------------------------
   Display serif: Neco (Fontshare), 4 faces (400/700 x normal/italic).
   Body sans:     Inter, self-hosted. We declare the latin-basic subset
                  (unicode-range U+0000-00FF ...) for each weight/style we use.
   Metric fallbacks: "Neco Placeholder" / "Inter Placeholder" map to a system
                  serif/sans with ascent/descent/line-gap/size overrides so the
                  fallback box matches the webfont box exactly — no layout shift
                  while font-display:swap fetches the real file.
   ========================================================================== */

/* --- Neco (display serif) ------------------------------------------------ */
@font-face {
  font-family: "Neco";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/media/third-party-assets/fontshare/wf/SNCBY2VANYQ5HGPPHJ4N2M5CCYL3BWUJ/6D7UWYDMGQRHMCMTIQ5YRTSALARDQ5K7/OM4IMSIGIGZ5VH7YZ3YT2EVE3N2VXU7A.woff2") format("woff2");
}
@font-face {
  font-family: "Neco";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/media/third-party-assets/fontshare/wf/7ADIHRDKIODLZGDPX4SOBCTBZYWKPD6S/J2PKDVEHWRNTDYNIK4ZLIVVYW5O25NVE/3XK3LQRQHETO6ZNYD2EQIQXYOVQ3BORV.woff2") format("woff2");
}
@font-face {
  font-family: "Neco";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/media/third-party-assets/fontshare/wf/ZZRN7VFBUDH3VROXOPGOOPAY3IN4GDT3/LNNK42OHVBMXQX22TH5KP4UJUEY2J756/WW23HEHP6IBKSUFXRT77ZRSCRZTAJQDG.woff2") format("woff2");
}
@font-face {
  font-family: "Neco";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/media/third-party-assets/fontshare/wf/EQVL4XXDTLCLHV6BBSOCCPID7R5LDX5X/FQC6YAD7EH57JTKSXY2M554MQPZIXIZZ/GXULOUKALZX7BOYOBUJ46L6RADP36S4R.woff2") format("woff2");
}

/* --- Inter (body sans) — latin-basic subset, all used weights/styles ----- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/media/assets/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/media/assets/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/media/assets/yDtI2UI8XcEg1W2je9XPN3Noo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/media/assets/syRNPWzAMIrcJ3wIlPIP43KjQs.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/media/assets/pKRFNWFoZl77qYCAIp84lN1h944.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/media/assets/ia3uin3hQWqDrVloC1zEtYHWw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Metric-matched fallbacks (zero-layout-shift while swapping) ---------- */
@font-face {
  font-family: "Neco Placeholder";
  src: local("Times New Roman");
  ascent-override: 93.01%;
  descent-override: 29.8%;
  line-gap-override: 8.13%;
  size-adjust: 110.74%;
}
@font-face {
  font-family: "Inter Placeholder";
  src: local("Arial");
  ascent-override: 89.79%;
  descent-override: 22.36%;
  line-gap-override: 0%;
  size-adjust: 107.89%;
}

/* ==========================================================================
   2. RESET — modern + minimal
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box; /* predictable sizing: padding/border inside width */
}

/* Strip default margins; let layout primitives + components own all spacing. */
* {
  margin: 0;
}

/* ==========================================================================
   3. DOCUMENT + BASE TYPOGRAPHY
   --------------------------------------------------------------------------
   Root font-size stays at the UA default (16px = 1rem) — the entire token
   scale is calibrated to that and the root size is never overridden. Users
   who scale their browser font still scale the whole site.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%; /* don't auto-inflate text on orientation change */
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth; /* disabled under prefers-reduced-motion below */
}

body {
  min-height: 100vh;
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-ink);
  background-color: var(--color-surface-cream);
  text-rendering: optimizeLegibility;
}

/* Desktop: a slim gold scrollbar — the one accent against a dark groove, the
   thumb inset by a track-coloured ring so it reads as a floating pill. Scoped to
   pointer devices wide enough to show a scrollbar; touch tablet/mobile keep their
   native overlay bars. Standard properties (Firefox/Chromium) plus the WebKit
   pseudo-elements (Safari/Blink) so every desktop engine is covered. */
@media (min-width: 1200px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-surface-dark);
  }

  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--color-surface-dark);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border: 3px solid var(--color-surface-dark);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #b29a5e; /* deepened gold on grab */
  }
}

/* Section rails — a hairline grid framing the railed run of sections. A section
   opts in with [data-rails] and draws two kinds of line, both in --rail-color
   (stone by default; dark sections override it to stay equally subtle on their
   fill) and both opaque so the background never tints them:
     - Column rails (::before/::after): a vertical hairline at each content-column
       edge, pinned to the 1120px column inside the 1200px band (falling back to
       the 40px gutter on narrower viewports). Adjacent opted-in sections share
       edges, so the rails read as one continuous divider down the page.
     - Section rail (border-top): a full-bleed horizontal hairline at the top of
       the section, crossing the column rails so every boundary in the run is
       closed. The hero opts out at the top, leaving the page's top band clear;
       the closing CTA band caps the run's bottom with its own full-bleed strip. */
[data-rails] {
  position: relative;
  border-top: 1px solid var(--rail-color, var(--color-border-stone));
}

[data-rails]::before,
[data-rails]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--rail-color, var(--color-border-stone));
  pointer-events: none;
}

[data-rails]::before {
  left: calc(max(0px, (100% - 1200px) / 2) + var(--space-xl));
}

[data-rails]::after {
  right: calc(max(0px, (100% - 1200px) / 2) + var(--space-xl));
}

/* On mobile the content gutter narrows to 16px; pull the column rails in to the
   same gutter so content sits flush to them rather than overflowing past them. */
@media (max-width: 809px) {
  [data-rails]::before {
    left: var(--container-gutter);
  }

  [data-rails]::after {
    right: var(--container-gutter);
  }
}

/* Ledger rail — pairs a section's top rail with a second full-bleed hairline
   16px below it, forming the heavier "ledger strip" divider used between light
   bands where a single hairline reads too faintly. A section opts in by carrying
   a decorative <span class="band-ledger"> child; the section's own [data-rails]
   border-top is the strip's upper line, this element the lower one. */
.band-ledger {
  position: absolute;
  top: var(--space-sm); /* below the section's top rail */
  left: 0;
  z-index: var(--z-raised); /* above the band */
  width: 100%;
  height: 1px; /* hairline — matches the 1px top rail */
  background-color: var(--rail-color, var(--color-border-stone));
  pointer-events: none;
}

/* Headings default to the display serif; components/sections set the precise
   role (h1 / display / eyebrow) via their own classes. These are sensible
   fallbacks so raw heading elements never render unstyled. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  color: var(--color-text-ink);
  text-wrap: balance; /* avoid orphan words in headings (progressive enhancement) */
}

h1 {
  font-size: var(--font-size-h1);
  letter-spacing: var(--letter-spacing-h1);
}

p {
  text-wrap: pretty; /* nicer rag, no single-word last lines (progressive) */
}

/* Inherit type into form controls instead of UA defaults. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   4. ELEMENT DEFAULTS
   ========================================================================== */

/* Links inherit color by default; components opt into accent coloring.
   This keeps link color a deliberate, per-context choice. */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Responsive media — never overflow its container. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists used for layout/navigation shed their markers via component classes;
   raw content lists keep theirs. (No global list-style reset — semantics
   stay intact for screen readers.) */

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

/* container — centered content column with the responsive page gutter.
   Use on the inner wrapper of every full-bleed .section. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* ection — vertical rhythm band. Default desktop padding is the large
   section tier; it steps down on tablet then mobile. */
.section {
  padding-block: var(--space-6xl);
}

@media (max-width: 1199px) and (min-width: 810px) {
  .section {
    padding-block: var(--space-4xl);
  }
}

@media (max-width: 809px) {
  .section {
    padding-block: var(--space-2xl);
  }
}

/* --- First-section header clearance -------------------------------------
   The site header is fixed (~82px tall). Pages that open on an overlay hero
   (home, sector details) draw the hero under the transparent bar by design;
   every other page must keep its first section clear of it. The heroes
   (.about-hero, .case-hero) and the legal doc set their own top clearance,
   but first sections that lean on the .section rhythm alone — Platform
   (.our-portfolio), Expertise (.sectors-detail) — plus the Contact band fall
   under the bar at tablet and mobile, where .section top padding (72px / 48px)
   is shorter than the bar. Pad them to clear it. Scoped to the non-overlay
   header and the first child so home's mid-page reuse of these blocks is left
   alone; .legal is excluded since it already over-pads. */
@media (max-width: 1199px) {
  .site-header:not(.site-header--overlay) ~ main > section.section:first-child:not(.legal),
  .site-header:not(.site-header--overlay) ~ main > .contact:first-child {
    padding-top: var(--space-6xl); /* 100px clears the 82px bar with breathing room */
  }
}

/* visually-hidden — remove from view, keep for assistive tech.
   For labels, skip-link targets, and supplementary heading text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   6. ACCESSIBILITY
   ========================================================================== */

/* Keyboard focus only — never show the ring on mouse/touch interaction.
   A single, high-contrast, token-driven focus style for the whole site. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Respect users who ask for less motion: neutralise transitions/animations
   and smooth scrolling. Components should layer additional honour as needed. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* ###########################################################################
   REVEAL — scroll/load/word reveal motion (the is-visible + data-animate contract)
   ########################################################################### */

/* ==========================================================================
   Behaviour — Reveal + Page-fade
   --------------------------------------------------------------------------
   The cross-cutting motion layer every section's [data-animate] hooks rely on.
   It owns no colour or layout, so it lives here as a single behaviour block
   rather than being copied into each component.

   What it does:
     - [data-animate]            : the hidden -> visible scroll/load reveal.
     - [data-animate="words"]    : per-word blur-in for the eyebrow label.
     - body.is-page-leaving      : the cross-page fade-out transition.

   The reveal/words durations and bespoke easing are intrinsic to this effect,
   not part of the token motion scale (which covers hover/UI micro-interactions),
   so they stay as documented literals. Off-scale reveal offsets stay literal.
   ========================================================================== */

/* --- Scroll / load reveal ------------------------------------------------- */

/* Hidden resting state for every reveal target. JS adds .is-visible to play
   the transition; without JS (or under reduced motion, below) it is forced
   visible so content is never lost. */
[data-animate] {
  opacity: 0;
  transform: translateY(var(--space-md)); /* default fade-up offset */
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

/* Variant start offsets (direction the element travels in FROM). */
[data-animate="fade"]       { transform: none; }                       /* opacity only */
[data-animate="fade-down"]  { transform: translateY(calc(-1 * var(--space-md))); }
[data-animate="fade-left"]  { transform: translateX(var(--space-md)); }
[data-animate="fade-right"] { transform: translateX(calc(-1 * var(--space-md))); }

/* Larger fade-up travel for emphatic reveals (e.g. the footer wordmark). */
[data-animate="fade-up"][data-animate-distance="lg"] { transform: translateY(var(--space-xl)); }
[data-animate="fade-up"][data-animate-distance="xl"] { transform: translateY(60px); }             /* off-scale, reveal-intrinsic */

/* Revealed state — same end point for every variant. */
[data-animate].is-visible,
[data-animate="fade-up"][data-animate-distance="lg"].is-visible,
[data-animate="fade-up"][data-animate-distance="xl"].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Per-word reveal ------------------------------------------------------ */

/* The container itself does not animate — only its word <span>s do. */
[data-animate="words"] {
  opacity: 1;
  transform: none;
  transition: none;
}

[data-animate="words"] > span {
  display: inline-block;
  opacity: 0.001;              /* ~0 but keeps the box laid out for stagger */
  filter: blur(4px);
  transform: translateY(12px); /* small lift — reveal-intrinsic, off-scale */
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, filter, transform;
}

[data-animate="words"].is-visible > span {
  opacity: 1;
  filter: none;
  transform: none;
}

/* --- Page-fade transition ------------------------------------------------- */

/* The body fades out before an internal navigation (the page-fade behaviour
   adds .is-page-leaving). 200ms matches the JS navigation delay (220ms). */
body {
  transition: opacity 200ms ease;
}

body.is-page-leaving {
  opacity: 0;
}

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

/* Honour the user's preference: show every reveal target instantly and never
   fade the page out on navigation. (The prefers-reduced-motion block in the
   BASE section also neutralises transitions globally; this makes the reveal
   intent explicit here.) */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate="words"] > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body {
    transition: none !important;
  }

  body.is-page-leaving {
    opacity: 1 !important;
  }
}

/* ###########################################################################
   SITE HEADER — sticky primary navigation
   ########################################################################### */

/* ==========================================================================
   Component — Site Header
   --------------------------------------------------------------------------
   Sticky primary navigation bar (dark teal) pinned to the top of every page.
   Desktop/tablet: logo opposite an inline row of nav links + a "Get In Touch"
   CTA. Mobile (<810px): the link row collapses into an overlay menu opened by
   a hamburger button.

   BEM: block .site-header with __nav / __logo / __logo-image / __toggle /
   __toggle-icon / __menu / __links / __item / __link / __cta / __cta-icon /
   __cta-label, plus state modifiers --scrolled (sticky shadow, JS-toggled) and
   --open (mobile menu open, JS-toggled). Single-class selectors throughout; the
   one descendant exception (open menu drives child layout) is commented.

   Tokens only — zero raw design literals. Every value traces to a token in
   the TOKENS section; the few intrinsic-to-the-effect numbers (the fixed bar height,
   the logo/CTA-tile box sizes, the centering translate) are documented inline.
   ========================================================================== */

/* --- Block (fixed bar) ---------------------------------------------------
   Full-bleed bar fixed to the top; its content is centered and capped by the
   __nav row. translateX(-50%) off a left:50% anchor centers the full-bleed
   bar. The bottom hairline separates the bar from the page.
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* center the full-bleed bar off the left:50% anchor */
  z-index: var(--z-sticky-header);
  width: 100%;
  background-color: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-surface-dark-muted);
  transition:
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard);
  animation: site-header-enter var(--duration-slow) var(--easing-standard) both;
}

/* Slide the bar down into place on load. translateX(-50%) is held in both
   keyframes so the entrance never knocks the fixed, centred bar off-axis. */
@keyframes site-header-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(-100%); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; }
}

/* Once the page scrolls, JS adds --scrolled to lift the bar off the hero with
   the dark-surface elevation shadow. */
.site-header--scrolled {
  box-shadow: var(--shadow-header-scrolled-dark);
}

/* --- Overlay state (pages opening on a dark hero, e.g. home) --------------
   The bar starts transparent so the hero video reads through it. A soft
   top-down scrim (::before) keeps the cream wordmark/links legible over bright
   footage without looking like a solid bar. The build adds --overlay to the
   header on flagged pages; the shared --scrolled toggle (JS) then restores the
   solid bar the moment the page scrolls, so the transparency lives only at the
   very top of the hero.
   ------------------------------------------------------------------------- */
.site-header--overlay {
  background-color: transparent;
  border-bottom-color: transparent;
}

.site-header--overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 185%; /* bleed past the bar so the scrim dissolves instead of ending
                   at the bar's bottom edge as a visible band */
  z-index: -1; /* behind the nav row, above the (transparent) bar background */
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--color-bg-deep-rgb) / 0.55) 0%,
    rgb(var(--color-bg-deep-rgb) / 0.38) 30%,
    rgb(var(--color-bg-deep-rgb) / 0.2) 55%,
    rgb(var(--color-bg-deep-rgb) / 0.08) 78%,
    rgb(var(--color-bg-deep-rgb) / 0) 100%
  );
  transition: opacity var(--duration-base) var(--easing-standard);
}

/* Scrolled past the top: fade the scrim out and the solid bar in. The shadow
   comes from --scrolled above; this only overrides the transparent fills. */
.site-header--overlay.site-header--scrolled {
  background-color: var(--color-bg-deep);
  border-bottom-color: var(--color-surface-dark-muted);
}

.site-header--overlay.site-header--scrolled::before {
  opacity: 0;
}

/* --- Nav row -------------------------------------------------------------
   Logo at the start, links/CTA group at the end. The row is capped at the
   container max and padded to the 40px edge; it sets the bar's height.
   ------------------------------------------------------------------------- */
.site-header__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md); /* keeps logo and menu apart at narrow desktop */
  width: 100%;
  max-width: var(--container-max);
  min-height: 82px; /* fixed bar height; intrinsic, not a token */
  margin-inline: auto;
  padding-block: var(--space-sm);
  padding-inline: var(--space-xl); /* bar edge */
}

/* --- Logo ----------------------------------------------------------------
   Home link rendering the brand lockup (inline SVG in the partial). The SVG
   fills with currentColor, so the link's color is the mark's cream.
   ------------------------------------------------------------------------- */
.site-header__logo {
  flex: none;
  display: block;
  color: var(--color-surface-cream-bright);
}

.site-header__logo svg {
  display: block;
  height: 38px;
  width: auto;
}

/* --- Menu (links + CTA group) --------------------------------------------
   On desktop this is the inline cluster at the end of the bar: the link list
   followed by the CTA. On mobile it becomes the overlay panel (see Mobile).
   ------------------------------------------------------------------------- */
.site-header__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-lg); /* between the link list and the CTA */
}

/* Nav link list — horizontal, marker-free. */
.site-header__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-lg);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-header__item {
  display: flex;
}

/* Nav link — cream label that shades to sage on hover. Body type role; no
   persistent underline. */
.site-header__link {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-surface-cream-bright);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}

.site-header__link:hover {
  color: var(--color-border-sage);
  text-decoration: none;
}

/* --- CTA ("Get In Touch") ------------------------------------------------
   Sand pill with a hairline stone border holding a cream icon tile + label.
   Asymmetric padding (more on the right) lets the icon tile supply the left
   inset. Min-height reserves the control size.
   ------------------------------------------------------------------------- */
.site-header__cta {
  flex: none; /* layout only; the .button component carries the visual */
}

/* --- Hamburger toggle ----------------------------------------------------
   Mobile-only control (hidden on desktop/tablet below). Cream glyph on the
   dark bar; the button itself is a bare, square hit target.
   ------------------------------------------------------------------------- */
.site-header__toggle {
  display: none; /* shown only on mobile (see Mobile block) */
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px; /* hamburger glyph box; intrinsic, not a token */
  height: 24px;
  padding: 0;
  color: var(--color-surface-cream);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Icon box holding the three absolutely-positioned bars. */
.site-header__toggle-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

/* The three hamburger bars. Resting positions (top 7/12/17 within the 24px box)
   draw the three-line glyph; --open (Mobile block) slides the outer two to the
   centre line and rotates them into an ×. */
.site-header__toggle-bar {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1.5px;
  border-radius: 1px;
  background-color: currentColor;
  transition:
    transform var(--duration-base) var(--easing-standard),
    opacity var(--duration-base) var(--easing-standard);
}

.site-header__toggle-bar:nth-child(1) { top: 7px; }
.site-header__toggle-bar:nth-child(2) { top: 12px; }
.site-header__toggle-bar:nth-child(3) { top: 17px; }

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet inherits it (the mobile overlay only
   activates <810px), then mobile overrides below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): identical to desktop — the inline bar persists,
   the hamburger stays hidden. The narrower viewport simply lets flex shrink the
   gap between logo and menu; no rule changes are needed. */

/* Mobile (max 809): the inline menu becomes an overlay panel dropped below the
   bar, toggled by the hamburger. Closed by default; --open reveals it. */
@media (max-width: 809px) {
  .site-header__toggle {
    display: flex; /* reveal the hamburger */
  }

  /* Shrink the lockup so it clears the hamburger on narrow screens. */
  .site-header__logo svg {
    height: 32px;
  }

  .site-header__menu {
    position: absolute;
    top: 100%; /* drop directly under the bar */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start; /* left-align the stacked links + CTA in the panel */
    gap: var(--space-lg); /* mobile panel gap */
    padding: var(--space-sm); /* mobile panel padding */
    background-color: var(--color-bg-deep); /* matches the bar */
    border-bottom: 1px solid var(--color-surface-dark-muted);
    /* Closed: faded out, nudged up under the bar, and non-interactive
       (visibility drops it from the tab order). It stays positioned, so there's
       no layout jump — opening fades and drops it on the same duration/easing as
       the bar going solid, so the bar and panel move as one. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--duration-base) var(--easing-standard),
      transform var(--duration-base) var(--easing-standard),
      visibility var(--duration-base) var(--easing-standard);
  }

  /* State exception (documented): the open modifier on the block reveals its
     menu element. This is the single intentional descendant selector. */
  .site-header--open .site-header__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Open: the bar itself goes solid (and regains its hairline) so the header row
     and the dropped panel read as one unified surface — even on the --overlay
     header, where the bar is otherwise transparent over the hero. */
  .site-header--open {
    background-color: var(--color-bg-deep);
    border-bottom-color: var(--color-surface-dark-muted);
  }

  /* Fade the overlay hero scrim out while open so it doesn't tint the now-solid
     bar (the scrim only exists on --overlay pages). */
  .site-header--overlay.site-header--open::before {
    opacity: 0;
  }

  /* Hamburger → ×: slide the outer bars onto the centre line and rotate them into
     a cross; fade the middle bar out. Bars share a centre transform-origin, so the
     two strokes meet cleanly. */
  .site-header--open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .site-header--open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-header--open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* Links stack left-aligned in the panel. */
  .site-header__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* The menu's align-items: flex-start sizes the CTA to its content and aligns it
     left, so it reads as a regular button rather than a full-width bar. */
}

/* ###########################################################################
   HERO — homepage hero band
   ########################################################################### */

/* ==========================================================================
   Component — Hero
   --------------------------------------------------------------------------
   The full-bleed dark hero that opens the homepage. It stacks the background
   layers behind a bottom-left-pinned content column:

     z-base    (0): the looping background video, scaled to cover the frame
     z-raised  (1): the deep-teal gradient overlay (legibility wash)
     z-overlap (2): the content wrapper

   The section is a flex column that pins its single child (the wrapper) to the
   bottom; the wrapper in turn grows to fill the frame and pins the content to
   its own bottom. The result: copy sits at the lower-left over the video.

   Tokens only: every color/size/space/radius traces to the TOKENS section. The few
   exceptions are intrinsic-to-the-effect literals (the video cover scale and the
   gradient stop %s), documented inline.
   ========================================================================== */

/* --- Block ----------------------------------------------------------------
   Full-bleed band. Flex column pins the wrapper to the bottom of the 90vh
   frame; everything is clipped to the section box. The deep-teal background
   shows through before the video paints (and behind its transparent edges).
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pin the wrapper (and its bottom-pinned copy) to the base */
  align-items: center;
  width: 100%;
  height: 90vh;
  overflow: hidden; /* clip the scaled video and overlay to the frame */
  background-color: var(--color-bg-deep); /* pre-video fallback + edge fill */
  isolation: isolate; /* own stacking context so the layers below sort predictably */
}

/* --- Layer 1: background video --------------------------------------------
   Decorative looping footage. The figure fills the frame on the base layer;
   the inner <video> is scaled 1.2x so it always covers with no exposed edges
   (scaling the video — not the figure — leaves the figure's transform free for
   the load-reveal fade, which only animates opacity here).
   -------------------------------------------------------------------------- */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: var(--z-base); /* bottom-most layer */
  overflow: hidden;
}

.hero__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2); /* cover-zoom so footage fills the frame edge-to-edge */
}

/* --- Layer 2: gradient overlay --------------------------------------------
   Three stacked scrims shaped to where the hero actually puts things, instead
   of one flat wash: a shallow eased band under the transparent header bar; a
   bottom-left radial wedge behind the headline + lead measure; and a full-width
   eased floor that resolves to the solid page background so the CTA row sits on
   near-solid ground and the section hands off seamlessly. Mid-frame and the
   upper right are left nearly clear so the footage stays visible. Every stop
   is --color-bg-deep at a documented alpha; the multi-stop ramps approximate
   an ease-out curve so no scrim shows a band edge.
   -------------------------------------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised); /* above video, below the content */
  pointer-events: none;
  background:
    /* nav guard — eased top band; peaks where the transparent bar sits */
    linear-gradient(
      180deg,
      rgb(var(--color-bg-deep-rgb) / 0.5) 0%,
      rgb(var(--color-bg-deep-rgb) / 0.32) 7%,
      rgb(var(--color-bg-deep-rgb) / 0.16) 14%,
      rgb(var(--color-bg-deep-rgb) / 0.05) 19%,
      rgb(var(--color-bg-deep-rgb) / 0) 24%
    ),
    /* headline wedge — radial anchored bottom-left, covering the title block */
    radial-gradient(
      ellipse 140% 110% at 0% 100%,
      rgb(var(--color-bg-deep-rgb) / 0.68) 0%,
      rgb(var(--color-bg-deep-rgb) / 0.4) 42%,
      rgb(var(--color-bg-deep-rgb) / 0) 70%
    ),
    /* floor — full-width ramp to solid, grounding the lead + CTA row */
    linear-gradient(
      0deg,
      var(--color-bg-deep) 0%,
      rgb(var(--color-bg-deep-rgb) / 0.88) 12%,
      rgb(var(--color-bg-deep-rgb) / 0.62) 26%,
      rgb(var(--color-bg-deep-rgb) / 0.42) 40%,
      rgb(var(--color-bg-deep-rgb) / 0.2) 53%,
      rgb(var(--color-bg-deep-rgb) / 0.06) 64%,
      rgb(var(--color-bg-deep-rgb) / 0) 74%
    );
}

/* --- Content wrapper ------------------------------------------------------
   Centred max-width column that grows to fill the frame and pins its content
   to the bottom-left. Raised above every background layer.
   -------------------------------------------------------------------------- */
.hero__wrapper {
  position: relative;
  z-index: var(--z-overlap); /* above video/overlay */
  flex: 1 0 0; /* grow to fill the frame so flex-end actually pins to the base */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pin content to the bottom of the wrapper */
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max); /* aligns hero content + CTA with the header */
  padding: var(--space-6xl) var(--space-xl) var(--space-4xl);
}

/* Inner content stack: headline above the lead + CTA row. */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
  padding-left: var(--space-sm); /* left inset */
}

/* Page headline (the single <h1>). Display serif, recoloured to cream-bright
   because it sits on the dark video rather than a light surface. */
.hero__title {
  width: 100%;
  max-width: 680px; /* headline measure */
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
  /* Local contrast that travels with the glyphs: a tight contact shadow plus a
     wide soft halo, so the top line stays crisp over bright footage the scrims
     leave open. */
  text-shadow:
    0 1px 2px rgb(var(--color-bg-deep-rgb) / 0.35),
    0 4px 28px rgb(var(--color-bg-deep-rgb) / 0.45);
}

/* --- Lead + CTA row -------------------------------------------------------
   Lead paragraph and the CTA sit on one row (space-between) on desktop, then
   stack to a column on tablet/mobile.
   -------------------------------------------------------------------------- */
.hero__lead-cta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Lead paragraph. Grows to take the row's free width up to its measure cap,
   recoloured to sage for legibility on the dark video. */
.hero__lead {
  flex: 1 0 0; /* take the available row width before the CTA */
  max-width: 604px; /* lead measure */
  color: var(--color-border-sage);
  text-wrap: balance;
  /* Same glyph-local contrast as the title, tightened for the smaller size. */
  text-shadow:
    0 1px 2px rgb(var(--color-bg-deep-rgb) / 0.4),
    0 3px 18px rgb(var(--color-bg-deep-rgb) / 0.5);
}

/* Lift the gold pill off the footage with a grounded drop shadow. Scoped to
   the hero row; the shared button stays flat on solid section surfaces. */
.hero__lead-cta .button {
  box-shadow: 0 10px 30px rgb(var(--color-bg-deep-rgb) / 0.4);
}

/* ==========================================================================
   Responsive
   Order matches the house rule: desktop is the base above; tablet then mobile
   override below.
   ========================================================================== */

/* Tablet (max 1199 / min 810): the wrapper and content rhythm tighten, and the
   lead + CTA stack into a column. Section height + wrapper padding are
   unchanged from desktop. */
@media (max-width: 1199px) and (min-width: 810px) {
  .hero__wrapper,
  .hero__content {
    gap: var(--space-sm);
  }

  /* Headline steps down one tier on tablet (72px -> 48px). */
  .hero__title {
    font-size: var(--font-size-display-tablet);
  }

  .hero__lead-cta {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  /* Once stacked, the lead spans the column rather than sharing a row. */
  .hero__lead {
    flex: none;
    width: 100%;
  }
}

/* Mobile (max 809): shorter frame, tighter gutters, and the same column stack. */
@media (max-width: 809px) {
  .hero {
    height: 80vh;
  }

  .hero__wrapper {
    gap: var(--space-sm);
    padding: var(--space-6xl) var(--space-sm) var(--space-2xl);
  }

  .hero__content {
    gap: var(--space-sm);
    padding-left: 0;
    padding-inline: var(--space-2xs); /* mobile inset */
  }

  .hero__title {
    font-size: var(--font-size-display-mobile);
  }

  .hero__lead-cta {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .hero__lead {
    flex: none;
    width: 100%;
  }

  /* The stacked column reaches much higher up the shorter 80vh frame, so the
     wedge grows taller and the floor ramp climbs further than on desktop. The
     nav guard is unchanged. */
  .hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgb(var(--color-bg-deep-rgb) / 0.5) 0%,
        rgb(var(--color-bg-deep-rgb) / 0.32) 7%,
        rgb(var(--color-bg-deep-rgb) / 0.16) 14%,
        rgb(var(--color-bg-deep-rgb) / 0.05) 19%,
        rgb(var(--color-bg-deep-rgb) / 0) 24%
      ),
      radial-gradient(
        ellipse 170% 135% at 0% 100%,
        rgb(var(--color-bg-deep-rgb) / 0.68) 0%,
        rgb(var(--color-bg-deep-rgb) / 0.4) 46%,
        rgb(var(--color-bg-deep-rgb) / 0) 74%
      ),
      linear-gradient(
        0deg,
        var(--color-bg-deep) 0%,
        rgb(var(--color-bg-deep-rgb) / 0.9) 16%,
        rgb(var(--color-bg-deep-rgb) / 0.7) 31%,
        rgb(var(--color-bg-deep-rgb) / 0.5) 46%,
        rgb(var(--color-bg-deep-rgb) / 0.28) 60%,
        rgb(var(--color-bg-deep-rgb) / 0.1) 72%,
        rgb(var(--color-bg-deep-rgb) / 0) 82%
      );
  }
}

/* ###########################################################################
   OUR PHILOSOPHY — thesis statement + pillar follower
   ########################################################################### */

/* ==========================================================================
   Component — Our Philosophy (section)
   --------------------------------------------------------------------------
   The light sand "Our Philosophy" band: an intro row (serif eyebrow beside the
   large thesis statement) stacked above a four-pillar list. Each pillar is a
   serif title row whose description expands beneath it on hover and whose image
   is cloned into a cursor-following preview; the follower behaviour drives only
   the follower's position and the masked image slide, and the statement reveal
   drives the per-letter brighten.
   On touch / small screens / reduced motion the rows fall back to inline image
   cards. This file owns the section shell, the intro row, the statement (incl.
   the per-letter spans), the pillar list, and the follower.

   BEM: block .our-philosophy with __container / __intro / __eyebrow /
   __statement (+ __statement-word / __statement-char) / __pillars /
   __pillar-list / __pillar / __pillar-inner / __pillar-title / __pillar-body /
   __figure / __image / __follower (+ __follower-inner). The Osmo
   data-follower-* attributes are the JS contract hooks.

   Tokens only — zero raw design literals. Every value traces to a token in
   the TOKENS section; the few intrinsic-to-the-effect numbers (the image aspect
   ratio, the title clamp, the follower width, the masked-slide collapse) are
   documented inline.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   The .section primitive (the BASE section) supplies the vertical band padding
   (100/72/48px); we only set the sand surface and clip the band (overflow:hidden
   contains its decorative edge borders). Content is capped + centered by
   .container on __container, widened below to the 40px edge.
   ------------------------------------------------------------------------- */
.our-philosophy {
  overflow: hidden; /* clip the decorative left/right edge rules */
  background-color: var(--color-surface-sand);
}

/* --- Content column ------------------------------------------------------
   Stacks the intro row above the pillar accordion. The wrapper pads 40px at the
   horizontal edges (vs the 16px page gutter .container gives), so we widen the
   inline padding to --space-xl and reset it to the gutter on mobile. The
   intro->pillars gap steps down per breakpoint.
   ------------------------------------------------------------------------- */
.our-philosophy__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xl); /* intro -> pillars */
  max-width: 1200px; /* rail band cap — pads out to the content column so the pillars meet the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides 16px gutter) */
}

/* --- Intro row -----------------------------------------------------------
   Eyebrow on the left, thesis statement on the right, pushed apart. The 16px
   inline inset keeps both off the section edge. Collapses to a stack on
   tablet/mobile (see Responsive).
   ------------------------------------------------------------------------- */
.our-philosophy__intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm); /* gutter between eyebrow + statement */
  width: 100%;
  padding-inline: var(--space-md); /* row inset — clears the section rails */
}

/* Serif eyebrow label ("Our Philosophy"). Lead-serif type role in primary ink
   — a quiet section label, so it stays a <p>. */
.our-philosophy__eyebrow {
  flex: none;
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

/* Thesis statement. Rendered as <h2> (section title, not the page title).
   Uses the display sans face here (Inter, NOT the serif); left-aligned and
   wrapping inside an 816px line cap. The size is fluid — 28px on small screens up
   to the h1 token (40px) from ~750px wide — and the tracking is expressed in em
   so it scales with the size (−0.0425em == −1.7px at 40px, the original desktop
   tracking). The base colour is ink — the legible resting/fallback state when
   the per-letter reveal below does not run (no JS / reduced motion). */
.our-philosophy__statement {
  flex: 1 1 auto;
  max-width: 816px; /* statement line-length cap */
  font-family: var(--font-family-body); /* this headline renders in Inter */
  font-size: clamp(1.75rem, 1rem + 3.2vw, var(--font-size-h1));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: -0.0425em; /* == -1.7px at 40px; scales with the headline */
  text-align: left; /* aligns with the eyebrow + pillar rail */
  text-wrap: pretty;
  color: var(--color-text-ink); /* resting/fallback ink */
}

/* --- Per-letter scroll reveal --------------------------------------------
   The statement reveal wraps each word, then each letter, in a span and drives
   a per-letter --reveal (0 dormant -> 1 revealed) from the line's scroll
   position. The letter colour mixes from sage up to ink across that range, so
   the sentence brightens letter by letter as it scrolls into view.
   ------------------------------------------------------------------------- */

/* Each word is an atom so a word never breaks across a line at the letter spans. */
.our-philosophy__statement-word {
  display: inline-block;
}

/* Letter colour mix. --reveal defaults to 1 (ink) so a letter stays legible if
   the script never sets it; the module sets it to ~0 (sage) on init, below the
   fold, then advances it toward 1 as the line scrolls up through the viewport. */
.our-philosophy__statement-char {
  color: color-mix(
    in oklab,
    var(--color-text-ink) calc(var(--reveal, 1) * 100%),
    var(--color-border-sage)
  );
}

/* --- Pillar list ---------------------------------------------------------
   Four serif title rows over a top hairline — the same divided list on every
   screen. On a fine pointer (desktop) hovering a row floats its image in the
   cursor follower and opens its description inline (height-animated, with the
   slack reserve below keeping the page still); on touch the row is a tap target
   that expands its image + description in place (the accordion in the Responsive
   block). Dividers run the full column to the section rails; the text + media
   sit inset from them by --pillar-inset. The wrap is the positioning context
   for the fixed follower.
   ------------------------------------------------------------------------- */
.our-philosophy__pillars {
  position: relative;
  width: 100%;
}

.our-philosophy__pillar-list {
  --pillar-desc-open: 3.25em; /* desktop inline-description open height (two lines) */
  --pillar-inset: var(--space-md); /* breathing room from the section rails */
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-stone);
}

/* Slack reserve (desktop) — sits at the bottom of the list and holds exactly the
   height one open row adds (description + its top gap). It collapses to 0 while a
   row is open, so the row's growth is absorbed here instead of extending the
   list: the divider opens, but the section's total height stays fixed and the
   Partner Model section below never moves. (Removed in the tap layout, where an
   intentional tap is free to push the page.) */
.our-philosophy__pillar-list::after {
  content: "";
  display: block;
  height: calc(var(--pillar-desc-open) + var(--space-xs));
  transition: height var(--duration-slow) var(--easing-standard);
}

.our-philosophy__pillar-list:has(.our-philosophy__pillar:hover)::after,
.our-philosophy__pillar-list:has(.our-philosophy__pillar:focus-within)::after {
  height: 0;
}

/* Each pillar is a divided row. Non-hovered rows dim while the list is hovered
   so the active row leads (hover never fires on touch; the tap layout resets it). */
.our-philosophy__pillar {
  position: relative;
  border-bottom: 1px solid var(--color-border-stone);
  transition: opacity var(--duration-base) var(--easing-standard);
}

.our-philosophy__pillar-list:hover .our-philosophy__pillar:not(:hover) {
  opacity: 0.45;
}

/* Row content wrapper — provides the rail inset and (desktop) the row's vertical
   padding; stacks the trigger above the reveal. */
.our-philosophy__pillar-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-md) var(--pillar-inset); /* row, inset from the rails */
}

/* Toggle — a visually hidden but focusable checkbox; the <label> trigger drives
   it (for=) and the tap layout keys its :checked state to open the row. Pure
   CSS, no script. */
.our-philosophy__pillar-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Trigger — the full-width title row, a <label> wired to the toggle so it is
   tap- and keyboard-operable with no JS. Reset to a flush text control. */
.our-philosophy__pillar-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md); /* title -> mark */
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

/* Keyboard focus on the hidden toggle shows a ring on its title row. */
.our-philosophy__pillar-toggle:focus-visible ~ .our-philosophy__pillar-trigger {
  outline: 2px solid var(--color-text-ink);
  outline-offset: 4px;
}

/* Pillar title — serif display row. The clamp (32 -> 44px) is intrinsic to this
   oversized-row treatment, sitting between the h1 and display type roles. */
.our-philosophy__pillar-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); /* row title */
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

/* Expand mark — a chevron shown only in the tap (accordion) layout; rotates when
   its row opens. The 10px box + 1.5px stroke are intrinsic to the glyph. */
.our-philosophy__pillar-mark {
  display: none; /* hidden on the desktop hover layout */
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--color-text-muted-warm);
  border-bottom: 1.5px solid var(--color-text-muted-warm);
  transform: rotate(45deg); /* points down when collapsed */
  transition: transform var(--duration-base) var(--easing-standard);
}

/* Reveal wrapper — transparent on desktop (the description opens inline on
   hover, the image lives in the follower); a real collapsible container in the
   tap layout (Responsive block). */
.our-philosophy__pillar-reveal,
.our-philosophy__pillar-reveal-inner {
  display: contents;
}

/* Pillar image — hidden in the row on a fine pointer (cloned into the follower);
   shown inside the reveal in the tap layout. */
.our-philosophy__figure {
  display: none;
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1.51429; /* media crop ratio (intrinsic to the image) */
  overflow: hidden;
}

.our-philosophy__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Pillar description (desktop inline reveal) — collapsed to zero height; on
   hover / focus-within / open it animates to --pillar-desc-open so the row
   genuinely grows and its hairline slides down, while the slack reserve shrinks
   by the same amount so the page below never moves. */
.our-philosophy__pillar-body {
  max-width: 52ch;
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
  height: 0; /* collapsed — the row is just the title */
  opacity: 0;
  overflow: hidden;
  transition:
    height var(--duration-slow) var(--easing-standard),
    margin-top var(--duration-slow) var(--easing-standard),
    opacity var(--duration-base) var(--easing-standard);
}

.our-philosophy__pillar:hover .our-philosophy__pillar-body,
.our-philosophy__pillar:focus-within .our-philosophy__pillar-body {
  height: var(--pillar-desc-open); /* opens to clear the two-line description */
  margin-top: var(--space-xs); /* title -> body */
  opacity: 1;
}

/* --- Cursor follower -----------------------------------------------------
   A fixed, pointer-tracking frame holding the cloned pillar image. Inert and
   invisible until the pointer is over the list. The follower behaviour sets its
   transform each frame and runs the masked vertical slide between images; the
   :has() rule scales the inner in/out with the list hover so it reads correctly
   even before the first pointer move. The 22rem width is intrinsic to the
   floating-preview effect.
   ------------------------------------------------------------------------- */
.our-philosophy__follower {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-overlay);
  width: 22rem; /* floating preview size */
  aspect-ratio: 1.51429;
  border-radius: var(--radius-xl); /* framed media */
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.our-philosophy__follower-inner {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--duration-fast) var(--easing-standard),
    transform var(--duration-slow) var(--easing-standard);
}

.our-philosophy__pillars:has([data-follower-collection]:hover)
  .our-philosophy__follower-inner {
  opacity: 1;
  transform: scale(1);
}

/* Cloned visuals fill the follower and stack for the masked vertical slide. */
.our-philosophy__follower [data-follower-visual] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): intro stacks to a column. A fine-pointer tablet
   keeps the desktop follower list; touch tablets get the card fallback below.
   Edge padding (40px) is inherited from the desktop base above. */
@media (max-width: 1199px) and (min-width: 810px) {
  .our-philosophy__container {
    gap: var(--space-xl);
  }

  .our-philosophy__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm); /* stacked eyebrow -> statement */
  }
}

/* Mobile (max 809): intro stacks (still inset from the rails to match the
   pillars); the band pulls in to the gutter and the eyebrow relaxes. */
@media (max-width: 809px) {
  .our-philosophy__container {
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  .our-philosophy__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .our-philosophy__eyebrow {
    font-size: var(--font-size-lead-mobile);
    line-height: var(--line-height-lead-mobile);
    letter-spacing: var(--letter-spacing-lead-mobile);
  }
}

/* Tap (accordion) layout — touch devices, the mobile breakpoint, OR reduced
   motion: there is no cursor to follow, so drop the follower and make each row a
   tap target that expands its image + description in place. The list keeps the
   same divided serif rows as desktop. Pure CSS: the hidden checkbox's :checked
   state opens the row; the BASE section neutralises the transitions under reduced motion. */
@media (hover: none), (pointer: coarse), (max-width: 809px), (prefers-reduced-motion: reduce) {
  .our-philosophy__follower {
    display: none;
  }

  /* No slack reserve and no hover-dim: an intentional tap may push the page. */
  .our-philosophy__pillar-list::after {
    display: none;
  }

  .our-philosophy__pillar,
  .our-philosophy__pillar-list:hover .our-philosophy__pillar:not(:hover) {
    opacity: 1;
  }

  /* The trigger carries the row's vertical padding so it is a comfortable tap
     target; the chevron mark appears and flips when open. */
  .our-philosophy__pillar-inner {
    padding-block: 0;
  }

  .our-philosophy__pillar-trigger {
    padding-block: var(--space-md); /* generous tap target */
  }

  .our-philosophy__pillar-mark {
    display: block;
  }

  .our-philosophy__pillar-toggle:checked
    ~ .our-philosophy__pillar-trigger
    .our-philosophy__pillar-mark {
    transform: rotate(225deg); /* points up when open */
  }

  /* Reveal is a collapsible container, animated via grid rows (0fr -> 1fr) so it
     opens to its natural height without a magic number; :checked opens it. */
  .our-philosophy__pillar-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-slow) var(--easing-standard);
  }

  .our-philosophy__pillar-toggle:checked ~ .our-philosophy__pillar-reveal {
    grid-template-rows: 1fr;
  }

  /* The grid item must collapse fully (min-height:0) and clip its content
     (overflow:hidden) so nothing bleeds into the closed row. The row's closing
     space is the description's margin (below), not padding here, so it collapses
     with the row instead of leaving a visible sliver. */
  .our-philosophy__pillar-reveal-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm); /* image -> description */
    min-height: 0;
    overflow: hidden;
  }

  /* Image shows inline inside the open reveal. */
  .our-philosophy__figure {
    display: block;
    border-radius: var(--radius-xl);
  }

  /* Description is static inside the collapsible reveal (the reveal animates,
     not the text); margin-bottom is the row's closing space and collapses with
     the reveal when closed. */
  .our-philosophy__pillar-body {
    height: auto;
    margin: 0 0 var(--space-md); /* before the divider */
    opacity: 1;
    overflow: visible;
    transition: none;
  }
}

/* ###########################################################################
   PARTNER MODEL — partner portrait + column rails
   ########################################################################### */

/* ==========================================================================
   Component — Partner Model
   --------------------------------------------------------------------------
   Dark-teal two-column band: a text column (eyebrow, headline, three value
   points, CTA) beside a large portrait. On desktop the portrait is absolutely
   positioned over the right half of the band and masked so it fades into the
   teal toward the centre; the text column floats above it. On tablet the
   portrait becomes a smaller framed inset feathered with a radial mask; on
   mobile the band stacks (text column over a full-width portrait).

   The decorative timeline marker beside each point is a small dot so the row
   rhythm matches; it carries no content and is hidden from assistive tech in
   the markup.
   ========================================================================== */

/* --- Block ---------------------------------------------------------------
   The band itself: a centred flex row that clips the bleeding portrait.
   ------------------------------------------------------------------------- */
.partner-model {
  position: relative; /* containing block for the absolutely-placed portrait */
  --rail-color: var(--color-border-dark); /* keep the column rails subtle on the dark band */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden; /* clip the portrait that bleeds past the right edge */
  background-color: var(--color-bg-deep);
}

/* Lift both rails above the portrait and content so the left (over
   the teal) and the right (over the portrait) render as the same crisp line. */
.partner-model::before,
.partner-model::after {
  z-index: var(--z-overlap);
}

/* --- Portrait ------------------------------------------------------------
   Desktop: fills the right half behind the text, masked so it dissolves into
   the teal toward the centre. The 54.0541% mask stop and the 60.7%/52.9%
   focal point are intrinsic to the image composition, not design tokens, so
   they stay as documented literals.
   ------------------------------------------------------------------------- */
.partner-model__media {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--z-base); /* sits behind the text column */
  width: 50%;
  height: 100%;
  margin: 0; /* <figure> default margin off; layout owns all spacing */
  overflow: hidden;
  /* Fade the image out toward the left so it melts into the band. */
  -webkit-mask: linear-gradient(270deg, #000 54.0541%, transparent 100%);
  mask: linear-gradient(270deg, #000 54.0541%, transparent 100%);
}

.partner-model__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60.7% 52.9%; /* focal point on the subject */
}

/* Brand gradient over the portrait so the image reads as part of the deep-teal
   band rather than a competing photo; heavier toward the text side. Inherits the
   media's left-fade mask. */
.partner-model__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--color-bg-deep) 40%, transparent) 0%,
    color-mix(in srgb, var(--color-bg-deep) 75%, transparent) 60%,
    var(--color-bg-deep) 100%
  );
}

/* --- Text column ---------------------------------------------------------
   Capped to the system container and raised above the portrait. Uses the
   canonical --container-max (1120px) so the band shares the site-wide content
   cap.
   ------------------------------------------------------------------------- */
.partner-model__content {
  position: relative;
  z-index: var(--z-raised); /* above the portrait */
  flex: 1 0 0; /* take the row's free space; the portrait is absolute */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3xl); /* desktop column rhythm */
  width: 100%;
  max-width: var(--container-max);
  padding: var(--space-6xl) var(--space-xl);
}

/* --- Header (eyebrow + headline) ----------------------------------------- */
.partner-model__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  padding-inline: var(--space-sm); /* header inset */
}

/* Eyebrow — serif lead role, recoloured sage to read on the dark band. */
.partner-model__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage); /* sage label on deep teal */
}

/* Headline — h1 type role rendered as an h2 (page already has its h1),
   in bright cream for maximum contrast on the teal. */
.partner-model__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* --- Value points --------------------------------------------------------
   A list of three titled statements with a 48px column gap between them.
   Capped to a 500px text measure.
   ------------------------------------------------------------------------- */
.partner-model__points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xl);
  width: 100%;
  max-width: 500px; /* value-point measure */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* One point: a marker beside a title+text body. */
.partner-model__point {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md); /* between marker and body */
  width: 100%;
  max-width: 390px; /* single-point width */
}

/* Decorative step marker — a timeline node reduced to a simple dot. Sized to
   align with the title's cap height. Purely presentational. */
.partner-model__marker {
  flex: 0 0 auto;
  width: var(--space-xs);
  height: var(--space-xs);
  margin-top: var(--space-3xs); /* nudge onto the title baseline */
  background-color: var(--color-accent);
  border-radius: var(--radius-circle);
}

/* Title + text stacked. */
.partner-model__point-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  min-width: 0; /* let long words wrap instead of overflowing the row */
}

/* Point title — value-prop serif role, bright cream on the dark band. */
.partner-model__point-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3-feature);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3-feature);
  letter-spacing: var(--letter-spacing-h3-feature);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* Point copy — body role, recoloured sage for legibility on teal. */
.partner-model__point-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-wrap: balance;
}

/* ==========================================================================
   Responsive
   House order: desktop is the base above; tablet then mobile override below.
   ========================================================================== */

/* Tablet (max 1199 / min 810): the portrait becomes a smaller framed inset
   feathered with a radial mask; the text column tightens its rhythm. */
@media (max-width: 1199px) and (min-width: 810px) {
  .partner-model__media {
    width: 450px;
    height: 100%;
    top: 2px;
    right: -72px; /* nudge the inset partly off the edge */
    /* Radial feather centred on the subject (intrinsic to the crop). */
    -webkit-mask: radial-gradient(44% 52.6087% at 55.2% 36.5%, #000 9.45946%, transparent 100%);
    mask: radial-gradient(44% 52.6087% at 55.2% 36.5%, #000 9.45946%, transparent 100%);
  }

  .partner-model__content {
    gap: var(--space-2xl);
    padding: var(--space-4xl) var(--space-xl);
  }
}

/* Mobile (max 809): stack the band — text column above a full-width portrait. */
@media (max-width: 809px) {
  .partner-model {
    flex-direction: column;
  }

  .partner-model__media {
    position: relative; /* return to flow, sit beneath the text */
    width: 100%;
    height: 316px; /* fixed media height on mobile */
    top: auto;
    right: auto;
    -webkit-mask: none;
    mask: none;
  }

  /* Mobile drops this near-black band directly under the light Our Philosophy
     section, with the full-width portrait at the band's top — so the photo
     clashes against the light seam. Fade the image top into the band so the
     seam reads as a clean dark edge the photo emerges from, and fade the bottom
     so it melts into the copy below. Sides stay full-bleed. */
  .partner-model__media::after {
    background:
      linear-gradient(to bottom, var(--color-bg-deep), transparent 30%),
      linear-gradient(to top, var(--color-bg-deep), transparent 20%);
  }

  .partner-model__content {
    flex: none;
    gap: var(--space-xl);
    /* inline keeps the text 24px clear of the 16px section rails (parity
       with the Our Philosophy band) rather than flush against them. */
    padding: var(--space-2xl) var(--space-xl);
  }

  .partner-model__header {
    padding-inline: 0; /* align the header with the points at the inset edge */
  }

  .partner-model__title {
    font-size: var(--font-size-h1-mobile);
  }

  .partner-model__point-title {
    font-size: var(--font-size-h3-feature-mobile);
    line-height: var(--line-height-h3-feature-mobile);
  }
}

/* ==========================================================================
   Reduced motion — the marker and CTA transitions are non-essential; the
   global prefers-reduced-motion rule in the BASE section already neutralises them.
   Reveal-on-scroll for [data-animate] is honoured globally as well.
   ========================================================================== */

/* ###########################################################################
   SECTORS DETAIL — the /sectors page: intro + a sticky-scroll sector list
   ########################################################################### */

/* ==========================================================================
   Component — Sectors Detail
   --------------------------------------------------------------------------
   The dedicated sectors page: a light intro band whose body is a sticky-scroll
   pairing — a scrolling list of the sectors (name, thesis, headline stat, an
   Explore link) beside a pinned image panel that crossfades to whichever sector
   the reader has scrolled to (the ScrollSync behaviour in js/app.js).
   ========================================================================== */
.sectors-detail {
  background-color: var(--color-surface-cream);
}

.sectors-detail__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.sectors-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 816px;
  padding-inline: var(--space-sm);
}

.sectors-detail__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

.sectors-detail__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

.sectors-detail__intro {
  margin-top: var(--space-xs);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Component — Sector Scroll  (scrolling list + pinned crossfading image)
   ========================================================================== */
.sector-scroll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
  width: 100%;
}

/* Left — the scrolling sector list; text inset from the left rail. */
.sector-scroll__list {
  display: flex;
  flex-direction: column;
  gap: 17vh; /* scroll distance each sector holds the panel before the next activates */
  padding-block: 6vh; /* runway so the first and last can reach the active line */
  padding-left: var(--space-md);
}

.sector-scroll__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  transition: opacity var(--duration-base) var(--easing-standard);
}

/* Dim the inactive sectors only once the scroll-sync behaviour is live, so the
   list stays fully legible with JavaScript disabled. */
.sector-scroll.is-synced .sector-scroll__item {
  opacity: 0.32;
}

.sector-scroll.is-synced .sector-scroll__item.is-active {
  opacity: 1;
}

/* Per-item image — shown inline only on mobile (no sticky panel there). */
.sector-scroll__inline {
  display: none;
}

.sector-scroll__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

.sector-scroll__thesis {
  max-width: 46ch;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sector-scroll__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-stone);
}

.sector-scroll__stat-value {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-ink);
}

.sector-scroll__stat-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-muted);
}

.sector-scroll__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-accent-deep);
  text-decoration: none;
}

/* Arrow with a ghost duplicate that slides in as the first slides out — the same
   glyph motion as the .button and the case-feature pager. */
.sector-scroll__glyphs {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.sector-scroll__arrow {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-slow) var(--easing-standard);
}

/* The ghost waits one step to the left; both slide right on hover. */
.sector-scroll__arrow--ghost {
  position: absolute;
  inset: 0 auto auto -100%;
}

.sector-scroll__link:hover .sector-scroll__arrow,
.sector-scroll__link:focus-visible .sector-scroll__arrow {
  transform: translateX(100%);
}

/* Right — the pinned image panel. Images stack in one cell and crossfade; it
   sits flush to the right rail, rounded to match the site's framed media. */
.sector-scroll__media {
  position: sticky;
  top: var(--space-7xl); /* clears the sticky site header */
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-bg-deep);
  border-radius: var(--radius-xl);
}

.sector-scroll__image {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--easing-standard);
}

.sector-scroll__image.is-active {
  opacity: 1;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighten the column gutter. */
@media (max-width: 1199px) and (min-width: 810px) {
  .sectors-detail__container {
    gap: var(--space-2xl);
  }

  .sector-scroll {
    gap: var(--space-2xl);
  }
}

/* Mobile (max 809): drop the sticky panel; each sector shows its own image
   inline above its text, stacked. */
@media (max-width: 809px) {
  .sectors-detail__container {
    gap: var(--space-2xl);
    padding-inline: var(--container-gutter);
  }

  .sectors-detail__header {
    padding-inline: var(--space-2xs);
  }

  .sectors-detail__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .sector-scroll {
    grid-template-columns: minmax(0, 1fr);
  }

  .sector-scroll__list {
    gap: var(--space-4xl);
    padding-block: 0;
    padding-left: 0;
  }

  .sector-scroll.is-synced .sector-scroll__item,
  .sector-scroll.is-synced .sector-scroll__item.is-active {
    opacity: 1; /* no dimming once stacked */
  }

  .sector-scroll__inline {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background-color: var(--color-surface-sand);
    border-radius: var(--radius-xl);
  }

  .sector-scroll__name {
    font-size: var(--font-size-h1-mobile);
  }

  /* Inset the text from the rails; the image alone stays flush to them. */
  .sector-scroll__name,
  .sector-scroll__thesis,
  .sector-scroll__stat,
  .sector-scroll__link {
    margin-inline: var(--space-sm);
  }

  /* The sticky desktop panel is not used on mobile. */
  .sector-scroll__media {
    display: none;
  }
}


/* ###########################################################################
   OUR PORTFOLIO — portfolio band layout
   ########################################################################### */

/* ==========================================================================
   Component — Our Portfolio (section)
   --------------------------------------------------------------------------
   The light, cream "Companies We Believed In Early." section: a centered
   header (serif eyebrow + h2 + intro lead) stacked above a two-column grid of
   four .portfolio-card blocks. This section owns ONLY the section shell, its
   header, and the grid that arranges the cards — the card's own visual styling
   lives in the PORTFOLIO CARD section below.

   BEM: block .our-portfolio with __container / __header / __eyebrow /
   __heading / __intro / __grid / __item. No modifiers needed (the section has
   a single variant).

   Tokens only — zero raw design literals. Every value traces to a token in
   the TOKENS section; the few intrinsic-to-layout numbers (the grid's minmax track
   floor) are documented inline.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   The .section primitive (the BASE section) supplies the vertical rhythm
   (100/72/48px block padding), so we only set the surface color and the
   horizontal edge here. Content is capped and centered by the .container
   primitive on __container.
   ------------------------------------------------------------------------- */
.our-portfolio {
  background-color: var(--color-surface-cream);
}

/* --- Content column ------------------------------------------------------
   Stacks the header above the card grid. The wrapper pads 40px at the
   horizontal edges (vs the 16px page gutter the .container primitive gives),
   so we widen the inline padding to --space-xl here and reset it to the gutter
   on mobile. Vertical gap between header and grid steps down per breakpoint.
   ------------------------------------------------------------------------- */
.our-portfolio__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl); /* header -> grid */
  max-width: 1200px; /* rail band cap — pads out to the content column so the grid meets the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides the page gutter) */
}

/* --- Header --------------------------------------------------------------
   Eyebrow -> headline -> intro, centered. The extra 16px inline padding is the
   header inset that keeps the copy off the section edge.
   ------------------------------------------------------------------------- */
.our-portfolio__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding-inline: var(--space-sm); /* header inset */
  text-align: center;
}

/* Serif eyebrow label ("Our Portfolio"). Uses the lead-serif type role in
   primary ink — it is a quiet section label, not a heading, so it stays a <p>. */
.our-portfolio__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

/* Section headline. Uses the h1 type role — rendered as an <h2> because it is
   the section title, not the page title. */
.our-portfolio__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

/* Intro / lead paragraph. */
.our-portfolio__intro {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-muted);
}

/* --- Card grid -----------------------------------------------------------
   The minmax floor (50px) is an intrinsic minimum track width, not a design
   token — it only stops the columns collapsing below a usable size, so it stays
   a literal.
   The card sizes its own height/padding; the grid only places the cells.
   ------------------------------------------------------------------------- */
.our-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr)); /* minimum track floor */
  gap: var(--space-sm);
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Each cell stretches its card to fill the column (cards are equal height).
   The card sets no width of its own, so the flex cell makes it fill the track
   on the main axis and match its sibling's height on the cross axis. */
.our-portfolio__item {
  display: flex;
}

.our-portfolio__item > .portfolio-card {
  flex: 1; /* card fills the grid cell */
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighter header->grid gap; grid stays 2-up.
   Horizontal edge padding (40px) is inherited from the desktop base. */
@media (max-width: 1199px) and (min-width: 810px) {
  .our-portfolio__container {
    gap: var(--space-2xl);
  }
}

/* Mobile (max 809): single-column grid; copy and edges pull in to the page
   gutter so nothing crowds the viewport edge. */
@media (max-width: 809px) {
  .our-portfolio__container {
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  .our-portfolio__header {
    padding-inline: var(--space-2xs); /* tighter inset */
  }

  .our-portfolio__grid {
    grid-template-columns: 1fr; /* stack cards one per row */
  }
}

/* ###########################################################################
   PORTFOLIO CARD — reusable portfolio company card
   ########################################################################### */

/* ==========================================================================
   Component — Portfolio Card
   --------------------------------------------------------------------------
   A full-bleed clickable card linking to a portfolio company's case study. A
   cover photo fills the card; a top-to-bottom dark-teal gradient keeps the
   bottom-pinned content legible; content = company name (eyebrow serif),
   description, and sector/stage tags. Hover grows the gradient upward and lifts
   the card slightly.

   Three breakpoints in the house order: desktop (base), tablet (max 1199 /
   min 810), mobile (max 809). The few intrinsic-to-the-effect literals
   (gradient stops, hover overlay geometry) are documented inline.
   ========================================================================== */

/* --- Block ---------------------------------------------------------------
   The card is an <a>: the whole surface is one link target. Content is pinned
   to the bottom edge over the cover image; the image + overlay sit behind it.
   ------------------------------------------------------------------------- */
.portfolio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pin content to the bottom of the card */
  align-items: center;
  min-height: 400px;
  padding: var(--space-md);
  overflow: clip; /* clip the cover image + growing overlay to the rounded box */
  border-radius: var(--radius-md);
  color: var(--color-surface-cream-bright); /* default ink for on-image text */
  text-decoration: none;
  background-color: var(--color-bg-deep); /* shows through before the image loads */
  isolation: isolate; /* create a stacking context so __image/__overlay/__content layer predictably */
  cursor: pointer;
}

/* Keep the whole card underline-free, including on hover — it's the affordance,
   and the global a:hover underline would otherwise strike through the body copy
   and the tags. */
.portfolio-card:hover {
  text-decoration: none;
}

/* --- Cover image ---------------------------------------------------------
   Absolutely fills the card behind everything; object-fit:cover crops to box.
   Carries the branded duotone — partially desaturated here, teal-washed by
   .portfolio-card::after — and reveals its natural colour with a gentle zoom
   on hover/focus, matching the team portraits.
   ------------------------------------------------------------------------- */
.portfolio-card__image {
  position: absolute;
  inset: 0;
  z-index: var(--z-base); /* bottom layer */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  filter: grayscale(0.4) contrast(1.03);
  transition:
    filter var(--duration-slow) var(--easing-standard),
    transform var(--duration-slow) var(--easing-standard);
}

/* Teal brand wash over the cover image so the cards read cohesively at rest;
   fades on hover to reveal the natural photo. Sits above the image + legibility
   overlay (same z, later in paint order), below the content. */
.portfolio-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    var(--color-accent-sand) 0%,
    var(--color-text-muted) 50%,
    var(--color-accent-deep) 100%
  );
  mix-blend-mode: soft-light;
  opacity: 0.65;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--easing-standard);
}

/* --- Gradient overlay ----------------------------------------------------
   Darkens the lower portion so bottom-pinned text stays legible. Sits above
   the image, below the content. A static 404px-tall gradient centred on the
   card; the gradient stop %s (15% / 79%) are intrinsic to the effect, not
   design tokens, so they stay as documented literals.
   ------------------------------------------------------------------------- */
.portfolio-card__overlay {
  position: absolute;
  top: calc(50% - 202px); /* centre the 404px overlay (404 / 2 = 202) */
  left: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 404px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--color-bg-deep-rgb) / 0.2) 15%,
    var(--color-bg-deep) 79%
  );
}

/* Hover/focus reveals the cover photo: the teal duotone wash fades and the
   image warms to its natural colour with a gentle zoom (matching the team
   portraits). The card keeps its subtle lift above. */
.portfolio-card:hover .portfolio-card__image,
.portfolio-card:focus-visible .portfolio-card__image {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

.portfolio-card:hover::after,
.portfolio-card:focus-visible::after {
  opacity: 0;
}

/* Keep the colour reveal but drop the zoom for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .portfolio-card:hover .portfolio-card__image,
  .portfolio-card:focus-visible .portfolio-card__image {
    transform: none;
  }
}

/* --- Content stack -------------------------------------------------------
   Title -> description+tags -> CTA, raised above image/overlay.
   ------------------------------------------------------------------------- */
.portfolio-card__content {
  position: relative;
  z-index: var(--z-raised); /* above image + overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
}

/* Company name. Uses the eyebrow type role (serif), recolored to cream
   because it sits on the dark image rather than a light surface. */
.portfolio-card__title {
  width: 100%;
  font-family: var(--font-family-display);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-surface-cream-bright);
}

/* Description + tags share a vertical column with consistent rhythm. */
.portfolio-card__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}

/* Body copy, recolored to sage for legibility on the dark image. */
.portfolio-card__description {
  max-width: 604px; /* line-length cap for the blurb */
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-wrap: balance;
}

/* Tag row — wraps when chips run out of horizontal room. */
.portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Sector / stage chip — small label on a deep-teal fill with a hairline border. */
.portfolio-card__tag {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-accent);
  background-color: var(--color-bg-deep);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Responsive
   Order matches the house rule: desktop is the base above; tablet then mobile
   override below. The card's GRID lives in the section that hosts it
   (portfolio-grid): 2 columns on desktop/tablet, 1 column on mobile. Here we
   only adjust the card's own intrinsic sizing per breakpoint.
   ========================================================================== */

/* Tablet (max 1199 / min 810): card fills its grid cell; the narrower
   variant's padding + reduced min-height take effect. */
@media (max-width: 1199px) and (min-width: 810px) {
  .portfolio-card {
    min-height: 360px;
    padding: var(--space-md) var(--space-sm);
  }
}

/* Mobile (max 809): single-column, full-width card. */
@media (max-width: 809px) {
  .portfolio-card {
    min-height: 360px;
    padding: var(--space-md) var(--space-sm);
  }

  .portfolio-card__title {
    font-size: var(--font-size-eyebrow-mobile);
  }
}

/* ###########################################################################
   WHY US — metrics grid + dotted globe panel
   ########################################################################### */

/* ==========================================================================
   Component — Why Us
   --------------------------------------------------------------------------
   Metrics / credibility band on the sand surface. A centred header sits over a
   two-column composition: a LIGHT (cream) metrics column and a DARK (deep-teal)
   footprint panel.

     - Light column: three credibility cards laid out in two split rows plus a
       partner-logo strip. Row 1 = Fund Size figure | handshake photo. Row 2 =
       Net IRR figure + three-year bar chart | "Built For Alignment" statement.
       Strip = "Brands We've Partnered With" label | row of partner logos.
       Hairline stone dividers separate the rows.
     - Dark panel: a dotted globe scattered with six circular team portraits,
       then the "Portfolio Footprint" statement and a Companies / Countries
       counter pair split by an accent-muted hairline.

   Real BEM, single-class selectors, tokens for every design value, three
   breakpoints in the house order (desktop base -> tablet -> mobile).

   Behaviour: the decorative dotted globe and the partner-logo strip carry no
   content; the dark panel's globe is animated by the Globe behaviour in app.js.
   ========================================================================== */

/* --- Block ---------------------------------------------------------------
   The band: a centred flex row on the sand surface that clips its content.
   ------------------------------------------------------------------------- */
.why-us {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-surface-sand);
}

/* Centred content column. The frame folds to the canonical --container-max
   (1120px) so the band shares the site content cap. */
.why-us__container {
  flex: 1 0 0; /* take the row's free space up to the cap */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl); /* desktop section rhythm */
  width: 100%;
  max-width: 1200px; /* rail band cap — pads out to the content column so the grid meets the rails */
  padding: var(--space-6xl) var(--space-xl);
}

/* --- Header (eyebrow + title) -------------------------------------------- */
.why-us__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding-inline: var(--space-sm); /* header inset */
  text-align: center;
}

/* Eyebrow — serif lead role, in brand ink ("Why Us" uses the lead-serif role,
   not the teal eyebrow role). */
.why-us__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

/* Section title — h1 type role rendered as an h2 (the page already has its h1). */
.why-us__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
  text-wrap: balance;
}

/* --- Grid (light column + dark panel) -----------------------------------
   Two columns sharing the band; the light column grows, the dark panel takes
   a fixed share. No gap — the columns meet edge to edge.
   ------------------------------------------------------------------------- */
.why-us__grid {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* both columns share the row height */
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Light metrics column
   ========================================================================== */
.why-us__metrics {
  flex: 1 0 0; /* grow to fill the space the dark panel leaves */
  min-width: 0; /* don't let the logo marquee's width stretch the column */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--color-surface-cream);
  border-top: 1px solid var(--color-border-stone); /* grid: top edge of the metrics column */
}

/* A split row: a wider text/stat card beside a media or statement card. Each
   row is fixed to 265px tall on desktop and grows on mobile. A full-width stone
   hairline under each row draws the grid's horizontal dividers (the column's
   top edge + this bottom edge frame every row). */
.why-us__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* two even, content-independent 50% cells */
  align-items: center;
  height: 265px; /* split-row height */
  border-bottom: 1px solid var(--color-border-stone); /* grid: row divider */
}

/* --- Cards within a row --------------------------------------------------
   Cards grow equally; stone hairlines separate them. Each card carries
   32px/24px padding by default; variants tune it below.
   ------------------------------------------------------------------------- */
.why-us__card {
  flex: 1 0 0;
  min-width: 0; /* shrink to an even 50% instead of stretching to fit content */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg) var(--space-md);
  overflow: hidden;
}

/* Text card (Fund Size): the left cell of its row — a 1px stone divider on its
   right edge is the grid's vertical divider (the row hairlines close it above
   and below). */
.why-us__card--text {
  justify-content: center;
  align-items: flex-start;
  border-right: 1px solid var(--color-border-stone); /* grid: column divider */
}

/* Chart card (Net IRR + bars): the left cell of its row — same vertical divider
   on the right; content top-aligned. */
.why-us__card--chart {
  justify-content: space-between;
  align-items: flex-start;
  padding-block: var(--space-sm) 0; /* no bottom pad: bars meet the grid divider */
  border-right: 1px solid var(--color-border-stone); /* grid: column divider */
}

/* Alignment statement card: centred, vertical rhythm of 16px. */
.why-us__card--alignment {
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* --- Stat figure (the big number) ---------------------------------------
   A <figure>: the figure number stacked over its caption label. The number
   row baselines its prefix/value/unit.
   ------------------------------------------------------------------------- */
.why-us__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs); /* stat stack gap */
}

/* Centred stat inside the dark counter cells. */
.why-us__stat--counter {
  align-items: center;
  gap: var(--space-3xs); /* counter stat stack gap */
  text-align: center;
}

/* The figure number. Inter, recoloured ink on light surfaces; baseline-aligned
   prefix/value/unit so "$0M" and "0% Net IRR" read as one number. */
.why-us__figure {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-h2-mobile);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h2);
  letter-spacing: 0;
  color: var(--color-text-ink); /* ink on the light column */
}

/* Counter figures sit on the dark panel — recolour to bright cream. */
.why-us__figure--counter {
  color: var(--color-surface-cream-bright);
}

/* The figure value renders at the full figure size (inherited). */
.why-us__figure-value {
  font-size: inherit;
}

/* The trailing unit ("M", "% Net IRR") steps down to 1.25rem. */
.why-us__figure-unit {
  font-size: var(--font-size-h3-feature);
}

/* Stat caption — small role, muted ink. */
.why-us__stat-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-muted);
}

/* Note below the Fund Size figure — body role, muted. */
.why-us__stat-note {
  margin-top: var(--space-2xs); /* separates the note from the stat block */
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

/* --- Media card (handshake photo) ----------------------------------------
   The image fills its whole grid cell (no inset), cropped to cover. It's
   positioned absolutely so its intrinsic size never feeds into the flex sizing —
   the cell stays an even 50% like the others. */
.why-us__media {
  position: relative;
  flex: 1 0 0;
  min-width: 0; /* keep the photo cell at an even 50% */
  height: 100%;
  overflow: hidden;
}

.why-us__media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Bar chart -----------------------------------------------------------
   Three bars aligned to a shared baseline, sized by value. Bar heights
   (79 / 142 / 211px) are intrinsic to the data shape, not design tokens, so
   they stay as documented literals. The latest year is the highlighted lead bar.
   ------------------------------------------------------------------------- */
.why-us__chart {
  display: flex;
  flex-direction: row;
  align-items: flex-end; /* bars grow up from a shared baseline */
  justify-content: center;
  gap: var(--space-sm);
  width: 100%; /* lets the bars shrink to fit a narrow cell */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* One bar column: the value caps the fill from outside; the year rides inside
   the fill near its base, and the fill's bottom meets the row's grid divider. */
.why-us__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 80px; /* wide, shrinking to fit a narrow cell */
  min-width: 0;
  gap: var(--space-3xs); /* value sits just above the fill */
}

/* The coloured column, sized by value; grey by default, gold for the lead.
   The year is pinned to the bottom inside it. */
.why-us__bar-fill {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-bottom: var(--space-2xs); /* lift the year off the divider a touch */
  background-color: var(--color-surface-sand);
}

/* Per-year fill heights (intrinsic to the chart values), sized to fit the row. */
.why-us__bar--y1 .why-us__bar-fill { height: 60px; }
.why-us__bar--y2 .why-us__bar-fill { height: 92px; }
.why-us__bar--y3 .why-us__bar-fill {
  height: 130px;
  background-color: var(--color-accent); /* champagne gold lead */
}

/* Bar value ("~90 GW") — body role, ink, capping the fill from above. */
.why-us__bar-value {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-ink);
  white-space: nowrap; /* keep the value on one line in the narrow column */
}

/* Bar year ("2024") — small role, ink, inside the fill near its base. */
.why-us__bar-year {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-ink);
  white-space: nowrap;
}

/* --- Alignment statement card text --------------------------------------- */
.why-us__alignment-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3-feature);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3-feature);
  letter-spacing: var(--letter-spacing-h3-feature);
  color: var(--color-text-ink);
  text-wrap: balance;
}

.why-us__alignment-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* --- Partner strip -------------------------------------------------------
   A label cell beside a row of partner logos. A 1px stone hairline closes the
   strip below (the row above supplies the line on top); the strip is 90px tall.
   ------------------------------------------------------------------------- */
.why-us__partners {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 90px; /* partner-strip height */
  border-bottom: 1px solid var(--color-border-stone); /* the row above draws this cell's top hairline */
  overflow: hidden;
}

/* Label cell — small role, capped width, 1px stone divider on the right. */
.why-us__partners-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  max-width: 150px; /* label cell width */
  height: 100%;
  padding: var(--space-2xs) var(--space-sm); /* (10px folds to 8px) */
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border-stone);
}

/* Logo marquee viewport — clips the scrolling track to the strip. */
.why-us__partner-logos {
  flex: 1 0 0;
  min-width: 0; /* don't let the wide track stretch the strip */
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-md); /* breathing room at the strip edges */
  border-radius: var(--radius-xl); /* logo-strip frame radius */
  overflow: hidden; /* clip the off-screen logos */
}

/* The track holds ten logo cells twice and scrolls left forever; a -50%
   translate lands exactly on the duplicate set, so the loop is seamless. */
.why-us__partner-track {
  flex: 0 0 auto; /* stay max-content wide; don't shrink to the viewport */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  will-change: transform; /* promote to its own layer so the loop doesn't flash */
  animation: why-us-logos 30s linear infinite;
}

/* Each logo carries its own trailing gap (not a flex gap) so the spacing stays
   even across the loop wrap. */
.why-us__partner-logo {
  flex: 0 0 auto;
  margin-inline-end: 45px; /* off-scale logo-strip gap */
}

@keyframes why-us-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reduced motion: hold the strip still on the first (real) set. */
@media (prefers-reduced-motion: reduce) {
  .why-us__partner-track {
    animation: none;
  }
}

/* Logos render at a uniform 32px height; the intrinsic aspect ratio sets the
   width (~64px at 32px tall). */
.why-us__partner-image {
  width: auto;
  height: 32px;
}

/* ==========================================================================
   Dark footprint panel
   ========================================================================== */
.why-us__footprint {
  position: relative;
  isolation: isolate; /* self-contained stacking for the layered globe + content */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 35%; /* dark-panel share */
  background-color: var(--color-surface-dark);
  overflow: hidden;
}

/* --- Interactive dotted-Earth globe --------------------------------------
   The globe behaviour fills this frame with a WebGL canvas (the dot sphere
   and its geodesic web) and an HTML overlay carrying the location markers;
   their look is part of the behaviour. The glow span below is the decorative
   backdrop and the no-JS/no-WebGL fallback.
   ------------------------------------------------------------------------- */
/* Overflow stays visible: the canvas fills the frame exactly, and the HTML
   marker card must be free to extend past the frame edge instead of clipping. */
.why-us__globe {
  position: relative;
  flex: 1 0 0;
  align-self: stretch;
  width: 100%;
}

/* Decorative globe backdrop — a soft radial wash hinting at the sphere, and
   the fallback when the 3D globe can't load. */
.why-us__globe-map {
  position: absolute;
  inset: 0;
  z-index: var(--z-base); /* behind the canvas */
  /* Subtle centred glow hinting at the globe surface (intrinsic decoration). */
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--color-surface-dark-muted) 0%,
    var(--color-surface-dark) 70%
  );
}

/* The three.js globe canvas, layered over the glow backdrop. It is the drag
   surface for the globe's orbit controls, so it keeps pointer events; the
   marker overlay sits above it later in the DOM. Absent without JS/WebGL,
   leaving the glow above as the backdrop. */
.why-us__globe-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-base); /* above the glow (later in the DOM) */
  width: 100%;
  height: 100%;
}

/* --- Footprint copy + counters ------------------------------------------- */
.why-us__footprint-content {
  z-index: var(--z-raised); /* above the globe */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl); /* footprint stack gap */
  width: 100%;
}

.why-us__footprint-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding-inline: var(--space-sm); /* footprint header inset */
  text-align: center;
}

/* Footprint title — h3 serif role, bright cream on the dark panel. */
.why-us__footprint-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* Footprint copy — body role, sage on teal for legibility. */
.why-us__footprint-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-wrap: balance;
}

/* Counter pair — Companies | Countries, split by a 1px accent-muted hairline
   top and bottom across a 90px counter row. */
.why-us__counters {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 90px; /* counter-row height */
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--color-accent-muted);
  border-bottom: 1px solid var(--color-accent-muted);
}

.why-us__counter {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xs);
}

/* The first counter carries the 1px accent-muted divider on its right. */
.why-us__counter--bordered {
  border-right: 1px solid var(--color-accent-muted);
}

/* Counter caption — small role, sage on teal. */
.why-us__counter-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-border-sage);
}

/* ==========================================================================
   Responsive
   House order: desktop is the base above; tablet then mobile override below.
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighten the wrapper rhythm; the dark panel
   widens to its tablet share. The split rows stay two-column. */
@media (max-width: 1199px) and (min-width: 810px) {
  .why-us__container {
    gap: var(--space-2xl);
    padding: var(--space-4xl) var(--space-xl);
  }

  .why-us__footprint {
    width: 40%; /* tablet dark-panel share */
  }

  /* The Net IRR card tightens its inline padding on tablet. */
  .why-us__card--chart {
    padding-inline: var(--space-sm);
  }

  /* Partner label cell narrows. */
  .why-us__partners-label {
    max-width: 135px;
    padding-inline: var(--space-xs); /* folds to 12px */
  }
}

/* Mobile (max 809): the band stacks — light metrics column over the dark
   footprint panel; the split rows themselves stack within the column. */
@media (max-width: 809px) {
  .why-us__container {
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-sm);
  }

  .why-us__header {
    padding-inline: var(--space-2xs); /* tighter inset on mobile */
  }

  /* Grid + columns stack. */
  .why-us__grid {
    flex-direction: column;
  }

  .why-us__metrics {
    flex: none;
    width: 100%;
  }

  .why-us__footprint {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-xl); /* globe -> copy on mobile */
    padding-top: var(--space-xl); /* breathing above the globe; counters stay flush to the panel bottom */
  }

  /* Split rows become single-column; cards take full width and shed the
     vertical dividers that only made sense side by side. */
  .why-us__row {
    grid-template-columns: 1fr; /* stack to a single column */
    height: auto;
  }

  .why-us__card {
    width: 100%;
    height: auto;
  }

  .why-us__card--text {
    padding: var(--space-md) var(--space-sm);
    border-bottom: 0; /* the next card supplies the divider */
  }

  .why-us__card--chart {
    align-items: flex-start; /* Net IRR figure + caption stay left-aligned */
    gap: var(--space-3xs); /* (the chart's own top padding adds the rest) */
    padding: var(--space-md) var(--space-sm) 0;
    border-right: 0; /* no side neighbour to divide from */
  }

  /* The bar chart returns to flow (it was bottom-pinned in the desktop row).
     Top padding only, so the bars sit flush on the card's bottom grid line
     instead of floating above it. */
  .why-us__chart {
    padding: var(--space-md) 0 0; /* top only */
  }

  /* Alignment card gains a stone top divider as the stacking separator, and
     the mobile padding. */
  .why-us__card--alignment {
    padding: var(--space-3xl) var(--space-2xs);
    border-top: 1px solid var(--color-border-stone);
  }

  /* Handshake media takes a fixed mobile height, still filling its block. */
  .why-us__media {
    width: 100%;
    height: 200px;
  }

  /* Footprint copy tightens to the mobile rhythm + globe padding. */
  .why-us__footprint-content {
    gap: var(--space-sm);
  }

  /* The globe frame has only absolutely-positioned children (glow, canvas,
     marker overlay), so it has no intrinsic height — height:min-content
     collapsed it to a sliver. Give it an explicit square frame, centred and
     capped, so the globe behaviour sizes the canvas to a real box. */
  .why-us__globe {
    flex: none;
    align-self: center;
    width: min(100%, 320px);
    aspect-ratio: 1; /* square globe frame */
  }
}

/* ###########################################################################
   FOUNDER — Brad Cheedle: portrait beside the firm's founding profile
   ########################################################################### */

/* ==========================================================================
   Component — Founder (section)
   --------------------------------------------------------------------------
   A dark band introducing the firm's founder: a centred header above a
   two-column profile — a duotone portrait beside his name, operating record,
   and an off-the-clock personal note. Mirrors the framing of the homepage's
   other dark bands.
   ========================================================================== */
.founder {
  --rail-color: var(--color-border-dark); /* subtle rails on the dark fill */
  background-color: var(--color-bg-deep);
}

.founder__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  max-width: 1200px;
  padding-inline: var(--space-xl);
}

.founder__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding-inline: var(--space-sm);
}

/* Serif eyebrow label — lead-serif role, sage to read on the dark fill. */
.founder__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage);
}

/* Section heading — h1 type role rendered as <h2>, bright cream on the dark fill. */
.founder__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* --- Profile: the portrait column beside the biography column. --- */
.founder__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2xl);
  align-items: center;
  width: 100%;
}

.founder__frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-surface-dark); /* placeholder while the photo loads */
  border-radius: var(--radius-md);
}

.founder__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.4) contrast(1.03);
  transition:
    filter var(--duration-slow) var(--easing-standard),
    transform var(--duration-slow) var(--easing-standard);
}

/* Branded duotone — the portrait is gently desaturated, then a subtle brand
   gradient is laid over it via blend, so the photo sits cohesively on the
   band. The grayscale/opacity are the dials: raise them to unify harder,
   lower for subtler. */
.founder__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    var(--color-accent-sand) 0%,
    var(--color-text-muted) 50%,
    var(--color-accent-deep) 100%
  );
  mix-blend-mode: soft-light;
  opacity: 0.65;
  transition: opacity var(--duration-slow) var(--easing-standard);
  pointer-events: none;
}

/* Hovering the portrait reveals the true photo: the duotone overlay fades,
   the image warms back to its natural colours, and a gentle zoom brings the
   portrait to life. */
.founder__frame:hover .founder__photo {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

.founder__frame:hover::after {
  opacity: 0;
}

/* Keep the colour reveal but drop the zoom for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .founder__frame:hover .founder__photo {
    transform: none;
  }
}

/* --- Biography column: identity row, record prose, off-the-clock note. --- */
.founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Name + role with the LinkedIn link grouped right beside them, so the icon
   reads as part of the identity instead of floating across the column. */
.founder__identity {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.founder__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.founder__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-surface-cream-bright);
}

.founder__role {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage);
}

.founder__prose {
  display: flex;
  flex-direction: column;
  gap: var(--paragraph-spacing);
}

/* Record copy — body role, recoloured sage for legibility on the dark fill. */
.founder__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
}

/* Off-the-clock note — a personal line that humanises the profile while
   keeping the band's reserved voice. */
.founder__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.founder__aside-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-border-sage);
}

.founder__traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

.founder__trait {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-surface-cream-bright);
}

/* Gold diamond marker — the site's single accent, flagging each trait. */
.founder__trait::before {
  content: "";
  width: 6px; /* marker size, intrinsic to the glyph */
  height: 6px;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

/* LinkedIn icon link — a dark raised disc that fills sage on hover (the
   footer's social-disc treatment, reused on this dark band). */
.founder__linkedin {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-surface-cream-bright);
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-dark-muted);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}

.founder__linkedin:hover,
.founder__linkedin:focus-visible {
  color: var(--color-text-ink);
  background-color: var(--color-border-sage);
  border-color: var(--color-border-sage);
}

.founder__linkedin-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): the profile keeps two columns, tighter gaps. */
@media (max-width: 1199px) and (min-width: 810px) {
  .founder__container {
    gap: var(--space-2xl);
  }

  .founder__layout {
    gap: var(--space-xl);
  }
}

/* Mobile (max 809): single column; the portrait bleeds to the gutter rails
   while the text stays inset. */
@media (max-width: 809px) {
  .founder__container {
    gap: var(--space-xl);
    padding-inline: var(--container-gutter);
  }

  .founder__header {
    padding-inline: var(--space-2xs);
  }

  .founder__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .founder__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .founder__frame {
    aspect-ratio: 4 / 5;
  }

  .founder__body {
    gap: var(--space-md);
    padding-inline: var(--space-2xs);
  }

  .founder__name {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-h3);
  }

  .founder__role {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: normal;
  }
}


/* ###########################################################################
   INVESTMENT — investment band + partner-logo marquee
   ########################################################################### */

/* ==========================================================================
   Component — Investment
   --------------------------------------------------------------------------
   Track-record band: a scrolling partner-logo marquee beside a four-stat
   performance row, on the cream surface. One BEM block, single-class selectors,
   tokens only, three breakpoints in the house order.

   Layout:
     - The section is a centred flex band; its wrapper caps at the wider 1200px
       and lays the two columns out in a row on desktop.
     - DESKTOP: a fixed 448x620 VERTICAL logo marquee beside a content column
       (eyebrow + heading + 2x2 stat grid).
     - TABLET / MOBILE: the wrapper stacks (marquee over content) and the
       marquee flips to a HORIZONTAL strip; the stat grid stays 2x2 on tablet
       and collapses to a single column on mobile.

   The marquee scroll is a local CSS animation (keyframes at the foot of this
   file): the track translates -50% along its axis, landing on the duplicate
   logo set for a seamless loop. This band sets the axis-per-breakpoint and pace,
   the edge mask, and honours reduced-motion.
   ========================================================================== */

/* --- Block ---------------------------------------------------------------
   Full-bleed cream band. The wrapper inside it is the real layout owner; the
   section just centres it and clips the marquee's overflow at the edges.
   ------------------------------------------------------------------------- */
.investment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--color-surface-cream);
  overflow: hidden; /* the marquee runs full-bleed; clip it to the band */
}

/* The two-column layout owner: marquee column + content column. Caps at
   1200px (this band runs wider than the 1120px --container-max used elsewhere)
   and carries the section's vertical rhythm as its own padding. */
.investment__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2xl);
  width: 100%;
  max-width: 1200px; /* band cap (wider than --container-max) */
  padding: var(--space-6xl) var(--space-xl);
}

/* ==========================================================================
   Marquee — scrolling partner-logo strip
   The track (below) carries the scroll animation; this block sizes the viewport,
   masks its edges, and (further below) flips the scroll axis per breakpoint. The
   track holds ten logo cards twice, so a -50% translate lands on an identical
   frame for a seamless loop.
   ========================================================================== */

/* Desktop: a fixed-size vertical viewport beside the copy. The mask fades the
   logos in/out at the top and bottom edges rather than hard-clipping them. */
.investment__marquee {
  flex: 0 0 auto;
  width: 448px;  /* desktop marquee box */
  height: 620px;
  overflow: clip;
  /* Edge fade — opaque between 12.6% and 87.4%, transparent at the ends
     (mask stops: 12.612% / 87.387%). Intrinsic to the effect. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12.6%,
    #000 87.4%,
    transparent 100%
  );
}

/* The animated track. Lays the logo cards out along the scroll axis (a column
   on desktop) and scrolls them upward forever; the media queries below re-aim
   the scroll along X for the horizontal strip. */
.investment__track {
  --marquee-duration: 40s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2xs); /* 10px ticker gap folds to nearest token */
  /* Fill the marquee width so the logo cards span the desktop column; the
     horizontal media queries override this with max-content. */
  width: 100% !important;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: marquee-scroll-y var(--marquee-duration, 40s) linear infinite;
}

/* Logo card — each brand sits on a sand tile at the 1.64667:1 box. */
.investment__logo {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1.64667 / 1; /* logo-card ratio */
  overflow: clip;
  background-color: var(--color-surface-sand);
}

/* The logo image itself. A fixed height lets the logo keep its natural width
   from its intrinsic dimensions. width:auto overrides the global img sizing. */
.investment__logo-image {
  width: auto;
  height: 32px; /* logo height (desktop) */
  object-fit: contain;
}

/* ==========================================================================
   Content — eyebrow, heading, four-stat grid
   ========================================================================== */

.investment__content {
  display: flex;
  flex: 1 0 0; /* take the remaining row width beside the fixed marquee */
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-3xl);
}

/* Header stack — eyebrow label above the section heading. */
.investment__header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}

/* Eyebrow label. Uses the serif lead role, recoloured to the deep accent
   used for section labels. */
.investment__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-accent-deep);
}

/* Section heading — the h1 type role, serif, ink. */
.investment__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

/* Four-stat grid — a 2x2 matrix whose cells share hairline dividers instead of
   a gap (zero-gap grid with per-cell borders). The collapsed-border trick:
   negative offsets would clip; instead each cell draws a top + left hairline
   and the grid hides the outermost edges below. */
.investment__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-template-rows: repeat(2, min-content);
  justify-content: center;
  gap: 0; /* cells abut; dividers come from the cell borders */
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Stat cell. Draws a hairline on its top and left edges; the grid's first row
   and first column suppress the outer edges so only the interior cross shows
   (the left/right dividers between cards). */
.investment__stat {
  padding: var(--space-xs);
  border-top: 1px solid var(--color-border-stone);
  border-left: 1px solid var(--color-border-stone);
}

/* Suppress the outer frame: no top border on the first row, no left border on
   the first column — leaving only the inner vertical + horizontal dividers. */
.investment__stat:nth-child(-n + 2) {
  border-top: 0;
}

.investment__stat:nth-child(odd) {
  border-left: 0;
}

/* Stat figure — the big value over its description. */
.investment__stat-figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  text-wrap: balance;
}

/* The headline figure ("$2.4B"). Sans h2 role, ink. */
.investment__stat-value {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-ink);
}

/* The supporting description. Body role, muted grey. */
.investment__stat-label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Responsive
   Desktop is the base above. Tablet then mobile override below: the wrapper
   stacks (marquee over content) and the marquee flips from a vertical column
   to a horizontal strip.
   ========================================================================== */

/* --- Tablet (max 1199 / min 810) ----------------------------------------- */
@media (max-width: 1199px) and (min-width: 810px) {
  /* Stack the columns and tighten the gap; keep the 40px side padding. */
  .investment__wrapper {
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-4xl) var(--space-xl);
  }

  /* Content spans the full width once stacked; its rhythm relaxes to 48px. */
  .investment__content {
    flex: 0 0 auto;
    gap: var(--space-2xl);
    width: 100%;
  }

  .investment__header {
    padding-inline: var(--space-sm);
  }

  /* The marquee becomes a full-width horizontal strip; the edge mask now fades
     the left/right ends instead of top/bottom. */
  .investment__marquee {
    width: 100%;
    height: auto;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 12.6%,
      #000 87.4%,
      transparent 100%
    );
  }

  /* Flip the track to a horizontal row and re-aim the scroll along X, overriding
     the desktop Y animation. The marquee-scroll-x keyframes are defined at the
     foot of this file. */
  .investment__track {
    flex-direction: row;
    width: max-content !important; /* row grows to fit the duplicated logos */
    height: auto !important;
    animation: marquee-scroll-x var(--marquee-duration, 40s) linear infinite;
  }

  /* On the horizontal strip each card is height-driven (a fixed tile height)
     and sizes its own width to the logo plus inline padding — the aspect-ratio
     that shapes the desktop column no longer applies. */
  .investment__logo {
    width: auto;
    height: var(--space-6xl); /* logo tile height on the strip */
    aspect-ratio: auto;
    padding-inline: var(--space-md); /* breathing room around each logo */
  }
}

/* --- Mobile (max 809) ----------------------------------------------------- */
@media (max-width: 809px) {
  /* Stack, tighten, and step the side padding down to the page gutter. */
  .investment__wrapper {
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-sm);
  }

  /* Content sits below the marquee (order:1) and spans full width. */
  .investment__content {
    flex: none;
    order: 1;
    gap: var(--space-lg);
    width: 100%;
  }

  .investment__header {
    padding-inline: var(--space-2xs);
  }

  /* Horizontal strip, same as tablet. */
  .investment__marquee {
    width: 100%;
    height: auto;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 12.6%,
      #000 87.4%,
      transparent 100%
    );
  }

  .investment__track {
    flex-direction: row;
    width: max-content !important; /* row grows to fit the duplicated logos */
    height: auto !important;
    animation: marquee-scroll-x var(--marquee-duration, 40s) linear infinite;
  }

  .investment__logo {
    width: auto;
    height: var(--space-6xl); /* logo tile height on the strip */
    aspect-ratio: auto;
    padding-inline: var(--space-md);
  }

  /* The 2x2 grid collapses to a single-column stack; dividers become a single
     hairline above every cell after the first. */
  .investment__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .investment__stat {
    width: 100%;
    border-left: 0; /* no vertical divider in a single column */
  }

  /* Re-enable the top hairline on every cell except the first (flex order
     resets the :nth-child(-n+2) rule that suppressed the desktop first row). */
  .investment__stat:first-child {
    border-top: 0;
  }

  .investment__stat:nth-child(-n + 2) {
    border-top: 1px solid var(--color-border-stone);
  }

  /* The figure grows on mobile (h2 is the one role that scales up on mobile). */
  .investment__stat-value {
    font-size: var(--font-size-h2-mobile);
  }
}

/* ==========================================================================
   Marquee keyframes + reduced motion
   The track holds the logos twice; translating it -50% along the active axis
   lands on the duplicate set, so the loop is seamless. Desktop scrolls on Y;
   the horizontal strip (tablet/mobile) scrolls on X.
   ========================================================================== */
@keyframes marquee-scroll-y {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes marquee-scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reduced motion: hold the strip still on the first (real) logo set. Placed
   after the breakpoint rules so it wins at every width. */
@media (prefers-reduced-motion: reduce) {
  .investment__track {
    animation: none;
  }
}

/* ###########################################################################
   FINAL CTA — closing call-to-action band
   ########################################################################### */

/* ==========================================================================
   Component — Final CTA
   --------------------------------------------------------------------------
   The closing call-to-action band that ends the homepage. A light band
   frames a single dark panel ("card") of centered copy + one primary CTA:

     - The band fills the page width on its light surface and centers an inner
       column. A full-bleed hairline strip caps the band's top edge, and two
       vertical rails trace a ledger-margin frame just inside that column.
     - The card is a dark rounded panel holding its centered heading,
       supporting line, and "Get In Touch" button.

   Tokens only: every color/size/space/radius/shadow traces to the TOKENS section.
   The few exceptions are intrinsic-to-the-effect literals (the 1px hairlines,
   the rail/ledger offsets, the icon-disc + glyph boxes, the dot marker size),
   documented inline. No tablet variant: tablet renders the desktop band.
   ========================================================================== */

/* --- Block ----------------------------------------------------------------
   Full-bleed light band, and the positioning anchor for the full-bleed top
   ledger strip. Flex centers the inner column; the band carries the section's
   vertical rhythm through the inner column's padding (so the rails, which anchor
   to that column, line up with the real edges).
   -------------------------------------------------------------------------- */
.final-cta {
  position: relative; /* anchor for the full-bleed top ledger strip */
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--color-surface-cream);
}

/* --- Inner column ---------------------------------------------------------
   Centered max-width column that holds the card and anchors the decorative
   frame. Padding is the band's real inset (the rails sit on its gutter edges).
   -------------------------------------------------------------------------- */
.final-cta__inner {
  position: relative; /* anchor for the absolutely-placed ledger + rails */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* band cap (wider than the 1120px container) */
  padding: var(--space-5xl) var(--space-xl);
}

/* --- Decorative ledger strip ----------------------------------------------
   Full-bleed hairline strip across the band's top edge: a 16px-tall box bordered
   top + bottom in stone (two parallel hairlines). Anchored to the band (not the
   inner column), so it spans the full viewport width and caps the section-rail
   grid at this boundary. Decorative only.
   -------------------------------------------------------------------------- */
.final-cta__ledger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised); /* floats the strip above the band */
  width: 100%;
  height: var(--space-sm); /* strip height */
  pointer-events: none;
  border-top: 1px solid var(--color-border-stone);    /* hairline — not a tokenised size */
  border-bottom: 1px solid var(--color-border-stone);
}

/* --- Decorative framing rails ---------------------------------------------
   Two 1px stone verticals running the band height, inset to the column gutter
   so they frame the card like a ledger margin. Height 101% / centered top give
   a slight bleed past the band edges. Decorative only.
   -------------------------------------------------------------------------- */
.final-cta__rail {
  position: absolute;
  top: 50%;
  z-index: var(--z-base); /* behind the card */
  width: 1px; /* hairline rail — not a tokenised size */
  height: 101%; /* bleed slightly past the band top/bottom */
  pointer-events: none;
  background-color: var(--color-border-stone);
  transform: translateY(-50%);
}

.final-cta__rail--start {
  left: var(--space-xl); /* aligns with the inner column's left inset */
}

.final-cta__rail--end {
  right: var(--space-xl); /* aligns with the inner column's right inset */
}

/* --- Card -----------------------------------------------------------------
   Dark rounded panel. Flex centers its content.
   -------------------------------------------------------------------------- */
.final-cta__card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--space-4xl);
  overflow: hidden; /* clip the content to the rounded panel */
  background-color: var(--color-surface-dark);
  border-radius: var(--radius-md);
  isolation: isolate;
}

/* --- Content stack --------------------------------------------------------
   Heading -> supporting line -> CTA, centered in the card.
   -------------------------------------------------------------------------- */
.final-cta__content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 700px; /* copy measure */
}

/* Closing headline. Uses the h1 type role (display serif), recoloured to
   cream-bright because it sits on the dark card rather than a light surface. */
.final-cta__heading {
  width: 100%;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-surface-cream-bright);
  text-align: center;
  text-wrap: balance;
}

/* Supporting line. Body type role, recoloured to sage for legibility on the
   dark card. */
.final-cta__text {
  width: 100%;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================================
   Responsive
   Order matches the house rule: desktop is the base above; tablet then mobile
   override below. There is NO tablet variant for this band — tablet renders
   the desktop band unchanged — so there is no tablet block here.
   ========================================================================== */

/* Mobile (max 809): tighter inner padding + gap, narrower card padding, the
   rails pull in to the mobile gutter, and the heading steps down one tier. */
@media (max-width: 809px) {
  .final-cta__inner {
    gap: var(--space-3xl); /* mobile column gap */
    padding: var(--space-3xl) var(--space-sm);
  }

  .final-cta__rail--start {
    left: var(--space-sm); /* mobile gutter */
  }

  .final-cta__rail--end {
    right: var(--space-sm); /* mobile gutter */
  }

  .final-cta__card {
    padding: var(--space-4xl) var(--space-md);
  }

  .final-cta__heading {
    font-size: var(--font-size-h1-mobile);
  }
}

/* ###########################################################################
   SITE FOOTER — global footer
   ########################################################################### */

/* ==========================================================================
   Component — Site Footer
   --------------------------------------------------------------------------
   The page's closing footer (dark teal). A ruled top band carries the brand
   (the text wordmark) opposite three link columns; a bottom row carries the
   legal links + copyright; a giant "Stealth Accelerators" wordmark sits behind
   it all as a decorative watermark.

   Tokens only: every color/size/space traces to the TOKENS section. The few
   exceptions are intrinsic-to-the-effect literals (the 1px hairlines, the rail
   offsets, the watermark's fluid size + clip) and are documented inline. Tablet
   keeps the desktop band (only the column link-gap relaxes); mobile stacks the
   brand over a 2-column grid of link columns and stacks the bottom row.
   ========================================================================== */

/* --- Block ----------------------------------------------------------------
   Full-bleed dark-teal band. Flex centers the inner column; the band's
   vertical rhythm lives on that column (so the rails, which anchor to it, line
   up with the real content edges).
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--color-bg-deep);
}

/* --- Inner column ---------------------------------------------------------
   Centered max-width column holding the bands + watermark and anchoring the
   decorative rails. overflow:hidden clips the rails' slight bleed and the
   watermark's pre-reveal offset to the footer box.
   -------------------------------------------------------------------------- */
.site-footer__inner {
  position: relative; /* anchor for the absolutely-placed rails + watermark */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs); /* gap folds to the nearest token (8px) */
  width: 100%;
  max-width: 1200px; /* footer cap (wider than the 1120px container) */
  padding-inline: var(--space-xl); /* gutter the rails align to */
  overflow: hidden; /* clip the rail bleed + the watermark's reveal offset */
}

/* --- Decorative framing rails ---------------------------------------------
   Two 1px verticals running the footer height, inset to the column gutter so
   they frame the content like a ledger margin. Height 101% / centered top give
   a slight bleed past the footer edges. Decorative only.
   -------------------------------------------------------------------------- */
.site-footer__rail {
  position: absolute;
  top: 50%;
  z-index: var(--z-base); /* behind the content + watermark */
  width: 1px; /* hairline rail — not a tokenised size */
  height: 101%; /* bleed slightly past the footer top/bottom */
  pointer-events: none;
  background-color: var(--color-surface-dark-muted);
  transform: translateY(-50%);
}

.site-footer__rail--start {
  left: var(--space-xl); /* aligns with the inner column's left gutter */
}

.site-footer__rail--end {
  right: var(--space-xl); /* aligns with the inner column's right gutter */
}

/* --- Top band -------------------------------------------------------------
   Brand block opposite the three link columns, ruled top + bottom. The hairline
   rules are 1px borders; space-between pushes brand + columns to the band
   edges. z-raised lifts the real content above the watermark.
   -------------------------------------------------------------------------- */
.site-footer__top {
  position: relative;
  z-index: var(--z-raised); /* above the watermark + rails */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7xl); /* brand/columns gap (folds to 130px tier) */
  width: 100%;
  /* Inline padding keeps the content clear of the framing rails
     (the hairline rules still span the full width to them). */
  padding: var(--space-4xl) var(--space-md) var(--space-3xl);
  border-top: 1px solid var(--color-surface-dark-muted);    /* hairline — not a tokenised size */
  border-bottom: 1px solid var(--color-surface-dark-muted);
}

/* --- Brand block ----------------------------------------------------------
   Home-link wordmark.
   -------------------------------------------------------------------------- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg); /* wordmark -> social icons */
}

/* Logo home link — the brand lockup (inline SVG in the partial). The SVG
   fills with currentColor, so the link's color is the mark's cream. */
.site-footer__logo {
  display: block;
  color: var(--color-surface-cream-bright);
}

.site-footer__logo svg {
  display: block;
  height: 40px;
  width: auto;
}

/* Social icon discs — dark pill buttons matching the contact-page channels. */
.site-footer__social {
  display: flex;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-surface-cream-bright);
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-dark-muted);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: var(--color-text-ink);
  background-color: var(--color-border-sage);
  border-color: var(--color-border-sage);
}

.site-footer__social-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Office location line: an office-building glyph beside the city (plain text,
   not a link). */
.site-footer__address {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
}

.site-footer__address-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* --- Link columns ---------------------------------------------------------
   Quick Links / Contact, laid out in a row.
   -------------------------------------------------------------------------- */
.site-footer__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* One column: heading stacked over its link list. */
.site-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md); /* between the heading and its links */
}

/* Column heading. Uses the small UI role (sans), recoloured to sage to sit on
   the dark surface. Rendered as <h2> for outline order, not for its size. */
.site-footer__column-heading {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-border-sage);
}

/* Link list — vertical stack, markers stripped (it lays out navigation). */
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* --- Links ----------------------------------------------------------------
   Every footer link (columns + bottom legal) shares one role: body type in
   sage, brightening to cream on hover. The whole link is the affordance, so it
   stays underline-free (overriding the global a:hover underline by design).
   -------------------------------------------------------------------------- */
.site-footer__link {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-surface-cream-bright);
  text-decoration: none;
}

/* --- Bottom row -----------------------------------------------------------
   Legal links opposite the copyright line.
   -------------------------------------------------------------------------- */
.site-footer__bottom {
  position: relative;
  z-index: var(--z-raised); /* above the watermark */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg); /* between the legal links and the copyright */
  width: 100%;
  padding-inline: var(--space-md); /* keep legal + copyright clear of the rails */
}

/* Legal link row — Privacy / Terms inline, markers stripped. */
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Copyright line. Body role in sage, matching the link colour at rest. */
.site-footer__copyright {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
}

/* --- Brand watermark ------------------------------------------------------
   Giant "Stealth Accelerators" wordmark sitting behind the footer content. Neco
   bold italic in the dark surface teal, centered, clipped by the inner column's
   overflow. The size is fluid (8.5vw, capped at 100px) — tuned for the two-word
   wordmark so it spans the footer on a single line without overflowing, from a
   320px phone up to the 1200px band. The scroll reveal (translateY(150px) -> 0)
   is the global [data-animate] hook on the element.
   -------------------------------------------------------------------------- */
.site-footer__wordmark {
  position: relative;
  z-index: var(--z-base); /* behind the top/bottom bands */
  width: 100%;
  font-family: var(--font-family-display);
  font-size: min(100px, 8.5vw); /* fits "Stealth Accelerators" on one line, no overflow */
  font-style: italic;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-surface-dark);
  text-align: center;
  white-space: nowrap;    /* keep the wordmark on a single line */
}

/* ==========================================================================
   Responsive
   Order matches the house rule: desktop is the base above; tablet then mobile
   override below.
   ========================================================================== */

/* Tablet (max 1199 / min 810): the only change from desktop is a wider
   per-column link gap. */
@media (max-width: 1199px) and (min-width: 810px) {
  .site-footer__links {
    gap: var(--space-sm);
  }
}

/* Mobile (max 809): inner gutter + rails pull in; the brand stacks over a
   2-column grid of link columns; the bottom row stacks; the link gap relaxes. */
@media (max-width: 809px) {
  .site-footer__inner {
    padding-inline: var(--space-sm); /* mobile gutter */
  }

  .site-footer__rail--start {
    left: var(--space-sm); /* mobile gutter */
  }

  .site-footer__rail--end {
    right: var(--space-sm); /* mobile gutter */
  }

  /* Brand over columns; tighter band inset. */
  .site-footer__top {
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-2xl);
  }

  /* Two-column grid of link columns. */
  .site-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    gap: var(--space-lg);
    width: 100%;
  }

  /* Contact spans the full grid row beneath the first two columns. */
  .site-footer__column--contact {
    grid-column: span 2;
  }

  .site-footer__links {
    gap: var(--space-sm);
  }

  /* Legal links over the copyright line. */
  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
  }
}

/* ###########################################################################
   SECTOR HERO — sector landing-page hero band
   ########################################################################### */

/* ==========================================================================
   Component — Sector Hero
   --------------------------------------------------------------------------
   The full-bleed dark hero that opens a sector page (the homepage HERO's
   sibling). It stacks the background layers behind a bottom-left-pinned content
   column:

     z-base    (0): the sector background image, scaled to cover the frame
     z-raised  (1): the deep-teal gradient overlay (legibility wash)
     z-overlap (2): the content wrapper

   The section is a flex column that pins its single child (the wrapper) to the
   bottom; the wrapper grows to fill the frame and pins copy to its own bottom,
   so the eyebrow, headline and lead sit at the lower-left over the image.

   Tokens only: the few exceptions are intrinsic-to-the-effect literals (the
   image cover scale, the headline measure, the gradient stop %s) and the fixed
   frame height, documented inline.
   ========================================================================== */

/* --- Block ----------------------------------------------------------------
   Full-bleed band. Flex column pins the wrapper to the bottom of the 90vh
   frame; everything is clipped to the section box. The deep-teal background
   shows through before the image paints (and behind its transparent edges).
   -------------------------------------------------------------------------- */
.sector-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pin the wrapper (and its bottom-pinned copy) to the base */
  align-items: center;
  width: 100%;
  height: 90vh;
  overflow: hidden; /* clip the scaled image and overlay to the frame */
  background-color: var(--color-bg-deep); /* pre-image fallback + edge fill */
  isolation: isolate; /* own stacking context so the layers below sort predictably */
}

/* --- Layer 1: background image --------------------------------------------
   Decorative cover image. The figure fills the frame on the base layer; the
   inner <img> is scaled 1.2x so it always covers with no exposed edges (scaling
   the image — not the figure — leaves the figure's transform free for the
   load-reveal fade, which only animates opacity here).
   -------------------------------------------------------------------------- */
.sector-hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base); /* bottom-most layer */
  margin: 0; /* <figure> default margin off */
  overflow: hidden;
}

.sector-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2); /* cover-zoom so the image fills the frame edge-to-edge */
}

/* --- Layer 2: gradient overlay --------------------------------------------
   Top-to-bottom deep-teal wash. Starts at 50% alpha and resolves to the solid
   page background, darkening the lower portion so the bottom-pinned copy stays
   legible. Sits above the image, below the content. The stop %s
   are intrinsic to the effect, so they remain documented literals; both colors
   are --color-bg-deep (here at two alphas).
   -------------------------------------------------------------------------- */
.sector-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised); /* above image, below the content */
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--color-bg-deep-rgb) / 0.5) 0%,
    var(--color-bg-deep) 100%
  );
}

/* --- Content wrapper ------------------------------------------------------
   Centred max-width column that grows to fill the frame and pins its content
   to the bottom-left. Raised above every background layer.
   -------------------------------------------------------------------------- */
.sector-hero__wrapper {
  position: relative;
  z-index: var(--z-overlap); /* above image/overlay */
  flex: 1 0 0; /* grow to fill the frame so flex-end actually pins to the base */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pin content to the bottom of the wrapper */
  align-items: flex-start;
  width: 100%;
  max-width: var(--container-max); /* aligns hero content with the header */
  padding: var(--space-6xl) var(--space-xl) var(--space-4xl);
}

/* Inner content stack: eyebrow -> headline -> lead. */
.sector-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
  max-width: 680px; /* hero copy measure */
  padding-left: var(--space-sm); /* left inset */
}

/* Eyebrow — serif lead role, recoloured sage to read on the dark image. */
.sector-hero__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-border-sage); /* sage label on deep teal */
}

/* Page headline (the single <h1>). Display serif, recoloured cream-bright
   because it sits on the dark image rather than a light surface. */
.sector-hero__title {
  width: 100%;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* Lead paragraph, recoloured sage for legibility on the dark image. */
.sector-hero__lead {
  max-width: 604px; /* lead measure */
  color: var(--color-border-sage);
  text-wrap: balance;
}

/* ==========================================================================
   Responsive
   Order matches the house rule: desktop is the base above; tablet then mobile
   override below.
   ========================================================================== */

/* Tablet (max 1199 / min 810): the headline steps down one tier;
   the frame height + wrapper padding are unchanged from desktop. */
@media (max-width: 1199px) and (min-width: 810px) {
  .sector-hero__title {
    font-size: var(--font-size-display-tablet);
  }
}

/* Mobile (max 809): shorter frame, tighter gutters, smaller headline + eyebrow. */
@media (max-width: 809px) {
  .sector-hero {
    height: 80vh;
  }

  .sector-hero__wrapper {
    padding: var(--space-6xl) var(--space-sm) var(--space-2xl);
  }

  .sector-hero__content {
    gap: var(--space-sm);
    padding-left: 0;
    padding-inline: var(--space-2xs); /* mobile inset */
  }

  .sector-hero__eyebrow {
    font-size: var(--font-size-eyebrow-mobile);
  }

  .sector-hero__title {
    font-size: var(--font-size-display-mobile);
  }
}

/* ###########################################################################
   SECTOR ABOUT — problem / opportunity band
   ########################################################################### */

/* ==========================================================================
   Component — Sector About (section)
   --------------------------------------------------------------------------
   The light sand "About" band on a sector page: a left-aligned header (serif
   eyebrow + h2) above a content image, a problem / opportunity statement pair,
   and a three-up stat band (the SECTOR STATS block below). Mirrors the framing
   of the homepage's light sections — a [data-rails] band with a ledger strip,
   content capped + centred by .container.

   BEM: block .sector-about with __container / __header / __eyebrow / __heading
   / __media / __image / __statements / __statement / __statement-label /
   __statement-text. No modifiers needed.

   Tokens only — every value traces to a token in the TOKENS section; the few
   intrinsic-to-the-image numbers (the media aspect ratio) are documented inline.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   The .section primitive (the BASE section) supplies the vertical band padding;
   we only set the sand surface here. Content is capped + centered by the
   .container primitive on __container, widened to the 40px edge below.
   ------------------------------------------------------------------------- */
.sector-about {
  background-color: var(--color-surface-cream);
}

/* --- Content column ------------------------------------------------------
   Stacks the header, media, statements and stats. The wrapper pads 40px at the
   horizontal edges (vs the 16px page gutter .container gives), so we widen the
   inline padding to --space-xl and reset it to the gutter on mobile.
   ------------------------------------------------------------------------- */
.sector-about__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xl); /* between stacked blocks */
  max-width: 1200px; /* rail band cap — pads out to the content column so content meets the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides the page gutter) */
}

/* --- Header (eyebrow + heading) ------------------------------------------ */
.sector-about__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  max-width: 816px; /* heading measure */
  padding-inline: var(--space-sm); /* header inset — clears the section rails */
}

/* Serif eyebrow label ("About"). Lead-serif type role in primary ink — a quiet
   section label, not a heading, so it stays a <p>. */
.sector-about__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

/* Section heading — h1 type role rendered as <h2> (the page already has its h1). */
.sector-about__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
  text-wrap: balance;
}

/* --- Content image -------------------------------------------------------
   A framed media block cropped to the source aspect ratio.
   ------------------------------------------------------------------------- */
.sector-about__media {
  position: relative;
  width: 100%;
  margin: 0; /* <figure> default margin off */
  aspect-ratio: 1.75439; /* media crop ratio (intrinsic to the image) */
  overflow: hidden;
  border-radius: var(--radius-xl); /* framed media */
}

.sector-about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Problem / opportunity pair ------------------------------------------
   Two labelled statements side by side on desktop, stacking on mobile.
   ------------------------------------------------------------------------- */
.sector-about__statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: var(--space-xl);
  width: 100%;
  padding-inline: var(--space-sm); /* statement inset — clears the section rails */
}

/* One statement: a serif label over its body copy. */
.sector-about__statement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* Statement label ("Problems" / "Opportunity") — value-prop serif role. */
.sector-about__statement-label {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3-feature);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3-feature);
  letter-spacing: var(--letter-spacing-h3-feature);
  color: var(--color-accent-deep);
}

/* Statement body — body type role, muted ink. */
.sector-about__statement-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighten the stacked-block gap; the statement
   pair stays two-column. Edge padding (40px) is inherited from the base. */
@media (max-width: 1199px) and (min-width: 810px) {
  .sector-about__container {
    gap: var(--space-2xl);
  }
}

/* Mobile (max 809): the band pulls in to the gutter, the eyebrow relaxes, and
   the statement pair stacks to a single column. */
@media (max-width: 809px) {
  .sector-about__container {
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  .sector-about__header {
    padding-inline: var(--space-2xs); /* tighter inset */
  }

  .sector-about__eyebrow {
    font-size: var(--font-size-lead-mobile);
    line-height: var(--line-height-lead-mobile);
    letter-spacing: var(--letter-spacing-lead-mobile);
  }

  .sector-about__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .sector-about__statements {
    grid-template-columns: 1fr; /* stack the pair */
    gap: var(--space-lg);
    padding-inline: var(--space-2xs);
  }
}

/* ###########################################################################
   SECTOR STATS — three-up stat band
   ########################################################################### */

/* ==========================================================================
   Component — Sector Stats
   --------------------------------------------------------------------------
   A three-up row of headline stats nested inside the SECTOR ABOUT band. Each
   item is a <figure>: the big value over its caption label. Cells share hairline
   stone dividers (a zero-gap grid drawing per-cell borders), echoing the
   INVESTMENT stat-figure pattern.

   BEM: block .sector-stats with __item / __figure / __value / __label.

   Tokens only — every value traces to a token; the 1px hairline divider is
   intrinsic and documented inline.
   ========================================================================== */

/* --- Block ---------------------------------------------------------------
   Three even columns whose cells abut; dividers come from per-cell borders.
   ------------------------------------------------------------------------- */
.sector-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-stone); /* caps the band's top edge */
}

/* Stat cell. Draws a left hairline; the first cell suppresses it below so only
   the interior verticals show. */
.sector-stats__item {
  padding: var(--space-lg) var(--space-md);
  border-left: 1px solid var(--color-border-stone);
}

.sector-stats__item:first-child {
  border-left: 0; /* no outer-left divider */
}

/* The stat figure — the big value over its caption. */
.sector-stats__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
}

/* Headline figure — sans face at the h2 type scale. */
.sector-stats__value {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-ink);
}

/* The supporting caption. Body role, muted grey. */
.sector-stats__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighten the cell padding; the row stays 3-up. */
@media (max-width: 1199px) and (min-width: 810px) {
  .sector-stats__item {
    padding: var(--space-md) var(--space-sm);
  }
}

/* Mobile (max 809): the row stacks to a single column; the vertical dividers
   become a single hairline above every cell after the first. The figure grows
   (h2 is the one role that scales up on mobile). */
@media (max-width: 809px) {
  .sector-stats {
    grid-template-columns: 1fr; /* stack to a single column */
  }

  .sector-stats__item {
    padding: var(--space-md) var(--space-2xs);
    border-left: 0; /* no vertical divider in a single column */
    border-top: 1px solid var(--color-border-stone);
  }

  .sector-stats__item:first-child {
    border-top: 0; /* the band's own top rail caps the first cell */
  }

  .sector-stats__value {
    font-size: var(--font-size-h2-mobile);
  }
}

/* ###########################################################################
   CASE HERO — case-study landing hero band
   ########################################################################### */

/* ==========================================================================
   Component — Case Hero (section)
   --------------------------------------------------------------------------
   The deep-teal band that opens a portfolio case study: a copy column (a serif
   eyebrow + the page h1 + a lead paragraph + sector/stage tags) beside a framed
   lead image. The dark counterpart of the light .case-feature row, opening a
   case study at the top of the page. Vertically centred in a min-90vh band;
   stacks to one column (copy above media) on mobile.

   BEM: block .case-hero with __container / __content / __eyebrow / __title /
   __lead / __tags / __tag / __media / __image. No modifiers needed.

   Tokens only — every value traces to a token; the dark surface recolours the
   copy (cream/sage) and the tag chips match the .portfolio-card chips.
   ========================================================================== */

/* --- Block (full-height dark band) ---------------------------------------
   A min-90vh deep-teal band with its content row centred; top padding clears
   the fixed header. Column rails are dimmed to read on the dark fill.
   ------------------------------------------------------------------------- */
.case-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centre the content row in the band */
  min-height: 90vh;
  padding-block: var(--space-6xl) var(--space-4xl); /* top clears the fixed header */
  background-color: var(--color-bg-deep);
  --rail-color: var(--color-border-dark); /* keep the column rails subtle on the dark fill */
}

/* --- Content row ---------------------------------------------------------
   Two columns on desktop: the copy column beside the framed image, vertically
   centred. The wrapper pads 40px at the horizontal edges (vs the 16px page
   gutter .container gives), reset to the gutter on mobile.
   ------------------------------------------------------------------------- */
.case-hero__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr)); /* copy beside media */
  align-items: center;
  gap: var(--space-3xl); /* between the copy column and the media */
  max-width: 1200px; /* rail band cap — pads out to the content column so content meets the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides the page gutter) */
}

/* Copy column — eyebrow, headline, lead, tags. */
.case-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-inline: var(--space-sm); /* content inset — clears the section rails */
}

/* Serif eyebrow label ("Portfolio"). Eyebrow type role, recoloured sage to
   read on the dark fill. */
.case-hero__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-border-sage);
}

/* Page headline (the single <h1>). Display serif, cream-bright on the dark fill. */
.case-hero__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* Lead paragraph — recoloured sage for legibility on the dark fill. */
.case-hero__lead {
  max-width: 604px; /* lead measure */
  color: var(--color-border-sage);
  text-wrap: pretty;
}

/* Tag row — sector/stage chips; wraps when they run out of room. */
.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Sector / stage chip on the dark fill — matches the .portfolio-card chips. */
.case-hero__tag {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-accent);
  background-color: rgb(var(--color-bg-deep-rgb) / 0.5);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* --- Framed media --------------------------------------------------------
   A framed image on the dark fill, cropped to the source aspect ratio.
   ------------------------------------------------------------------------- */
.case-hero__media {
  position: relative;
  width: 100%;
  margin: 0; /* <figure> default margin off */
  aspect-ratio: 1.75055; /* media crop ratio (intrinsic to the image) */
  overflow: hidden;
  border-radius: var(--radius-xl); /* framed media */
}

.case-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): the headline steps down a tier and the column
   gap tightens; the two-column row holds. Edge padding (40px) is inherited. */
@media (max-width: 1199px) and (min-width: 810px) {
  .case-hero__container {
    gap: var(--space-xl);
  }

  .case-hero__title {
    font-size: var(--font-size-display-tablet);
  }
}

/* Mobile (max 809): single column (copy above media), let the stacked content
   set the height, pull the band in to the gutter, step the headline down. */
@media (max-width: 809px) {
  .case-hero {
    min-height: 0; /* stacked copy + media set the height */
    padding-block: var(--space-6xl) var(--space-3xl);
  }

  .case-hero__container {
    grid-template-columns: 1fr; /* stack copy above media */
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  .case-hero__content {
    gap: var(--space-sm);
    padding-inline: var(--space-2xs); /* tighter inset */
  }

  .case-hero__title {
    font-size: var(--font-size-display-mobile);
  }
}

/* ###########################################################################
   CASE FEATURE — two-column image + text feature band
   ########################################################################### */

/* ==========================================================================
   Component — Case Feature (section)
   --------------------------------------------------------------------------
   A two-column feature on a portfolio case study: a framed image beside a text
   column (serif eyebrow + h2 over a prose stack of body paragraphs). The base
   block places the text first and the media second; the --media-start modifier
   mirrors the row so the image leads. Mirrors the framing of the site's light
   bands — a [data-rails] band with a ledger strip, content capped + centred by
   .container — and stacks to one column (image always above text) on mobile.

   BEM: block .case-feature with __container / __media / __image / __body /
   __header / __eyebrow / __heading / __prose / __text, plus the
   --media-start modifier (image leads on desktop/tablet).

   Tokens only — every value traces to a token; the media aspect ratio is
   intrinsic to the image and documented inline.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   The .section primitive supplies the vertical band padding; we only set the
   sand surface here. Content is capped + centred by .container, widened below.
   ------------------------------------------------------------------------- */
.case-feature {
  background-color: var(--color-surface-sand);
}

/* The image-led feature sits on the lighter surface, so the two adjacent feature
   bands on a case-study page alternate instead of reading as one flat grey slab. */
.case-feature--media-start {
  background-color: var(--color-surface-cream);
}

/* The "what we saw before" closer on each portfolio case study sits on the cream
   surface, lifting it off the deeper sand of the preceding feature band. */
#why-we-invested {
  background-color: var(--color-surface-cream);
}

/* --- Content row ---------------------------------------------------------
   Two equal columns, vertically centred. The text column is the first DOM
   child and the first grid column by default; the media follows. The
   --media-start modifier swaps their column placement (image leads). The
   wrapper pads 40px at the horizontal edges (vs the 16px page gutter), reset
   to the gutter on mobile.
   ------------------------------------------------------------------------- */
.case-feature__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr)); /* text beside media */
  align-items: center;
  gap: var(--space-3xl); /* between the text column and the media */
  max-width: 1200px; /* rail band cap — pads out to the content column so content meets the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides the page gutter) */
}

/* Default order: text in column 1, media in column 2. Both are pinned to row 1
   so the column-2 media (which is first in source order) can't push the column-1
   body onto a second row under sparse grid auto-placement. */
.case-feature__body {
  grid-column: 1;
  grid-row: 1;
}

.case-feature__media {
  grid-column: 2;
  grid-row: 1;
}

/* Mirror modifier: image leads in column 1, text follows in column 2. */
.case-feature--media-start .case-feature__media {
  grid-column: 1;
}

.case-feature--media-start .case-feature__body {
  grid-column: 2;
}

/* --- Framed media --------------------------------------------------------
   A framed image cropped to the source aspect ratio.
   ------------------------------------------------------------------------- */
.case-feature__media {
  position: relative;
  width: 100%;
  margin: 0; /* <figure> default margin off */
  aspect-ratio: 1.75055; /* media crop ratio (intrinsic to the image) */
  overflow: hidden;
  border-radius: var(--radius-xl); /* framed media */
}

.case-feature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* About / Our Story frames the founders photo near-square, echoing the team
   portraits, rather than the wide landscape crop the portfolio rows share. */
.case-feature--story .case-feature__media {
  aspect-ratio: 1 / 1;
}

/* --- Text column ---------------------------------------------------------
   Header (eyebrow + heading) above a prose stack of body paragraphs.
   ------------------------------------------------------------------------- */
.case-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg); /* header -> prose */
  padding-inline: var(--space-sm); /* text inset — clears the section rails */
}

.case-feature__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}

/* Serif eyebrow label. Lead-serif type role in primary ink — a quiet label. */
.case-feature__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

/* Section heading — h1 type role rendered as <h2> (the page already has its h1). */
.case-feature__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
  text-wrap: balance;
}

/* Prose stack — body paragraphs with the standard paragraph rhythm between. */
.case-feature__prose {
  display: flex;
  flex-direction: column;
  gap: var(--paragraph-spacing); /* between stacked paragraphs */
  width: 100%;
}

/* Body paragraph — body type role, muted ink. */
.case-feature__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* --- Folded portfolio pager ----------------------------------------------
   Prev/next portfolio links closing the Why-We-Invested body: a hairline-topped
   row, previous on the left, next on the right. The order wraps, so 'next' from
   the last company lands on the first.
   ------------------------------------------------------------------------- */
.case-feature__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-stone);
}

.case-feature__pager-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-ink);
  text-decoration: none;
  transition: color var(--duration-base) var(--easing-standard);
}

.case-feature__pager-link:hover,
.case-feature__pager-link:focus-visible {
  color: var(--color-accent-deep);
  text-decoration: none;
}

/* Next sits at the right with its text right-aligned. */
.case-feature__pager-link--next {
  text-align: right;
}

/* Arrow with a ghost duplicate that slides in as the first slides out — the same
   glyph motion as the .button (so the pager matches the contact submit button). */
.case-feature__pager-glyphs {
  position: relative;
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  overflow: hidden;
}

.case-feature__pager-arrow {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-slow) var(--easing-standard);
}

/* Next: the ghost waits one step to the left; both slide right on hover. */
.case-feature__pager-link--next .case-feature__pager-arrow--ghost {
  position: absolute;
  inset: 0 auto auto -100%;
}

.case-feature__pager-link--next:hover .case-feature__pager-arrow,
.case-feature__pager-link--next:focus-visible .case-feature__pager-arrow {
  transform: translateX(100%);
}

/* Prev: the ghost waits one step to the right; both slide left on hover. */
.case-feature__pager-link--prev .case-feature__pager-arrow--ghost {
  position: absolute;
  inset: 0 -100% auto auto;
}

.case-feature__pager-link--prev:hover .case-feature__pager-arrow,
.case-feature__pager-link--prev:focus-visible .case-feature__pager-arrow {
  transform: translateX(-100%);
}

.case-feature__pager-text {
  display: flex;
  flex-direction: column;
}

.case-feature__pager-kicker {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-muted);
}

.case-feature__pager-name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: currentColor;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighten the column gap; the two-column row and
   the mirror placement both hold. Edge padding (40px) is inherited. */
@media (max-width: 1199px) and (min-width: 810px) {
  .case-feature__container {
    gap: var(--space-xl);
  }
}

/* Mobile (max 809): single column with the image always above the text,
   regardless of the desktop mirror. The band pulls in to the gutter, the
   eyebrow relaxes, and the heading steps down one tier. */
@media (max-width: 809px) {
  .case-feature__container {
    grid-template-columns: 1fr; /* stack to a single column */
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  /* Image leads, text follows — in both the base and mirrored variants. */
  .case-feature__media,
  .case-feature--media-start .case-feature__media {
    grid-column: 1;
    grid-row: 1;
  }

  .case-feature__body,
  .case-feature--media-start .case-feature__body {
    grid-column: 1;
    grid-row: 2;
    gap: var(--space-md);
    padding-inline: var(--space-2xs); /* tighter inset */
  }

  .case-feature__eyebrow {
    font-size: var(--font-size-lead-mobile);
    line-height: var(--line-height-lead-mobile);
    letter-spacing: var(--letter-spacing-lead-mobile);
  }

  .case-feature__heading {
    font-size: var(--font-size-h1-mobile);
  }
}

/* ###########################################################################
   LEGAL DOCUMENT — long-form legal pages (Privacy Policy, Terms of Use)
   ########################################################################### */

/* ==========================================================================
   Stealth Accelerators — Legal Document
   --------------------------------------------------------------------------
   The shared reading shell for the site's legal pages. A single, generous
   measure (~70ch) centred in the cream page, set as a serif title + serif
   section headings over muted sans body and lists, with comfortable vertical
   rhythm. Generic by design: Privacy Policy and Terms of Use both reuse it.

   The .legal section adds extra top padding so the document clears the fixed
   site header at every breakpoint (the .section primitive alone underpads it
   on mobile). The block is capped + centred by .container.

   BEM: block .legal-doc with __header / __title / __updated / __section /
   __heading / __text / __list / __item / __link.

   Tokens only — every colour, space, type and radius value traces to a token.
   ========================================================================== */

/* --- Section shell -------------------------------------------------------
   .section supplies the vertical band rhythm; we add a header-clearance pad
   on top so the title is never hidden behind the fixed bar.
   ------------------------------------------------------------------------- */
.legal {
  padding-top: var(--space-8xl); /* clears the fixed header + breathing room */
}

/* --- Reading column ------------------------------------------------------
   A single measure capped to ~70ch and centred within the container. */
.legal-doc {
  max-width: 70ch;
  margin-inline: auto;
}

/* --- Header --------------------------------------------------------------
   Serif title over a muted "last updated" line, separated from the body by
   a sage hairline.
   ------------------------------------------------------------------------- */
.legal-doc__header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-sage);
}

.legal-doc__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink-brown);
}

.legal-doc__updated {
  margin-top: var(--space-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-text-muted);
}

/* --- Section -------------------------------------------------------------
   Each numbered clause: a serif heading over a prose stack. Sections are
   spaced by the large paragraph rhythm.
   ------------------------------------------------------------------------- */
.legal-doc__section {
  margin-top: var(--space-2xl);
}

.legal-doc__heading {
  margin-bottom: var(--space-sm);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--color-text-ink-brown);
}

/* --- Body text -----------------------------------------------------------
   Muted sans body at the reading measure; stacked blocks carry paragraph
   rhythm above them.
   ------------------------------------------------------------------------- */
.legal-doc__text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-muted);
}

.legal-doc__text + .legal-doc__text,
.legal-doc__list + .legal-doc__text,
.legal-doc__text + .legal-doc__list {
  margin-top: var(--paragraph-spacing);
}

/* --- Lists ---------------------------------------------------------------
   Marker-led items with an accent dash; comfortable inter-item spacing. */
.legal-doc__list {
  margin-top: var(--paragraph-spacing);
  padding-left: var(--space-md);
  list-style: none;
}

.legal-doc__item {
  position: relative;
  padding-left: var(--space-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-muted);
}

.legal-doc__item + .legal-doc__item {
  margin-top: var(--space-xs);
}

.legal-doc__item::before {
  content: "";
  position: absolute;
  top: calc(var(--line-height-body) * 0.5em);
  left: 0;
  width: var(--space-2xs);
  height: 1px;
  background-color: var(--color-text-muted);
}

/* --- Links ---------------------------------------------------------------
   Accent-coloured, underlined; deepens on hover/focus. */
.legal-doc__link {
  color: var(--color-text-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--easing-standard);
}

.legal-doc__link:hover,
.legal-doc__link:focus-visible {
  color: var(--color-accent-deep);
}

/* --- Tablet (max-width:1199px) and (min-width:810px) --------------------- */
@media (max-width: 1199px) and (min-width: 810px) {
  .legal {
    padding-top: var(--space-7xl);
  }
}

/* --- Mobile (max-width:809px) -------------------------------------------- */
@media (max-width: 809px) {
  .legal {
    padding-top: var(--space-6xl); /* still clears the fixed header */
  }

  .legal-doc__title {
    font-size: var(--font-size-h1-mobile);
  }

  .legal-doc__heading {
    font-size: var(--font-size-h3-mobile);
  }
}
/* ###########################################################################
   ABOUT HERO — light page-opening intro band
   ########################################################################### */

/* ==========================================================================
   Component — About Hero (section)
   --------------------------------------------------------------------------
   The light intro band that opens the About page: a left-aligned content
   column carrying the page's single <h1>, a serif lead, and a text-link CTA
   that jumps to the Our Story anchor. Unlike the dark image heroes, this band
   sits on the cream page surface with ink type, and opts out of the section
   rails so the page's top band reads clean (matching the homepage hero).

   BEM: block .about-hero with __container / __content / __title / __lead /
   __cta / __cta-label / __cta-arrow. No modifiers needed.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   Tall top padding clears the sticky header; the band inherits the cream page
   surface. Content is capped + centred by the .container primitive.
   ------------------------------------------------------------------------- */
.about-hero {
  padding-block: var(--space-8xl) var(--space-6xl);
}

/* --- Content column ------------------------------------------------------ */
.about-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
  max-width: 816px; /* headline measure */
  padding-inline: var(--space-sm); /* inset to clear the page edge in step with the rails below */
}

/* Page headline (the single <h1>) — display serif role on the light surface. */
.about-hero__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-ink);
  text-wrap: balance;
}

/* Lead paragraph — serif lead role, muted warm ink, capped to a reading measure. */
.about-hero__lead {
  max-width: 604px; /* lead measure */
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-muted-warm);
  text-wrap: balance;
}

/* CTA — quiet text link with a trailing arrow that slides forward as its ghost
   duplicate slides in behind it (the same glyph motion as the .button). */
.about-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-accent-deep);
  text-decoration: none;
}

.about-hero__cta-glyphs {
  position: relative;
  display: block;
  flex: none;
  width: var(--space-md);
  height: var(--space-md);
  overflow: hidden;
}

.about-hero__cta-arrow {
  display: block;
  width: var(--space-md);
  height: var(--space-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-slow) var(--easing-standard);
}

/* The ghost waits one step to the left; both slide right on hover. */
.about-hero__cta-arrow--ghost {
  position: absolute;
  inset: 0 auto auto -100%;
}

.about-hero__cta:hover .about-hero__cta-arrow,
.about-hero__cta:focus-visible .about-hero__cta-arrow {
  transform: translateX(100%);
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): the headline steps down one tier. */
@media (max-width: 1199px) and (min-width: 810px) {
  .about-hero {
    padding-block: var(--space-7xl) var(--space-4xl);
  }

  .about-hero__title {
    font-size: var(--font-size-display-tablet);
  }
}

/* Mobile (max 809): tighter band padding, smaller headline + lead, gutter inset. */
@media (max-width: 809px) {
  .about-hero {
    padding-block: var(--space-6xl) var(--space-2xl);
  }

  .about-hero__content {
    gap: var(--space-sm);
    padding-inline: var(--space-2xs);
  }

  .about-hero__title {
    font-size: var(--font-size-display-mobile);
  }

  .about-hero__lead {
    font-size: var(--font-size-lead-mobile);
    line-height: var(--line-height-lead-mobile);
    letter-spacing: var(--letter-spacing-lead-mobile);
  }
}

/* ###########################################################################
   ABOUT THESIS — dark "how we choose" band: header + four principle cards
   ########################################################################### */

/* ==========================================================================
   Component — About Thesis (section)
   --------------------------------------------------------------------------
   The dark deep-teal band stating how the fund chooses: a header row (serif
   eyebrow + heading on the left, a ghost CTA on the right) above a four-up
   grid of principle cards. The column rails are recoloured to the muted dark
   surface so they stay subtle on the teal fill.

   BEM: block .about-thesis with __container / __header /
   __intro / __eyebrow / __heading / __cta / __grid / __card / __card-title /
   __card-text. No modifiers needed.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   The .section primitive is not applied here; the band owns its vertical
   padding. Content is capped + centred by .container, widened to the rail band
   edge below.
   ------------------------------------------------------------------------- */
.about-thesis {
  position: relative; /* containing block for the rails */
  isolation: isolate;
  --rail-color: var(--color-border-dark); /* subtle rails on the dark fill */
  padding-block: var(--space-6xl);
  background-color: var(--color-bg-deep);
}

/* --- Content column ------------------------------------------------------ */
.about-thesis__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xl); /* header -> grid */
  max-width: 1200px; /* rail band cap — pads out to the content column so content meets the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides the page gutter) */
}

/* --- Header row (intro + CTA) -------------------------------------------- */
.about-thesis__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg);
  width: 100%;
  padding-inline: var(--space-sm); /* header inset — clears the section rails */
}

.about-thesis__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* Serif eyebrow label — lead-serif role, sage to read on the deep teal. */
.about-thesis__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage);
}

/* Section heading — h1 type role rendered as <h2>, bright cream on the teal. */
.about-thesis__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* --- Card grid -----------------------------------------------------------
   Four even columns. The card sizes its own height/padding; the grid only
   places the cells.
   ------------------------------------------------------------------------- */
.about-thesis__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(50px, 1fr));
  gap: var(--space-sm);
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* --- Card ----------------------------------------------------------------
   A dark-teal tile with a muted hairline holding a serif title over sage copy.
   ------------------------------------------------------------------------- */
.about-thesis__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-lg);
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-dark-muted);
  border-radius: var(--radius-md);
}

/* Card title — value-prop serif role, bright cream on the dark tile. */
.about-thesis__card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3-feature);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3-feature);
  letter-spacing: var(--letter-spacing-h3-feature);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

/* Card copy — body role, recoloured sage for legibility on teal. */
.about-thesis__card-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-wrap: pretty;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): trim the band padding; the grid drops to two
   columns; the header stays a row. */
@media (max-width: 1199px) and (min-width: 810px) {
  .about-thesis {
    padding-block: var(--space-4xl);
  }

  .about-thesis__grid {
    grid-template-columns: repeat(2, minmax(50px, 1fr));
  }
}

/* Mobile (max 809): the band pulls in to the gutter, the header stacks, the
   heading steps down a tier, and the grid collapses to a single column. */
@media (max-width: 809px) {
  .about-thesis {
    padding-block: var(--space-2xl);
  }

  .about-thesis__container {
    gap: var(--space-2xl);
    padding-inline: var(--container-gutter);
  }

  .about-thesis__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-inline: var(--space-2xs);
  }

  .about-thesis__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .about-thesis__grid {
    grid-template-columns: 1fr;
  }
}

/* ###########################################################################
   ABOUT FUND — light "fund construction" band: header + four-up metrics
   ########################################################################### */

/* ==========================================================================
   Component — About Fund (section)
   --------------------------------------------------------------------------
   The light sand band describing how the fund deploys capital: a left-aligned
   header (serif eyebrow + h2) above a four-up metric band. Each item is a
   <figure>: the big value over a supporting note and an accent label. Cells
   share hairline stone dividers (a zero-gap grid drawing per-cell borders),
   echoing the SECTOR STATS pattern. Mirrors the framing of the site's light
   bands — a [data-rails] band with a ledger strip, content capped by .container.

   BEM: block .about-fund with __container / __header / __eyebrow / __heading /
   __stats / __stat / __figure / __value / __note / __label. No modifiers.
   ========================================================================== */

/* --- Block (section shell) -----------------------------------------------
   The .section primitive supplies the band padding; we only set the sand
   surface here. Content is capped + centred by .container, widened below.
   ------------------------------------------------------------------------- */
.about-fund {
  background-color: var(--color-surface-sand);
}

/* --- Content column ------------------------------------------------------ */
.about-fund__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xl); /* header -> stats */
  max-width: 1200px; /* rail band cap — pads out so the band meets the rails */
  padding-inline: var(--space-xl); /* wrapper edge (overrides the page gutter) */
}

/* --- Header (eyebrow + heading) ------------------------------------------ */
.about-fund__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  padding-inline: var(--space-sm); /* header inset — clears the section rails */
}

/* Serif eyebrow label — lead-serif role in primary ink. */
.about-fund__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

/* Section heading — h1 type role rendered as <h2>. */
.about-fund__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

/* --- Metric band ---------------------------------------------------------
   Four even columns whose cells abut; dividers come from per-cell borders.
   ------------------------------------------------------------------------- */
.about-fund__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(50px, 1fr));
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-stone); /* caps the band's top edge */
}

/* Metric cell. Draws a left hairline; the first cell suppresses it so only the
   interior verticals show. */
.about-fund__stat {
  padding: var(--space-lg) var(--space-md);
  border-left: 1px solid var(--color-border-stone);
}

.about-fund__stat:first-child {
  border-left: 0; /* no outer-left divider */
}

/* The metric figure — the value over its note and label. */
.about-fund__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
}

/* Headline figure — sans face at the h2 type scale. */
.about-fund__value {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-ink);
}

/* Supporting note — body role, muted grey. */
.about-fund__note {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Metric label — value-prop serif role in the deep accent. */
.about-fund__label {
  margin-top: var(--space-2xs);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3-feature);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h3-feature);
  letter-spacing: var(--letter-spacing-h3-feature);
  color: var(--color-accent-deep);
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): the band drops to two columns. The vertical
   dividers reset and a horizontal hairline caps each new row's cells. */
@media (max-width: 1199px) and (min-width: 810px) {
  .about-fund__stats {
    grid-template-columns: repeat(2, minmax(50px, 1fr));
  }

  .about-fund__stat {
    padding: var(--space-md) var(--space-sm);
  }

  /* First cell of each row drops its left divider. */
  .about-fund__stat:nth-child(odd) {
    border-left: 0;
  }

  /* The second row gains a top hairline to close the grid. */
  .about-fund__stat:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-stone);
  }
}

/* Mobile (max 809): the band stacks to a single column; the vertical dividers
   become a single hairline above every cell after the first. The value grows
   (h2 is the one role that scales up on mobile). */
@media (max-width: 809px) {
  .about-fund__container {
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  .about-fund__header {
    padding-inline: var(--space-2xs);
  }

  .about-fund__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .about-fund__stats {
    grid-template-columns: 1fr; /* stack to a single column */
  }

  .about-fund__stat {
    padding: var(--space-md) var(--space-2xs);
    border-left: 0; /* no vertical divider in a single column */
    border-top: 1px solid var(--color-border-stone);
  }

  .about-fund__stat:first-child {
    border-top: 0; /* the band's own top rail caps the first cell */
  }

  .about-fund__value {
    font-size: var(--font-size-h2-mobile);
  }
}

/* ###########################################################################
   CONTACT — deep-teal "Partner With Us" band: intro + direct details + form
   ########################################################################### */

/* ==========================================================================
   Stealth Accelerators — Contact
   --------------------------------------------------------------------------
   Full-bleed deep-teal band split into two columns on desktop: an intro
   (eyebrow, h1, lead, direct channels) beside an accessible contact form.
   Form fields sit on the dark surface; keyboard focus uses the global
   :focus-visible ring from base. No colour/space/type literals — tokens only.
   ========================================================================== */

.contact {
  position: relative;
  padding-block: var(--space-6xl);
  background-color: var(--color-bg-deep);
  --rail-color: var(--color-border-dark); /* keep column rails subtle on the dark fill */
}

/* --- Layout: a media + intro column beside the form. --- */
.contact__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5xl);
  align-items: start;
}

/* --- Intro column: a team photo over the pitch and the channel icons. --- */
.contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Framed team photo opening the column. */
.contact__media {
  width: 100%;
  margin: 0 0 var(--space-2xl);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.contact__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Intro column --------------------------------------------------------- */
.contact__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage); /* sage label on deep teal */
}

.contact__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-surface-cream-bright);
  text-wrap: balance;
}

.contact__lead {
  max-width: 36ch;
  margin-top: var(--space-md);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage);
}

/* --- Direct channels: a row of icon links (email, LinkedIn, X). --- */
.contact__channels {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: 0;
  list-style: none;
}

.contact__channel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-surface-cream-bright);
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-dark-muted);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}

.contact__channel-link:hover,
.contact__channel-link:focus-visible {
  color: var(--color-text-ink);
  background-color: var(--color-border-sage);
  border-color: var(--color-border-sage);
}

.contact__channel-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --- Form ----------------------------------------------------------------- */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.contact__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-border-sage);
}

.contact__required {
  color: var(--color-accent-sand);
}

.contact__input {
  width: 100%;
  padding: var(--space-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-surface-cream-bright);
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-dark-muted);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard);
}

.contact__input::placeholder {
  color: var(--color-border-sage);
  opacity: 1;
}

.contact__input:hover {
  border-color: var(--color-accent-muted);
}

/* Active-field border tint; keyboard focus still gets the global :focus-visible ring. */
.contact__input:focus {
  border-color: var(--color-accent);
}

.contact__input--textarea {
  min-height: 140px;
  resize: vertical;
}

/* --- Submit --------------------------------------------------------------- */
.contact__submit {
  align-self: flex-start;
  margin-top: var(--space-2xs);
}

/* ==========================================================================
   Responsive
   House order: desktop is the base above; tablet then mobile override below.
   ========================================================================== */

/* Tablet (max 1199 / min 810): tighten the column gutter; keep two columns. */
@media (max-width: 1199px) and (min-width: 810px) {
  .contact {
    padding-block: var(--space-4xl);
  }

  .contact__inner {
    gap: var(--space-2xl);
  }
}

/* Mobile (max 809): stack the intro above the form. */
@media (max-width: 809px) {
  .contact {
    padding-block: var(--space-2xl);
  }

  /* Inset the column off the rails (a 16px gap each side) so the text and the
     form fields don't sit flush against them; the rails stay at the gutter. */
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
    padding-inline: var(--space-lg);
  }

  .contact__title {
    font-size: var(--font-size-h1-mobile);
  }

  .contact__lead {
    max-width: none;
    font-size: var(--font-size-lead-mobile);
    line-height: var(--line-height-lead-mobile);
    letter-spacing: var(--letter-spacing-lead-mobile);
  }
}


/* ###########################################################################
   BUTTON — the shared call-to-action button (the "Get In Touch" pill)
   ########################################################################### */

/* ==========================================================================
   Component — Button
   --------------------------------------------------------------------------
   The one button used site-wide: a champagne-gold pill holding a near-black disc
   (the arrow-up-right glyph) beside a label. Every "Get In Touch" call to action
   uses it (header, hero, partner band, final CTA, about) and so does the contact
   form's submit. The whole control is the affordance, so it stays underline-free
   and deepens on hover and keyboard focus. The --plain modifier drops the icon
   disc for a label-only button (the submit).
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 50px;
  padding-block: var(--space-3xs);
  padding-inline: var(--space-sm) var(--space-3xs);
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-ink);
  text-decoration: none;
  cursor: pointer;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard),
    transform var(--duration-base) var(--easing-standard);
}

.button:hover,
.button:focus-visible {
  text-decoration: none;
  background-color: #b29a5e; /* deepened gold on hover/focus */
  border-color: #b29a5e;
  transform: scale(0.98);
}

/* Label paired with a duplicate inside a clip; on hover the pair rolls up so
   the copy lands exactly where the original was. */
.button__text {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}

.button__label {
  white-space: nowrap;
  transition: transform var(--duration-slow) var(--easing-standard);
}

.button__label--ghost {
  position: absolute;
  inset: 100% auto auto 0;
}

.button:hover .button__text .button__label,
.button:focus-visible .button__text .button__label {
  transform: translateY(-100%);
}

/* Near-black disc framing the glyph, set against the gold pill. */
.button__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: var(--color-accent-deep);
  border-radius: var(--radius-sm);
}

/* Tight clip so the glyph's duplicate can slide in from the left on hover. */
.button__glyphs {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

/* Arrow-up-right glyph, stroked in cream to read on the near-black disc. */
.button__glyph {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-surface-cream);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-slow) var(--easing-standard);
}

.button__glyph--ghost {
  position: absolute;
  inset: 0 auto auto -100%;
}

.button:hover .button__glyph,
.button:focus-visible .button__glyph {
  transform: translateX(100%);
}

/* ###########################################################################
   CONTACT MAP — "Where We Are" office-location band
   ########################################################################### */

/* ==========================================================================
   Component — Contact Map (section)
   --------------------------------------------------------------------------
   The light sand band closing the contact page: a serif eyebrow + heading and
   the office location above a framed Google Maps embed. Mirrors the framing of
   the site's other light sections — a [data-rails] band, content capped and
   centred by .container.
   ========================================================================== */
.contact-map {
  background-color: var(--color-surface-sand);
}

.contact-map__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  max-width: 1200px;
  padding-inline: var(--space-xl);
}

.contact-map__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  width: 100%;
  padding-inline: var(--space-sm);
}

.contact-map__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-ink);
}

.contact-map__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-ink);
}

.contact-map__address {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

/* Framed map embed, cropped to a wide letterbox. */
.contact-map__frame {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 1px solid var(--color-border-stone);
  border-radius: var(--radius-xl);
}

.contact-map__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 810px) {
  .contact-map__container {
    gap: var(--space-lg);
  }
}

@media (max-width: 809px) {
  .contact-map__container {
    gap: var(--space-lg);
    padding-inline: var(--container-gutter);
  }

  .contact-map__header {
    padding-inline: var(--space-2xs);
  }

  .contact-map__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .contact-map__frame {
    aspect-ratio: 4 / 5;
  }
}


/* ###########################################################################
   SECTOR LEDGER — "Sectors Of Conviction" as an editorial index (homepage)
   ########################################################################### */

/* ==========================================================================
   Component — Sector Ledger
   --------------------------------------------------------------------------
   A deep-teal band presenting the four sectors as full-width ledger rows
   (index, serif name, thesis, Learn More). Each row is a single link; on a fine
   pointer an accent panel wipes across the row from the edge the cursor enters
   (the DirectionalList behaviour in js/app.js). With no JS the rows are plain
   links and the wipe simply never runs.
   ========================================================================== */
.sector-ledger {
  padding-block: var(--space-6xl);
  color: var(--color-surface-cream-bright);
  background-color: var(--color-bg-deep);
  --rail-color: var(--color-border-dark); /* keep column rails subtle on the dark band */
}

.sector-ledger__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.sector-ledger__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-inline: var(--space-sm);
}

.sector-ledger__eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-border-sage);
}

.sector-ledger__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-surface-cream-bright);
}

/* --- The ledger: rows divided by hairline rules. --- */
.sector-ledger__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--color-surface-dark-muted);
}

/* One sector row — a four-column grid; the whole row is the link. */
.sector-ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-sm);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  border-bottom: 1px solid var(--color-surface-dark-muted);
}

/* The wipe panel slides in from the cursor's entry edge (driven by JS) behind
   the row text. The cubic-bezier is intrinsic to the slide, not a token. */
.sector-ledger__tile {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-surface-dark-muted);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Row content sits above the wipe panel. */
.sector-ledger__index,
.sector-ledger__name,
.sector-ledger__thesis,
.sector-ledger__cta {
  position: relative;
  z-index: 1;
}

.sector-ledger__index {
  font-family: var(--font-family-body);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-small);
  line-height: 1;
  color: var(--color-border-sage);
}

.sector-ledger__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-surface-cream-bright);
}

.sector-ledger__thesis {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-border-sage);
  text-wrap: balance;
}

.sector-ledger__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-surface-cream-bright);
  white-space: nowrap;
}

/* Arrow with a ghost duplicate that slides in as the first slides out — the same
   glyph motion as the .button and the case-feature pager. */
.sector-ledger__glyphs {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.sector-ledger__arrow {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-slow) var(--easing-standard);
}

/* The ghost waits one step to the left; both slide right on hover. */
.sector-ledger__arrow--ghost {
  position: absolute;
  inset: 0 auto auto -100%;
}

/* On hover the index + thesis brighten to cream and the arrow slides forward as
   its ghost duplicate slides in behind it. */
.sector-ledger__row:hover .sector-ledger__index,
.sector-ledger__row:hover .sector-ledger__thesis {
  color: var(--color-surface-cream-bright);
}

.sector-ledger__row:hover .sector-ledger__arrow {
  transform: translateX(100%);
}

/* ==========================================================================
   Responsive
   Desktop is the base above; tablet then mobile override below (house order).
   ========================================================================== */

/* Tablet (max 1199 / min 810): drop the thesis column to name + Learn More. */
@media (max-width: 1199px) and (min-width: 810px) {
  .sector-ledger__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-md);
  }

  .sector-ledger__thesis {
    display: none;
  }
}

/* Mobile (max 809): each row stacks; the band pulls in to the gutter. */
@media (max-width: 809px) {
  .sector-ledger {
    padding-block: var(--space-2xl);
  }

  .sector-ledger__inner {
    gap: var(--space-xl);
    padding-inline: var(--container-gutter);
  }

  .sector-ledger__header {
    padding-inline: var(--space-2xs);
  }

  .sector-ledger__heading {
    font-size: var(--font-size-h1-mobile);
  }

  .sector-ledger__row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "index name"
      "thesis thesis"
      "cta cta";
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-lg) var(--space-2xs);
  }

  .sector-ledger__index { grid-area: index; }
  .sector-ledger__name { grid-area: name; }
  .sector-ledger__thesis { grid-area: thesis; }
  .sector-ledger__cta { grid-area: cta; justify-self: start; }
}