/* ==== tokens.fonts.css ==== */
/* Awesome Serif (Fort Foundry) — brand-supplied.
   Two optical sets: "Awesome Serif Tall" for upright display, "Awesome Serif" for the
   italic headline voice and running serif text.
   TODO before launch: subset + convert these .otf files to .woff2. */
@font-face{font-family:"Awesome Serif Tall";src:url("/assets/fonts/AwesomeSerif-LightTall.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif Tall";src:url("/assets/fonts/AwesomeSerif-Tall.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif Tall";src:url("/assets/fonts/AwesomeSerif-MediumTall.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif Tall";src:url("/assets/fonts/AwesomeSerif-SemiBoldTall.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif Tall";src:url("/assets/fonts/AwesomeSerif-BoldTall.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerif-LightRegular.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerif-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerif-MediumRegular.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerif-SemiBoldRegular.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerif-BoldRegular.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* The site's headline voice is italic 300. Only italic 400 and 500 cuts were supplied, so
   weight 300 is mapped onto the lightest supplied italic rather than being synthesised. */
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerifItalic-Regular.otf") format("opentype");font-weight:300 400;font-style:italic;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/assets/fonts/AwesomeSerifItalic-MedRegular.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}

/* Elephant — heavy display serif. Registered, unused on these pages. */
@font-face{font-family:"Elephant";src:url("/assets/fonts/Elephant.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* Helvetica Neue / Helvetica arrived as TrueType collections (.ttc), which browsers do not
   parse reliably, so they are NOT served as webfonts. --font-sans resolves the local system
   face instead — the same design on macOS/iOS, Arial elsewhere.
   TODO before launch: obtain single-face WOFF2 cuts or an approved alternative. */

/* ==== tokens.colors.css ==== */
:root{
  /* ——— Base ramps ——— */
  /* Ink: warm near-black, sampled from the film imagery (never pure #000) */
  --ink-900:#17150F; --ink-800:#221F18; --ink-700:#2E2A22; --ink-600:#463F33;
  --ink-500:#6B6154; --ink-400:#8C8275; --ink-300:#B4AA9B;
  /* Paper: cream ramp */
  --paper-000:#FFFFFF; --paper-050:#FCF9F3; --paper-100:#F3EDE2; --paper-200:#EAE1D1;
  --paper-300:#DCD0BB; --paper-400:#C9B294;
  /* Gold — the brand accent (wordmark, rules, small marks) */
  --gold-700:#7C6116; --gold-600:#9A7B1E; --gold-500:#C9A227; --gold-400:#E0C040; --gold-200:#F0DFA4;
  /* Navy — Kodachrome sky */
  --navy-900:#132639; --navy-700:#1F3C5E; --navy-500:#31597F; --navy-300:#7E9AB5;
  /* Terracotta — corner-office wall */
  --clay-800:#5E2A1A; --clay-600:#8A3F24; --clay-500:#A8512F; --clay-300:#D39A7C;
  /* Sage — night-interior cabinetry */
  --sage-700:#3B463C; --sage-500:#5E6B5A; --sage-300:#9AA396;

  /* ——— Semantic: surfaces ——— */
  --surface-page:var(--paper-100);
  --surface-card:var(--paper-050);
  --surface-raised:var(--paper-000);
  --surface-sunken:var(--paper-200);
  --surface-ink:var(--ink-900);
  --surface-navy:var(--navy-700);
  --surface-clay:var(--clay-600);
  --surface-gold:var(--gold-500);

  /* ——— Semantic: text ——— */
  --text-display:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-inverse:var(--paper-100);
  --text-inverse-muted:var(--paper-400);
  --text-accent:var(--gold-600);      /* gold that passes on cream */
  --text-accent-inverse:var(--gold-400); /* gold on ink */
  --text-link:var(--clay-600);
  --text-link-hover:var(--ink-900);

  /* ——— Semantic: lines ——— */
  --line-hairline:rgba(23,21,15,.14);
  --line-strong:rgba(23,21,15,.28);
  --line-inverse:rgba(243,237,226,.22);
  --line-gold:var(--gold-500);

  /* ——— Semantic: status ——— */
  --status-positive:#4A6B3F; --status-positive-bg:#E7EDE0;
  --status-caution:var(--gold-600); --status-caution-bg:#F7EEC9;
  --status-critical:var(--clay-600); --status-critical-bg:#F5E2D8;
  --status-info:var(--navy-700); --status-info-bg:#E2E8EF;

  /* ——— Focus ——— */
  --focus-ring:var(--gold-500);
}

/* ==== tokens.typography.css ==== */
:root{
  --font-display:"Awesome Serif Tall","Awesome Serif",Georgia,serif;
  --font-serif:"Awesome Serif",Georgia,serif;
  --font-sans:"Helvetica Neue LH","Helvetica LH","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Heavy supplied display serif — poster headlines, single-word statements. */
  --font-display-heavy:"Elephant",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* Display scale — editorial, set tight */
  --text-hero:clamp(3rem,7vw,6.5rem);
  --text-d1:4rem; --text-d2:3rem; --text-d3:2.25rem; --text-d4:1.75rem;
  /* Body scale */
  --text-lead:1.3125rem; --text-lg:1.125rem; --text-base:1rem; --text-sm:.9375rem; --text-xs:.8125rem;
  /* Eyebrow / label */
  --text-eyebrow:.75rem;

  --leading-display:0.96;
  --leading-tight:1.14;
  --leading-snug:1.35;
  --leading-body:1.6;
  --leading-loose:1.75;

  --tracking-display:-0.02em;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-eyebrow:0.16em;

  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --measure-narrow:44ch; --measure-body:64ch; --measure-wide:78ch;
}

/* ==== tokens.spacing.css ==== */
:root{
  /* 4px base, editorial jumps at the top end */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:80px; --space-10:120px; --space-11:160px;
  --section-y:clamp(72px,9vw,160px); /* @kind spacing */
  --gutter:clamp(20px,5vw,64px); /* @kind spacing */
  --container:1240px; --container-narrow:820px;

  --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --border-hairline:1px; --border-strong:2px;
}

/* ==== tokens.elevation.css ==== */
:root{
  /* Warm-tinted shadows — never neutral grey */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(23,21,15,.06);
  --shadow-sm:0 2px 8px rgba(23,21,15,.07);
  --shadow-md:0 10px 28px -12px rgba(23,21,15,.18);
  --shadow-lg:0 28px 60px -24px rgba(23,21,15,.30);
  --shadow-inset-hairline:inset 0 0 0 1px var(--line-hairline);
  /* Protection gradient for type over photography */
  --scrim-bottom:linear-gradient(to top,rgba(23,21,15,.82) 0%,rgba(23,21,15,.45) 38%,rgba(23,21,15,0) 78%); /* @kind other */
  --scrim-left:linear-gradient(to right,rgba(23,21,15,.80) 0%,rgba(23,21,15,.30) 52%,rgba(23,21,15,0) 100%); /* @kind other */
  --scrim-flat:rgba(23,21,15,.42); /* @kind other */
}

/* ==== tokens.motion.css ==== */
:root{
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */ 
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */ 
  --ease-in-out:cubic-bezier(.65,.05,.36,1); /* @kind other */ 
  --dur-fast:120ms; /* @kind other */ --dur-base:220ms; /* @kind other */ --dur-slow:420ms; /* @kind other */ --dur-reveal:720ms; /* @kind other */  
}

/* ==== base.css ==== */
/* ===========================================================================
   Liberty Horizons — dark site foundations
   The token files above define the brand's cream-ground semantics. This layer
   re-points the semantic surfaces at ink and defines, once, the alpha values
   the dark site repeats on every page.
   ========================================================================= */
:root{
  --surface-page:var(--ink-900);

  /* Glass — the dark site's card / nav material */
  --glass-fill:rgba(255,255,255,.04);
  --glass-fill-photo:rgba(255,255,255,.05);
  --glass-border:rgba(255,255,255,.13);
  --glass-border-photo:rgba(255,255,255,.14);
  --glass-border-badge:rgba(255,255,255,.16);
  --glass-inner:inset 0 1px 1px rgba(255,255,255,.10);
  --glass-inner-photo:inset 0 1px 1px rgba(255,255,255,.12);
  --glass-inner-button:inset 0 1px 1px rgba(255,255,255,.18);
  --glass-blur:blur(16px);

  /* Buttons */
  --button-fill:rgba(255,255,255,.06);
  --button-fill-hover:rgba(255,255,255,.13);
  --button-border:rgba(255,255,255,.2);
  --button-blur:blur(50px);

  /* Lines + text on ink */
  --rule:rgba(255,255,255,.12);
  --on-ink-strong:#FCF9F3;
  --on-ink:#F3EDE2;
  --on-ink-86:rgba(243,237,226,.86);
  --on-ink-78:rgba(243,237,226,.78);
  --on-ink-72:rgba(243,237,226,.72);
  --on-ink-65:rgba(243,237,226,.65);
  --on-ink-62:rgba(243,237,226,.62);
  --on-ink-60:rgba(243,237,226,.60);
  --on-ink-55:rgba(243,237,226,.55);
  --on-ink-50:rgba(243,237,226,.50);
  --on-ink-45:rgba(243,237,226,.45);
  --on-ink-40:rgba(243,237,226,.40);

  /* Nav */
  --nav-fill:rgba(0,0,0,.07);
  --nav-blur:blur(20px);
  --nav-height:80px;

  --gutter-page:32px;

  /* ---- Headline tracking -------------------------------------------------
     The handoff's -.03em/-.04em were drawn for display sizes. Applied flat
     across a clamp() that bottoms out near 30px, they crowd this italic serif
     badly - its slanted, light-weight forms have little side bearing to give
     up. These are looser, and the breakpoints below ease them further toward
     zero as the type gets smaller, which is the brand's own rule: tighter as
     size increases. */
  --track-hero:-.016em;
  --track-h1:-.014em;
  --track-h2:-.008em;
  --track-h2-minor:-.006em;
  --track-h3:-.004em;
  --track-statement:-.008em;
  --track-card:-.004em;
  --track-h4:.006em;

  /* ---- Headline leading --------------------------------------------------
     This face measures 1.375em from ascender to descender. The handoff's
     .84-.96 put the line box well inside the glyphs themselves, so descenders
     ran into the caps below and multi-line headlines read as a solid block.
     Display type can still sit under the natural ratio, because few lines pair
     a full descender with a full ascender - but not that far under. */
  --lead-hero:.98;
  --lead-h1:1;
  --lead-h2:1.04;
  --lead-h2-minor:1.06;
  --lead-h3:1.08;
  --lead-statement:1.04;
  --lead-card:1.1;
  --lead-h4:1.18;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:112px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--on-ink);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}

img,video{max-width:100%}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul{margin:0;padding:0}

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

::selection{background:rgba(201,162,39,.35);color:var(--on-ink-strong)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}

.skip-link{
  position:absolute;left:16px;top:-64px;z-index:100;
  padding:12px 20px;border-radius:var(--radius-pill);
  background:var(--paper-100);color:var(--ink-900);
  font-size:14px;font-weight:600;
  transition:top var(--dur-base) var(--ease-standard);
}
.skip-link:focus{top:16px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

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

.container{max-width:var(--container);margin:0 auto;width:100%}

.section{background:var(--ink-900);padding:0 var(--gutter-page) 120px}
.section--last{padding-bottom:140px}
.section--gap-top{padding-top:40px}
.section--flow > .container{display:flex;flex-direction:column;gap:48px}

.section-head{display:flex;flex-direction:column;gap:14px}
.section-head__row{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;
}

/* ---------- Type roles ------------------------------------------------ */

/* The headline formula — italic Awesome Serif 300, used for every headline. */
/* Headlines are upright. The prototype set every one in the italic cut, which
   is handsome in isolation and hard work over a whole page - a slanted,
   light-weight serif gives the eye very little to hold onto at a glance.
   Italic is now emphasis: see the `em` rule below. The upright Tall optical
   set is what BRAND.md nominates for headlines anyway. */
.h1,.h1--hero,
.h2,.h2--minor,
.h3,.h3--card,.h3--statement,
.stat__num,.about-statement{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:300;
  color:var(--on-ink-strong);
}

/* Smaller serif needs more weight than the display sizes do. */
.h4,.h4--wide,
.numeral-chip,.serif-row,
.team__name,.role__title,.faq__group-num{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:400;
  color:var(--on-ink-strong);
}

/* A quotation is the one place the italic still belongs by convention. */
.testimonial__quote{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--on-ink-strong);
}

/* Emphasis inside a headline: the real italic cut, one or two words at most,
   to land the point the headline is making. */
:is(h1,h2,h3,h4,
    .h1,.h1--hero,.h2,.h2--minor,.h3,.h3--card,.h3--statement,.h4,.h4--wide,
    .about-statement,.pillar__title,.fpanel__heading,.pillar-sibling__title,
    .mega__featured-title,.bento__featured-title,.role__title,.team__name) em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  /* The italic leans right, so its last glyph overhangs the word space that
     follows and the next upright word reads as joined on. Give the run back
     the sidebearing the slant eats. */
  padding-right:.06em;
}

.h1{font-size:clamp(46px,6vw,88px);line-height:var(--lead-h1);letter-spacing:var(--track-h1)}
.h1--hero{font-size:clamp(52px,7vw,100px);line-height:var(--lead-hero);letter-spacing:var(--track-hero)}
.h2{font-size:clamp(36px,4.4vw,62px);line-height:var(--lead-h2);letter-spacing:var(--track-h2)}
.h2--minor{font-size:clamp(32px,3.8vw,54px);line-height:var(--lead-h2-minor);letter-spacing:var(--track-h2-minor)}
.h3{font-size:clamp(30px,3.3vw,46px);line-height:var(--lead-h3);letter-spacing:var(--track-h3)}
.h3--statement{font-size:clamp(34px,4.4vw,64px);line-height:var(--lead-statement);letter-spacing:var(--track-statement)}
.h3--card{font-size:clamp(28px,3.2vw,44px);line-height:var(--lead-card);letter-spacing:var(--track-card)}
.h4{font-size:25px;line-height:var(--lead-h4);letter-spacing:var(--track-h4)}
.h4--wide{font-size:27px;line-height:var(--lead-h4);letter-spacing:var(--track-h4)}

.eyebrow{
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-45);
}
.eyebrow--gold{color:var(--gold-500)}

.lead{font-size:16px;font-weight:300;line-height:1.55;color:var(--on-ink-62)}
.lead--hero{font-size:17px;line-height:1.45;color:var(--on-ink-82,rgba(243,237,226,.82));max-width:46ch}
.lead--page{font-size:17px;line-height:1.55;color:var(--on-ink-78)}

.body-sm{font-size:14px;font-weight:300;line-height:1.6;color:var(--on-ink-60)}
.body-xs{font-size:13px;font-weight:300;line-height:1.65;color:var(--on-ink-60)}
.caption{font-size:12px;font-weight:300;color:var(--on-ink-50)}

.measure-lead{max-width:46ch}
.measure-body{max-width:64ch}

/* Motion: the hero reveal runs once per page load. */
@keyframes lhRise{
  from{opacity:0;transform:translateY(16px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.lh-rise{animation:lhRise var(--dur-reveal) var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .lh-rise{animation:none;opacity:1;filter:none;transform:none}
}

/* ==== components.css ==== */
/* ===========================================================================
   Components — built once here, reused by every page.
   ========================================================================= */

/* ---------- 1. GlassNav ------------------------------------------------ */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
}

.nav__bar{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-height);padding:8px 32px;
  border:1px solid var(--glass-border-photo);border-radius:12px;
  background:var(--nav-fill);
  -webkit-backdrop-filter:var(--nav-blur);backdrop-filter:var(--nav-blur);
  font-family:var(--font-sans);font-size:16px;font-weight:300;color:var(--on-ink);
}

.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{height:26px;width:auto;display:block}

.nav__links{display:flex;align-items:center;gap:24px;list-style:none}
.nav__link{font-size:16px;font-weight:300;color:var(--on-ink);white-space:nowrap}
.nav__link:hover{color:var(--gold-400)}
.nav__link[aria-current="page"]{color:var(--gold-400)}

.nav__right{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.nav__actions{display:flex;align-items:center;gap:24px}
.nav__careers{font-size:16px;font-weight:600;color:var(--on-ink);white-space:nowrap}
.nav__careers:hover{color:var(--gold-400)}
.nav__icons{display:flex;align-items:center;gap:20px}

.nav__cta{
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:48px;padding:12px 25px;
  border:1px solid var(--paper-100);border-radius:var(--radius-pill);
  background:var(--paper-100);color:var(--ink-900);
  font-size:16px;font-weight:600;text-align:center;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}
.nav__cta:hover{background:var(--gold-500);border-color:var(--gold-500)}
.nav__cta:active{transform:translateY(1px)}

.icon-button{
  display:flex;align-items:center;justify-content:center;
  padding:0;border:none;background:transparent;color:var(--on-ink);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard);
}
.icon-button:hover{color:var(--gold-400)}
.icon-button svg{display:block}
.icon-button--search{width:20px;height:20px}
.icon-button--menu{width:24px;height:24px}

/* --- Mega menu ---------------------------------------------------------- */

.nav__menu{
  margin-top:8px;padding:32px;
  border:1px solid var(--glass-border-photo);border-radius:12px;
  background:rgba(23,21,15,.92);
  -webkit-backdrop-filter:var(--nav-blur);backdrop-filter:var(--nav-blur);
  box-shadow:var(--glass-inner);
  max-height:calc(100vh - var(--nav-height) - 48px);overflow-y:auto;
  animation:megaOpen var(--dur-slow) var(--ease-standard) both;
}
.nav__menu[hidden]{display:none}

@keyframes megaOpen{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .nav__menu{animation:none}
}

.mega{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);
  gap:48px;
}

.mega__col{display:flex;flex-direction:column;gap:16px;min-width:0}
.mega__col--primary{display:none}

.mega__list{display:flex;flex-direction:column}

.mega__link{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;border-top:1px solid rgba(255,255,255,.08);
}
.mega__list .mega__link:first-child{border-top:none;padding-top:4px}

.mega__label{
  font-size:16px;font-weight:400;color:var(--on-ink-strong);
  transition:color var(--dur-fast) var(--ease-standard);
}
.mega__desc{
  font-size:12px;font-weight:300;line-height:1.5;color:var(--on-ink-50);
  max-width:34ch;
  transition:color var(--dur-fast) var(--ease-standard);
}
.mega__link:hover .mega__label{color:var(--gold-400)}
.mega__link:hover .mega__desc{color:var(--on-ink-62)}
.mega__link[aria-current="page"] .mega__label{color:var(--gold-400)}

/* Featured panel */
.mega__featured{
  display:flex;flex-direction:column;gap:12px;
  padding:16px;border-radius:16px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  box-shadow:var(--glass-inner);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.mega__featured:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.mega__featured-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.mega__featured-well{
  display:block;border-radius:10px;overflow:hidden;
  border:1px solid var(--glass-border);
}
.mega__featured-well img{
  width:100%;aspect-ratio:16 / 10;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.mega__featured:hover .mega__featured-well img{transform:scale(1.03)}
.mega__featured-title{
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:22px;line-height:1.15;color:var(--on-ink-strong);
}
.mega__featured-body{
  font-size:12px;font-weight:300;line-height:1.55;color:var(--on-ink-50);
}
.mega__featured-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:2px;
  font-size:13px;font-weight:600;color:var(--gold-400);
}

/* Contact bar */
.mega__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--rule);
}
.mega__mail{
  font-size:13px;color:var(--gold-400);
  border-bottom:1px solid rgba(201,162,39,.5);
}
.mega__mail:hover{color:var(--on-ink-strong);border-bottom-color:currentColor}
.mega__social{display:flex;gap:24px}
.mega__social a{font-size:13px;font-weight:300;color:var(--on-ink-50)}
.mega__social a:hover{color:var(--gold-400)}

/* ---------- 2. GlassCard ---------------------------------------------- */

.card{
  padding:32px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner);
  display:flex;flex-direction:column;gap:14px;
}
.card--tight{padding:26px}
.card--30{padding:30px}
.card--feature{padding:40px;border-radius:24px;gap:16px;align-items:flex-start}
.card--photo{
  background:var(--glass-fill-photo);border-color:var(--glass-border-photo);
  box-shadow:var(--glass-inner-photo);
}

/* ---------- 3. Badge --------------------------------------------------- */

.badge{
  align-self:flex-start;
  display:inline-flex;align-items:center;
  padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--glass-fill-photo);border:1px solid var(--glass-border-photo);
  font-size:12px;font-weight:500;color:var(--on-ink);
}
.badge--photo{
  background:var(--button-fill);border-color:var(--glass-border-badge);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.badge--new{gap:10px;padding:4px 14px 4px 4px}
.badge__pill{
  background:var(--paper-100);color:var(--ink-900);
  border-radius:var(--radius-pill);padding:4px 11px;
  font-size:11px;font-weight:600;
}
.badge__text{font-size:13px;color:var(--on-ink)}

/* ---------- 4. Button -------------------------------------------------- */

.btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:translateY(1px)}
.btn__arrow{font-size:15px;line-height:1}

.btn--glass{
  border:1px solid var(--button-border);
  background:var(--button-fill);
  -webkit-backdrop-filter:var(--button-blur);backdrop-filter:var(--button-blur);
  box-shadow:4px 4px 4px rgba(0,0,0,.05),var(--glass-inner-button);
  color:var(--on-ink-strong);
}
.btn--glass:hover{background:var(--button-fill-hover)}

.btn--solid{
  border:1px solid var(--paper-100);
  background:var(--paper-100);color:var(--ink-900);
}
.btn--solid:hover{background:var(--gold-500);border-color:var(--gold-500)}

.btn--sm{padding:12px 22px;font-size:13px}
.btn--sm .btn__arrow{font-size:14px}

.link-gold{font-size:14px;font-weight:600;color:var(--gold-400)}
.link-gold:hover{color:var(--on-ink-strong)}

.link-play{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--on-ink-86);font-size:14px;font-weight:500;
}
.link-play:hover{color:var(--gold-400)}
.link-play__chip{
  width:26px;height:26px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.3);
  display:inline-grid;place-items:center;font-size:9px;
}

