/* ============================================================
   EAIC.UK — Site Stylesheet
   Palette: Oxford Blue · White · Gold
   ============================================================ */

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --oxford:    #0d2140;
  --oxford-mid:#162d54;
  --oxford-lt: #1e3d6e;
  --gold:      #c9922a;
  --gold-lt:   #e0aa42;
  --gold-pale: #f5edd8;
  --gold-text: #8a6210;   /* gold for TEXT on light grounds — 5.5:1 on white */
  --white:     #ffffff;
  --off-white: #f7f6f3;
  --stone:     #ede9e1;
  --ink:       #1a1a1a;
  --ink-mid:   #3d3d3d;
  --ink-muted: #6b6b6b;
  --ink-faint: #9a9a9a;
  --border:    rgba(13,33,64,.12);
  --border-mid:rgba(13,33,64,.2);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --max-w:  1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-gap: clamp(3rem, 5.5vw, 5rem);

  /* ── Display type scale (Tier 1B, 2026-07-25) ─────────────────────────────
     Every display-scale size on the estate now resolves here. Values are the
     ones already shipping — this pass moved them, it did not retune them.

     R6 ("cap display at ~44-48px") is now an edit to this block alone. Current
     ceilings at a 1440px viewport, for reference when that call is made:
       --fs-h1-cine  4rem   = 64px  <- the 64px the audit flagged
       --fs-h1       3.8rem = 61px
       --fs-h1-hero  3.6rem = 58px
       --fs-h2-cta   3rem   = 48px
       --fs-stat     2.9rem = 46px
       --fs-h2       2.6rem = 42px
     .display (5.2rem/83px) is a single decorative use, not a page heading. */
  --fs-display:  clamp(2.8rem, 6vw,   5.2rem);
  --fs-h1:       clamp(2.2rem, 4.5vw, 3.8rem);
  --fs-h1-hero:  clamp(2.6rem, 4.2vw, 3.6rem);
  --fs-h1-cine:  clamp(2.7rem, 4.6vw, 4rem);
  --fs-h2:       clamp(1.7rem, 3vw,   2.6rem);
  --fs-h2-cta:   clamp(1.9rem, 3.5vw, 3rem);
  --fs-stat:     clamp(2rem,   3.2vw, 2.9rem);
  --fs-quote:    clamp(1.4rem, 2.5vw, 2rem);
  --fs-lead:     clamp(1rem,   1.5vw, 1.2rem);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }

/* ── Typography Scale ───────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--oxford);
}
.display em { font-style: italic; color: var(--gold-text); }

/* .hero__title carries the h1 look for carousel slides 2–4, which must not be
   <h1> elements — one H1 per document (design audit R10, 2026-07-25). */
h1,
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oxford);
}
h1 em,
.hero__title em { font-style: italic; }
.hero__title { margin-top: 0; }

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--oxford);
}

h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--oxford);
}

p { line-height: 1.7; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--ink-mid);
  max-width: 52ch;
}

/* ── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-gap) 0; }
.section--sm { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.section--flush-top { padding-top: 0; }

/* ── Navigation ─────────────────────────────────────────── */
/* The banner landmark <header class="site-header"> now carries the sticky
   behaviour. It must live on the wrapper, not on .nav: a sticky element only
   travels within its parent's box, so leaving sticky on .nav inside a wrapper
   exactly its own height would unstick the nav immediately. (R10, 2026-07-25) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  height: 64px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.nav__logo-mark {
  width: 32px;
  height: 32px;
  background: var(--oxford);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.nav__logo-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--oxford);
}

.nav__links {
  display: flex;
  align-items: center;
  /* every page carried an inline gap:0 that overrode this, so 0 has been the
     rendered value throughout; folding it in here (Tier 1B) and dropping the
     40 inline attributes leaves the computed value unchanged. */
  gap: 0;
  list-style: none;
  flex: 1;
  justify-content: center;
  margin: 0;
}

.nav__links a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-mid);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav__links a:hover { color: var(--oxford); background: var(--off-white); }
.nav__links a.active { color: var(--oxford); font-weight: 500; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav__mobile-toggle {
  display: none;
  padding: 0.5rem;
  color: var(--oxford);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.65rem 1.4rem;
  border-radius: 5px;
  transition: all 0.18s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.btn--primary {
  background: var(--oxford);
  color: var(--white);
  border: 1.5px solid var(--oxford);
}
.btn--primary:hover {
  background: var(--oxford-lt);
  border-color: var(--oxford-lt);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13,33,64,.22);
}

.btn--gold {
  background: linear-gradient(160deg, #d4a84b 0%, #c49332 55%, #b5831f 100%);
  /* Declan, 16 Aug 2026: label set to white. NOTE: white on this gold measures
     2.21:1 (lightest stop) to 3.37:1 (darkest) — below the 4.5:1 WCAG AA floor.
     Navy measured 4.82–7.35:1. To keep white AND pass AA the gradient needs to
     drop to roughly #8c6a20 / #7d5d18 / #6e5012 (white = 5.00:1). */
  color: #ffffff;
  border: 1.5px solid #a87220;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.18);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn--gold:hover {
  background: linear-gradient(160deg, #dcb255 0%, #ce9e3d 55%, #bd8b26 100%);
  border-color: #b87e28;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 16px rgba(176,124,34,.4);
}

.btn--outline {
  background: transparent;
  color: var(--oxford);
  border: 1.5px solid var(--border-mid);
}
.btn--outline:hover {
  border-color: var(--oxford);
  background: var(--off-white);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-mid);
  border: 1.5px solid transparent;
  padding-left: 0;
  font-size: 0.875rem;
}
.btn--ghost:hover { color: var(--oxford); }
.btn--ghost .arrow { transition: transform 0.15s; }
.btn--ghost:hover .arrow { transform: translateX(3px); }

.btn--lg {
  font-size: 0.95rem;
  padding: 0.8rem 1.8rem;
}

.btn--sm {
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: var(--oxford);
  color: var(--white);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 3.5vw, 3rem);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(ellipse at center, rgba(201,146,42,.07) 0%, transparent 65%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,146,42,.3), transparent);
}

