/* ==========================================================================
   Lufodo Group — Design System
   Nigeria's creative economy institution. Established 1985.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Brand */
  --oxblood-900: #240906;
  --oxblood-800: #350F0A;
  --oxblood-700: #47130E;
  --oxblood-600: #5E1D16;
  --oxblood-500: #7A2C22;
  --gold-700:    #8F6B24;
  /* Small uppercase labels sit on paper-2 and gold-100 as often as on paper.
     gold-700 measures 4.49 and 4.32 against those; this clears 4.6 on all three. */
  --gold-label:  #896723;
  --gold-600:    #AD8334;
  --gold-500:    #C09A4E;
  --gold-400:    #DCC088;
  --gold-200:    #EEDFBE;
  --gold-100:    #F8F0E1;

  /* Neutrals */
  --ink:      #17110F;
  --ink-soft: #3B302B;
  --muted:    #6E605A;
  --muted-2:  #7B6D66;   /* was #8C7E77 — 3.79:1 on paper, below AA */
  --paper:    #FCFAF6;
  --paper-2:  #F5EFE5;
  --paper-3:  #EDE4D6;
  --white:    #FFFFFF;
  --line:     rgba(23,17,15,.12);
  --line-2:   rgba(23,17,15,.07);
  --line-dark:rgba(255,255,255,.14);

  /* Type */
  --display: "Fraunces", "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Scale */
  --step--2: clamp(.72rem, .70rem + .10vw, .78rem);
  --step--1: clamp(.83rem, .80rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.11rem + .34vw, 1.42rem);
  --step-2:  clamp(1.42rem, 1.28rem + .68vw, 1.90rem);
  --step-3:  clamp(1.72rem, 1.46rem + 1.22vw, 2.55rem);
  --step-4:  clamp(2.05rem, 1.62rem + 2.05vw, 3.40rem);
  --step-5:  clamp(2.45rem, 1.72rem + 3.45vw, 4.60rem);
  --step-6:  clamp(2.85rem, 1.65rem + 5.60vw, 6.20rem);

  /* Space */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;   --s-10: 8rem;  --s-11: 11rem;

  /* Layout */
  --container: 1240px;
  --container-wide: 1440px;
  --container-text: 68ch;
  --radius: 4px;
  --radius-lg: 8px;
  --header-h: 96px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(23,17,15,.05), 0 2px 8px rgba(23,17,15,.04);
  --shadow:    0 2px 4px rgba(23,17,15,.05), 0 12px 32px rgba(23,17,15,.08);
  --shadow-lg: 0 4px 8px rgba(23,17,15,.06), 0 24px 64px rgba(23,17,15,.13);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --- Base ----------------------------------------------------------------- */
body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.018em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h1 { font-size: var(--step-5); letter-spacing: -.026em; }
h2 { font-size: var(--step-3); letter-spacing: -.022em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); line-height: 1.25; }
h5 { font-size: var(--step-0); line-height: 1.3; }

a { color: inherit; text-decoration-color: rgba(184,134,43,.55); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--gold-600); }

strong, b { font-weight: 650; color: var(--ink); }

::selection { background: var(--gold-200); color: var(--oxblood-900); }

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

.skip-link {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: 999;
  background: var(--oxblood-700); color: #fff; border-radius: var(--radius);
  padding: var(--s-3) var(--s-5); font-weight: 600; font-size: var(--step--1);
  transform: translateY(-250%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- Layout primitives ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: clamp(4.25rem, 2.4rem + 7vw, 8.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--loose { padding-block: clamp(4.5rem, 2.5rem + 8vw, 9rem); }

.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--oxblood-900); color: rgba(255,255,255,.80); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: #fff; }
.section--dark strong { color: #fff; }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.stack-sm > * + * { margin-top: var(--s-2); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.hide { display: none !important; }
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Type utilities ------------------------------------------------------- */
.eyebrow {
  font-family: var(--body);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Same reason as .card__meta and .tag: gold-700 measures under 4.5:1 against
     paper-2, and eyebrows are small bold caps that sit on it constantly. */
  color: var(--gold-label);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1.5px; background: var(--gold-500); flex: none;
}
.eyebrow--plain::before { display: none; }
/* The hero is a dark band but is not `.section--dark`, so its eyebrow was
   rendering in gold-700 — 3.85:1 against the oxblood. */
.section--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow,
.cta-band .eyebrow { color: var(--gold-400); }
.section--dark .eyebrow::before, .hero .eyebrow::before,
.page-hero .eyebrow::before, .cta-band .eyebrow::before { background: var(--gold-500); }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.section--dark .lede { color: rgba(255,255,255,.82); }
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.section--dark .muted { color: rgba(255,255,255,.62); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }
.center.measure, .center.measure-sm { margin-inline: auto; }

.rule { height: 1px; background: var(--line); border: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--body);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .035em;
  padding: 1.02em 1.9em;
  border: 1.5px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .2s var(--ease),
              box-shadow .25s var(--ease);
  white-space: normal; text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1em; height: 1em; flex: none; }

.btn--primary { background: var(--gold-600); color: var(--oxblood-900); border-color: var(--gold-600); }
.btn--primary:hover { background: var(--gold-500); border-color: var(--gold-500); }

.btn--dark { background: var(--oxblood-700); color: #fff; border-color: var(--oxblood-700); }
.btn--dark:hover { background: var(--oxblood-600); border-color: var(--oxblood-600); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(23,17,15,.03); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.09); }

.btn--sm { padding: .7em 1.25em; font-size: var(--step--2); }
.btn--lg { padding: 1.1em 2.1em; font-size: var(--step-0); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1); font-weight: 600; color: var(--oxblood-700);
  text-decoration: none; letter-spacing: .01em;
}
.link-arrow::after {
  content: "→"; transition: transform .25s var(--ease); font-size: 1.05em;
}
.link-arrow:hover::after { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--gold-400); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(36,9,6,.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.28); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: var(--header-h);
}