/* ---------- 5. NumeralCard --------------------------------------------- */

.numeral-chip{
  width:40px;height:40px;border-radius:var(--radius-pill);
  border:1px solid var(--button-border);background:var(--button-fill);
  display:grid;place-items:center;
  font-size:17px;color:var(--gold-400);
}

/* ---------- 6. ServiceGrid --------------------------------------------- */

.service-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);border-radius:20px;overflow:hidden;
}
.service-cell{
  background:var(--ink-900);padding:32px;
  display:flex;flex-direction:column;gap:12px;
}

/* ---------- 7. StatCard + StatBand ------------------------------------- */

.stat__num{font-size:56px;line-height:1}
.stat__label{font-size:13px;font-weight:300;color:var(--on-ink-60)}
.card--stat{gap:8px}

.stat-band{
  padding:56px;border-radius:28px;
  background:var(--glass-fill-photo);border:1px solid var(--glass-border-photo);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner-photo);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;
}
.stat-band--3{padding:48px;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-band__item{display:flex;flex-direction:column;gap:8px}
.stat-band .stat__num{font-size:clamp(40px,4.6vw,64px)}
.stat-band--3 .stat__num{font-size:clamp(40px,4.4vw,60px)}

/* ---------- 8. Testimonial --------------------------------------------- */

.testimonial{margin:0;gap:22px}
.testimonial__quote{
  margin:0;font-size:16px;line-height:1.55;color:rgba(243,237,226,.85);
}
.testimonial__cite{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:3px;
}
.testimonial__name{font-size:14px;font-weight:500;color:var(--on-ink-strong)}
.testimonial__role{font-size:12px;font-weight:300;color:var(--on-ink-50)}

/* ---------- 9. PhotoBand ----------------------------------------------- */

.band{position:relative;overflow:hidden}
.band__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__media--desaturate{filter:saturate(0)}
.band__tint{position:absolute;inset:0}
.band__fade-top,.band__fade-bottom{
  position:absolute;left:0;right:0;height:200px;pointer-events:none;
}
.band__fade-top{top:0;background:linear-gradient(to bottom,#17150F,rgba(23,21,15,0))}
.band__fade-bottom{bottom:0;background:linear-gradient(to top,#17150F,rgba(23,21,15,0))}
.band__inner{position:relative;z-index:1;isolation:isolate}
.band__centred{
  min-height:520px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:22px;padding:140px var(--gutter-page);
}
.band__centred .badge,.band__centred .btn{align-self:center}
.band__panel{padding:150px var(--gutter-page);max-width:var(--container);margin:0 auto}

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

.hero{position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero__inner{
  position:relative;z-index:1;max-width:var(--container);margin:0 auto;width:100%;
  padding:210px var(--gutter-page) 80px;
  display:flex;flex-direction:column;gap:24px;
}
.hero__fade{position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.hero__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.hero__actions .btn{align-self:auto}

.serif-row{
  display:flex;flex-wrap:wrap;gap:56px;align-items:baseline;
  font-size:clamp(22px,2.4vw,32px);color:rgba(252,249,243,.9);
}
.serif-row--partners{gap:48px;font-size:26px;color:rgba(252,249,243,.82)}

/* Gold-dot bullet list (Agencies hero) */
.dot-list{list-style:none;display:flex;flex-direction:column;gap:14px;max-width:52ch;margin:8px 0 0}
.dot-list li{display:flex;gap:14px;align-items:flex-start}
.dot-list li::before{
  content:"";width:9px;height:9px;border-radius:var(--radius-pill);
  background:var(--gold-500);flex:none;margin-top:7px;
}
.dot-list span{font-size:16px;font-weight:300;line-height:1.5;color:var(--on-ink-86)}

/* ---------- Grids ------------------------------------------------------- */

.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.split{display:grid;gap:64px;align-items:center}
.split--text-first{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.split--image-first{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.split__text{display:flex;flex-direction:column;gap:18px}
.split__well{border-radius:20px;overflow:hidden;border:1px solid var(--glass-border)}
.split__well img{width:100%;aspect-ratio:16 / 10;object-fit:cover;display:block}

/* ---------- 10. ContactBand + Footer ----------------------------------- */

.contact{position:relative;overflow:hidden;padding:140px var(--gutter-page) 0}
.contact__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
.contact__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,#17150F 0%,rgba(23,21,15,.5) 22%,rgba(23,21,15,.62) 62%,rgba(23,21,15,.9) 100%);
}
.contact__inner{
  position:relative;max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:80px;align-items:start;
}
.contact__copy{display:flex;flex-direction:column;gap:20px}
.contact__copy .h2{font-size:clamp(44px,5vw,72px);line-height:var(--lead-h1);color:var(--on-ink)}
.contact__mail{
  align-self:flex-start;font-size:14px;color:var(--gold-400);
  border-bottom:1px solid rgba(201,162,39,.6);
}
.contact__mail:hover{color:var(--on-ink-strong);border-bottom-color:currentColor}

.form{
  display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-border-photo);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner-photo);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__field{
  display:flex;flex-direction:column;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-55);
}
.form__field input,.form__field textarea{
  font-family:var(--font-sans);font-size:14px;color:var(--on-ink-strong);
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border-badge);
  border-radius:8px;padding:12px 14px;outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.form__field textarea{resize:vertical;line-height:1.6}
.form__field input::placeholder,.form__field textarea::placeholder{color:var(--on-ink-40)}
.form__field input:hover,.form__field textarea:hover{border-color:rgba(255,255,255,.28)}
.form__field--invalid input,.form__field--invalid textarea{border-color:var(--clay-500)}
.form__error{
  font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:none;
  color:var(--clay-300);
}
.form__error[hidden]{display:none}
.form__success{
  padding:12px 16px;border-radius:10px;
  background:rgba(74,107,63,.22);border:1px solid rgba(139,178,122,.45);
  font-size:13px;color:#DCE8D2;
}
.form__success[hidden]{display:none}
.form .btn{margin-top:6px}

.footer{position:relative;max-width:var(--container);margin:120px auto 0;padding-bottom:40px}
.footer .fpanel{margin-top:0}
.footer__grid{
  display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:40px;
  padding-top:40px;border-top:1px solid var(--rule);
}
.footer__brand{display:flex;flex-direction:column;gap:16px}
.footer__brand img{height:24px;width:auto;align-self:flex-start}
.footer__blurb{font-size:13px;font-weight:300;line-height:1.6;color:var(--on-ink-50);max-width:30ch}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__col a{font-size:14px;color:rgba(243,237,226,.85)}
.footer__col a:hover{color:var(--gold-400)}
.footer__legal{
  display:flex;justify-content:space-between;gap:24px;
  margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:var(--on-ink-40);
}

/* ---------- Pillar cards ------------------------------------------------ */
/* Default state is the copy on ink. Hover or keyboard focus slides the brand
   frame down from the top and lifts a dark gradient under the text, then
   reveals the CTA. All 500ms on --ease-standard. */

.pillar{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:24px;
  background:rgba(23,21,15,.88);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner);
  height:clamp(320px,32vw,460px);
  transition:border-color var(--dur-slow) var(--ease-standard);
}
.pillar:hover,.pillar:focus-within{border-color:rgba(255,255,255,.22)}

/* Layer 1 - the frame */
.pillar__frame{
  position:absolute;left:0;right:0;top:0;height:58%;z-index:1;
  pointer-events:none;user-select:none;
  transform:translateY(-30%);opacity:.7;
  transition:transform var(--dur-slow) var(--ease-standard),
             opacity var(--dur-slow) var(--ease-standard);
  /* The frame melts into the card rather than hard-cutting - the site's
     film-band device, scaled down to a card. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
}
/* Centre the crop. Aligning to the top cut subjects off at the waist once the
   band got short. */
.pillar__frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pillar:hover .pillar__frame,.pillar:focus-within .pillar__frame{
  transform:translateY(0);opacity:1;
}

/* Layer 2 - the veil that protects the copy once the frame is in */
.pillar__veil{
  position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  pointer-events:none;user-select:none;
  background:linear-gradient(to top,rgba(23,21,15,.95) 60%,transparent);
  transform:translateY(100%);opacity:0;
  transition:transform var(--dur-slow) var(--ease-standard),
             opacity var(--dur-slow) var(--ease-standard);
}
.pillar:hover .pillar__veil,.pillar:focus-within .pillar__veil{
  transform:translateY(0);opacity:1;
}

/* Layer 3 - content */
.pillar__content{
  position:relative;z-index:2;display:flex;flex-direction:column;height:100%;
  padding:clamp(16px,1.94vw,28px) clamp(18px,2.36vw,30px);
}
.pillar__spacer{flex-grow:1}

.pillar__badge{
  display:inline-flex;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content;
  flex-shrink:0;
  padding:6px clamp(10px,1.25vw,16px);border-radius:var(--radius-pill);
  background:var(--button-fill);border:1px solid var(--glass-border-badge);
  font-size:13px;font-weight:500;color:var(--on-ink);
}
.pillar__icon{
  display:flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:none;color:var(--gold-400);
}
.pillar__icon svg{width:100%;height:100%;display:block}

.pillar__block{
  display:flex;flex-direction:column;gap:14px;
  transition:transform var(--dur-slow) var(--ease-standard);
}
.pillar:hover .pillar__block,.pillar:focus-within .pillar__block{transform:translateY(-8px)}

.pillar__title{
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(22px,1.9vw,28px);line-height:1.15;color:var(--on-ink-strong);
}

.pillar__bullets{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.pillar__bullets li{
  position:relative;padding-left:20px;
  font-size:clamp(12px,1vw,14px);font-weight:300;line-height:1.5;
  color:var(--on-ink-72);
}
.pillar__bullets li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border-radius:var(--radius-pill);background:var(--gold-500);
}

.pillar__reveal{
  overflow:hidden;max-height:0;opacity:0;pointer-events:none;
  transform:translateY(20px);
  transition:max-height var(--dur-slow) var(--ease-standard),
             opacity var(--dur-slow) var(--ease-standard),
             transform var(--dur-slow) var(--ease-standard),
             margin-top var(--dur-slow) var(--ease-standard);
}
.pillar:hover .pillar__reveal,.pillar:focus-within .pillar__reveal{
  max-height:80px;opacity:1;pointer-events:auto;transform:translateY(0);margin-top:16px;
}
.pillar__cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border-radius:var(--radius-pill);
  background:var(--paper-100);color:var(--ink-900);
  font-size:clamp(13px,1.1vw,14px);font-weight:600;
  padding:clamp(10px,.9vw,13px) 0;
  transition:background var(--dur-fast) var(--ease-standard);
}
.pillar__cta:hover{background:var(--gold-500)}
.pillar__cta:active{transform:translateY(1px)}

/* Touch devices have no hover, so the cards rest in their open state. */
@media (hover:none){
  .pillar__frame{transform:translateY(0);opacity:1}
  .pillar__veil{transform:translateY(0);opacity:1}
  .pillar__reveal{max-height:80px;opacity:1;pointer-events:auto;transform:none;margin-top:16px}
}

/* ---------- Testimonial carousel ---------------------------------------- */

.tcarousel__wrap{display:flex;flex-direction:column;gap:48px}
.tcarousel__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.tcarousel__stat{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.tcarousel__stat .stat__num{font-size:clamp(36px,3.4vw,48px)}

.tcarousel{display:flex;flex-direction:column;gap:32px}
/* The viewport bleeds slightly so card shadows and the inner highlight are not
   clipped at the edges. */
.tcarousel__viewport{overflow:hidden;margin:-8px;padding:8px}
.tcarousel__track{display:flex;gap:24px;will-change:transform}

.tcard{
  flex:0 0 calc((100% - 48px) / 3);
  min-width:0;
  transition:opacity var(--dur-slow) var(--ease-standard),
             transform var(--dur-slow) var(--ease-standard);
}
.tcard__cite{display:flex;flex-direction:row;align-items:center;gap:14px}
.tcard__cite > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.tcard__avatar{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:var(--radius-pill);
  border:1px solid rgba(201,162,39,.45);background:rgba(255,255,255,.05);
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:16px;color:var(--gold-400);
}

.tcarousel__controls{display:flex;gap:16px}
.tcarousel__btn{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--radius-pill);
  border:1px solid var(--button-border);background:transparent;
  color:var(--on-ink);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.tcarousel__btn:hover{background:var(--button-fill);color:var(--gold-400)}
.tcarousel__btn:active{transform:translateY(1px)}

/* ---------- Scroll reveal ------------------------------------------------ */
/* Brand motion: fade + 16px rise, once, staggered 60ms. */

/* Scoped to .has-reveal, which site.js sets only when it can actually run the
   observer. No script, no hidden content. */
.has-reveal [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
}
.has-reveal [data-reveal].is-visible{opacity:1;transform:none}

/* Hero content already runs the lhRise entrance. Anything inside it opts out of
   the scroll reveal so the two do not stack. */
.lh-rise [data-reveal]{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  .has-reveal [data-reveal]{opacity:1;transform:none}
}

/* ---------- Protection gradients over photography ------------------------ */
/* The prototypes washed each frame with a flat tint, which hid most of the
   photograph. The tints are now light, and the type instead sits on a scrim
   shaped to the copy - the brand's own rule: a protection gradient, never a
   solid capsule. The frame stays readable everywhere the type is not. */

/* Centred statement blocks: an ellipse behind the type, clear at the edges. */
.band__centred::before,
.band__inner--statement::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,
    rgba(23,21,15,.82) 0%,
    rgba(23,21,15,.55) 45%,
    rgba(23,21,15,.12) 78%,
    rgba(23,21,15,0) 100%);
}

/* Left-set hero copy: the brand's --scrim-left, leaving the right of the
   frame open. */
.hero__scrim-left{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(23,21,15,.76) 0%,
    rgba(23,21,15,.34) 34%,
    rgba(23,21,15,.04) 62%,
    rgba(23,21,15,0) 100%);
}

/* ---------- Footer panel -------------------------------------------------- */
/* Cream paper floating on the footer film loop - the brand's two grounds,
   paper over ink, with the photography running behind it. */

/* The video sits directly over the still, which stays underneath as the
   fallback for phones, reduced motion and data-saver, where the source is
   removed and this element renders nothing. */
.contact__video{z-index:0}

.fpanel{
  position:relative;
  background:rgba(252,249,243,.95);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:28px;
  padding:32px 48px;
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  color:var(--ink-900);
}

.fpanel__grid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  column-gap:56px;row-gap:24px;
  align-items:start;
}

.fpanel__mark{grid-column:1;grid-row:1;height:26px;width:auto;display:block}

.fpanel__heading{
  grid-column:2;grid-row:1;
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink-900);max-width:16ch;
}

/* The three link columns span both rows. Their headings align with the
   wordmark rather than sitting on the baseline, because the columns hold
   different numbers of links. */
.fpanel__col{
  grid-row:1 / span 2;align-self:start;
  display:flex;flex-direction:column;gap:10px;
}
.fpanel__col:nth-of-type(1){grid-column:3}
.fpanel__col:nth-of-type(2){grid-column:4}
.fpanel__col:nth-of-type(3){grid-column:5}

.fpanel__col-title{
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-900);
  margin-bottom:2px;
}
.fpanel__link{
  font-size:14px;font-weight:500;white-space:nowrap;
  color:rgba(23,21,15,.7);
  transition:color var(--dur-fast) var(--ease-standard);
}
.fpanel__link:hover{color:var(--ink-900)}