.hero .container { position: relative; z-index: 1; }

/* ── Shared hero text — applies to both .hero and .page-hero ── */
.hero .eyebrow,
.page-hero .eyebrow {
  color: var(--gold-lt);
  margin-bottom: 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.hero h1,
.page-hero h1,
.hero .hero__title,
.page-hero .hero__title {
  color: var(--white);
  font-size: var(--fs-h1-hero);
  line-height: 1.08;
  max-width: 16ch;
  margin-bottom: 1.4rem;
}

.hero h1 em,
.page-hero h1 em,
.hero .hero__title em,
.page-hero .hero__title em { color: var(--gold-lt); font-style: italic; }

.hero .lead,
.page-hero .lead {
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 42ch;
  margin-bottom: 1.4rem;
}

.hero__ctas,
.page-hero .hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__ctas .btn--ghost { color: rgba(255,255,255,.75); }
.hero__ctas .btn--ghost:hover { color: var(--white); }

/* hero__stats — defined in layout section below */

/* ── Problem statement ──────────────────────────────────── */
.problem {
  background: var(--off-white);
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}

.problem__inner {
  max-width: 700px;
}

.problem h2 { margin-bottom: 1.5rem; }

.problem p { color: var(--ink-mid); margin-bottom: 1rem; }
.problem p:last-of-type { margin-bottom: 1.75rem; }

/* ── Three steps ────────────────────────────────────────── */
.steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 3rem;
}

.step {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  position: relative;
}
.step:last-child { border-right: none; }

.step__num {
  width: 36px;
  height: 36px;
  background: var(--oxford);
  color: var(--gold-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.step h3 { margin-bottom: 0.75rem; font-size: 1.1rem; }

.step p { font-size: 0.9rem; color: var(--ink-muted); line-height: 1.65; }

/* Arrow connector between steps */
.step::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  color: var(--gold);
  font-size: 1.1rem;
  z-index: 2;
  padding: 2px;
}
.step:last-child::after { display: none; }

/* ── Products ────────────────────────────────────────────── */
.products__header {
  max-width: 600px;
  margin-bottom: 3rem;
}
.products__header .eyebrow { margin-bottom: 1rem; }
.products__header p { color: var(--ink-mid); }

.products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.product-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 24px rgba(13,33,64,.07);
}

.product-card--sentinel { border-top: 3px solid var(--oxford); }
.product-card--citadel  { border-top: 3px solid var(--gold); }

.product-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  margin-bottom: 1.25rem;
}
.product-card--sentinel .product-card__tag { background: rgba(13,33,64,.08); color: var(--oxford); }
.product-card--citadel  .product-card__tag { background: var(--gold-pale); color: #7a5010; }

.product-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--oxford);
}

.product-card__sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
}

.product-card p {
  font-size: 0.9rem;
  color: var(--ink-mid);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 1.75rem;
}

.product-card__price {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: var(--off-white);
  border-radius: 5px;
  border: 1px solid var(--stone);
}

.product-card__price strong { color: var(--ink); }

.products__bridge {
  text-align: center;
  margin-top: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-muted);
}
.products__bridge strong { color: var(--oxford); font-style: normal; }

/* ── Platform screenshots ────────────────────────────────── */
.platform { background: var(--oxford); }

.platform .eyebrow { color: var(--gold-lt); margin-bottom: 1.25rem; }
.platform h2 { color: var(--white); margin-bottom: 1rem; }
.platform .lead { color: rgba(255,255,255,.7); margin-bottom: 3rem; }

.platform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.platform__card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  transition: border-color 0.2s, transform 0.2s;
}
.platform__card:hover {
  border-color: rgba(201,146,42,.35);
  transform: translateY(-3px);
}

.platform__card:first-child {
  grid-column: span 2;
}

.platform__screenshot {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: top left;
  background: var(--oxford-mid);
}

.platform__caption {
  padding: 1.25rem 1.25rem 1.5rem;
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.07);
}

.platform__caption h4 {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.platform__caption p {
  font-size: 0.8rem;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
}

/* ── Case study pull-outs ────────────────────────────────── */
.cases__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.cases__header .eyebrow { margin-bottom: 0.75rem; }

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.case-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.case-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 20px rgba(13,33,64,.08);
}

.case-card__sector {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.5rem;
}

.case-card__org {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--oxford);
  margin-bottom: 1.25rem;
}