.brand { display: block; text-decoration: none; flex: none; line-height: 0; }
.brand__logo {
  height: clamp(54px, 4.2vw, 70px); width: auto;
  /* If the PNG ever fails, the alt text falls back in the display face. */
  font-family: var(--display); font-size: 1.3rem; color: #fff; line-height: 1;
  transition: opacity .25s var(--ease);
}
.brand:hover .brand__logo { opacity: .82; }
.site-footer .brand__logo { height: 86px; }

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: .35em;
  padding: .55rem .72rem; border-radius: var(--radius);
  font-size: .855rem; font-weight: 550; letter-spacing: .005em;
  color: rgba(255,255,255,.80); text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav__link[aria-current="page"] { color: var(--gold-400); }
.nav__link .caret { width: .6em; height: .6em; transition: transform .25s var(--ease); opacity: .6; }
.nav__item.is-open > .nav__link .caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 268px; padding: var(--s-3);
  /* see .nav__panel::before — an invisible bridge spans the gap above */
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item.is-open > .nav__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Invisible bridge: keeps the pointer "inside" the item while it crosses the
   gap between the trigger and the panel, so the panel cannot close mid-travel. */
.nav__panel::before {
  content: ""; position: absolute; left: -12px; right: -12px; top: -14px; height: 16px;
}
/* Give the trigger a taller hit area so a slightly-low cursor still counts. */
.nav__item.has-panel > .nav__link { position: relative; }
.nav__item.has-panel > .nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}
.nav__panel a {
  display: block; padding: .6rem .75rem; border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-size: .875rem; font-weight: 550;
  transition: background .18s var(--ease);
}
.nav__panel a:hover { background: var(--paper-2); }
.nav__panel a span { display: block; font-size: .76rem; font-weight: 400; color: var(--muted); margin-top: .12rem; line-height: 1.4; }

.header-cta { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 19px; height: 1.5px; background: #fff; position: relative; transition: background .2s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px; background: #fff;
  transition: transform .28s var(--ease), top .28s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .header-cta .btn { display: none; }
  /* The drawer is ABSOLUTE, anchored to the header — not fixed to the viewport.
     `.site-header` carries `backdrop-filter`, and per spec any element with a
     backdrop-filter becomes the containing block for its fixed-position
     descendants. So `position: fixed; inset: var(--header-h) 0 0 0` resolved
     against the 97px-tall header instead of the viewport and computed to a
     ZERO-height box: the drawer reported itself open, was visible and had
     pointer-events, and had no area to tap. That is what "the menu doesn't work
     on mobile" was.

     Absolute positioning against the (positioned, sticky) header is
     deterministic and does not care what filters the ancestor carries. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));   /* honours mobile browser chrome */
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--oxblood-900); padding: var(--s-5) var(--s-5) var(--s-9);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(-10px) scale(.995);
    visibility: hidden; pointer-events: none;
    transition: opacity .26s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  /* The rows have to span the drawer. Without this the <button> shrinks to its
     text, so the divider rule stopped mid-row and the caret sat next to the
     label instead of at the right edge. */
  .nav__item { display: block; width: 100%; }
  .nav__link {
    display: flex; width: 100%; padding: .95rem .25rem; font-size: 1.05rem;
    justify-content: space-between; align-items: center; text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0;
  }
  .nav__link .caret { margin-left: auto; }
  .nav__panel {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; background: transparent; border: 0; box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4); display: none;
  }
  .nav__item.is-open > .nav__panel { display: block; transform: none; }
  .nav__panel a { color: rgba(255,255,255,.78); padding: .55rem .25rem; }
  .nav__panel a:hover { background: rgba(255,255,255,.06); }
  .nav__panel a span { color: rgba(255,255,255,.5); }
  .nav__mobile-cta { display: block; margin-top: var(--s-5); }
  .nav__mobile-cta .btn { width: 100%; }
}
@media (min-width: 1081px) { .nav__mobile-cta { display: none; } }