.fpanel__actions{
  grid-column:1 / span 2;grid-row:2;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}

.fbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.fbtn:active{transform:translateY(1px)}

.fbtn--primary{
  background:var(--ink-900);color:var(--paper-050);
  border:1px solid var(--ink-900);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 2px 8px rgba(23,21,15,.18);
}
.fbtn--primary:hover{
  background:var(--ink-800);border-color:var(--ink-800);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.24),0 8px 20px rgba(23,21,15,.26);
}

.fbtn--secondary{
  background:var(--paper-000);color:var(--ink-900);
  border:1px solid rgba(23,21,15,.14);
  box-shadow:var(--shadow-xs);
}
.fbtn--secondary:hover{border-color:rgba(23,21,15,.3);box-shadow:var(--shadow-sm)}

.fpanel__legal{
  display:flex;flex-wrap:wrap;gap:4px 24px;
  margin-top:32px;padding-top:20px;
  border-top:1px solid rgba(23,21,15,.12);
  font-size:11px;font-weight:500;letter-spacing:-.01em;
  color:rgba(23,21,15,.45);
}

/* ===========================================================================
   Rollovers
   Brand rules: cards do not move, the image inside them scales to 1.03 over
   420ms; links change colour; buttons never scale, and press is translateY(1px).
   Everything here is suppressed under prefers-reduced-motion by the global rule
   in base.css.
   ========================================================================= */

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

