/* ==========================================================================
   Marble Consulting Group — design system
   Ground: obsidian. Accent: antique gold. Type: Inter, display and body.
   Palette is pulled from the logo file. Do not brighten the gold past #C09C60.
   ========================================================================== */

:root {
  /* Color */
  /* THE GROUND WAS LIFTED off near-black (var(--obsidian), L* 1.7) to warm stone
     (L* 12.0, a 7.5x rise in luminance). The hue is deliberate: the old
     ground was blue-violet (hue 240), almost exactly opposite the gold on
     the wheel. Invisible at near-black; the moment you lift it the ground
     and the accent fight as complements. Pinning the stone to the gold's own
     hue family at a third of its chroma makes the gold read as light falling
     on stone. It is also what dark marble actually is - Nero Marquina and
     Pietra Grey are warm brown-greys; blue-black stone is not a thing.

     --gold AND --vein HAD TO MOVE WITH IT. At the lifted ground the old
     #9c7848 measured 3.42:1 on the brightest pixel and #8a8a8a measured
     4.01:1 - both AA failures on 12px eyebrow text. The values below are
     measured, not chosen: every foreground/background pair on the site was
     computed and all 30 pass AA or better.

     --scrim-rgb is NOT the ground. Photo scrims stay at the old near-black
     because their job is legibility over arbitrary image luminance, not
     colour continuity with the page. Separate token so a find/replace can
     never sweep them up. */
  --obsidian: #17150F;
  --obsidian-raised: #1C1A15;
  --surface: #201D18;
  --surface-2: #23201A;
  --gold-shadow: #8F6D38;
  --gold: #B89158;
  --gold-light: #c09c60;
  --ink: #EAE6DF;
  --vein: #A8A096;
  --white: #ffffff;

  --border-gold: rgba(184, 145, 88, 0.16);
  --border-gold-strong: rgba(184, 145, 88, 0.36);
  --border-neutral: rgba(214, 206, 196, 0.09);
  --gold-wash: rgba(184, 145, 88, 0.05);
  --scrim-rgb: 6 6 8;        /* photo scrims - deliberately NOT the ground */

  --success: #6f9e6f;
  --warning: #c0925c;
  --error: #b06a5a;

  /* Type */
  /* One family, display and body. Inter is a neutral grotesque: it carries a
     lot more optical weight than the Didone it replaced, so display sizes are
     tracked NEGATIVE here rather than positive. Both tokens resolve to the
     same face on purpose - the hierarchy is now weight and size, not contrast
     between a serif and a sans. */
  --font-display: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;      /* 12 — eyebrows, small print */
  --text-sm: 0.875rem;     /* 14 — captions, meta */
  --text-base: 1.0625rem;  /* 17 — body */
  --text-lg: 1.1875rem;    /* 19 — lead body */
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-h2: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --text-h1: clamp(2.625rem, 1.9rem + 3.6vw, 5rem);
  /* Was clamp(2.5rem, 2rem + 2.6vw, 4.25rem) = 68px at full width. In a
     four-up bar that is wider than the column: "Fortune 50" wrapped to two
     lines while its three neighbours stayed on one, which dropped its label
     out of line with the rest of the row. Capped so the longest value fits
     on one line, and the figures read as a bar rather than as a headline. */
  --text-stat: clamp(2rem, 1.7rem + 1.7vw, 3.15rem);

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-4-5: 2.5rem; /* block gap between copy and its CTA/statement */
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section: clamp(1.85rem, 1.5rem + 2.2vw, 3.25rem);
  --section-sm: clamp(1.75rem, 1.4rem + 2.1vw, 3rem);

  /* Shape */
  --radius-sm: 2px;
  --radius-md: 3px;

  /* Layout */
  --container: 80rem;       /* 1280 */
  --container-text: 44rem;  /* comfortable reading width */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
  --dur-fast: 0.25s;

  /* Elevation — restrained; light comes from hairlines, not shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

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

body {
  background: var(--obsidian);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  font-weight: 400;
  /* Inter sets a touch wide at body size by default. */
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--gold);
  color: var(--obsidian);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--gold-light);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