body.nav-locked { overflow: hidden; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--oxblood-900);
  color: #fff;
  padding-block: clamp(4rem, 2rem + 11vw, 9.5rem);
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(184,134,43,.30), transparent 58%),
    radial-gradient(90% 80% at 8% 96%, rgba(122,44,34,.55), transparent 62%),
    linear-gradient(158deg, #2E0B07 0%, #240906 46%, #180504 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 1;
  background: radial-gradient(120% 78% at 50% 118%, rgba(0,0,0,.55), transparent 70%);
}

/* Photographic ground.
   The gradient stays — it is what guarantees legible white type even if the
   photograph never arrives. When a photograph IS present the gradient thins to a
   scrim so the image reads through it, rather than being replaced by it. */
.hero__media {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  background: var(--oxblood-900);
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Keeps the alt available to assistive technology while stopping it
     rendering as visible text if the photograph fails to load. */
  font-size: 0; color: transparent;
}
.hero--media::before {
  background:
    linear-gradient(103deg, rgba(20,5,4,.94) 0%, rgba(22,6,5,.80) 44%, rgba(24,7,5,.52) 78%, rgba(24,7,5,.46) 100%),
    linear-gradient(180deg, rgba(20,5,4,.55) 0%, transparent 34%, rgba(16,4,3,.72) 100%);
}
.hero--media::after {
  background:
    radial-gradient(115% 82% at 50% 118%, rgba(0,0,0,.5), transparent 72%),
    radial-gradient(85% 70% at 88% 4%, rgba(184,134,43,.16), transparent 62%);
}
@media (max-width: 780px) {
  /* Portrait viewports crop the frame hard, so the type needs a heavier ground. */
  .hero--media::before {
    background: linear-gradient(178deg, rgba(20,5,4,.90) 0%, rgba(22,6,5,.86) 55%, rgba(16,4,3,.94) 100%);
  }
}

.hero__inner { position: relative; max-width: 900px; }
.hero h1 {
  font-size: var(--step-6); letter-spacing: -.032em; line-height: 1.02;
  color: #fff; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--gold-400); }
.hero__sub {
  font-size: var(--step-1); line-height: 1.55; color: rgba(255,255,255,.78);
  max-width: 60ch; margin-top: var(--s-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); align-items: center; }
.hero__eyebrow { margin-bottom: var(--s-5); }

/* Page hero (interior) */
.page-hero {
  background: var(--oxblood-900); color: #fff; position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(184,134,43,.26), transparent 60%),
    linear-gradient(150deg, #300C08, #240906 60%, #1A0604);
}
.page-hero.hero--media { padding-block: clamp(4rem, 2.4rem + 7vw, 8rem); }
/* Interior heroes carry less type than the home hero, so the scrim can thin out
   faster across the frame and let the photograph actually be looked at. Measured
   against the auditorium plate at 1512px: white type sits over the 0.76–0.93
   band, the image reads in the 0.30–0.42 band. */
.page-hero.hero--media::before {
  z-index: -1;
  background:
    linear-gradient(103deg, rgba(20,5,4,.93) 0%, rgba(22,6,5,.76) 44%, rgba(24,7,5,.42) 76%, rgba(24,7,5,.30) 100%),
    linear-gradient(180deg, rgba(20,5,4,.52) 0%, transparent 40%, rgba(16,4,3,.66) 100%);
}
.page-hero .hero__media { z-index: -2; }
@media (max-width: 780px) {
  .page-hero.hero--media::before {
    background: linear-gradient(178deg, rgba(20,5,4,.90) 0%, rgba(22,6,5,.87) 55%, rgba(16,4,3,.94) 100%);
  }
}
.page-hero h1 { font-size: var(--step-4); color: #fff; text-wrap: balance; max-width: 20ch; }
.page-hero__sub { font-size: var(--step-1); color: rgba(255,255,255,.78); max-width: 62ch; margin-top: var(--s-5); line-height: 1.55; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* --- Breadcrumb ----------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--step--2); color: rgba(255,255,255,.55); margin-bottom: var(--s-5);
  letter-spacing: .04em;
}
.crumbs a { color: rgba(255,255,255,.72); text-decoration: none; }
.crumbs a:hover { color: var(--gold-400); }
.crumbs span[aria-hidden] { opacity: .4; }

/* --- Stats bar ------------------------------------------------------------ */
.stats {
  background: var(--oxblood-800);
  border-top: 1px solid rgba(255,255,255,.09);
  color: #fff;
}
.stats__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.stat {
  padding: clamp(1.75rem, 1rem + 2.4vw, 2.75rem) var(--s-5);
  border-right: 1px solid rgba(255,255,255,.10);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--display); font-size: var(--step-3); font-weight: 650;
  color: var(--gold-400); line-height: 1; letter-spacing: -.03em; display: block;
}
.stat__label {
  font-size: var(--step--2); font-weight: 620; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.92); margin-top: .85rem; display: block;
}
.stat__note { font-size: var(--step--1); color: rgba(255,255,255,.55); margin-top: .35rem; display: block; line-height: 1.45; }
@media (max-width: 700px) {
  .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
  .stat:last-child { border-bottom: 0; }
}