.card{
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard);
}
.card:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--glass-inner),0 10px 28px -12px rgba(23,21,15,.5);
}

/* Testimonials sit in a moving track; a hover that also lifts reads as a jolt. */
.tcard:hover{box-shadow:var(--glass-inner)}

/* --- Image wells --------------------------------------------------------- */
/* The frame scales inside its own rounded box. The box itself never moves. */

.split__well,.team__portrait,.mega__featured-well{overflow:hidden}
.split__well img,.team__portrait img{
  transition:transform var(--dur-slow) var(--ease-out);
}
.split__well:hover img,
.team__member:hover .team__portrait img{transform:scale(1.03)}

.split__well{transition:border-color var(--dur-base) var(--ease-standard)}
.split__well:hover{border-color:rgba(255,255,255,.24)}

.team__portrait{transition:border-color var(--dur-base) var(--ease-standard)}
.team__member:hover .team__portrait{border-color:rgba(201,162,39,.4)}

/* --- Service grid -------------------------------------------------------- */
/* Cells share hairlines, so the rollover is a fill rather than a border. */

.service-cell{
  transition:background var(--dur-base) var(--ease-standard);
}
.service-cell:hover{background:#1C1A13}
.service-cell h3,.service-cell .eyebrow{
  transition:color var(--dur-base) var(--ease-standard);
}
.service-cell:hover .eyebrow--gold{color:var(--gold-400)}

/* --- Roles and list rows -------------------------------------------------- */

.role{transition:border-color var(--dur-base) var(--ease-standard)}
.role .role__title{transition:color var(--dur-fast) var(--ease-standard)}
.role:hover .role__title{color:var(--gold-400)}

/* --- FAQ ----------------------------------------------------------------- */

.faq-item{transition:border-color var(--dur-base) var(--ease-standard)}

/* --- Text links ---------------------------------------------------------- */
/* The gold rule under a link grows from the left rather than blinking on. */

.link-underline{
  position:relative;
  transition:color var(--dur-fast) var(--ease-standard);
}
.link-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-standard);
}
.link-underline:hover::after{transform:scaleX(1)}