a:hover {
  color: var(--white);
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--obsidian);
}
::-webkit-scrollbar-thumb {
  background: #1c1c22;
  border-radius: 5px;
  border: 2px solid var(--obsidian);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-shadow);
}

/* Visually hidden, available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--obsidian);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) ease;
}

.skip-link:focus-visible {
  top: var(--space-2);
  color: var(--obsidian);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  line-height: 1.06;
  text-wrap: balance;
  font-optical-sizing: auto;
}

/* Tracking is a function of size in a grotesque: the bigger the type, the
   tighter it has to be set or the words fall apart into letters. The old
   Didone wanted +0.005em at every size; Inter wants progressively negative
   values as the type grows. */
h1 { font-size: var(--text-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--text-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.018em; }
h4 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; line-height: 1.4; }

.u-gold { color: var(--gold-light); }
.u-muted { color: var(--vein); }
.u-white { color: var(--white); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--ink);
  max-width: var(--container-text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  flex: none;
}

.eyebrow--bare::before {
  display: none;
}

/* Statement — the large single-line pull quote treatment */
.statement {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--gold-light);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--text {
  max-width: calc(var(--container-text) + 2 * var(--gutter));
}

.section {
  padding-block: var(--section);
  position: relative;
}

.section--sm {
  padding-block: var(--section-sm);
}

.section--raised {
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
  border-top: 1px solid var(--border-neutral);
  border-bottom: 1px solid var(--border-neutral);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.16rem, 1.44rem + 2.88vw, 3.6rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow::before {
  display: none;
}

.section-head h2 + p,
.section-head h1 + p {
  margin-top: var(--space-3);
  color: var(--vein);
  font-size: var(--text-lg);
  line-height: 1.7;
}

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* The 12 tracks have to COLLAPSE on a phone, not just be spanned.
   This block used to only re-span the children to 12 columns and left
   grid-template-columns at repeat(12, 1fr). Eleven inter-column gaps at
   var(--space-4) = 11 x 32px = 352px of gutter alone, which is wider than the
   320px content box of a 360px phone - so every 1fr track computed to 0 and
   the children measured 352px inside a 320px parent. Measured result: FAQ
   answers were sliced mid-word and a third of every accordion +/- icon sat
   off-screen. It affected every page that uses .grid.

   The children must be re-anchored with 1 / -1 as well: `span 12` against a
   one-track template generates 11 IMPLICIT columns and brings the same 352px
   of gaps straight back. */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: 1 / -1; }
}

/* Hairline rules */
.rule-gold {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--gold-shadow) 20%, var(--gold-shadow) 80%, transparent);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Texture — marble grain, kept faint
   -------------------------------------------------------------------------- */

.texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.texture svg {
  width: 100%;
  height: 100%;
}

.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.196 0 0 0 0 0.172 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   THE GROUND — one atmosphere for the whole site

   THE PROBLEM IT SOLVES, measured rather than assumed. Six sections
   (.worlds .wall .lp .rise .hire .rm) each painted their OWN opaque base:
   a 180deg gradient that darkened toward that section's middle and came
   back to obsidian at its edges. Each also placed a warm radial in a
   DIFFERENT corner — 20%/8%, 24%/6%, 72%/16%, 50%/100%, 78%/10%, 82%/6%.
   So scrolling ran through a repeating dark-light-dark pulse with the
   light jumping corner to corner. .section--raised, .marquee and
   .slab--raise ran the same device the other way up, and .forge,
   .proofx, .brandband and .aim__band each repainted the ground flat.
   Measured before this change: 42 visible tone steps down what-we-do and
   62 down careers, with the ground drifting between rgb(11,11,12) and
   rgb(14,14,15). That is the "every section has a different background"
   the client reported, and it was on every page.

   THE FIX IS ARCHITECTURAL, NOT COSMETIC. No section paints a ground any
   more. There is ONE ground, it is FIXED, and the whole site scrolls over
   it: the light never jumps because it never moves. The room stays put
   and the content travels through it, which is also why it reads as one
   continuous space rather than a stack of panels.

   The only movement is a single page-long drift — across the entire
   document the light eases from the upper right toward the centre left.
   One continuous change instead of a dozen jumps: imperceptible frame to
   frame, unmistakable from top to bottom.

   IT IS A REAL ELEMENT RATHER THAN body::before, for one specific reason:
   GSAP has to write --gx/--gy on it. Putting them on <html> would make
   them INHERITED custom properties changing every frame, which
   invalidates inherited-property computation for the whole tree — the
   same site-wide cost that @property inherits:true carries.

   z-index -1 puts it above the body's own background colour and below
   every piece of content, so nothing needs a stacking-context change.
   Grain is NOT repeated here: .grain::after already lays one fixed noise
   field over the whole site.
   -------------------------------------------------------------------------- */