/* --- Section head --------------------------------------------------------- */
.section-head { max-width: 66ch; margin-bottom: var(--s-7); }
.section-head .eyebrow { margin-bottom: var(--s-4); }
.section-head h2 { text-wrap: balance; }
.section-head p { margin-top: var(--s-4); font-size: var(--step-1); line-height: 1.55; color: var(--muted); }
.section--dark .section-head p { color: rgba(255,255,255,.72); }
.section-head--split {
  max-width: none; display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: flex-end; justify-content: space-between;
}
.section-head--split > div:first-child { max-width: 62ch; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { border-color: var(--gold-400); box-shadow: 0 1px 2px rgba(23,17,15,.04); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__body > .link-arrow { margin-top: auto; padding-top: var(--s-2); }
.card__title { font-size: var(--step-1); line-height: 1.16; min-height: 2.32em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__meta {
  font-size: .68rem; font-weight: 620; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__text { color: var(--muted); font-size: var(--step--1); line-height: 1.68; }

/* Unit card (business units) */
.unit-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.unit-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.unit-card:hover { border-color: var(--gold-400); box-shadow: 0 1px 2px rgba(23,17,15,.04); }
.unit-card:hover::before { transform: scaleX(1); }
.unit-card__num {
  font-family: var(--mono); font-size: var(--step--2); color: var(--gold-label);
  letter-spacing: .14em; font-weight: 600;
}
.unit-card h3 { font-size: var(--step-2); letter-spacing: -.022em; line-height: 1.14; min-height: 2.28em; }
.unit-card p { color: var(--muted); font-size: var(--step--1); line-height: 1.7; flex: 1; }
.unit-card .link-arrow::after { content: "→"; }
.unit-card a.stretch::after { content: ""; position: absolute; inset: 0; }

/* --- Media / figure ------------------------------------------------------- */
.figure {
  position: relative; overflow: hidden; background: var(--paper-3);
  border-radius: var(--radius-lg);
}
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.card:hover .figure img, .figure:hover img { transform: scale(1.04); }
.figure--3x2 { aspect-ratio: 3/2; }
.figure--4x3 { aspect-ratio: 4/3; }
.figure--1x1 { aspect-ratio: 1/1; }
.figure--2x3 { aspect-ratio: 2/3; }
.figure--16x9 { aspect-ratio: 16/9; }
.figure--flat { border-radius: 0; }
/* Detail-page plate: show the artwork whole. A portrait poster and a
   landscape production still are different shapes, and forcing either into
   a shared frame damages it. */
.figure--natural { aspect-ratio: auto; background: var(--paper-2); }
.figure--natural img { height: auto; object-fit: contain; }
/* Portraits are framed on the sitter's eyeline, not the centre of the plate —
   a square crop centred on a head-and-shoulders shot cuts the forehead. */
.figure--person img { object-position: 50% 22%; }

/* Elegant fallback when an image is missing */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(184,134,43,.22), transparent 55%),
    linear-gradient(145deg, var(--oxblood-800), var(--oxblood-900));
  color: var(--gold-400); font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 600; letter-spacing: -.04em;
}
.ph::after {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px);
}
.ph span { position: relative; z-index: 1; opacity: .9; }

/* --- Gallery --------------------------------------------------------------
   Two bands: a lead pair, then a four-up row. Heights are set explicitly rather
   than left to aspect-ratio inside a spanning grid cell — that was the bug in the
   first version, where the lead frame's row span fought its own aspect ratio and
   left captions clipped and a hole in the grid.

   Every frame in a band is the same height, so the caption baselines line up
   across the row. That alignment is most of what separates an edited gallery from
   a pile of thumbnails. */
.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-4); row-gap: var(--s-6);
}
.gal__item { margin: 0; min-width: 0; }
.gal__frame {
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--paper-3);
  border: 0; padding: 0; cursor: zoom-in; color: inherit;
}
.gal__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease-out), filter .5s var(--ease-out);
}
.gal__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(23,17,15,.08);
  border-radius: inherit; transition: box-shadow .35s var(--ease-out);
}
.gal__frame:hover img, .gal__frame:focus-visible img { transform: scale(1.035); }
.gal__frame:hover::after { box-shadow: inset 0 0 0 1px var(--gold-400); }
.gal__frame:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* Band 1 — the lead pair. */
.gal__item:nth-child(1) { grid-column: span 7; }
.gal__item:nth-child(2) { grid-column: span 5; }
.gal__item:nth-child(1) .gal__frame,
.gal__item:nth-child(2) .gal__frame { height: clamp(240px, 30vw, 430px); }