.nav__link,.nav__careers,.footer__col a,.mega__link,.episode__play,.link-gold{
  position:relative;
}

/* --- Stat cards ---------------------------------------------------------- */

.card--stat .stat__num{transition:color var(--dur-base) var(--ease-standard)}
.card--stat:hover .stat__num{color:var(--gold-200)}

/* --- Pillar siblings ------------------------------------------------------ */

.pillar-sibling__title{transition:color var(--dur-fast) var(--ease-standard)}
.pillar-sibling:hover .pillar-sibling__title{color:var(--gold-400)}

/* --- Icon buttons and the wordmark --------------------------------------- */

.nav__logo img,.footer__brand img{
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.nav__logo:hover img,.footer__brand:hover img{opacity:.75}

/* ===========================================================================
   Bento grid - the Services section
   Structure follows the supplied spec: header with a pill CTA, then a three
   column grid of mixed cards. Palette and type are this site's, not the
   spec's light aerospace scheme.
   ========================================================================= */

.bento__header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:32px;margin-bottom:clamp(24px,3vw,42px);
}
.bento__intro{display:flex;flex-direction:column;gap:14px;max-width:860px}
.bento__lead{max-width:56ch}
.bento__cta{flex:0 0 auto;align-self:flex-start}

.bento{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,1.25vw,22px);
  min-height:clamp(620px,72vh,780px);
}
.bento__stack{
  display:grid;gap:clamp(14px,1.25vw,22px);
  /* First row takes its content, not a fraction of the column. The quote is the
     longest thing in this grid and the card is narrow at three columns, so a
     fractional row clipped the attribution - the same failure the smaller
     breakpoints had. The metric below it absorbs the remainder. */
  grid-template-rows:auto minmax(240px,1fr);
  min-width:0;
}
.bento__stack:first-child{grid-template-rows:1fr}
.bento__stack--systems{grid-template-rows:minmax(420px,1.45fr) auto}

.bento__card{
  position:relative;overflow:hidden;
  border:1px solid var(--glass-border);border-radius:18px;
  min-width:0;
  transition:border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard);
}
.bento__card:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 22px 60px -20px rgba(23,21,15,.6);
}

/* Media cards */
.bento__media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform var(--dur-slow) var(--ease-out);
}
.bento__card:hover .bento__media{transform:scale(1.05)}
.bento__shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(23,21,15,.42),transparent 34%),
    linear-gradient(0deg,rgba(23,21,15,.86),transparent 52%);
}

.bento__label{
  position:relative;z-index:1;display:block;padding:24px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,237,226,.78);
}
.bento__label--ink{padding:0;color:var(--on-ink-45)}

/* Column 1 - the cadence list */
.bento__card--tall{display:flex;flex-direction:column;background:var(--ink-800)}
.bento__rows{
  position:absolute;z-index:1;right:20px;bottom:20px;left:20px;
  display:grid;gap:12px;list-style:none;margin:0;padding:0;
}
.bento__row{
  display:grid;grid-template-columns:78px 16px minmax(0,1fr);
  align-items:baseline;gap:10px;
  font-size:12px;color:rgba(243,237,226,.76);
}
.bento__row-when{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,237,226,.6);
}
.bento__row-dot{
  width:5px;height:5px;border-radius:var(--radius-pill);
  background:var(--gold-500);align-self:center;
}
.bento__row-what{
  font-size:clamp(13px,.95vw,15px);font-weight:600;color:var(--on-ink-strong);
}
.bento__row-note{
  grid-column:3;font-size:12px;color:rgba(243,237,226,.55);
}

/* Column 2 - quote */
.bento__card--quote{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(26px,2.2vw,34px);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.bento__quote{
  margin:clamp(14px,1.6vw,22px) 0 18px;
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(15px,1vw,18px);line-height:1.62;
  color:rgba(243,237,226,.88);
}
.bento__cite{display:flex;flex-direction:column;gap:3px}
.bento__cite-name{font-size:15px;font-weight:500;color:var(--on-ink-strong)}
.bento__cite-role{font-size:14px;line-height:1.5;color:var(--on-ink-50)}

/* Column 2 - metric */
.bento__card--metric{display:block;min-height:320px;background:var(--ink-800)}
.bento__metric-value{
  position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-style:normal;font-weight:300;
  font-size:clamp(72px,6.6vw,120px);line-height:1;color:var(--on-ink-strong);
  text-shadow:0 12px 32px rgba(23,21,15,.45);
}
.bento__metric-label{
  position:absolute;z-index:1;right:24px;bottom:24px;left:24px;
  font-size:clamp(13px,1.05vw,16px);line-height:1.4;
  color:rgba(243,237,226,.82);
}

/* Column 3 - marquee */
.bento__card--marquee{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:420px;background:var(--ink-800);
}
.bento__marquee{
  position:relative;z-index:1;
  display:grid;gap:14px;overflow:hidden;padding:26px 0 26px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.bento__track{display:flex;width:max-content;gap:12px}
.bento__pill-set{display:flex;gap:12px;margin-left:12px}
.bento__pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 16px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.2);border-radius:14px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  color:var(--on-ink-strong);font-size:13px;font-weight:600;
}
.bento__pill-dot{
  width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--gold-500);flex:none;
}

@keyframes bentoLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bentoRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.bento__track--left{animation:bentoLeft 24s linear infinite}
.bento__track--right{animation:bentoRight 28s linear infinite}
/* Pause while the pointer is on the card, so the labels can be read. */
.bento__card--marquee:hover .bento__track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .bento__track{animation:none}
  .bento__marquee{overflow-x:auto}
}

/* Column 3 - contact */
.bento__card--contact{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:118px;padding:22px 76px 22px clamp(24px,2.2vw,32px);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.bento__email{
  display:block;margin:14px 0 6px;
  font-size:clamp(17px,1.45vw,23px);font-weight:400;color:var(--on-ink-strong);
  transition:color var(--dur-fast) var(--ease-standard);
}
.bento__email:hover{color:var(--gold-400)}
.bento__note{display:block;font-size:14px;line-height:1.5;color:var(--on-ink-50)}
.bento__icon-button{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--paper-100);
  background:var(--paper-100);color:var(--ink-900);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.bento__icon-button:hover{background:var(--gold-500);border-color:var(--gold-500)}

/* ===========================================================================
   Glow cards - Agencies testimonials
   Structure from the supplied spec: a blurred gradient pad behind a card whose
   border is a gradient, drawn with the padding-box/border-box clip. Two
   departures, both deliberate. The gradients are the brand's gold rather than
   the spec's pink and cyan, since gold is the single accent here. And the card
   takes its height from the quote rather than being pinned to 300px - these
   quotes are long, and a fixed height would clip the attribution.
   ========================================================================= */

.glow-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,2.6vw,40px);
}

.glow-card{
  position:relative;display:flex;flex-direction:column;margin:0;min-width:0;
}

/* The pad that throws the colour. Sits behind, never takes a pointer. */
.glow-card__glow{
  position:absolute;left:0;right:0;top:0;bottom:0;
  border-radius:28px;
  opacity:.34;
  filter:blur(38px);
  pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-standard);
}
.glow-card:hover .glow-card__glow{opacity:.52}

/* The face. The border is the gradient; the fill is ink, clipped to the
   padding box so the gradient only shows in the border band. */
.glow-card__face{
  /* flex:1 so the face fills the stretched grid item. Without it the outline
     stops at the end of the copy and the three cards end at different heights,
     while the glow behind still runs the full row. */
  position:relative;z-index:1;display:block;flex:1;
  /* A hairline, not the spec's 8px band. Hairlines do the structural work in
     this system, and at this weight the gradient reads as a drawn edge rather
     than a frame around the card. */
  border:1.5px solid transparent;
  border-radius:28px;
  overflow:hidden;
}

.glow-card__body{
  display:flex;flex-direction:column;gap:18px;
  padding:clamp(22px,2vw,28px);
  min-height:240px;
  height:100%;
}

.glow-card__quote{
  margin:0;flex:1;
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(15px,1vw,17px);line-height:1.62;
  color:var(--on-ink-strong);
}