.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* THE STONE IS NOT HERE ANY MORE, AND THAT IS THE WHOLE POINT.
     initGround() in motion.js scrubs --gx/--gy on this element across the
     entire page scroll. When the marble lived here too, every scroll frame
     invalidated a full-viewport fixed layer AND re-ran a soft-light blend
     against a 1600x1600 SVG raster. Measured result: the page could not hold
     a frame budget - a 60-frame scroll loop timed out.

     The marble now sits on body::before, which nothing animates, so it
     rasterises once and is never re-blended. This layer is three gradients
     again and repaints cheaply. */
  background:
    radial-gradient(62% 46% at calc(var(--gx, 78) * 1%) calc(var(--gy, 0) * 1%), rgba(156, 120, 72, 0.060), transparent 66%),
    radial-gradient(78% 54% at calc((100 - var(--gx, 78)) * 1%) 94%, rgba(128, 96, 48, 0.035), transparent 72%),
    radial-gradient(124% 94% at 50% 46%, transparent 34%, rgba(6, 4, 2, 0.42) 100%);
}

/* The stone. Static, fixed, never touched by JavaScript - so the browser
   rasterises the SVG once and composites a cached layer from then on.
   mix-blend-mode rather than background-blend-mode because it is blending
   with the page behind it rather than with its own background-color. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600' viewBox='0 0 1600 1600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0.021' y2='0.115' spreadMethod='repeat'%3E%3Cstop offset='0' stop-color='%23CBBFAE' stop-opacity='0'/%3E%3Cstop offset='0.46' stop-color='%23CBBFAE' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23CBBFAE' stop-opacity='1'/%3E%3Cstop offset='0.54' stop-color='%23CBBFAE' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23CBBFAE' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0.175' y2='0.068' spreadMethod='repeat'%3E%3Cstop offset='0' stop-color='%2317120E' stop-opacity='0'/%3E%3Cstop offset='0.42' stop-color='%2317120E' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%2317120E' stop-opacity='1'/%3E%3Cstop offset='0.58' stop-color='%2317120E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%2317120E' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='fp' x='-35%25' y='-35%25' width='170%25' height='170%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.0039' numOctaves='5' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='300' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3Cfilter id='fs' x='-35%25' y='-35%25' width='170%25' height='170%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0014 0.0026' numOctaves='4' seed='31' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='430' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='3.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1600' height='1600' fill='url(%23p)' filter='url(%23fp)' opacity='0.18'/%3E%3Crect width='1600' height='1600' fill='url(%23s)' filter='url(%23fs)' opacity='0.16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  /* promotes it to its own compositor layer so it is never repainted with
     the content that scrolls over it */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ground { --gx: 70; --gy: 12; }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, backdrop-filter var(--dur-fast) ease;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgb(34 31 27 / 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-neutral);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 5rem;
}

/* Wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--white);
  flex: none;
}

.wordmark:hover { color: var(--white); }

.wordmark__mono {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  /* Brand lockup, set in caps in the markup. Keeps the wide positive tracking
     a wordmark needs - deliberately NOT the negative tracking the headings
     take. Caps at small sizes always want opening up, whatever the face. */
  letter-spacing: 0.14em;
  color: var(--white);
}

.wordmark__sub {
  margin-top: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none;
}

