/* ==========================================================================
   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);

  /* THE BAR'S HEIGHT, AND THE ONE PLACE IT IS WRITTEN. 73.6px at 360 up to
     85.6px at 1920. `.nav` is fixed, so anything that must not sit under it
     - every hero's top padding, every anchor landing - has to be measured
     from this and not from a constant. Five hero variants each carried their
     own hand-tuned rem value for "the height of the bar, about", every one
     of them SHORTER than the bar at every width, and three live pages put
     their first line of type underneath it as a result. A number that has to
     agree with another number in six files will not stay agreeing. */
  --nav-h: clamp(4.6rem, 4rem + 1.4vw, 5.35rem);

  /* 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%;
  /* a tap on a phone is answered in the house gold, not the browser's grey
     flash - which on this ground read as a smudge across whatever was hit */
  -webkit-tap-highlight-color: rgb(184 145 88 / 0.16);
}

/* Lenis smooth scroll (motion.js adds these classes to <html>).
   Without them native smooth-scroll fights Lenis on anchor jumps, the page
   keeps scrolling behind an open menu, and an embedded frame grabs the
   wheel mid-scroll so the page "sticks". */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

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;
}

/* A NUMBERED LABEL IS A SHORT SENTENCE ("How it works / 04"). As a flex row
   its words and its number are two flex items, so on a phone a long label
   split into two columns with the number stranded at the right edge. Below
   tablet width it is set as one run of text instead: the words wrap as words,
   the number follows them, and the gold rule hangs in the margin beside the
   first line. Wider screens keep the flex row exactly as it was. */
@media (max-width: 760px) {
  .eyebrow:has(.snum) {
    display: inline-block;
    position: relative;
    padding-left: 2.875rem;
  }
  .eyebrow--bare:has(.snum) { padding-left: 0; }
  .eyebrow:has(.snum)::before {
    position: absolute;
    left: 0;
    /* the middle of the first line: the 14px number sets that line at ~24px */
    top: calc(1em - 0.5px);
  }
  .eyebrow:has(.snum) .snum {
    margin-left: 0.5rem;
    white-space: nowrap;
  }
}

/* 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.

     AND NEITHER ARE THE TWO WARM WASHES, WHICH IS THE SECOND HALF OF THE
     SAME FIX AND WAS MISSED THE FIRST TIME. Taking the marble off this
     element removed the BLEND from the per-frame cost but left the PAINT:
     --gx and --gy were still the position arguments of two radial gradients
     on a fixed box at inset:0, so every scroll frame re-rasterised three
     gradients across the whole viewport - 1,287,000px at 1430x900, measured
     on the home page. A gradient is computed per pixel, so that is the most
     expensive thing on the site and it ran on all twelve pages, which is
     exactly the shape of the report: the scroll is heavy EVERYWHERE, not in
     one section.

     It also poisoned everything above it. .nav__inner is a fixed full-width
     backdrop-filter, and a backdrop-filter has to re-sample and re-blur
     whenever its backdrop changes - so a full-viewport layer repainting
     every frame forced a full-width blur every frame as well.

     THE WASHES NOW MOVE ON `translate` INSTEAD OF BEING REDRAWN AT A NEW
     POSITION. Same two gradients, same travel, same look; each one is
     painted ONCE into its own promoted layer and after that the scrub only
     moves a layer, which is compositor work and costs nothing per frame.
     Only the vignette is left here, and nothing animates it, so this box
     rasterises once too. */
  background:
    radial-gradient(124% 94% at 50% 46%, transparent 34%, rgba(6, 4, 2, 0.42) 100%);
  /* the two washes are oversized on purpose; this keeps them off the document */
  overflow: hidden;
}

/* THE TWO WASHES. 130% of the viewport in both axes, which is the number the
   travel actually needs: each wash's own extent is at most 112% of the
   viewport wide once its transparent stop is accounted for, and the box moves
   WITH it, so 130% cannot show an edge at either end of the pass. Bigger
   would only buy compositor memory nobody sees - two layers at 130% is about
   17MB at 1430x900, against a 1.3M-pixel gradient repaint every frame.

   ::before is the SECOND gradient and ::after the first, so that the paint
   order stays exactly what it was when all three lived in one box: wash one
   over wash two over the vignette. At 6% and 3.5% alpha the swap would not
   have been visible, but there is no reason to spend the difference.

   THE TRANSLATE IS THE OLD `at X% Y%` ARITHMETIC, MOVED. Each gradient is now
   centred in its own box - which is the centre of the viewport - so putting
   its centre back at (gx%, gy%) is a displacement of (gx - 50, gy - 50) of
   the viewport. vw/vh rather than percentages of the box itself: percentages
   here would resolve against the 130% and silently break if that number ever
   changed. vw counts the scrollbar and the box does not, which is a 0.7%
   difference on a 6%-alpha wash with a 66% transparent stop - unmeasurable,
   and worth it for arithmetic the next person can read. */