.glow-card__cite{
  display:flex;align-items:center;gap:14px;
  padding-top:18px;border-top:1px solid var(--rule);
}
.glow-card__cite > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.glow-card__avatar{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:var(--radius-pill);
  border:1px solid rgba(201,162,39,.45);background:rgba(255,255,255,.05);
  font-family:var(--font-display);font-weight:400;
  font-size:16px;color:var(--gold-400);
}
.glow-card__name{font-size:15px;font-weight:500;color:var(--on-ink-strong)}
.glow-card__role{font-size:13px;line-height:1.5;color:var(--on-ink-50)}

/* Three weightings of the same gold, so the row has variety without reaching
   for a second accent colour. */
.glow-card:nth-child(1) .glow-card__glow{
  background:linear-gradient(137deg,#C9A227 0%,#F0DFA4 45%,#7C6116 100%);
}
.glow-card:nth-child(1) .glow-card__face{
  background:
    linear-gradient(var(--ink-900),var(--ink-900)) padding-box,
    linear-gradient(137deg,#C9A227 0%,#F0DFA4 45%,#7C6116 100%) border-box;
}
.glow-card:nth-child(2) .glow-card__glow{
  background:linear-gradient(137deg,#9A7B1E 0%,#E0C040 45%,#8A3F24 100%);
}
.glow-card:nth-child(2) .glow-card__face{
  background:
    linear-gradient(var(--ink-900),var(--ink-900)) padding-box,
    linear-gradient(137deg,#9A7B1E 0%,#E0C040 45%,#8A3F24 100%) border-box;
}
.glow-card:nth-child(3) .glow-card__glow{
  background:linear-gradient(137deg,#7C6116 0%,#F0DFA4 45%,#C9A227 100%);
}
.glow-card:nth-child(3) .glow-card__face{
  background:
    linear-gradient(var(--ink-900),var(--ink-900)) padding-box,
    linear-gradient(137deg,#7C6116 0%,#F0DFA4 45%,#C9A227 100%) border-box;
}

@media (prefers-reduced-motion:reduce){
  .glow-card__glow{transition:none}
}

/* ===========================================================================
   Book a call
   ========================================================================= */

.booking{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(32px,3.4vw,64px);
  align-items:start;
}

.booking__aside{display:flex;flex-direction:column;gap:32px}
.booking__facts{display:grid;gap:16px}
.booking__steps{display:flex;flex-direction:column;gap:16px}

.booking__panel{
  display:flex;flex-direction:column;gap:28px;
  padding:clamp(26px,2.6vw,40px);
  border-radius:24px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner);
}

.booking-form{display:flex;flex-direction:column;gap:20px}
.booking-form__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}

.field{display:flex;flex-direction:column;gap:7px;grid-column:1 / -1;min-width:0}
.field--half{grid-column:span 1}

.field label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-55);
}
.field label span{
  letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--on-ink-45);
}

.field input,.field textarea,.field select{
  font-family:var(--font-sans);font-size:14px;color:var(--on-ink-strong);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:12px 14px;
  outline:none;
  width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard);
}
.field textarea{resize:vertical;line-height:1.6;min-height:120px}
.field input:hover,.field textarea:hover,.field select:hover{
  border-color:rgba(255,255,255,.26);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--gold-500);background:rgba(255,255,255,.07);
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-ink-40)}

/* A dropdown needs its own arrow once the native one is suppressed. */
.field__select{position:relative;display:block}
.field__select select{
  appearance:none;-webkit-appearance:none;
  padding-right:40px;cursor:pointer;
}
.field__select select option{background:var(--ink-800);color:var(--on-ink-strong)}
.field__select select:invalid{color:var(--on-ink-40)}
.field__chevron{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;pointer-events:none;color:var(--on-ink-50);
}

/* A field the browser has flagged after a submit attempt. */
.field--error input,.field--error textarea,.field--error select{
  border-color:var(--clay-500);
}
.field__error{font-size:12px;color:var(--clay-300)}

.booking-form__submit{align-self:flex-start}
.booking-form__small{
  margin:0;font-size:12px;line-height:1.6;color:var(--on-ink-45);max-width:52ch;
}

.booking-form__note{
  padding:14px 16px;border-radius:10px;font-size:13px;
  background:rgba(74,107,63,.22);border:1px solid rgba(139,178,122,.45);
  color:#DCE8D2;
}
.booking-form__note--error{
  background:rgba(138,63,36,.22);border-color:rgba(211,154,124,.45);
  color:#F0D6C8;
}

/* ===========================================================================
   Spotlight ring
   A 1px gradient edge that follows the cursor, drawn as a masked pseudo
   element so it sits exactly on the border. Gold rather than white, since
   that is the accent here.
   ========================================================================= */

.spotlight{position:relative}
.spotlight::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(var(--spot-size,240px) circle
    at var(--spot-x,-200px) var(--spot-y,-200px),
    rgba(201,162,39,.55), rgba(201,162,39,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.spotlight:hover::before,.spotlight:focus-within::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .spotlight::before{transition:none}
}

/* ===========================================================================
   FAQ
   ========================================================================= */

.faq-head{
  display:flex;flex-direction:column;gap:24px;
  margin-bottom:clamp(36px,4vw,56px);
}
@media (min-width:1001px){
  .faq-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}
  .faq-head__lead{text-align:right;padding-bottom:4px}
}
.faq-head__intro{display:flex;flex-direction:column;gap:16px;max-width:36rem}
.faq-head__lead{
  margin:0;max-width:26rem;
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;color:var(--on-ink-62);
}

/* The small dotted pill from the spec, in this site's badge idiom. */
.pill{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--glass-fill);border:1px solid var(--glass-border-badge);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:12px;font-weight:500;color:var(--on-ink);
}
.pill__dot{
  width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--gold-500);flex:none;
}

.faq-layout{
  display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:clamp(28px,3vw,48px);align-items:start;
}

.faq-aside{display:flex;flex-direction:column;gap:24px;position:sticky;top:120px}

.faq-tabs{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 10px 10px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}

/* Says out loud that the rows below do something. Without it the list reads as
   a table of contents rather than a control. */
.faq-tabs__hint{
  padding:0 8px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-45);
}
.faq-tabs__list{display:flex;flex-direction:column;gap:6px}

.faq-tab{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:13px 16px;
  border:1px solid transparent;border-radius:var(--radius-pill);
  background:transparent;cursor:pointer;
  font-family:var(--font-sans);font-size:14px;text-align:left;
  color:var(--on-ink-62);
  transition:color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.faq-tab__num{
  flex:none;
  font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--gold-500);
}
.faq-tab__label{flex:1}

/* The arrow is the affordance: dim at rest, gold and nudged along on hover,
   and held out on the row that is currently showing. */
.faq-tab__go{
  flex:none;display:grid;place-items:center;
  color:var(--on-ink-40);
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}

.faq-tab:hover{background:rgba(255,255,255,.05);color:var(--on-ink-strong)}
.faq-tab:hover .faq-tab__go{opacity:1;transform:none;color:var(--gold-400)}
.faq-tab:active{transform:translateY(1px)}

.faq-tab.is-active{
  background:rgba(255,255,255,.08);
  border-color:var(--glass-border);
  color:var(--on-ink-strong);
}
.faq-tab.is-active .faq-tab__go{opacity:1;transform:none;color:var(--gold-400)}

@media (prefers-reduced-motion:reduce){
  .faq-tab__go{transition:none}
}

.faq-help{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:26px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner);
}
.faq-help__title{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:20px;line-height:1.15;color:var(--on-ink-strong);
}
.faq-help__body{margin:0;font-size:13px;line-height:1.6;color:var(--on-ink-55)}
.faq-help__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:13px;font-weight:600;color:var(--gold-400);
}
.faq-help__link:hover{color:var(--on-ink-strong)}

/* --- The accordion ------------------------------------------------------- */

.faq-panels{display:block;min-width:0}
.faq-panel{display:flex;flex-direction:column;gap:12px}
/* display:flex would otherwise beat the hidden attribute and every group
   would stay on screen once the tabs took over. */
.faq-panel[hidden]{display:none}

.acc{
  border-radius:16px;
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  padding:0 clamp(20px,2vw,26px);
  transition:background var(--dur-base) var(--ease-standard);
}
.acc[open]{background:rgba(255,255,255,.09)}

.acc__trigger{
  display:flex;align-items:center;gap:16px;
  padding:26px 0;cursor:pointer;list-style:none;
}
.acc__trigger::-webkit-details-marker{display:none}
.acc__q{
  flex:1;
  font-size:clamp(15px,1.05vw,17px);font-weight:500;line-height:1.45;
  color:var(--on-ink-strong);
}