.nav__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  padding-block: 0.5rem;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--white);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link[aria-current="page"]::after {
  background: var(--gold);
}

.nav__cta { flex: none; }

/* At desktop the menu renders inline; its internal CTA is the mobile one — hide it */
@media (min-width: 1021px) {
  .nav__menu .nav__cta {
    display: none;
  }
}

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  z-index: 120;
}

.nav__toggle span {
  display: block;
  width: 1.5rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu overlay */
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

@media (max-width: 1020px) {
  .nav__toggle { display: flex; }

  .nav__menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    justify-content: center;
    padding: var(--gutter);
    background: rgb(34 31 27 / 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .nav__link {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 500;
    color: var(--ink);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }

  .nav__menu.is-open .nav__link {
    opacity: 1;
    transform: none;
  }

  .nav__menu.is-open li:nth-child(1) .nav__link { transition-delay: 0.08s; }
  .nav__menu.is-open li:nth-child(2) .nav__link { transition-delay: 0.14s; }
  .nav__menu.is-open li:nth-child(3) .nav__link { transition-delay: 0.2s; }
  .nav__menu.is-open li:nth-child(4) .nav__link { transition-delay: 0.26s; }
  .nav__menu.is-open li:nth-child(5) .nav__link { transition-delay: 0.32s; }
  .nav__menu.is-open li:nth-child(6) .nav__link { transition-delay: 0.38s; }

  .nav__link::after { bottom: 0.25rem; }

  .nav .nav__cta--desktop { display: none !important; }

  .nav__menu .nav__cta {
    margin-top: var(--space-5);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-out) 0.44s, transform 0.5s var(--ease-out) 0.44s;
  }

  .nav__menu.is-open .nav__cta {
    opacity: 1;
    transform: none;
  }
}

body.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn .btn__arrow {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.3s var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--gold {
  background: var(--gold);
  color: var(--obsidian);
}

.btn--gold:hover {
  background: var(--gold-light);
  color: var(--obsidian);
}

.btn--ghost {
  border-color: rgba(156, 120, 72, 0.6);
  color: var(--gold-light);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--gold-light);
  background: var(--gold-wash);
  color: var(--gold-light);
}

.btn--sm {
  padding: 0.7rem 1.4rem;
  font-size: 0.875rem;
}

/* Text link with slide underline */
.link-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gold-light);
  position: relative;
  padding-bottom: 0.25rem;
}

/* .btn__arrow is only ever SIZED under .btn. Dropped inside .link-line it
   has no width/height at all, so the SVG takes the replaced-element default
   (300x150) and, as a flex item beside a bare text node, eats the row - the
   anonymous text item shrinks to min-content and the label wraps to three
   lines. Size the arrow and refuse the wrap. */
.link-line { white-space: nowrap; }
.link-line .btn__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}
.link-line:hover .btn__arrow { transform: translateX(3px); }

.link-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.35s var(--ease-out), opacity 0.35s ease;
}

.link-line:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-top: 4.06rem;
  padding-bottom: var(--space-7);
  overflow: hidden;
}

.hero--page {
  min-height: 62svh;
  padding-bottom: var(--space-6);
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 78% -6%, rgba(156, 120, 72, 0.11), transparent 65%),
    radial-gradient(40rem 26rem at 8% 108%, rgba(156, 120, 72, 0.05), transparent 60%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 56rem;
}

.hero h1 {
  margin-bottom: var(--space-4);
}

.hero__sub {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--vein);
  max-width: 38rem;
  margin-bottom: var(--space-5);
}

.hero__sub strong {
  color: var(--ink);
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Marble vein backdrop for heroes */
.vein-field {
  position: absolute;
  inset: -10% -5%;
  opacity: 0.5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Stat bar
   -------------------------------------------------------------------------- */

.statbar {
  border-top: 1px solid var(--border-neutral);
  border-bottom: 1px solid var(--border-neutral);
  background: linear-gradient(180deg, rgba(156, 120, 72, 0.035), transparent);
}

.statbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 3rem) var(--space-3);
  text-align: center;
  position: relative;
  /* column + auto-margin on the label pins every label to the same baseline,
     so one value wrapping to two lines can never stagger the row again */
  display: flex;
  flex-direction: column;
}