.case-card__findings {
  list-style: none;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.case-card__findings li {
  font-size: 0.85rem;
  color: var(--ink-mid);
  padding: 0.4rem 0;
  padding-left: 1.25rem;
  position: relative;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.case-card__findings li:first-child { border-top: 1px solid var(--border); }
.case-card__findings li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.75rem;
}

.case-card__outcome {
  font-size: 0.82rem;
  color: var(--ink-muted);
  padding: 0.85rem;
  background: var(--off-white);
  border-radius: 5px;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.case-card__stat {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--oxford);
}
.case-card__stat-label { font-size: 0.78rem; color: var(--ink-muted); }

/* ── Testimonial ─────────────────────────────────────────── */
.testimonial {
  background: var(--oxford);
  color: var(--white);
}

.testimonial__inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}

.testimonial blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  margin-bottom: 1.75rem;
}

.testimonial__attr {
  font-size: 0.82rem;
  color: rgba(255,255,255,.5);
  letter-spacing: 0.05em;
}
.testimonial__attr strong {
  display: block;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

/* ── Final CTA ───────────────────────────────────────────── */
.cta-band {
  background: var(--off-white);
  border-top: 1px solid var(--stone);
  text-align: center;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2-cta);
  max-width: 18ch;
  margin: 0 auto 1.25rem;
}

.cta-band p {
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-size: 0.95rem;
}

.cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cta-band__trust {
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--oxford);
  color: rgba(255,255,255,.65);
  padding: 4rem 0 2.5rem;
}

.footer__grid {
  display: grid;
  /* brand + five link columns. Was four slots, which is why the fifth
     column had nowhere to go when Resources/Sectors were added. */
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.footer__brand .nav__logo-text {
  color: var(--white);
  font-size: 1.1rem;
}

.footer__brand p {
  font-size: 0.82rem;
  line-height: 1.7;
  margin: 1rem 0;
  color: rgba(255,255,255,.5);
  max-width: 28ch;
}

.footer__address {
  font-size: 0.78rem;
  color: rgba(255,255,255,.52);
  line-height: 1.8;
  font-style: normal;
}

.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 1rem;
}

.footer__col ul { list-style: none; }

.footer__col li { margin-bottom: 0.6rem; }

.footer__col a {
  font-size: 0.875rem;
  color: rgba(255,255,255,.6);
  transition: color 0.15s;
}
.footer__col a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.78rem;
  color: rgba(255,255,255,.55);
}

/* ── Utility ─────────────────────────────────────────────── */
.text-gold   { color: var(--gold-text); }
.text-oxford { color: var(--oxford); }
.text-muted  { color: var(--ink-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.gap-md { gap: 1rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .platform__grid { grid-template-columns: 1fr 1fr; }
  .platform__card:first-child { grid-column: span 2; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__mobile-toggle { display: block; }

  .products__grid { grid-template-columns: 1fr; }
  .cases__grid { grid-template-columns: 1fr; }
  .platform__grid { grid-template-columns: 1fr; }
  .platform__card:first-child { grid-column: span 1; }
  .steps__grid { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .hero__stats { gap: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cases__header { flex-direction: column; align-items: flex-start; }
}

/* ── Page-specific: inner pages ─────────────────────────── */
.page-hero {
  background: var(--oxford);
  color: var(--white);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 3.5vw, 3rem);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(ellipse at center, rgba(201,146,42,.06) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
/* eyebrow / h1 / lead / ctas now unified in .hero block above */
.page-hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.page-hero__ctas .btn--ghost { color: rgba(255,255,255,.7); }
.page-hero__ctas .btn--ghost:hover { color: var(--white); }
/* page-hero also supports two-column layout */
.page-hero .hero__layout { align-items: stretch; }
.page-hero .hero__content { display: flex; flex-direction: column; }
/* .page-hero .hero__stats uses shared .hero__stats rules below */


.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,.62);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: rgba(255,255,255,.62); transition: color 0.15s; }
.breadcrumb a:hover { color: rgba(255,255,255,.75); }
.breadcrumb span { color: rgba(255,255,255,.35); }

/* Mobile nav drawer */
.nav__drawer {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--white);
  z-index: 99;
  padding: 1.5rem var(--gutter);
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--border);
  overflow-y: auto;
}
.nav__drawer.open { display: flex; }
.nav__drawer a {
  font-size: 1.05rem;
  color: var(--ink-mid);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  display: block;
}
.nav__drawer a:hover { color: var(--oxford); }
.nav__drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ── Real SVG logo ───────────────────────────────────────── */
.nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav__logo-img { height: 36px; width: auto; display: block; }
.footer .nav__logo-img { height: 32px; opacity: .85; }
.footer .nav__logo-img:hover { opacity: 1; }

/* ── Animated mark + text logo ──────────────────────────── */
.nav__logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; }
.nav__logo-mark-img { display: block; flex-shrink: 0; }
.nav__logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.08em;
  color: var(--oxford);
  line-height: 1;
}
.nav__logo-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  line-height: 1;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.footer .nav__logo-text { color: var(--white); }
.footer .nav__logo-sub  { color: var(--gold-lt); opacity: 0.75; }
/* Remove old mark div if any still exist */
.nav__logo-mark { display: none; }

/* ── Hero two-column layout ─────────────────────────────── */
.hero__layout {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: 2.5rem;
  align-items: stretch;
}

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

.hero__graphic {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0.95;
  padding-top: 0;
}

.hero__graphic img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* hero__stat-value and label — sized here, layout in stats strip below */
.hero__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 500;
  color: var(--gold-lt);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.hero__stat-label {
  font-size: 0.88rem;
  color: rgba(255,255,255,.6);
  font-weight: 400;
  letter-spacing: 0.02em;
}