.acc__chevron{
  flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:var(--on-ink-62);
  transition:transform var(--dur-base) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.acc__trigger:hover .acc__chevron{color:var(--gold-400)}
.acc[open] .acc__chevron{transform:rotate(180deg);color:var(--gold-400)}

/* <details> has no height to animate, so the reveal is on the content. */
.acc__panel{padding-bottom:26px}
.acc__panel p{
  margin:0;max-width:64ch;
  font-size:15px;line-height:1.7;color:var(--on-ink-62);
}
.acc[open] .acc__panel{
  animation:accOpen var(--dur-base) var(--ease-standard) both;
}
@keyframes accOpen{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .acc[open] .acc__panel{animation:none}
}

/* ===========================================================================
   Site search
   Drops below the nav bar in the same language as the mega menu.
   ========================================================================= */

.nav__search{
  margin-top:8px;padding:16px;
  border:1px solid var(--glass-border-photo);border-radius:12px;
  background:rgba(23,21,15,.94);
  -webkit-backdrop-filter:var(--nav-blur);backdrop-filter:var(--nav-blur);
  box-shadow:var(--glass-inner);
  animation:megaOpen var(--dur-slow) var(--ease-standard) both;
}
.nav__search[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.nav__search{animation:none}}

.nav__search-field{
  display:flex;align-items:center;gap:12px;
  padding:0 14px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.nav__search-field:focus-within{border-color:var(--gold-500)}
.nav__search-icon{display:grid;place-items:center;flex:none;color:var(--on-ink-50)}

.nav__search-field input{
  flex:1;min-width:0;
  padding:14px 0;border:0;background:transparent;outline:none;
  font-family:var(--font-sans);font-size:16px;color:var(--on-ink-strong);
}
.nav__search-field input::placeholder{color:var(--on-ink-40)}
.nav__search-field input::-webkit-search-cancel-button{display:none}

.nav__search-kbd{
  flex:none;padding:3px 7px;border-radius:5px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  font-family:var(--font-sans);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-ink-45);
}

.nav__search-hint{
  margin:10px 4px 0;font-size:12px;color:var(--on-ink-40);
}

.nav__search-results{
  display:flex;flex-direction:column;gap:2px;
  margin-top:12px;max-height:min(52vh,420px);overflow-y:auto;
}
.nav__search-results:empty{display:none}

.search-hit{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 14px;border-radius:10px;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.search-hit:hover,.search-hit.is-active{
  background:rgba(255,255,255,.06);border-color:var(--glass-border);
}
.search-hit__title{
  font-size:15px;font-weight:500;color:var(--on-ink-strong);
  display:flex;align-items:baseline;gap:10px;
}
.search-hit__where{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-500);
}
.search-hit__snippet{
  font-size:13px;line-height:1.5;color:var(--on-ink-55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.search-hit mark{
  background:rgba(201,162,39,.22);color:var(--on-ink-strong);
  border-radius:3px;padding:0 2px;
}

.nav__search-empty{
  padding:14px;font-size:13px;color:var(--on-ink-50);
}
.nav__search-empty a{color:var(--gold-400)}

/* ==== pages.css ==== */
/* ===========================================================================
   Page-specific layout
   ========================================================================= */

/* ---------- Home -------------------------------------------------------- */

.home-hero{min-height:940px}
.home-hero .hero__inner{padding-bottom:0}
.home-hero__fade{height:320px;background:linear-gradient(to bottom,rgba(23,21,15,0),#17150F)}
/* The hero's copy is left-set over a video whose frames run from tungsten-dark to
   bright midday sky, so it sits on the brand's --scrim-left protection gradient.
   The handoff's flat rgba(23,21,15,.36) tint holds the frame together; this keeps
   the type legible on the bright frames. Brand guide: type over photography always
   sits on a protection gradient, never a solid capsule. */
.home-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(23,21,15,.76) 0%,rgba(23,21,15,.36) 46%,rgba(23,21,15,.04) 78%,rgba(23,21,15,0) 100%);
}
.home-hero__clients{
  position:relative;z-index:1;margin:auto auto 0;
  padding:80px var(--gutter-page) 56px;max-width:var(--container);width:100%;
  display:flex;flex-direction:column;gap:28px;
}

/* ---------- Agencies ---------------------------------------------------- */

.agencies-hero{min-height:760px}
.agencies-hero .hero__inner{padding-top:200px}
.agencies-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(23,21,15,.84) 0%,rgba(23,21,15,.4) 48%,rgba(23,21,15,.06) 80%,rgba(23,21,15,0) 100%);
}
.agencies-hero__fade{height:280px;background:linear-gradient(to bottom,rgba(23,21,15,0),#17150F)}

/* ---------- About ------------------------------------------------------- */

.about-hero{min-height:700px;justify-content:flex-end}
.about-hero__fade{height:300px;background:linear-gradient(to bottom,rgba(23,21,15,0),#17150F)}

/* The hero line is long. At the full display size it ran the width of the
   frame and sat over the subject. Set smaller and to a narrower measure, it
   holds the left of the composition and leaves the photograph to read. */
.about-hero__title{
  font-size:clamp(34px,3.9vw,58px);
  line-height:var(--lead-h2);
  max-width:21ch;
}
.about-hero__lead{max-width:40ch}

.about-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:72px;align-items:start;
}
.about-intro p{
  font-family:var(--font-serif);font-size:19px;font-weight:300;line-height:1.6;
  color:rgba(243,237,226,.74);
}

.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
/* Nine members read as 3x3; the handoff's 4-up was sized for eight. This has to
   sit above the breakpoints - it carries the same specificity as the rules that
   collapse the grid, so further down the file it would beat them at every
   width and a phone would still get three columns. */
.team-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.team__member{display:flex;flex-direction:column;gap:14px}
.team__portrait{
  aspect-ratio:4 / 5;border-radius:16px;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.03);
  display:grid;place-items:center;text-align:center;padding:0 18px;
  overflow:hidden;
}
.team__portrait img{width:100%;height:100%;object-fit:cover}
.team__placeholder{font-size:11px;font-weight:300;color:var(--on-ink-40)}
.team__name{font-size:23px;line-height:1.2}
.team__role{font-size:12px;font-weight:300;color:var(--on-ink-50);margin-top:4px}

.partners{
  display:flex;flex-direction:column;gap:20px;
  padding-top:40px;border-top:1px solid var(--rule);
}

/* ---------- FAQ --------------------------------------------------------- */

.faq-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(23,21,15,.78) 0%,rgba(23,21,15,.4) 46%,rgba(23,21,15,.04) 78%,rgba(23,21,15,0) 100%),
    linear-gradient(to bottom,rgba(23,21,15,.35) 0%,rgba(23,21,15,0) 34%,rgba(23,21,15,.55) 78%,#17150F 100%);
}
.faq-hero__stats{margin-top:24px}




/* ---------- Media ------------------------------------------------------- */

.media-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(23,21,15,.8) 0%,rgba(23,21,15,.42) 48%,rgba(23,21,15,.05) 80%,rgba(23,21,15,0) 100%),
    linear-gradient(to bottom,rgba(23,21,15,.3) 0%,rgba(23,21,15,0) 32%,rgba(23,21,15,.5) 76%,#17150F 100%);
}
.episode{margin:0;gap:16px}
.episode p{font-size:15px;font-weight:300;line-height:1.65;color:var(--on-ink-78)}
.episode__play{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13px;font-weight:600;color:var(--on-ink);
}
.episode__play:hover{color:var(--gold-400)}

/* ---------- Careers ----------------------------------------------------- */

.careers-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(23,21,15,.8) 0%,rgba(23,21,15,.42) 48%,rgba(23,21,15,.05) 80%,rgba(23,21,15,0) 100%),
    linear-gradient(to bottom,rgba(23,21,15,.3) 0%,rgba(23,21,15,0) 32%,rgba(23,21,15,.5) 76%,#17150F 100%);
}
.roles{display:flex;flex-direction:column}
.role{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:32px 0;border-top:1px solid var(--rule);
}
.role:last-child{border-bottom:1px solid var(--rule)}
.role__text{display:flex;flex-direction:column;gap:6px}
.role__title{font-size:clamp(26px,3vw,40px);line-height:1}
.role__meta{font-size:13px;font-weight:300;color:var(--on-ink-50)}
.role .btn{flex:none;align-self:auto}
.roles__empty{
  padding:40px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:15px;font-weight:300;color:var(--on-ink-62);
}

/* ===========================================================================
   Responsive — the prototypes are desktop-only; this is the implementation's own work.
   ========================================================================= */