.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-gold-strong), transparent);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 500;
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.01em;
}

.stat__value .u-gold {
  color: var(--gold-light);
}

.stat__label {
  margin-top: auto;
  padding-top: 0.875rem;
  font-size: var(--text-sm);
  color: var(--vein);
  letter-spacing: 0.04em;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .statbar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--border-neutral);
  }
}

@media (max-width: 480px) {
  .statbar__grid { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .stat + .stat { border-top: 1px solid var(--border-neutral); }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: linear-gradient(160deg, var(--surface), var(--obsidian-raised));
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  box-shadow: var(--shadow-card);
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out);
}

.card:hover {
  border-color: var(--border-gold-strong);
}

/* Lift is reserved for cards that are actually links */
a.card:hover,
.card--link:hover {
  transform: translateY(-4px);
}

.card__kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--vein);
  font-size: 1rem;
  line-height: 1.7;
}

.card p strong {
  color: var(--ink);
  font-weight: 500;
}




/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-neutral);
}

.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 1px;
  background: var(--gold);
  transition: width 0.5s var(--ease-out);
}

.step:hover::before {
  width: 100%;
}

.step__num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem);
  font-weight: 400;
  line-height: 1;
  color: rgba(192, 156, 96, 0.3);
  -webkit-text-stroke: 1px var(--gold-shadow);
  margin-bottom: var(--space-3);
}

.step--accent .step__num {
  color: var(--gold-light);
  -webkit-text-stroke: 0;
}

.step h3 {
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.625rem;
  line-height: 1.35;
}

.step p {
  color: var(--vein);
  font-size: 1rem;
}

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

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Split feature — image/panel + copy
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  align-items: center;
}

.split__media {
  grid-column: span 5;
}

.split__body {
  grid-column: span 7;
}

.split--flip .split__media { order: 2; }
.split--flip .split__body { order: 1; }

@media (max-width: 900px) {
  .split__media,
  .split__body {
    grid-column: span 12;
    order: initial;
  }
}

/* Marble panel — a crafted stand-in for photography.
   Replace with real photography per the shot list when it exists. */
.marble-panel {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface) 0%, var(--obsidian-raised) 55%, #0b0a0d 100%);
}

.marble-panel--wide {
  aspect-ratio: 16 / 10;
}

.marble-panel svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.marble-panel__frame {
  position: absolute;
  inset: 1rem;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.marble-panel__caption {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
}

.marble-panel__caption .eyebrow {
  margin-bottom: 0.75rem;
}

.marble-panel__caption p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  color: var(--white);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Quote band
   -------------------------------------------------------------------------- */

.quoteband {
  text-align: center;
  padding-block: var(--section-sm);
}

.quoteband blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  font-weight: 500;
  font-style: italic;
  color: var(--white);
  line-height: 1.3;
  max-width: 52rem;
  margin-inline: auto;
  text-wrap: balance;
}

.quoteband cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--border-neutral);
}

.accordion__item {
  border-bottom: 1px solid var(--border-neutral);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 1.75rem 0;
  text-align: left;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--white);
  transition: color var(--dur-fast) ease;
}

.accordion__trigger:hover {
  color: var(--gold-light);
}

.accordion__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  transition: transform 0.4s var(--ease-out), border-color 0.3s ease, background 0.3s ease;
}

.accordion__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  border-color: var(--gold);
  background: var(--gold-wash);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}

/* JS sets [hidden] on fully-collapsed panels so closed answers leave the
   accessibility tree; this must beat the display:grid above */
.accordion__panel[hidden] {
  display: none;
}

/* Triggers may be wrapped in an h3 for screen-reader navigation */
.accordion__heading {
  margin: 0;
  font: inherit;
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__content {
  padding-bottom: 1.75rem;
  color: var(--vein);
  max-width: 44rem;
}

.accordion__content p + p {
  margin-top: var(--space-2);
}

.accordion__content strong {
  color: var(--ink);
  font-weight: 500;
}

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

.cta-band {
  position: relative;
  text-align: center;
  padding-block: var(--section);
  border-top: 1px solid var(--border-neutral);
  overflow: hidden;
}

.cta-band__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46rem 24rem at 50% 120%, rgba(156, 120, 72, 0.12), transparent 70%);
}