/* Band 2 — four equal frames, shorter, so the lead keeps its authority. */
.gal__item:nth-child(n+3) { grid-column: span 3; }
.gal__item:nth-child(n+3) .gal__frame { height: clamp(150px, 16vw, 225px); }

.gal figcaption {
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.gal__item:hover figcaption { color: var(--ink-1); border-top-color: var(--gold-500); }
.section--dark .gal figcaption { color: rgba(255,255,255,.58); border-top-color: rgba(255,255,255,.16); }
.section--dark .gal__item:hover figcaption { color: #fff; }

@media (max-width: 900px) {
  .gal { grid-template-columns: repeat(6, 1fr); row-gap: var(--s-5); }
  .gal__item:nth-child(1) { grid-column: span 6; }
  .gal__item:nth-child(2) { grid-column: span 6; }
  .gal__item:nth-child(n+3) { grid-column: span 3; }
  .gal__item:nth-child(1) .gal__frame,
  .gal__item:nth-child(2) .gal__frame { height: clamp(220px, 46vw, 340px); }
  .gal__item:nth-child(n+3) .gal__frame { height: clamp(130px, 25vw, 190px); }
}
@media (max-width: 520px) {
  /* One column, one height. A single stack of frames at three different heights
     reads as an accident rather than a decision. */
  .gal { grid-template-columns: 1fr; }
  .gal__item, .gal__item:nth-child(1), .gal__item:nth-child(2),
  .gal__item:nth-child(n+3) { grid-column: 1 / -1; }
  .gal__item:nth-child(1) .gal__frame,
  .gal__item:nth-child(2) .gal__frame,
  .gal__item:nth-child(n+3) .gal__frame { height: 62vw; max-height: 300px; }
}

/* Lightbox. The photographs are the point of these sections; capping them at a
   200px thumbnail wastes the only genuinely premium asset the site has. */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(12,4,3,.94); padding: clamp(1rem, 4vw, 3rem);
}
.lb[open], .lb.is-open { display: flex; }
.lb__img {
  max-width: min(1400px, 100%); max-height: 82vh; width: auto; height: auto;
  object-fit: contain; border-radius: 2px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vw, 2rem);
  text-align: center; color: rgba(255,255,255,.72);
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
}
.lb__close, .lb__nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.7); line-height: 1; padding: .5rem .75rem;
  font-size: 2rem; transition: color .25s var(--ease-out);
}
.lb__close:hover, .lb__nav:hover { color: var(--gold-400); }
.lb__close { top: clamp(.5rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 1.5rem); font-size: 1.6rem; }
.lb__nav--prev { left: clamp(.25rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(.25rem, 2vw, 1.5rem); }
@media (max-width: 640px) { .lb__nav { font-size: 1.5rem; } }

/* A wide single plate — used where one photograph should carry a whole band. */
.plate-wide { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.plate-wide .figure { aspect-ratio: 21/9; border-radius: 0; }
@media (max-width: 700px) { .plate-wide .figure { aspect-ratio: 4/3; } }
.plate-wide__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-5) var(--s-4);
  background: linear-gradient(180deg, transparent, rgba(16,4,3,.86));
  color: rgba(255,255,255,.86); font-size: .78rem; letter-spacing: .04em;
}

/* --- Logo wall ------------------------------------------------------------ */
.logo-wall {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); overflow: hidden;
}
.logo-wall__item {
  background: var(--white); min-height: 108px;
  display: grid; place-items: center; padding: var(--s-4) var(--s-3);
  text-align: center; transition: background .25s var(--ease);
}
.logo-wall__item:hover { background: var(--paper-2); }
@media (min-width: 620px)  { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
.logo-wall__item span {
  font-family: var(--display); font-size: .95rem; font-weight: 600;
  color: var(--ink); line-height: 1.25; letter-spacing: -.01em;
}
.logo-wall__item small {
  display: block; font-family: var(--body); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: .3rem;
}

/* --- Timeline ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 0; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px;
  background: linear-gradient(180deg, var(--gold-400), var(--line), transparent);
}
.tl-item { position: relative; padding-left: 2.75rem; padding-bottom: var(--s-7); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: .45rem; width: 15px; height: 15px;
  border-radius: 50%; background: var(--paper); border: 2.5px solid var(--gold-500);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.tl-item:hover::before { background: var(--gold-500); transform: scale(1.15); }
.tl-item__year {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 650;
  color: var(--gold-label); letter-spacing: .06em; display: block; margin-bottom: .35rem;
}
.tl-item h4 { margin-bottom: .4rem; }
.tl-item p { color: var(--muted); font-size: var(--step--1); line-height: 1.62; max-width: 62ch; }
.section--dark .timeline::before { background: linear-gradient(180deg, var(--gold-500), rgba(255,255,255,.14), transparent); }
.section--dark .tl-item::before { background: var(--oxblood-900); }
.section--dark .tl-item__year { color: var(--gold-400); }
.section--dark .tl-item p { color: rgba(255,255,255,.68); }

/* --- Feature split -------------------------------------------------------- */
.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
}
.split--top { align-items: start; }
.split__media { position: relative; }
.split--rev .split__media { order: -1; }
@media (max-width: 860px) { .split--rev .split__media { order: 0; } }