@media (max-width: 960px) {
  .hero__layout { grid-template-columns: 1fr; }
  .hero__graphic { display: none; }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .hero__layout {
    grid-template-columns: 46fr 54fr;
    gap: 1.5rem;
  }
}

/* ══════════════════════════════════════════════════════════
   MEGA NAV DROPDOWN
   ══════════════════════════════════════════════════════════ */
.nav__item { position: relative; list-style: none; }

.nav__link--parent {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-mid);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.nav__link--parent:hover {
  color: var(--oxford);
  background: var(--off-white);
  position: relative;
}
.nav__link--parent:hover::after,
.nav__link--parent.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
/* The current section keeps its marker whether or not the cursor is near it. */
.nav__link--parent.active {
  position: relative;
  color: var(--oxford);
  font-weight: 500;
}

.nav__chevron { display: none; }

/* Dropdown panel */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 272px;
  /* Translucent panel. Opaque fallback first — browsers without backdrop-filter
     keep a fully readable white background rather than washing the text out. */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(13,33,64,.12), 0 2px 8px rgba(13,33,64,.06);
  /* Invisible top padding bridges the gap between trigger and panel */
  padding: 0.75rem 0.5rem 0.5rem;
  /* Push panel down so bridge padding creates hover-safe zone */
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 200;
}
/* Invisible hover bridge — fills gap between trigger and dropdown */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -8px;
  right: -8px;
  height: 14px;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Only go translucent where the blur is actually supported — without it,
   a see-through panel over a photographic hero would be unreadable. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav__dropdown {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 32px rgba(13,33,64,.16), 0 2px 8px rgba(13,33,64,.08);
  }
}
/* Extend trigger hit area downward to overlap with bridge */
.nav__link--parent {
  padding-bottom: 0.6rem;
}

/* Dropdown link items */
.nav__dropdown-link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s;
}
.nav__dropdown-link:hover { background: rgba(199,164,99,.07); }
.nav__dropdown-link:hover .nav__dropdown-title { color: var(--gold); }
.nav__dropdown-link:hover .nav__dropdown-desc  { color: var(--ink-mid); }

.nav__dropdown-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--oxford);
  margin-bottom: 0.15rem;
}
.nav__dropdown-desc {
  display: block;
  font-size: 0.775rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ── Experience wall (founders page) ─────────────────────────
   Mixed sources — real marks where one exists, wordmark where it does not.
   Greyscale unifies them; colour returns on hover. */
.exp-wall {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.75rem 2rem;
  align-items: center;
}
.exp-wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.exp-wall img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .18s, opacity .18s;
}
.exp-wall li:hover img { filter: grayscale(0); opacity: 1; }
.exp-wall__text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-mid);
  opacity: .72;
  text-align: center;
  line-height: 1.25;
}
@media (max-width: 600px) {
  .exp-wall { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.35rem 1.25rem; }
  .exp-wall img { max-height: 28px; }
  .exp-wall__text { font-size: 0.92rem; }
}

/* Sectors published as Lab analysis, not yet in service (Aug 2026) —
   greyed in the dropdown, still reachable so the analysis stays readable. */
.nav__dropdown-link--soon .nav__dropdown-title {
  color: var(--ink-muted);
  font-weight: 400;
}
.nav__dropdown-link--soon .nav__dropdown-desc { color: var(--ink-muted); opacity: .8; }
.nav__dropdown-link--soon:hover .nav__dropdown-title { color: var(--ink-mid); }
.nav__soon-tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.28rem;
  vertical-align: 0.08em;
}

/* Divider inside dropdown */
.nav__dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.4rem 0.5rem;
}

/* ══════════════════════════════════════════════════════════
   HERO GRAPHIC — OPEN / BORDERLESS
   ══════════════════════════════════════════════════════════ */
.hero__graphic--open {
  position: relative;
  overflow: visible;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * clamp(2.5rem, 5vw, 4.5rem));
  margin-bottom: -1.75rem;
}
.hero__graphic--open img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── Stats strip — single source of truth ── */
.hero__stats {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1.75rem;
  margin-top: 1.75rem;
  width: 100%;
}
.hero__stat {
  flex: 1;
  text-align: center;
  padding: 0 0.75rem;
  position: relative;
  /* no border-right — separator via ::before only */
  border-right: none !important;
  margin-right: 0 !important;
}
/* One line between each pair — never before the first */
.hero__stat + .hero__stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255,255,255,.14);
}


/* ── Five-pillar footer (Phase 1) ─────────────────────────── */
.footer__grid--pillars {
  /* Six EQUAL columns. The old ratio track list (1.4fr 1fr 1.15fr 1.05fr
     1.05fr 0.9fr) was tuned for a brand block sitting IN the row; the brand
     now spans its own row, so the weighting just made Sectors wide and
     squeezed Resources. NOTE this rule is top-level and declared ~11.7k
     chars after .footer__grid, so it wins on source order — edit HERE. */
  grid-template-columns: repeat(6, 1fr);
  gap: 2.25rem;
}
@media (max-width: 1080px) {
  .footer__grid--pillars { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer__grid--pillars { grid-template-columns: 1fr; }
}

/* ── PHASE 4 FIXES ─────────────────────────────────────────── */
/* the --open hero graphic variant must hide on mobile like the base class */
@media (max-width: 960px) {
  .hero__graphic--open { display: none; }
}
/* ── Hero rotator (carousel) ───────────────────────────────── */
.hero-rotator { display: grid; }
.hero-rotator .hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.hero-rotator .hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-dots { grid-area: 2 / 1; display: flex; align-items: center; gap: 0.25rem; margin-top: 2rem; }
.hero-tabs { display: flex; gap: 0.25rem; }
.hero-dot {
  width: 40px; height: 28px; border-radius: 6px; border: 0; padding: 0;
  background: transparent; cursor: pointer; position: relative;
}
.hero-dot::before {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  transform: translateY(-50%); height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.25); transition: background 0.3s;
}
.hero-dot:hover::before { background: rgba(255,255,255,0.5); }
.hero-dot.is-active::before { background: var(--gold-lt); }
.hero-pause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; margin-left: 0.35rem; border-radius: 6px;
  color: rgba(255,255,255,.75); font-size: 0.72rem; line-height: 1; letter-spacing: .08em;
}
.hero-pause:hover { color: var(--white); background: rgba(255,255,255,.08); }
@media (prefers-reduced-motion: reduce) {
  .hero-rotator .hero-slide { transition: none; }
}