.cta-band h2 {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

.cta-band p {
  color: var(--vein);
  font-size: var(--text-lg);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.cta-band .hero__actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Page-specific helpers
   -------------------------------------------------------------------------- */

/* Ladder (careers) */
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--obsidian-raised);
}

.ladder__rung {
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  border-left: 1px solid var(--border-neutral);
  position: relative;
  transition: background 0.3s ease;
}

.ladder__rung:first-child {
  border-left: none;
}

.ladder__rung:hover {
  background: var(--gold-wash);
}

.ladder__stage {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.875rem;
}

.ladder__rung h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.625rem;
}

.ladder__rung p {
  color: var(--vein);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr 1fr; }
  .ladder__rung:nth-child(3),
  .ladder__rung:nth-child(4) {
    border-top: 1px solid var(--border-neutral);
  }
  .ladder__rung:nth-child(3) { border-left: none; }
}

@media (max-width: 560px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder__rung { border-left: none; }
  .ladder__rung + .ladder__rung { border-top: 1px solid var(--border-neutral); }
}

/* Values */
.values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .values { grid-template-columns: 1fr; }
}

.value {
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-neutral);
  position: relative;
}

.value::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
}

.value h3 {
  margin-bottom: 0.625rem;
}

.value p {
  color: var(--vein);
  font-size: 1rem;
  max-width: 30rem;
}

/* Legal layout (privacy) */
.legal {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: clamp(1.8rem, 1.44rem + 2.16vw, 3.6rem);
  align-items: start;
}

.legal__nav {
  position: sticky;
  top: 7rem;
}

.legal__nav-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.legal__nav ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-neutral);
}

.legal__nav a {
  display: block;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--vein);
  border-left: 1px solid transparent;
  margin-left: -1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.legal__nav a:hover {
  color: var(--ink);
}

.legal__nav a.is-active {
  color: var(--gold-light);
  border-left-color: var(--gold);
}

.legal__body {
  max-width: var(--container-text);
}

.legal__body section + section {
  margin-top: var(--space-6);
}

.legal__body h2 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
  scroll-margin-top: 4.06rem;
}

.legal__body p,
.legal__body li {
  color: var(--vein);
  line-height: 1.8;
}

.legal__body p + p {
  margin-top: var(--space-2);
}

.legal__body ul {
  margin-top: var(--space-2);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal__body ul li::marker {
  color: var(--gold);
}

.legal__body strong {
  color: var(--ink);
  font-weight: 500;
}

.legal__updated {
  font-size: var(--text-sm);
  color: var(--vein);
  letter-spacing: 0.06em;
}

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
  .legal__nav { position: static; }
  .legal__nav ol { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1rem; border-left: none; }
  .legal__nav a { border-left: none; padding: 0.25rem 0; }
}

/* Case study document card (results) */
.dossier {
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, var(--surface), var(--obsidian-raised));
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  box-shadow: var(--shadow-card);
  position: relative;
}

.dossier__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-neutral);
}

.dossier__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.dossier__section + .dossier__section {
  margin-top: var(--space-4);
}

.dossier__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vein);
  margin-bottom: 0.625rem;
}

.dossier__result {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  color: var(--gold-light);
  line-height: 1.1;
}

.dossier p {
  color: var(--vein);
}

/* Badge / tag */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: var(--gold-wash);
}

.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-light);
}

/* Two-column checklist (what we don't do, the job, etc.) */
.plain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.plain-list li {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border-neutral);
  display: flex;
  gap: 1rem;
  align-items: baseline;
  color: var(--ink);
  font-size: var(--text-base);
}

.plain-list li::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 1px;
  background: var(--gold);
  transform: translateY(-0.3em);
}

.plain-list--muted li {
  color: var(--vein);
}

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--left {
  transform: translateX(-28px);
}