/* --- Spec / info panels --------------------------------------------------- */
.panels {
  display: grid; gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.panels::after { content: ""; grid-column: 1 / -1; background: var(--white); }
.panels--stack { grid-template-columns: 1fr; }
.panel { background: var(--white); padding: var(--s-6); }
.panel__label {
  font-size: var(--step--2); font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-label); margin-bottom: var(--s-3);
}
.panel h4 { margin-bottom: var(--s-3); }
.panel p, .panel li { font-size: var(--step--1); color: var(--muted); line-height: 1.62; }
.panel ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.panel ul li { padding-left: 1.15rem; position: relative; }
.panel ul li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-500);
}
.section--dark .panels { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.section--dark .panels::after { background: var(--oxblood-800); }
.section--dark .panel { background: var(--oxblood-800); }
.section--dark .panel p, .section--dark .panel li { color: rgba(255,255,255,.7); }

/* --- Definition rows ------------------------------------------------------ */
.deflist { border-top: 1px solid var(--line); }
.defrow {
  display: grid; gap: var(--s-3) var(--s-6); padding-block: var(--s-4);
  border-bottom: 1px solid var(--line); grid-template-columns: minmax(140px, 200px) 1fr;
  align-items: baseline;
}
.defrow dt {
  font-size: var(--step--2); font-weight: 650; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.defrow dd { margin: 0; font-size: var(--step-0); color: var(--ink-soft); }
@media (max-width: 620px) { .defrow { grid-template-columns: 1fr; gap: var(--s-1); } }

/* --- Filters -------------------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-end; justify-content: space-between; margin-bottom: var(--s-6); }
.toolbar .field { max-width: 300px; flex: 1 1 220px; }
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-bottom: var(--s-6); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.filter {
  padding: .55em 1.05em; border: 1px solid var(--line); border-radius: 100px;
  background: transparent; font-size: var(--step--2); font-weight: 600;
  letter-spacing: .04em; color: var(--muted); cursor: pointer;
  transition: all .22s var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--oxblood-700); border-color: var(--oxblood-700); color: #fff; }
.filter-count { font-size: var(--step--2); color: var(--muted-2); margin-left: auto; align-self: center; }

/* --- Roster (talent) ------------------------------------------------------ */
.roster { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
@media (min-width: 760px) { .roster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.person { position: relative; text-align: left; }
.person__img { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); aspect-ratio: 4/5; position: relative; }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out); }
.person:hover .person__img img { transform: scale(1.05); }
.person__name { font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin-top: var(--s-3); line-height: 1.25; letter-spacing: -.01em; }
.person__name a { text-decoration: none; }
.person__name a::after { content: ""; position: absolute; inset: 0; }
.person__role { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-label); margin-top: .3rem; }
.badge-memoriam {
  display: inline-block; font-size: .62rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
  padding: .16em .5em; border-radius: 3px; margin-top: .4rem;
}

