/*!
Theme Name:         Lufodo
Theme URI:          https://lufodo.com
Author:             Lufodo Group
Description:        The Lufodo Group website — a bespoke theme for Nigeria's creative economy institution: Lufodo Productions, the Academy, Glover Memorial Hall and Lufodo Distributions. Built to be edited through labelled fields rather than a page builder, so the design cannot be broken by accident.
Version:            1.1.1
Requires at least:  6.5
Tested up to:       7.1
Requires PHP:       7.4
License:            GNU General Public License v2 or later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        lufodo
Tags:               custom-colors, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready

Everything below this header is the design system as approved and signed off.
Colour, type, spacing and layout are CSS custom properties in :root — change the
palette or the type scale in one place and the whole site follows.
*/

/* ==========================================================================
   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 picture { display: contents; }
.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;
}
/* Art-directed hero: <source media="(max-width:700px)"> swaps the file, but
   object-position is a property of the <img> and cannot be set per source. The
   narrow focal point therefore rides in on a custom property set on the wrapper,
   and is applied inside the matching query. */
@media (max-width: 700px) {
  .hero__media[style*="--hero-focal-narrow"] img {
    object-position: var(--hero-focal-narrow) !important;
  }
}
.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 —
     but not so heavy that the photograph stops being visible at all. Eased for
     the high-key grid frame; every value below still clears AA on white type. */
  .hero--media::before {
    background: linear-gradient(178deg, rgba(20,5,4,.82) 0%, rgba(22,6,5,.76) 52%, rgba(16,4,3,.90) 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; }
/* Five panels in a four-up auto-fit grid leave one item stranded beside a hole.
   Six columns with 2-2-2 then 3-3 spans gives a clean three-then-two block. */
.panels--3-2 { grid-template-columns: repeat(6, 1fr); }
.panels--3-2 > .panel:nth-child(-n+3) { grid-column: span 2; }
.panels--3-2 > .panel:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 900px) {
  .panels--3-2 { grid-template-columns: repeat(2, 1fr); }
  .panels--3-2 > .panel:nth-child(-n+3),
  .panels--3-2 > .panel:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .panels--3-2 { grid-template-columns: 1fr; }
  .panels--3-2 > .panel { grid-column: 1 / -1; }
}
.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); }

/* --- WordPress additions --------------------------------------------------
   Everything above this line is the approved design system, unchanged. What
   follows exists only because WordPress renders a few things the static build
   never had: pagination, editor-inserted blocks, and the header's third action
   sitting on a dark ground. */

/* The hero's third action is a plain arrow link on a dark photograph. Inheriting
   the light-ground colour put it at 1.2:1 against the scrim — invisible in
   bright sun on a phone, and a straight accessibility failure. */
.page-hero .link-arrow,
.hero .link-arrow {
  color: rgba(255, 255, 255, .82);
}
.page-hero .link-arrow:hover,
.hero .link-arrow:hover { color: #fff; }

/* Pagination. The static site had no page two of anything; WordPress does as
   soon as there are eleven news stories. */
.pagination {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding-top: var(--s-6); border-top: 1px solid var(--rule);
}
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px is the smallest target a thumb can hit reliably; core's default is 19px. */
  min-width: 44px; min-height: 44px; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .02em;
  color: var(--ink-1); text-decoration: none;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.pagination .page-numbers:hover { border-color: var(--gold-400); color: var(--ink); }
.pagination .page-numbers.current {
  background: var(--oxblood-800); border-color: var(--oxblood-800); color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; min-width: 1.5rem; }

/* The search form, which the static build routed to a search engine and this
   one answers itself. */
.search-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.search-form input[type="search"] {
  flex: 1 1 12rem; min-height: 44px; padding: .6rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: var(--step--1); color: var(--ink); background: var(--white);
}
.search-form input[type="search"]:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 1px; border-color: var(--gold-400);
}

/* A confirmation after an enquiry is sent. */
.form-confirm {
  padding: var(--s-6); border: 1px solid var(--gold-400); border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.form-confirm h3 { margin-bottom: .5rem; }
.form-error {
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
  border-left: 3px solid #B32D2E; background: #FCF0F1; border-radius: var(--radius);
}
.form-error p { margin: 0; color: #8A2424; font-size: var(--step--1); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.lufodo-hp {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Blocks an author may insert in the editor, styled to match the design rather
   than falling back to browser defaults. */
.article figure { margin: var(--s-6) 0; }
.article figure img { border-radius: var(--radius-lg); }
.article figcaption {
  margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-3);
}
.article .wp-block-quote {
  margin: var(--s-6) 0; padding-left: var(--s-5);
  border-left: 3px solid var(--gold-500); font-size: var(--step-1);
}
.article .wp-block-table table { width: 100%; border-collapse: collapse; }
.article .wp-block-table td,
.article .wp-block-table th {
  padding: .6rem .75rem; border-bottom: 1px solid var(--rule); text-align: left;
}
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* A row of buttons inside a split section. The approved build wrote these by
   hand as <p style="margin-top:1.5rem">, which works for exactly one button;
   an owner who adds a second needs them to sit side by side with a gap. Same
   spacing as the approved markup, so nothing moves. The .cta-band rule further
   up is more specific and still wins inside a band, where the spacing is 2rem. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* The link that closes a section, under a gallery or a row of figures. The
   approved build hand-spaced these at 2 and 2.5rem; one rule at 2rem is close
   enough that nothing moves visibly, and it means an owner adding a link to a
   new section gets the same spacing without having to know the number. */
.btn-row--closing { margin-top: var(--s-6); }