.reveal--left.is-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal--left {
    opacity: 1;
    transform: none;
    transition: none;
  }

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

/* ==========================================================================
   ELEVATION LAYER — logo, preloader, cursor, motion, brand moments
   Appended July 2026. Everything below is progressive enhancement and is
   gated on JS + prefers-reduced-motion. The site is fully usable without it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Logo mark (real monogram, replaces the placeholder SVG)
   -------------------------------------------------------------------------- */

.wordmark__mono {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(156, 120, 72, 0.28));
  transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}

.wordmark:hover .wordmark__mono {
  transform: translateY(-1px) rotate(-2deg) scale(1.04);
  filter: drop-shadow(0 4px 16px rgba(192, 156, 96, 0.42));
}

/* --------------------------------------------------------------------------
   Preloader — obsidian curtain, monogram + wordmark + hairline meter.
   Only shown when JS adds .is-loading to <html>, so no-JS never gets stuck.
   -------------------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--obsidian);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.is-loading .preloader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(38rem 22rem at 50% 42%, rgba(156, 120, 72, 0.10), transparent 68%);
  pointer-events: none;
}

.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.preloader__mark {
  width: clamp(4rem, 3rem + 5vw, 6rem);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  filter: drop-shadow(0 6px 26px rgba(156, 120, 72, 0.35));
}

.preloader__word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink);
  opacity: 0;
}

.preloader__bar {
  position: relative;
  width: clamp(9rem, 22vw, 14rem);
  height: 1px;
  background: var(--border-gold);
  overflow: hidden;
}

.preloader__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-shadow), var(--gold-light));
}

.preloader__count {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  color: rgba(192, 156, 96, 0.22);
  -webkit-text-stroke: 1px var(--gold-shadow);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Content lift-in after the curtain clears (set by JS on <main>) */
html.is-loading main,
html.is-loading .nav {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Custom cursor — dot + ring. Desktop/fine-pointer only, added by JS.
   -------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  pointer-events: none;
  display: none;
  mix-blend-mode: screen;
}

html.has-cursor .cursor { display: block; }
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .btn,
html.has-cursor [data-magnetic] { cursor: none; }
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: auto; }

.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--gold-light);
}

.cursor__ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(192, 156, 96, 0.55);
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out),
    background 0.28s ease, border-color 0.28s ease, opacity 0.28s ease;
}

html.cursor-hover .cursor__ring {
  width: 58px;
  height: 58px;
  background: rgba(156, 120, 72, 0.10);
  border-color: rgba(192, 156, 96, 0.85);
}

html.cursor-down .cursor__ring {
  width: 26px;
  height: 26px;
}

/* --------------------------------------------------------------------------
   Scroll progress — hairline gold meter across the very top.
   -------------------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 101;
  pointer-events: none;
  background: transparent;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-shadow), var(--gold-light));
  box-shadow: 0 0 12px rgba(192, 156, 96, 0.5);
}

/* --------------------------------------------------------------------------
   Motion utilities — layered on top of the IO .reveal baseline.
   These only take effect once JS marks <html class="anim-ready">.
   -------------------------------------------------------------------------- */

/* Line-mask reveal for hero headline (JS wraps each line) */
.line-mask {
  display: block;
  overflow: hidden;
  /* Ink room. motion.js wraps each h1 line in this mask and slides the inner
     span up from yPercent:115, so the mask MUST clip vertically. But a display
     face's ink box sits below its line box - measured at 0.17em for the italic
     on the hero - and 0.04em of padding was clipping the tail off every
     italic line on the site. The padding opens the mask; the negative margin
     hands the space straight back to the layout, so line rhythm is unchanged
     and only the clipping edge moves. Both are in em, so this holds at any
     size and for any face we swap in. */
  padding-bottom: 0.22em;
  margin-bottom: -0.18em;
}

.line-mask__inner {
  display: block;
}
/* The masked start position is set by GSAP (yPercent) — never in CSS, or the
   two transforms compound and the line never fully clears the mask. */