/* Leadership card */
.leader { display: grid; gap: var(--s-5); grid-template-columns: minmax(0,200px) 1fr; align-items: start; }
.leader__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--paper-3); position: relative; }
.leader__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.leader__role { font-size: var(--step--2); font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-label); margin-bottom: var(--s-2); }
.leader h3 { margin-bottom: var(--s-3); }
.leader p { color: var(--muted); font-size: var(--step--1); line-height: 1.68; }
.leader p + p { margin-top: var(--s-3); }
@media (max-width: 640px) { .leader { grid-template-columns: 1fr; } .leader__img { max-width: 210px; } }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: var(--step--1); font-weight: 620; color: var(--ink); }
.field label .req { color: var(--oxblood-500); }
.field .hint { font-size: var(--step--2); color: var(--muted-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: .82em .95em; font-size: var(--step--1);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  font-family: var(--body);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E605A' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(184,134,43,.16);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #B3261E; }
.field .err { font-size: var(--step--2); color: #B3261E; font-weight: 600; }
.checkline {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: var(--step--1); color: var(--muted); line-height: 1.6; cursor: pointer;
}
.checkline input { width: 22px; height: 22px; margin-top: .15rem; flex: none; accent-color: var(--oxblood-700); }
.checkline > span { display: block; }
.checkline a { color: var(--oxblood-700); font-weight: 600; }
.form__note { font-size: var(--step--2); color: var(--muted-2); line-height: 1.6; }
.form-success {
  padding: var(--s-6); border: 1px solid var(--gold-400); background: var(--gold-100);
  border-radius: var(--radius-lg); color: var(--oxblood-800);
}
.form-success h4 { margin-bottom: var(--s-2); }

/* Forms on an oxblood ground.
   The field labels inherited `color: var(--ink)` — near-black on near-black. The
   labels, the required asterisks, the hints, the consent lines and the policy
   link were all effectively invisible on the LAPA admissions form and anywhere
   else a form sits in a dark band. Every colour below is set against
   `--oxblood-900`, not left to inherit. */
.section--dark .field label,
.cta-band--form .field label { color: rgba(255,255,255,.94); }
.section--dark .field label .req,
.cta-band--form .field label .req { color: var(--gold-400); }
.section--dark .field .hint,
.cta-band--form .field .hint { color: rgba(255,255,255,.62); }
.section--dark .checkline,
.cta-band--form .checkline { color: rgba(255,255,255,.80); }
.section--dark .checkline a,
.cta-band--form .checkline a { color: var(--gold-400); text-decoration-color: rgba(220,192,136,.5); }
.section--dark .checkline a:hover { color: var(--gold-200); }
.section--dark .checkline input { accent-color: var(--gold-600); }
.section--dark .form__note,
.cta-band--form .form__note { color: rgba(255,255,255,.66); }
.section--dark .form__note a { color: var(--gold-400); }
.section--dark .field .err { color: #FFB4A8; }
/* The invalid state has to be visible against dark too — a dark red border on a
   dark red ground reads as no feedback at all. */
.section--dark .field input[aria-invalid="true"],
.section--dark .field select[aria-invalid="true"],
.section--dark .field textarea[aria-invalid="true"] {
  border-color: #FF8A7A; box-shadow: 0 0 0 3px rgba(255,138,122,.18);
}
.section--dark .field input:focus,
.section--dark .field select:focus,
.section--dark .field textarea:focus {
  border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(220,192,136,.28);
}

/* --- Accordion ------------------------------------------------------------ */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: var(--step-1); font-weight: 600; color: var(--ink);
  letter-spacing: -.015em;
}
.acc__btn:hover { color: var(--oxblood-700); }
.acc__icon { flex: none; width: 20px; height: 20px; position: relative; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; background: var(--gold-600); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.acc__icon::before { top: 9px; left: 0; width: 20px; height: 1.75px; }
.acc__icon::after { left: 9px; top: 0; width: 1.75px; height: 20px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: scaleY(0); }
.acc__panel { display: none; padding-bottom: var(--s-5); }
.acc__panel.is-open { display: block; }
.acc__panel p { color: var(--muted); max-width: 72ch; }
.acc__panel p + p { margin-top: var(--s-3); }

/* --- Callout / CTA band --------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--oxblood-800), var(--oxblood-900) 62%);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 1rem + 4vw, 3.75rem);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(184,134,43,.30), transparent 66%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: rgba(255,255,255,.76); max-width: 58ch; margin-top: var(--s-4); }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.note {
  border-left: 2.5px solid var(--gold-500); padding: var(--s-2) 0 var(--s-2) var(--s-5);
  color: var(--muted); font-size: var(--step--1); line-height: 1.65;
}

/* --- Article -------------------------------------------------------------- */
.article { max-width: 72ch; margin-inline: auto; }
.article p { margin-bottom: var(--s-5); line-height: 1.75; }
.article h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); font-size: var(--step-2); }
.article h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); font-size: var(--step-1); }
.article ul, .article ol { margin: 0 0 var(--s-5) 0; padding-left: 1.35rem; }
.article li { margin-bottom: .55rem; line-height: 1.7; }
.article blockquote {
  margin: var(--s-7) 0; padding-left: var(--s-6); border-left: 2.5px solid var(--gold-500);
  font-family: var(--display); font-size: var(--step-1); line-height: 1.5; color: var(--ink);
  font-style: normal;
}
.article blockquote cite { display: block; font-family: var(--body); font-size: var(--step--1); font-style: normal; color: var(--muted); margin-top: var(--s-3); font-weight: 600; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  font-size: var(--step--2); color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 620;
  padding-bottom: var(--s-5); margin-bottom: var(--s-6); border-bottom: 1px solid var(--line);
}
.article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-500); }

/* --- Pill / tag ----------------------------------------------------------- */
.tag {
  display: inline-block; font-size: var(--step--2); font-weight: 620;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28em .68em; border-radius: 3px;
  background: var(--gold-100); color: var(--gold-label); border: 1px solid var(--gold-200);
}
.tag--dark { background: rgba(255,255,255,.09); color: var(--gold-400); border-color: rgba(255,255,255,.16); }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--oxblood-900); color: rgba(255,255,255,.68); padding-top: var(--s-9); }
.footer-grid {
  display: grid; gap: var(--s-7) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  padding-bottom: var(--s-8);
}
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}
.footer-brand .brand { margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--step--1); color: rgba(255,255,255,.60); line-height: 1.65; max-width: 38ch; }
.footer-col h5 {
  font-family: var(--body); font-size: var(--step--2); font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: .68rem; list-style: none; padding: 0; margin: 0; }