/* ── Full-banner hero carousel ─────────────────────────────── */
.hero-rotator--banner .hero-slide {
  transform: translateX(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.hero-rotator--banner .hero-slide.is-active { transform: translateX(0); }
.hero-rotator--banner .hero__layout { align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .hero-rotator--banner .hero-slide { transform: none; transition: none; }
}

/* ── Cinematic hero (iteration 3) ─────────────────────────── */
.hero--cine {
  min-height: clamp(540px, 74vh, 840px);
  display: flex;
  align-items: center;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero--cine::before, .hero--cine::after { display: none; }
.hero-cine__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a1830;
  will-change: transform;
}
.hero-cine__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cine-pos, 66% 46%);
  display: block;
  transform-origin: var(--cine-pos, 66% 46%);
  animation: cineKb 30s ease-in-out infinite alternate;
}
@keyframes cineKb {
  from { transform: scale(1.045); }
  to   { transform: scale(1.145) translate(-1.1%, .6%); }
}
.hero-cine__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,15,32,.93) 0%, rgba(6,15,32,.80) 28%, rgba(6,15,32,.42) 54%, rgba(6,15,32,.10) 76%, rgba(6,15,32,0) 100%),
    linear-gradient(180deg, rgba(6,15,32,.60) 0%, rgba(6,15,32,0) 24%, rgba(6,15,32,0) 66%, rgba(6,15,32,.52) 100%);
}
.hero--cine .container { z-index: 2; width: 100%; }
.hero--cine .hero__graphic,
.hero--cine .hero__graphic--open { display: none !important; }
.hero--cine .hero__layout { grid-template-columns: 1fr; }
.hero--cine h1,
.hero--cine .hero__title {
  font-size: var(--fs-h1-cine);
  max-width: 18ch;
  text-shadow: 0 2px 28px rgba(3,9,20,.65);
}
.hero--cine .lead {
  max-width: 46ch;
  text-shadow: 0 1px 16px rgba(3,9,20,.7);
}
.hero--cine .hero__stats {
  border-top: 1px solid rgba(199,164,99,.24);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.4rem;
}
@media (max-width: 700px) {
  .hero--cine { min-height: min(78vh, 640px); }
  .hero-cine__media img { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine__media img { animation: none; }
  .hero-cine__media { transition: none; }
}

/* ── R11 · Scroll-pinned hero (2026-08-03) ───────────────────────────────────
   The hero sits in a tall track (.hero-pin) and sticks to the top of the
   viewport while the visitor scrolls through it; scroll progress through the
   track — not a timer — picks which of the four banners is showing. After the
   last one the hero unsticks and the page carries on normally.

   Every rule here is gated on .hero-pin--on, which site.js adds only when the
   viewport is big enough to hold the hero at full height AND the visitor has
   not asked for reduced motion. Without that class the markup lays out exactly
   as it did before the wrapper existed, so no-JS, reduced-motion and small
   screens keep the original timer carousel with no visual change.

   --hero-pin-h is written by site.js (slides × viewport height) rather than
   being a vh multiple in CSS, so it can be recomputed on resize and on mobile
   URL-bar show/hide without the track height jumping mid-scroll. */
.hero-pin { position: relative; }
.hero-pin--on { height: var(--hero-pin-h, auto); }
.hero-pin--on > .hero--cine {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  /* The hero is now vertically centred in a full viewport, so the generous
     lead-in padding that separated it from the sticky header is no longer
     doing that job — it just squeezes the content box. Keep enough to clear
     the header, and let flex centring do the rest. */
  padding-top: clamp(3rem, 4.5vw, 4.25rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
/* Pinned, the hero has exactly one viewport to work with instead of growing to
   fit, so the vertical rhythm is tightened — spacing only, no type is resized.
   The big one is .hero__ctas' bottom margin: 64px of air whose whole job was
   holding the stat band off the buttons in a hero that could grow. Pinned,
   that air is the difference between the stat band being on screen and not. */
.hero-pin--on .hero__ctas { margin-bottom: 0.75rem; }
.hero-pin--on .hero-dots { margin-top: 1.25rem; }
.hero-pin--on .hero--cine .hero__stats { margin-top: 1.25rem; padding-top: 1.1rem; }
.hero-pin--on .hero .eyebrow { margin-bottom: 0.9rem; }
.hero-pin--on .hero--cine h1,
.hero-pin--on .hero--cine .hero__title { margin-bottom: 1.1rem; }
.hero-pin--on .hero--cine .lead { margin-bottom: 1.1rem; }

/* Pinned, the dots are a scroll-position readout as much as a control, so
   they earn a little more presence and a wider hit area. */
.hero-pin--on .hero-dot::before { height: 4px; }
.hero-pin--on .hero-dot.is-active::before { box-shadow: 0 0 12px rgba(199,164,99,.55); }
/* Nothing is auto-advancing any more — there is nothing to pause. */
.hero-pin--on .hero-pause { display: none; }

/* ── Client wall (iteration 3) ────────────────────────────── */
.clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.client-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(199,164,99,.22);
  border-radius: 10px;
  padding: 1.75rem;
}
.client-card__name {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.client-card__tag {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lt);
  font-weight: 600;
  margin-bottom: .75rem;
}
.client-card p:last-child { font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; }
@media (max-width: 980px) { .clients__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .clients__grid { grid-template-columns: 1fr; } }


/* ── Lab dossier wall (iteration 3) ───────────────────────── */
.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.dossier-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(199,164,99,.22);
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.dossier-card__no { font-size: .7rem; letter-spacing: .16em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.dossier-card__name { font-family: var(--font-display); font-size: 1.55rem; color: var(--white); letter-spacing: .08em; }
.dossier-card__sub { color: var(--gold-lt); font-style: italic; font-size: .95rem; font-family: var(--font-display); }
.dossier-card__hook { font-size: .9rem; color: rgba(255,255,255,.62); line-height: 1.7; flex-grow: 1; }
.dossier-card__meta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.dossier-stamp {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lt);
  border: 1px solid rgba(199,164,99,.45);
  border-radius: 4px;
  padding: .3rem .6rem;
}
.dossier-card__link { font-size: .85rem; color: var(--white); text-decoration: underline; text-underline-offset: 3px; margin-top: .7rem; }
@media (max-width: 860px) { .dossier-grid { grid-template-columns: 1fr; } }


/* ── Cinematic hero: stacked carousel images (iteration 3) ── */
.hero-cine__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-cine__img.is-on { opacity: 1; }

/* ── Client story cards (real client work) ────────────────── */
.clients__grid--stories { grid-template-columns: repeat(3, 1fr); }
.client-card__list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.client-card__list li {
  font-size: .85rem;
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  padding-left: 1.15rem;
  position: relative;
}
.client-card__list li::before { content: '\2192'; position: absolute; left: 0; color: var(--gold); font-weight: 600; }
@media (max-width: 980px) { .clients__grid--stories { grid-template-columns: 1fr; } }

/* ── Cinematic hero: baked video loops (iteration 4) ───────── */
.hero-cine__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cine-pos, 66% 46%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-cine__video.is-on { opacity: 1; }
.hero--video-on .hero-cine__media img { animation: none; }

/* ── Audit fixes 2026-07-24: focus visibility & skip link ── */
:focus-visible {
  outline: 2px solid var(--oxford);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 0 0 7px rgba(13,33,64,.35);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--oxford); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 6px 0; font-size: 0.9rem;
}
.skip-link:focus { left: 0; }
.stats-note {
  font-size: 0.75rem; color: rgba(255,255,255,.55);
  margin-top: 0.9rem; letter-spacing: 0.02em;
}

/* ── Cookie consent banner (classes replace inline styles — mop-up 2026-07-25) ── */
#eaic-cookie-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 99999; padding: 1rem; box-sizing: border-box;
}
.cookie-bar__panel {
  max-width: 820px; margin: 0 auto;
  background: var(--oxford); border: 1px solid rgba(199,164,99,.35); border-radius: 12px;
  padding: 1.25rem 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  animation: eaicSlideUp .4s cubic-bezier(.16,1,.3,1) both;
}
.cookie-bar__text { flex: 1; min-width: 240px; }
.cookie-bar__title {
  margin: 0 0 5px; font-size: 14px; font-weight: 600;
  color: var(--white); font-family: var(--font-display);
}
.cookie-bar__body {
  margin: 0; font-size: 13px; color: rgba(255,255,255,.62);
  line-height: 1.65; font-family: var(--font-body);
}
.cookie-bar__body a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-bar__btn { padding: 9px 20px; font-size: 13px; font-family: var(--font-body); border-radius: 6px; cursor: pointer; }
.cookie-bar__btn--decline { border: 1px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.75); }
.cookie-bar__btn--decline:hover { background: rgba(255,255,255,.08); }
.cookie-bar__btn--accept { font-weight: 600; border: 1px solid #c7a463; background: linear-gradient(160deg,#d4a84b,#b5831f); color: var(--oxford); }
.cookie-bar__btn--accept:hover { opacity: .92; }
@keyframes eaicSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  #eaic-cookie-bar { padding: .5rem; }
  .cookie-bar__panel { padding: .85rem 1rem; gap: .6rem; }
  .cookie-bar__title, .cookie-bar__body { font-size: 12px; line-height: 1.5; }
  .cookie-bar__btn { padding: 7px 14px; font-size: 12px; }
}