/* Blur/rise reveal, driven by ScrollTrigger */
.anim-ready [data-anim] {
  opacity: 0;
  will-change: opacity, transform, filter;
}

/* Hide the JS-driven hero pieces until the intro plays */
.anim-ready .hero__actions[data-hero],
.anim-ready .hero__sub[data-hero],
.anim-ready .eyebrow[data-hero] {
  opacity: 0;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 3vw, 2.75rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vein);
}

.scroll-cue__rail {
  position: relative;
  display: block;
  width: 1px;
  height: 3.25rem;
  background: var(--border-gold-strong);
  overflow: hidden;
}

.scroll-cue__rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--gold-light));
  animation: cue-run 2.4s var(--ease-out) infinite;
}

@keyframes cue-run {
  0% { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(350%); opacity: 0; }
}

/* Ghost monogram watermark in the hero */
.hero__ghost {
  position: absolute;
  top: 50%;
  right: clamp(-6rem, -2vw, -2rem);
  width: clamp(24rem, 42vw, 46rem);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  filter: saturate(0.6);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 80%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 80%);
}

/* --------------------------------------------------------------------------
   Marble panel — parallax + gold sheen sweep on hover
   -------------------------------------------------------------------------- */

.marble-panel__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(192, 156, 96, 0.14) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out);
}

.split__media:hover .marble-panel__sheen,
.marble-panel:hover .marble-panel__sheen,
.brandband__figure:hover .marble-panel__sheen {
  transform: translateX(120%);
}

/* Process progress line — fills as the "how it works" section scrolls */
.steps__progress {
  height: 1px;
  width: 100%;
  margin-bottom: var(--space-5);
  background: var(--border-neutral);
  overflow: hidden;
}

.steps__progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-shadow), var(--gold-light));
}

/* --------------------------------------------------------------------------
   Brand band — full-width brand moment using the real lockup
   -------------------------------------------------------------------------- */

.brandband {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-neutral);
  border-bottom: 1px solid var(--border-neutral);
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}

.brandband__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  padding-block: clamp(2.32rem, 1.74rem + 2.9vw, 4.64rem);
}

.brandband__figure {
  position: relative;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--obsidian-raised);
  box-shadow: var(--shadow-card);
}

.brandband__figure img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}

.brandband__figure:hover img {
  transform: scale(1.05);
}

.brandband__figure .marble-panel__sheen { z-index: 4; }

.brandband__statement {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.85rem);
  font-weight: 500;
  line-height: 1.22;
  color: var(--white);
  text-wrap: balance;
}

.brandband__statement em {
  font-style: italic;
  color: var(--gold-light);
}

.brandband__sub {
  margin-top: var(--space-3);
  color: var(--vein);
  font-size: var(--text-lg);
  max-width: 34rem;
}

@media (max-width: 860px) {
  .brandband__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .brandband__figure { order: 2; }
}

/* --------------------------------------------------------------------------
   Card glow — a soft gold light that follows the pointer on hover
   -------------------------------------------------------------------------- */

.card,
.dossier {
  --mx: 50%;
  --my: 0%;
}

.card::after,
.dossier::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(18rem 18rem at var(--mx) var(--my), rgba(156, 120, 72, 0.14), transparent 60%);
}

.card:hover::after,
.dossier:hover::after {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Magnetic wrapper
   -------------------------------------------------------------------------- */

[data-magnetic] {
  display: inline-flex;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Reduced motion — neutralise every JS-driven effect
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  html.is-loading, html.is-loading body { overflow: auto; }
  html.is-loading main, html.is-loading .nav { opacity: 1; }
  .cursor { display: none !important; }
  .scroll-cue__rail::after { animation: none; }
  .hero__ghost { opacity: 0.04; }
  .anim-ready .line-mask__inner,
  .anim-ready [data-anim],
  .anim-ready .hero__actions[data-hero],
  .anim-ready .hero__sub[data-hero],
  .anim-ready .eyebrow[data-hero] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #111; }
  .nav, .footer, .cta-band, .grain::after,
  .preloader, .cursor, .scroll-progress, .scroll-cue, .hero__ghost { display: none; }
}