.footer-col a { font-size: var(--step--1); color: rgba(255,255,255,.68); text-decoration: none; transition: color .2s var(--ease); }
.footer-col a:hover { color: #fff; }

/* Touch targets.
   On a pointer-coarse device the footer and utility links were 16–25px tall —
   fine to read, unreliable to hit. Padding is added only where the pointer is
   coarse, so the desktop rhythm is untouched. */
@media (pointer: coarse) {
  .footer-col ul { gap: .2rem; }
  .footer-col a,
  .footer-bottom nav a,
  .crumbs a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .link-arrow { min-height: 40px; display: inline-flex; align-items: center; }
  .toolbar label, .toolbar .field label { min-height: 24px; }
  /* A single-line consent row is only ~24px tall. Padding rather than a centred
     min-height, so a consent statement that wraps to three lines still aligns
     its checkbox to the first line. */
  .checkline { padding-block: .6rem; }
}
.footer-contact { font-size: var(--step--1); color: rgba(255,255,255,.68); line-height: 1.7; }
.footer-contact a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-contact a:hover { color: var(--gold-400); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
  padding-block: var(--s-5); border-top: 1px solid rgba(255,255,255,.11);
  font-size: var(--step--2); color: rgba(255,255,255,.48);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.social a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius);
  display: grid; place-items: center; transition: all .22s var(--ease);
}
.social a:hover { border-color: var(--gold-500); background: rgba(184,134,43,.14); }
.social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.social a:hover svg { fill: var(--gold-400); }

/* --- Reveal animation ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .unit-card:hover { transform: none; }
  .figure img, .person__img img { transition: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .cta-band, .hero__actions { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-hero, .section--dark { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1 { color: #000 !important; }
}

/* --- Added: utility heading size + footer column labels ------------------- */
.h-sm { font-size: var(--step-1); line-height: 1.25; letter-spacing: -.015em; }
h2.h-sm, h3.h-sm { font-family: var(--display); font-weight: 600; }
.panel .h-sm { margin-bottom: var(--s-3); }
.footer-col__title {
  font-family: var(--body); font-size: var(--step--2); font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400);
  margin-bottom: var(--s-4);
}
.card__title.h-sm { font-size: var(--step-1); }

/* --- Name list ------------------------------------------------------------
   Billed cast who are not in the talent network. A plain wrapped list rather
   than cards — these are credits, not profiles to click into. */
.namelist {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  list-style: none; padding: 0; margin: 0;
  font-size: var(--step--1); color: var(--ink-soft);
}
.namelist li { position: relative; }
.namelist li + li::before {
  content: ""; position: absolute; left: -.9rem; top: .55em;
  width: 3px; height: 3px; border-radius: 50%; background: var(--gold-500);
}

/* --- Company secretary ----------------------------------------------------
   Sits under the advisory board. A firm, not a person, so it gets a mark rather
   than a portrait and a row of its own. */
.secretary {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.secretary__mark {
  width: 84px; height: 84px; flex: none; display: grid; place-items: center;
}
.secretary__mark img { width: 100%; height: auto; aspect-ratio: 208 / 197; }
.secretary__label {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-label);
}
.secretary__name { font-family: var(--display); font-size: var(--step-1); color: var(--ink); margin-top: .3rem; }
.secretary p { color: var(--muted); font-size: var(--step--1); margin-top: .35rem; }

/* --- Press coverage -------------------------------------------------------
   External reporting is linked, not reprinted. Sits at the foot of an article
   as a quiet citation block. */
.sources {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.sources__label {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-label); margin-bottom: var(--s-4);
}
.sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.sources li a {
  display: block; font-weight: 600; color: var(--ink);
  text-decoration-color: rgba(184,134,43,.5);
}
.sources li a:hover { color: var(--oxblood-700); }
.sources li span {
  display: block; margin-top: .2rem;
  font-size: var(--step--2); color: var(--muted-2);
}

/* --- Video cards ----------------------------------------------------------
   Click-to-load facades. Nothing is requested from YouTube until the viewer
   presses play — see pages_b.media(). */
.vid {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease);
}
.vid:hover { border-color: var(--gold-400); }
.vid__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  padding: 0; border: 0; background: var(--oxblood-900); cursor: pointer;
  overflow: hidden;
}
.vid__frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* YouTube's hqdefault is 4:3 with letterbox bars; scaling up crops them out */
  transform: scale(1.34); transition: transform .8s var(--ease-out), opacity .3s;
}
.vid__frame:hover img { transform: scale(1.38); opacity: .88; }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.vid__play svg { width: 62px; height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.vid__play-bg { fill: rgba(23,17,15,.72); transition: fill .25s var(--ease); }
.vid__frame:hover .vid__play-bg { fill: var(--oxblood-600); }
.vid__frame:focus-visible { outline: 2.5px solid var(--gold-500); outline-offset: -3px; }
.vid__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.vid__body .link-arrow { margin-top: auto; padding-top: var(--s-2); }