/* ══ Tier 1B · Inline-style consolidation (2026-07-25) ════════════════════════
   Measured before this pass: 2,027 inline style="" attributes across 40 pages =
   137KB, which is 3.6x more CSS living in the HTML than in this stylesheet. The
   14 blocks below were EXACT duplicate strings accounting for 54KB of that.

   Every rule here reproduces its inline declarations verbatim — this pass is a
   refactor, not a redesign, and was verified by diffing the computed style and
   bounding rect of all 22,650 elements across 20 pages x 3 viewports before and
   after. Retuning any of these values is now a one-line change here instead of
   a find-and-replace across the estate; that is what unblocks R6.
   ─────────────────────────────────────────────────────────────────────────── */

/* body copy inside prose blocks — was 162 identical inline attributes */
.body-p {
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
/* the indented list variant — was 21 */
.body-list {
  color: var(--ink-mid);
  line-height: 1.8;
  margin: 0 0 1.5rem 1.25rem;
}
/* sub-heading inside long-form pages — was 64 */
.sub-head {
  color: var(--oxford);
  margin: 2.25rem 0 .75rem;
  font-size: 1.2rem;
  font-family: var(--font-display);
  font-weight: 500;
}
/* inline prose link — was 71 */
.link-ink {
  color: var(--oxford);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* uppercase group label in the mobile drawer — was 160 + 40 */
.drawer-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 1rem 0 0.5rem;
}
.drawer-label--first { padding: 0.25rem 0 0.5rem; }
/* full-width button (drawer CTA, card footers) — was 43 */
.btn--block {
  width: 100%;
  justify-content: center;
}
/* spacing one-offs that repeated enough to be worth a name */
.li-spaced { margin-bottom: 0.5rem; }      /* was 73 */
.h4-spaced { margin-top: 1.6rem; }         /* was 39 */
.measure-760 { max-width: 760px; }         /* was 23 */
.note-em {                                  /* was 21 */
  font-style: italic;
  color: var(--gold-text);
}
/* The two wordmark sizes were inline only to differentiate header from footer;
   flex-shrink was already duplicated from .nav__logo-mark-img above. */
.site-header .nav__logo-mark-img { width: 40px; height: 40px; }
.footer .nav__logo-mark-img { width: 36px; height: 36px; }

/* ── R2 · One primary button (design audit, 2026-07-25) ──────────────────────
   btn--primary (solid navy, 37 uses) merged into btn--gold, so visitors meet a
   single primary treatment. The ONE exception is the scorecard band: it sits on
   --gold-pale, where the gold fill measures 2.38:1 and fails the 3:1 non-text
   minimum, so that button stays navy (13.7:1) by design — see index.html.

   Also fixes a pre-existing failure this merge surfaced: `.nav__drawer a` sets
   --ink-mid at specificity (0,1,1), which outranks .btn--gold's (0,1,0), so the
   mobile drawer's primary CTA rendered grey-on-gold at 3.91:1 (fails 4.5:1) on
   all 40 pages. Restoring the intended navy takes it to 5.78:1. ─────────────── */
.nav__drawer a.btn--gold { color: #ffffff; }

/* ── R5 · Ration the gold (design audit, 2026-07-25) ─────────────────────────
   The decorative "→" bullet glyph was gold in 26 places, which is the single
   largest block of purely ornamental gold on the estate. It now inherits the
   list's ink, so gold is left doing three jobs: primary CTA, kickers/eyebrows
   and stat numerals — plus the hero italic. Deliberately NOT desaturated toward
   bronze: that was the rejected concept direction, and the gold hue stays. ──── */
.bullet-arrow {
  color: var(--ink-faint);
  font-weight: 600;
  flex-shrink: 0;
}
.bullet-arrow--top { margin-top: 0.1rem; }

/* ── Mobile horizontal-overflow fix (design audit R13 — 2026-07-25) ──────────
   Two causes, both verified at 390px:
   1. .hero__stats was flex/nowrap, so four stats held one 408px-wide row and
      clipped "Fixed fee" past the right edge.
   2. Card rows across the estate set grid-template-columns *inline*, which no
      media query can override — the second/third card sat off-canvas and the
      document measured ~703px wide in a 390px viewport.
   The attribute selectors below are deliberately narrow: they match only the
   equal-column inline grids (1fr 1fr…, repeat(3, 1fr), 1fr 1.4fr) and leave
   fixed-first-column layouts like "200px 1fr" and "48px 1fr" alone, since
   those already shrink gracefully. !important is required to beat the inline
   style — it is the only mechanism that can. ───────────────────────────────── */
@media (max-width: 640px) {
  .hero__stats {
    flex-wrap: wrap;
    row-gap: 1.5rem;
  }
  .hero__stat {
    flex: 0 0 50%;      /* 2 × 2 rather than a single 4-high column */
    max-width: 50%;
    box-sizing: border-box;
  }
  /* vertical rule only between the two columns, not down the middle of a row */
  .hero__stat + .hero__stat::before { display: none; }
  .hero__stat:nth-child(even)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255,255,255,.14);
    display: block;
  }

  [style*="1fr 1fr"],
  [style*="repeat(3, 1fr)"],
  [style*="1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* The brand block takes its own row so the six nav-matching columns get
   equal width. Across at 1280 the fr tracks were already uneven — long
   link text sets a min-content floor — and a seventh track made it worse. */
.footer__brand { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.footer__legal a { font-size: 0.8rem; color: rgba(255,255,255,.45); transition: color .15s; }
.footer__legal a:hover { color: var(--white); }
/* ═══════════════════════════════════════════════════════════════════════════
   Backgate mobile pass — 2026-08-27
   Append to _assets/css/site.css (the LIVE v=i30 file, 1765 lines).
   Written as appended overrides so it wins on source order: no in-place
   surgery needed, and nothing above it has to be found and edited.
   Bump the cache-buster to v=i31 after applying.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 — Hero scrim goes vertical below 860px. ESTATE-WIDE FIX.
   The base scrim's primary gradient is 90deg (left-to-right), built for a
   desktop hero where copy sits in the left ~40%. On a phone the text block is
   full width, so the last ~25% of every line sits over scrim alpha 0.10 -> 0,
   i.e. white text on bare photograph. Affects every .hero--cine page. */
@media (max-width: 860px) {
  .hero-cine__scrim {
    background: linear-gradient(180deg,
      rgba(6,15,32,.88)   0%,
      rgba(6,15,32,.74)  46%,
      rgba(6,15,32,.66)  74%,
      rgba(6,15,32,.86) 100%);
  }
  /* .lead carries the weaker of the two text-shadows; match the h1. */
  .hero--cine .lead { text-shadow: 0 2px 28px rgba(3,9,20,.65); }
}

/* 1b — Mobile cap on the cinematic h1. ESTATE-WIDE FIX.
   --fs-h1-cine is clamp(2.7rem, 4.6vw, 4rem); the 4.6vw term only overtakes
   the floor at ~940px, so every phone gets the full 2.7rem / 43px. At 375px
   that is a four-line headline and a hero that overruns its own min-height
   (measured 753px against a 640px cap on the Backgate page). This restores a
   phone-appropriate step without touching the desktop scale. */
@media (max-width: 860px) {
  .hero--cine h1,
  .hero--cine .hero__title { font-size: clamp(2rem, 7.5vw, 2.6rem); }
}

/* 2 — Equal-column collapse moves 640px -> 860px.
   The Tier 1B rule fires at 640; .nav__links collapses at 860. Between them
   the three "parts" cards stay 3-across: ~148px of usable text width at a
   768px iPad portrait. Same declarations, wider breakpoint. */
@media (max-width: 860px) {
  [style*="1fr 1fr"],
  [style*="repeat(3, 1fr)"],
  [style*="1fr 1.4fr"] { grid-template-columns: 1fr !important; }
}

/* 6 — vh -> dvh, so the hero stops resizing when iOS Safari's address bar
   collapses on first scroll. */
@media (max-width: 700px) {
  .hero--cine { min-height: min(78dvh, 640px); }
}

/* 7 — .link-ink touch box. The two anchors in the "same machinery" section sit
   side by side separated only by &nbsp;&nbsp;, ~30px tall against a 44px floor. */
@media (max-width: 860px) {
  .link-ink { display: inline-block; padding-block: .5rem; min-height: 44px; }
}

/* 8 — Eyebrow up from 0.72rem (~11.5px, under the 12px floor) and appearing
   seven times on the Backgate page. Tracking is unified in the HTML: the
   inline card eyebrows use 0.12em against this class's 0.14em. */
.eyebrow { font-size: 0.78rem; }

/* 4 — Mobile sticky CTA. The page is ~8,500px tall at 375px: about eleven
   screens to the only button. A persistent bar is the fix, not a hero button. */
.mobile-cta { display: none; }
@media (max-width: 860px) {
  .mobile-cta {
    display: block;
    position: fixed; inset: auto 0 0 0; z-index: 40;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(13,33,64,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(199,164,99,.24);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; min-height: 48px; }
  body { padding-bottom: 5rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .mobile-cta { background: var(--oxford); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 9 — Nav actions stay right-aligned below the desktop breakpoint.
   ESTATE-WIDE FIX. .nav__inner sets no justify-content, so the right edge of
   the bar was held only by .nav__links { flex: 1 } acting as a spacer. Below
   860px those links are display:none, the spacer goes with them, and the logo,
   the Book a call button and the menu toggle all pack to flex-start: measured
   389px of dead space to the right of .nav__actions at a 760px viewport, with
   the button crowding the wordmark.

   justify-content: space-between is the wrong tool here. .nav__inner has FOUR
   children (logo, links, actions, mobile-toggle), so space-between spreads the
   three visible ones and strands the button in the middle of the bar. A single
   auto margin pushes actions and the toggle together to the right instead, and
   is inert at desktop where flex:1 has already consumed the free space. */
@media (max-width: 860px) {
  .nav__actions { margin-left: auto; }
  .nav__mobile-toggle { margin-left: 0.5rem; }
}

/* 10 — Trade demo strip. Sits directly under the hero, never inside it.
   Radius note for the shape lock: the estate runs buttons at 5px and cards at
   10px. These are full-pill on purpose, because they are choice chips rather
   than calls to action - the row asks the reader to pick their own trade, and
   the pill shape is what signals "pick one". That is the documented rule; do
   not use 999px for anything that is actually a CTA. */
.trade-strip {
  background: var(--white);
  border-bottom: 1px solid var(--stone);
}
.trade-strip__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  padding: 1.5rem 0;
}
.trade-strip__lead {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--oxford);
  margin: 0;
}
.trade-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trade-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;                 /* touch target */
  padding: 0.5rem 1.15rem;
  border: 1.5px solid var(--border-mid);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--oxford);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.trade-pill:hover { border-color: var(--oxford); background: var(--off-white); }
.trade-pill:active { transform: translateY(1px); }
/* Not built yet: no href, reads as status rather than an offer. */
.trade-pill--soon {
  color: var(--ink-muted);
  border-style: dashed;
  border-color: var(--border);
}
@media (max-width: 640px) {
  .trade-strip__inner { gap: 0.85rem; }
  .trade-strip__lead { flex: 0 0 100%; }
}