@media (max-width:1100px){
  .stat-band{padding:40px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-band--3{padding:40px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .footer__brand{grid-column:1 / -1}
  .contact__inner{gap:48px}
}

@media (max-width:1000px){
  /* The headline clamps are near their lower bound here, so the tracking
     relaxes with them. */
  :root{
    --track-hero:-.01em;
    --track-h1:-.008em;
    --track-h2:-.004em;
    --track-h2-minor:-.002em;
    --track-h3:0;
    --track-statement:-.004em;
    --track-card:0;
    --track-h4:.006em;
    /* A little more air as the type comes down in size. */
    --lead-hero:1.02;
    --lead-h1:1.04;
    --lead-h2:1.07;
    --lead-h2-minor:1.08;
    --lead-h3:1.1;
    --lead-statement:1.07;
    --lead-card:1.12;
  }

  /* Centre nav collapses into the hamburger. Search stays: it is the only
     way to reach a deep page without opening the menu first. */
  .nav__links{display:none}
  .nav__icons{gap:14px}
  .nav__bar{padding:8px 20px}

  /* The centre nav lives here now, so the menu leads with those links. */
  .mega{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .mega__col--primary{display:flex;grid-column:1 / -1}
  .mega__primary{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px 24px;
    padding-bottom:20px;border-bottom:1px solid var(--rule);
  }
  .mega__primary .mega__link{border-top:none;padding:8px 0}
  .mega__primary .mega__label{font-size:17px}
  .mega__featured{grid-column:1 / -1;flex-direction:row;align-items:center;gap:24px;padding:20px}
  .mega__featured-well{flex:0 0 220px}
  .mega__featured-well img{aspect-ratio:4 / 3}
  .mega__featured-body{max-width:52ch}

  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-grid,.team-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .split--text-first,.split--image-first{grid-template-columns:minmax(0,1fr);gap:32px}
  /* Image first when stacked, whichever order the desktop row used. */
  .split__well{order:-1}

  .about-intro{grid-template-columns:minmax(0,1fr);gap:24px}
  .contact__inner{grid-template-columns:minmax(0,1fr);gap:48px}


  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .tcard{flex:0 0 calc((100% - 24px) / 2)}

  /* Once the cards go wide, a band set as a share of card height collapses into
     a sliver. Below desktop the frame comes into flow at its own 16:9 - the
     ratio of the source, so nothing is cropped - and the card grows around it.
     The badge still sits over the image; the hover slide has nothing to do on a
     touch screen, so it rests open. */
  .pillar{height:auto;min-height:0}

  .pillar__frame{
    position:relative;height:auto;aspect-ratio:16 / 9;
    transform:none;opacity:1;
  }
  .pillar:hover .pillar__frame,.pillar:focus-within .pillar__frame{transform:none}

  .pillar__veil{display:none}
  .pillar__spacer{display:none}

  /* static, so the badge below positions against the card and lands on the
     image rather than on the content that follows it */
  .pillar__content{position:static;height:auto;padding-top:clamp(14px,1.6vw,20px)}
  .pillar__badge{
    position:absolute;z-index:3;
    top:clamp(14px,1.8vw,22px);left:clamp(16px,2vw,24px);
  }
  .pillar__block{transform:none}
  .pillar:hover .pillar__block,.pillar:focus-within .pillar__block{transform:none}

  /* Below desktop the frame crops tighter and the headline lands on the brightest
     part of it, so every hero carries an extra protection gradient. Type over
     photography never sits on a solid capsule. */
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(23,21,15,.14) 0%,rgba(23,21,15,.28) 32%,rgba(23,21,15,.7) 70%,rgba(23,21,15,.88) 100%);
  }
}

@media (max-width:760px){
  :root{
    --gutter-page:20px;
    /* At phone sizes the display serif needs its side bearing back. */
    --track-hero:0;
    --track-h1:0;
    --track-h2:.003em;
    --track-h2-minor:.004em;
    --track-h3:.005em;
    --track-statement:.003em;
    --track-card:.005em;
    --track-h4:.008em;
    --lead-hero:1.06;
    --lead-h1:1.07;
    --lead-h2:1.1;
    --lead-h2-minor:1.1;
    --lead-h3:1.12;
    --lead-statement:1.1;
    --lead-card:1.14;
  }

  .nav__careers{display:none}
  .nav__bar{height:64px;padding:8px 16px}
  .nav__cta{min-height:44px;padding:10px 18px;font-size:14px;gap:8px}
  .nav__right{gap:12px}
  .nav__actions{gap:12px}
  .nav__menu{padding:20px;max-height:calc(100vh - 64px - 40px)}
  .mega{grid-template-columns:minmax(0,1fr);gap:28px}
  .mega__primary{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Descriptions are noise at phone width - the labels carry it. */
  .mega__desc{display:none}
  .mega__link{padding:11px 0}
  .mega__featured{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .mega__featured-well{flex:none}
  .mega__featured-well img{aspect-ratio:16 / 9}
  .mega__foot{margin-top:20px;gap:14px}
  .mega__social{gap:18px}
  html{scroll-padding-top:92px}

  .hero::after{
    background:linear-gradient(to bottom,rgba(23,21,15,.2) 0%,rgba(23,21,15,.34) 30%,rgba(23,21,15,.82) 68%,rgba(23,21,15,.94) 100%);
  }

  .hero,.home-hero,.agencies-hero,.about-hero{min-height:auto}
  .hero__inner{padding:140px var(--gutter-page) 64px}
  .agencies-hero .hero__inner{padding-top:140px}
  .home-hero__clients{padding:48px var(--gutter-page) 40px;gap:20px}
  .serif-row{gap:24px}
  .serif-row--partners{gap:24px}

  .grid--2,.grid--3,.grid--4,.team-grid,.team-grid--3{grid-template-columns:minmax(0,1fr)}

  .tcard{flex:0 0 100%}
  .tcarousel__wrap{gap:32px}
  .tcarousel__head{align-items:flex-start}
  .tcarousel__stat{align-items:flex-start;text-align:left}
  .pillar{height:auto;min-height:0}
  .pillar-grid{gap:16px}
  .service-grid{grid-template-columns:minmax(0,1fr)}
  .stat-band,.stat-band--3{padding:32px;grid-template-columns:minmax(0,1fr);gap:24px}

  .section{padding-bottom:80px}
  .section--last{padding-bottom:96px}
  .band__centred{padding:96px var(--gutter-page);min-height:auto}
  .band__panel{padding:96px var(--gutter-page)}

  .card{padding:24px}
  .card--feature{padding:28px}
  .form{padding:24px}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .contact{padding-top:96px}

  .role{flex-direction:column;align-items:flex-start;gap:20px}
  .footer{margin-top:80px}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .footer__legal{flex-direction:column;gap:8px}
}

/* The About page's centred manifesto line inherits the headline formula. */
.about-statement{font-size:clamp(34px,4.4vw,64px)}

/* ---------- Footer panel, responsive ------------------------------------- */

@media (max-width:1100px){
  .fpanel{padding:28px 32px}
  .fpanel__grid{column-gap:32px}
}

@media (max-width:1000px){
  .fpanel__grid{grid-template-columns:auto minmax(0,1fr);row-gap:28px}
  .fpanel__mark{grid-column:1;grid-row:1}
  .fpanel__heading{grid-column:2;grid-row:1;max-width:20ch}
  .fpanel__actions{grid-column:1 / -1;grid-row:2}
  .fpanel__col{grid-row:auto;align-self:start}
  .fpanel__col:nth-of-type(1),
  .fpanel__col:nth-of-type(2),
  .fpanel__col:nth-of-type(3){grid-column:auto}
}

@media (max-width:760px){
  .fpanel{padding:24px 20px;border-radius:24px}
  /* Both the mark and the heading now span the full width, so each needs its
     own row. Without resetting grid-row they keep the row 1 they were given at
     the tablet breakpoint and render on top of one another. */
  .fpanel__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:20px;row-gap:22px;
  }
  .fpanel__mark{grid-column:1 / -1;grid-row:1}
  .fpanel__heading{grid-column:1 / -1;grid-row:2;max-width:none}
  .fpanel__actions{grid-column:1 / -1;grid-row:3}
  .fpanel__legal{margin-top:24px;flex-direction:column;gap:4px}
  .fbtn{padding:10px 16px}
}

.team__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}

.team__linkedin{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;margin-top:2px;
  color:var(--gold-500);
  transition:color var(--dur-fast) var(--ease-standard);
}
.team__linkedin svg{width:100%;height:100%;display:block}
.team__linkedin:hover{color:var(--gold-400)}

/* ---------- Pillar subpages ---------------------------------------------- */

.pillar-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(23,21,15,.8) 0%,rgba(23,21,15,.42) 48%,rgba(23,21,15,.05) 80%,rgba(23,21,15,0) 100%),
    linear-gradient(to bottom,rgba(23,21,15,.3) 0%,rgba(23,21,15,0) 32%,rgba(23,21,15,.5) 76%,#17150F 100%);
}

.pillar-detail{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;align-items:start;
}
.pillar-detail .dot-list{max-width:none;margin:0}
.pillar-detail .dot-list span{font-size:17px;color:var(--on-ink-78)}

.pillar-siblings{
  display:flex;flex-direction:column;gap:24px;
  margin-top:32px;padding-top:40px;border-top:1px solid var(--rule);
}
.pillar-sibling{
  display:flex;flex-direction:column;gap:10px;
  padding:26px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
.pillar-sibling:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.pillar-sibling__title{
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:24px;line-height:1.15;color:var(--on-ink-strong);
}
.pillar-sibling__go{
  margin-top:auto;padding-top:14px;
  font-size:13px;font-weight:600;color:var(--gold-400);
  display:inline-flex;align-items:center;gap:8px;
}

@media (max-width:1000px){
  .pillar-detail{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* ---------- Bento grid, responsive ---------------------------------------- */

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));min-height:auto}
  /* The desktop row sizes assume a card three columns wide. Once the grid drops
     to two, the quote is narrow enough to wrap past its row and `overflow:hidden`
     was cutting the attribution off. Let the rows take their content instead. */
  .bento__stack{grid-template-rows:auto auto}
  .bento__stack:first-child{grid-template-rows:1fr}
  .bento__card--tall{min-height:620px}
  .bento__stack--systems{
    grid-column:1 / -1;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:minmax(260px,1fr);
  }
}

@media (max-width:760px){
  .bento__header{flex-direction:column;gap:20px}
  .bento__cta{align-self:stretch;justify-content:center}
  .bento,.bento__stack,.bento__stack--systems{
    grid-template-columns:1fr;grid-template-rows:auto;
  }
  .bento__card--tall{min-height:560px}
  .bento__card--marquee{min-height:360px}
  .bento__row{grid-template-columns:62px 14px minmax(0,1fr)}
  .bento__card--contact{padding:20px 72px 20px 20px}
}

/* ---------- Glow cards, responsive ---------------------------------------- */

@media (max-width:1000px){
  .glow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .glow-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .glow-card__face{border-radius:24px}
  .glow-card__glow{border-radius:24px}
  .glow-card__body{min-height:0}
}

/* ---------- Book a call, responsive --------------------------------------- */

@media (max-width:1000px){
  .booking{grid-template-columns:minmax(0,1fr);gap:32px}
  .booking__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  .booking__facts{grid-template-columns:minmax(0,1fr)}
  .booking-form__grid{grid-template-columns:minmax(0,1fr)}
  .field--half{grid-column:1 / -1}
  .booking-form__submit{align-self:stretch;justify-content:center}
}

/* ---------- FAQ, responsive ----------------------------------------------- */

@media (max-width:1000px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-aside{position:static}
  .faq-tabs__list{flex-direction:row;flex-wrap:wrap}
  .faq-tab{width:auto;flex:1 1 auto}
}

@media (max-width:760px){
  .faq-tabs__list{flex-direction:column}
  .faq-tab{width:100%}
  .acc__trigger{padding:20px 0;gap:12px}
  .acc__panel{padding-bottom:20px}
}

/* ---------- Search, responsive -------------------------------------------- */

@media (max-width:760px){
  .nav__search{padding:12px}
  .nav__search-kbd{display:none}
  .nav__search-hint{display:none}
  .nav__search-results{max-height:60vh}
  /* Title and section label side by side leaves neither enough room on a
     phone, so stack them and let the label sit above the title. */
  .search-hit{padding:12px 10px}
  .search-hit__title{flex-direction:column-reverse;align-items:flex-start;gap:4px}
}

/* ==== focal points (generated) ==== */
img.focal--corner-office{object-position:55% 42%}
img.focal--mediterranean-deck{object-position:52% 48%}
img.focal--midday-saturated{object-position:50% 60%}
img.focal--night-interior{object-position:18% 40%}
img.focal--overcast-portrait{object-position:48% 40%}
img.focal--street-briefing{object-position:47% 34%}
img.focal--tarmac-arrival{object-position:50% 38%}
img.focal--tarmac-departure{object-position:48% 34%}