.ground::before,
.ground::after {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  /* the one honest use of this property: an element that really is animated
     for the entire length of the page, on transform, and nothing else. */
  will-change: transform;
}

.ground::before {
  background: radial-gradient(60% 41.5% at 50% 50%, rgba(128, 96, 48, 0.035), transparent 72%);
  translate: calc((50 - var(--gx, 78)) * 1vw) 44vh;
}

.ground::after {
  background: radial-gradient(47.7% 35.4% at 50% 50%, rgba(156, 120, 72, 0.060), transparent 66%);
  translate: calc((var(--gx, 78) - 50) * 1vw) calc((var(--gy, 0) - 50) * 1vh);
}

/* 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: var(--nav-h);
}

/* Wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 44px; /* the home link is a thumb target; the mark alone is 40px */
  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;
  /* "What we do" broke onto two lines between 1021px and ~1095px */
  white-space: nowrap;
}

@media (min-width: 1021px) and (max-width: 1140px) {
  .nav__links { gap: 1rem; }
}

.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;
  /* never the item that gives way: at 320px the bar is short and, as the
     only shrinkable item in the row, the menu button was squeezed */
  flex: none;
  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; }
  /* two items in the bar now (the menu is an overlay): space-between sets
     them apart, the gap is only the floor between them on a 320px phone */
  .nav__inner { gap: var(--space-2); }

  .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;
}

.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
   -------------------------------------------------------------------------- */

/* THE FLOOR UNDER EVERY HERO. The second term is not a composition value,
   it is a guarantee: the nav is fixed, so the first line of type in any hero
   has to start below it no matter how tall the hero's content grows or how
   short the viewport gets. 4.06rem (65px) was standing in for the bar and is
   under it at every width (73.6-85.6px) - it only ever looked right because
   `justify-content: center` centred the content and left slack. The moment a
   hero's content fills its own min-height the centring gives nothing and the
   type lands at the padding edge, underneath the glass.

   max() keeps each hero's OWN top value wherever that value is already
   generous - services, careers, about and the role pages are untouched by
   this - and raises only the ones that were below the bar. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-top: max(4.06rem, calc(var(--nav-h) + 1rem));
  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;
}




/* --------------------------------------------------------------------------
   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);
  /* no border-top: a full-width rule here cut the page in two right under
     the FAQ, whose own last row already draws a line 60px above it. The
     band is set off by its space and its glow, like every other section. */
  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; }
}

/* 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; }
  /* stacked as a wrapped row on a phone, each entry is a thumb target: the
     44px comes from the link's own padding, so the row gap is no longer needed */
  .legal__nav ol { flex-direction: row; flex-wrap: wrap; gap: 0 1rem; border-left: none; }
  .legal__nav a { border-left: none; padding: 0.6rem 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
   -------------------------------------------------------------------------- */

/* NO will-change HERE, AND IT WAS DELIBERATELY TAKEN OFF.

   `will-change: opacity, transform` on this rule promoted EVERY .reveal
   element on the page to its own compositor layer, and kept it there for the
   whole session: before it had arrived, while it arrived, and for ever after.
   Measured on the home page: 36 .reveal elements, none of them visible yet,
   all 36 already holding a layer - and .reveal is the site-wide baseline, so
   that is every page. Compositor memory is not free and a browser that is
   juggling dozens of layers stalls exactly where this site was reported
   heavy: during the scroll.

   The hint buys one thing - the promotion happening a frame before the
   transition starts rather than on its first frame. A browser promotes an
   opacity/transform transition on its own anyway, so the cost of dropping it
   is at most a single frame at the start of each reveal, once. */
.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);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  /* drop the layer hint once revealed: the running transition is promoted
     automatically, and dozens of permanently composited blocks cost every
     scroll frame on the GPU */
  will-change: auto;
}

.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%);
  /* transform ONLY. width and height cannot be composited - naming them here
     told the browser to keep this element permanently ready for LAYOUT, which
     is the opposite of what the hint is for, and it held that state for the
     whole session on every page. The hover and press states below do resize
     the ring, but that is a 58px box on a pointer event, not per frame. */
  will-change: transform;
}

.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%);
}

/* --------------------------------------------------------------------------
   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; }
}