/* ==========================================================================
   Bharatiya Vidya Mandir — design system
   Hand-authored CSS. No Tailwind build, no PostCSS, no node on the server.
   Tokens first, then layout, then components, then motion, then responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — saffron over warm stone, carried over from the original site */
  --brand-50:  #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-300: #fdba74;
  --brand-400: #fb923c;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --brand-800: #9a3412;
  --brand-900: #7c2d12;

  --stone-50:  #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;

  /* Semantic — these are what components actually reference */
  --bg:          var(--stone-50);
  --bg-elevated: #ffffff;
  --bg-sunken:   var(--brand-50);
  --bg-inset:    var(--stone-100);
  --text:        var(--stone-700);
  --text-strong: var(--stone-900);
  --text-muted:  var(--stone-500);
  --border:      var(--stone-200);
  --border-soft: var(--brand-100);
  --accent:      var(--brand-600);
  --accent-hover:var(--brand-500);
  --accent-deep: var(--brand-800);
  --on-accent:   #ffffff;

  /* Ink — the dignified counterweight to saffron. Secondary solid buttons
     and quiet emphasis use this rather than a second bright colour. */
  --ink:        var(--stone-800);
  --ink-hover:  var(--stone-900);
  --on-ink:     #ffffff;

  /* Focus ring — one token, so every interactive element rings identically */
  --ring:       color-mix(in srgb, var(--brand-500) 45%, transparent);
  --ring-width: 4px;

  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
  --shadow-md: 0 4px 16px rgba(28, 25, 23, .08);
  --shadow-lg: 0 12px 40px rgba(28, 25, 23, .10);
  --shadow-xl: 0 24px 70px rgba(28, 25, 23, .14);
  --shadow-brand: 0 16px 40px rgba(234, 88, 12, .25);
  /* Pressed/raised inner light — what makes a solid button read as a physical
     object rather than a coloured rectangle. */
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .22);

  --grad-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  --grad-ink:   linear-gradient(135deg, var(--stone-700) 0%, var(--stone-800) 55%, var(--stone-900) 100%);

  --radius-sm: .75rem;
  --radius:    1.25rem;
  --radius-lg: 2rem;
  --radius-xl: 2.5rem;
  --radius-full: 999px;

  --font-serif: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing rhythm — the vertical scale pages actually compose with */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3rem, 6vw, 4.5rem);

  --nav-h: 5.25rem;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
}

html[data-theme="dark"] {
  --bg:          var(--stone-950);
  --bg-elevated: var(--stone-900);
  --bg-sunken:   #17130f;
  --bg-inset:    #14100d;
  --text:        var(--stone-300);
  --text-strong: #ffffff;
  --text-muted:  var(--stone-400);
  --border:      var(--stone-800);
  --border-soft: var(--stone-800);
  --accent:      var(--brand-500);
  --accent-hover:var(--brand-400);
  --accent-deep: var(--brand-300);

  /* Ink inverts: on a near-black page the "quiet solid" is a pale stone */
  --ink:        var(--stone-200);
  --ink-hover:  #ffffff;
  --on-ink:     var(--stone-900);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  --shadow-xl: 0 24px 70px rgba(0, 0, 0, .6);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .10);
  --grad-ink: linear-gradient(135deg, var(--stone-100) 0%, var(--stone-200) 55%, var(--stone-300) 100%);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -.015em;   /* Georgia sets loose at display sizes */
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;        /* no lonely last word on a line of its own */
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.25rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--accent-hover); }

img, video { max-width: 100%; display: block; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--brand-200); color: var(--stone-900); }
html[data-theme="dark"] ::selection { background: var(--brand-700); color: #fff; }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--accent); color: #fff;
  padding: .75rem 1.5rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700; transition: top .2s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }
.shell--narrow { max-width: 900px; }
.shell--wide   { max-width: 1500px; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--bg-elevated); }
.section--sunken { background: var(--bg-sunken); border-block: 1px solid var(--border-soft); }

.grid { display: grid; gap: 2rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.grid--split-rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: clamp(3rem, 7vw, 6rem); }

.flow-center { text-align: center; margin-inline: auto; max-width: 46rem; }

/* Block spacing — pages compose arbitrary blocks, so some vertical spacing
   has to be set at the call site. These name the steps of the scale so the
   rhythm stays consistent instead of drifting between 3rem and 4.5rem. */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Grid alignment overrides that used to be written inline. */
.grid--top    { align-items: start; }
.grid--middle { align-items: center; }
.grid--gap-sm { gap: 1rem; }
.grid--gap-lg { gap: clamp(2rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text); line-height: 1.75; }
.muted { color: var(--text-muted); }
.strong-ink { color: var(--text-strong); font-weight: 600; }

.rule {
  width: 5.5rem; height: 5px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  margin: 1.5rem 0 0;
}
.flow-center .rule { margin-inline: auto; }

/* Section head — eyebrow + heading + rule (+ optional lede) as one unit.
   Every page used to spell this out with inline margins on the rule; the
   component owns that spacing now so it is identical everywhere. */
.section-head { margin-bottom: var(--space-lg); }
.section-head > :last-child { margin-bottom: 0; }
.section-head h2,
.section-head h3 { margin-bottom: 0; }
.section-head .rule { margin-top: 1.5rem; }
.section-head .lede { margin-top: 1.5rem; }

/* Second and subsequent heads on a long page need air above them. */
.section-head--next { margin-top: clamp(3rem, 6vw, 4.5rem); }
.section-head--wide-gap { margin-bottom: var(--space-xl); }

.section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 46rem;
}
.section-head--center .rule { margin-inline: auto; }

/* Plain horizontal divider, for separating blocks inside one card. */
.divider {
  border: 0; height: 1px; background: var(--border);
  margin-block: var(--space-lg);
}

/* --------------------------------------------------------------------------
   5. Buttons, pills & badges

   Every variant carries the same 2px border — transparent where it is not
   drawn — so a solid and an outline button standing side by side in a row
   are exactly the same height. Sizing lives on .btn--sm / .btn--lg only;
   never override padding inline.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s ease,
              background-color .25s ease, background-position .5s var(--ease-out-expo),
              color .25s ease, border-color .25s ease;
  will-change: transform;
}
.btn > svg { flex-shrink: 0; }
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.985); }

/* The arrow leans forward on hover — the one flourish every CTA shares. */
.btn .arrow { display: inline-flex; transition: transform .3s var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(4px); }

/* --- Variants ---------------------------------------------------------- */

/* Primary — the saffron gradient sweeps left-to-right on hover. */
.btn--primary {
  background-image: var(--grad-brand);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: var(--on-accent);
  box-shadow: var(--shadow-md), var(--sheen);
}
.btn--primary:hover {
  background-position: 100% 50%;
  color: #fff;
  box-shadow: var(--shadow-brand), var(--sheen);
}

/* Secondary — the quiet solid. Ink, not a second bright colour. */
.btn--secondary {
  background-image: var(--grad-ink);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: var(--on-ink);
  box-shadow: var(--shadow-md), var(--sheen);
}
.btn--secondary:hover {
  background-position: 100% 50%;
  color: var(--on-ink);
  box-shadow: var(--shadow-lg), var(--sheen);
}

/* Ghost — outline. Pairs with primary in a two-button row. */
.btn--ghost {
  border-color: var(--brand-300);
  color: var(--accent);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--bg-sunken);
  border-color: var(--brand-500);
  color: var(--accent);
}

/* Quiet — text only, for tertiary actions that must not compete. */
.btn--quiet {
  padding-inline: .75rem;
  color: var(--accent);
  background: transparent;
}
.btn--quiet:hover { background: var(--bg-sunken); color: var(--accent-hover); }

/* Light — glass, for use over photography and the dark hero. */
.btn--light {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--light:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--light:focus-visible { outline-color: #fff; }

/* --- Sizes ------------------------------------------------------------- */

.btn--sm { padding: .55rem 1.25rem; font-size: .82rem; gap: .4rem; }
.btn--lg { padding: 1.1rem 2.5rem; font-size: 1.06rem; gap: .7rem; }

/* --- Modifiers --------------------------------------------------------- */

.btn--block { display: flex; width: 100%; }

/* Icon-only — square, and it still needs an aria-label in the markup. */
.btn--icon { padding: 0; width: 3rem; height: 3rem; border-radius: var(--radius-full); }
.btn--icon.btn--sm { width: 2.4rem; height: 2.4rem; }
.btn--icon.btn--lg { width: 3.6rem; height: 3.6rem; }

/* --- States ------------------------------------------------------------ */

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
  filter: grayscale(.35);
  pointer-events: none;
}

/* Submitting — swaps the label for a spinner without the box resizing. */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 1.15rem; height: 1.15rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--on-accent);
  animation: btn-spin .6s linear infinite;
}
.btn--ghost.is-loading::after,
.btn--quiet.is-loading::after { color: var(--accent); }

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --- Button rows ------------------------------------------------------- */

/* Replaces the display:flex;gap:1rem;flex-wrap:wrap that used to be
   written inline on every call to action. */
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.actions--center { justify-content: center; }
.actions--end    { justify-content: flex-end; }
.actions--tight  { gap: .6rem; }
.actions--spaced { margin-top: 2rem; }

/* --- Pills & badges ---------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1.1rem; border-radius: var(--radius-full);
  background: var(--bg-sunken); border: 1px solid var(--border-soft);
  color: var(--accent); font-size: .75rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.pill--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill--ink   { background: var(--bg-inset); border-color: var(--border); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   6. Top utility bar
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--stone-900);
  color: var(--stone-300);
  font-size: .82rem;
}
html[data-theme="dark"] .topbar { background: #000; }

.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .55rem; flex-wrap: wrap;
}
.topbar__contact { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.topbar__contact a { color: var(--stone-300); display: inline-flex; align-items: center; gap: .45rem; }
.topbar__contact a:hover { color: var(--brand-400); }
.topbar__tools { display: flex; align-items: center; gap: .4rem; }

.lang-switch { display: flex; align-items: center; gap: .2rem; }
.lang-switch a {
  padding: .25rem .6rem; border-radius: var(--radius-full);
  color: var(--stone-400); font-weight: 700; font-size: .74rem;
  letter-spacing: .06em; transition: all .25s ease;
}
.lang-switch a:hover { color: #fff; background: rgba(255,255,255,.1); }
.lang-switch a[aria-current="true"] { background: var(--brand-600); color: #fff; }

.icon-btn {
  width: 2.1rem; height: 2.1rem; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-full); color: var(--stone-300);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; transform: scale(1.08); }

/* The theme toggle shows exactly one glyph, chosen by CSS from the
   data-theme already set before first paint — so neither icon flashes
   while main.js is still loading. */
.icon-btn .icon-sun, .icon-btn .icon-moon { display: none; line-height: 0; }
html[data-theme="dark"]  .icon-btn .icon-sun  { display: inline-flex; }
html[data-theme="light"] .icon-btn .icon-moon { display: inline-flex; }
.icon-btn:active { transform: scale(.94) rotate(-12deg); }

/* On the light drawer, the icon button needs page ink rather than topbar grey. */
.icon-btn--ink { color: var(--text-strong); }
.icon-btn--ink:hover { background: var(--bg-sunken); color: var(--accent); }

/* --------------------------------------------------------------------------
   7. Navbar — five links, the crest, five links

   Two layouts from one markup. At >=1400px .nav__menus becomes display:contents
   so the two groups sit either side of the crest as grid items. Below that the
   crest takes its own line and the ten links wrap beneath it, which is what
   keeps anything from being pushed off-screen the way the old bar did.

   The navbar also retracts on scroll; .dock (section 7b) takes over from there.
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow .35s ease, background-color .4s ease,
              transform .4s var(--ease-out-expo);
}
.nav.is-stuck { box-shadow: var(--shadow-md); }
/* Retracted once the visitor is reading; the dock carries the links instead. */
.nav.is-retracted { transform: translateY(-100%); }

.nav__inner { display: grid; align-items: center; gap: .75rem 1rem; padding-block: .5rem; }

/* --- Crest -------------------------------------------------------------- */

.nav__brand {
  display: flex; align-items: center; gap: .85rem;
  text-align: left;
  transition: transform .35s var(--ease-spring);
}
.nav__brand:hover { transform: translateY(-2px); }

.nav__crest {
  position: relative;
  width: 3.5rem; height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elevated);
  border: 2px solid var(--brand-300);
  box-shadow: 0 4px 14px rgba(28, 25, 23, .12), var(--sheen);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-spring);
}
/* A second, thinner ring — reads as a struck seal rather than a plain circle. */
.nav__crest::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; border: 1px solid var(--brand-100);
  pointer-events: none;
}
html[data-theme="dark"] .nav__crest::after { border-color: rgba(253, 186, 116, .22); }
.nav__brand:hover .nav__crest {
  border-color: var(--brand-500);
  box-shadow: 0 0 24px rgba(234, 88, 12, .38), 0 6px 20px rgba(28, 25, 23, .18), var(--sheen);
  transform: scale(1.05) rotate(2deg);
}
.nav__crest img { width: 68%; height: auto; border-radius: 50%; }

.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: left;
}
.nav__brand-acronym {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: .06em;
  line-height: .95;
  color: var(--text-strong);
  transition: color .25s ease;
}
.nav__brand:hover .nav__brand-acronym {
  color: var(--accent);
}
.nav__brand-full {
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: .68rem;
  line-height: 1.15;
  color: var(--text-strong);
  letter-spacing: .01em;
  margin-top: .15rem;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav__brand:hover .nav__brand-full {
  color: var(--text-strong);
}
.nav__brand-full span {
  display: block;
  line-height: 1.12;
}
.nav__brand-sub {
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-top: .22rem;
}

/* --- Groups ------------------------------------------------------------- */

.nav__menus { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.nav__group { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.nav__item { position: relative; }

/* Each entry is a field with its own edge, so the sections stay separable. */
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text);
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease,
              border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease-out-expo);
}
.nav__link:hover {
  color: var(--accent); background: var(--bg-sunken);
  border-color: var(--brand-300); box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Resource links are the quieter half of the bar. */
.nav__link--quiet { background: transparent; border-color: transparent; }
.nav__link--quiet:hover { background: var(--bg-sunken); border-color: var(--brand-200); }

/* Training — the one call to action in the bar. */
.nav__link--cta {
  background-image: var(--grad-brand);
  background-size: 180% 100%;
  background-position: 0% 50%;
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--shadow-md), var(--sheen);
  transition: background-position .5s var(--ease-out-expo), box-shadow .3s ease,
              transform .25s var(--ease-out-expo);
}
.nav__link--cta:hover {
  background-position: 100% 50%;
  color: #fff;
  box-shadow: var(--shadow-brand), var(--sheen);
  transform: translateY(-2px);
}
.nav__link--cta svg { opacity: .85; }

/* Current page / section is tinted rather than filled: solid saffron is
   reserved for Training, so the one call to action stays unmistakable. */
.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link:not(.nav__link--cta) {
  color: var(--accent);
  background: var(--bg-sunken);
  border-color: var(--brand-300);
  font-weight: 800;
}
.nav__link[aria-current="page"]:hover,
.nav__item.is-active > .nav__link:not(.nav__link--cta):hover {
  color: var(--accent); background: var(--brand-100); border-color: var(--brand-400);
}
html[data-theme="dark"] .nav__link[aria-current="page"]:hover,
html[data-theme="dark"] .nav__item.is-active > .nav__link:not(.nav__link--cta):hover { background: var(--bg-sunken); }

.nav__caret { transition: transform .3s var(--ease-out-expo); }
.nav__item:hover .nav__caret,
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* --- Dropdown ----------------------------------------------------------- */

.nav__menu {
  position: absolute; top: calc(100% + .45rem); left: 50%;
  min-width: 15rem; padding: .5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, .6rem) scale(.97);
  transition: opacity .28s var(--ease-out-expo),
              transform .28s var(--ease-out-expo),
              visibility .28s;
  z-index: 110;
}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item.is-open > .nav__menu {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.nav__menu a {
  padding: .7rem 1rem; border-radius: var(--radius-sm);
  font-size: .86rem; font-weight: 600; color: var(--text);
  transition: background-color .2s ease, color .2s ease, padding-left .25s ease;
}
.nav__menu a:hover { background: var(--bg-sunken); color: var(--accent); padding-left: 1.35rem; }
.nav__menu .ext { font-size: .7em; opacity: .6; }

/* --- Navbar Social Wheel Button & Dropdown ----------------------------- */
.nav__link--social-hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .2rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
  cursor: pointer;
}
.nav__link--social-hub:hover,
.nav__item--social:hover .nav__link--social-hub {
  border-color: var(--brand-400);
  box-shadow: 0 4px 14px rgba(234, 88, 12, .22);
  transform: translateY(-1px);
}

/* The 6-segment circle (matching social platform branding) */
.social-wheel {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  flex-shrink: 0;
  transition: transform .4s var(--ease-spring);
}
.nav__link--social-hub:hover .social-wheel {
  transform: rotate(18deg) scale(1.06);
}
.social-wheel__quad {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.social-wheel__quad--fb  { background: #1877f2; }
.social-wheel__quad--ig  { background: #d62976; }
.social-wheel__quad--x   { background: #000000; }
.social-wheel__quad--yt  { background: #ff0000; }
.social-wheel__quad--li  { background: #0a66c2; }
.social-wheel__quad--pin { background: #e60023; }

.nav__menu--social {
  min-width: 16.5rem;
  padding: .75rem;
  right: 0;
  left: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 10px 30px rgba(0, 0, 0, .12);
  transform: translateY(.6rem) scale(.97);
}
.nav__item:hover > .nav__menu--social,
.nav__item:focus-within > .nav__menu--social {
  transform: translateY(0) scale(1);
}
.nav__social-head {
  padding: .35rem .65rem .75rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: .45rem;
}
.nav__social-title {
  display: block;
  font-family: var(--font-serif);
  font-size: .92rem;
  font-weight: 800;
  color: var(--text-strong);
}
.nav__social-sub {
  display: block;
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}
.nav__social-list { display: flex; flex-direction: column; gap: .35rem; }
.nav__social-link {
  display: flex !important;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem !important;
  border-radius: var(--radius-md);
  font-size: .88rem !important;
  font-weight: 700;
  color: var(--text-strong) !important;
  transition: all .2s ease !important;
}
.nav__social-badge {
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  transition: transform .25s var(--ease-spring);
  flex-shrink: 0;
}
.nav__social-badge--facebook  { background: #1877f2; }
.nav__social-badge--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.nav__social-badge--x-twitter { background: #000; }
.nav__social-badge--youtube   { background: #ff0000; }
.nav__social-badge--linkedin  { background: #0a66c2; }
.nav__social-badge--pinterest { background: #e60023; }

.nav__social-link:hover .nav__social-badge {
  transform: scale(1.12) rotate(6deg);
}
.nav__social-label { flex: 1; }
.nav__social-arrow { opacity: .3; transition: transform .2s ease, opacity .2s ease; }
.nav__social-link:hover .nav__social-arrow { opacity: 1; transform: translateX(3px); }

/* Brand hover backgrounds */
.nav__social-link--facebook:hover  { background: rgba(24, 119, 242, .08) !important; }
.nav__social-link--instagram:hover { background: rgba(220, 39, 67, .08) !important; }
.nav__social-link--x-twitter:hover { background: rgba(0, 0, 0, .07) !important; }
.nav__social-link--youtube:hover   { background: rgba(255, 0, 0, .08) !important; }
.nav__social-link--linkedin:hover  { background: rgba(10, 102, 194, .08) !important; }
.nav__social-link--pinterest:hover { background: rgba(230, 0, 35, .08) !important; }

/* --- Footer & Drawer Social Buttons -------------------------------------- */
.footer__social-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.footer__social-btn {
  width: 2.35rem; height: 2.35rem;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--stone-800);
  border: 1px solid var(--stone-700);
  color: var(--stone-300);
  transition: all .25s ease;
}
.footer__social-btn:hover {
  transform: translateY(-3px);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.footer__social-btn--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.footer__social-btn--instagram:hover { background: #e4405f; border-color: #e4405f; }
.footer__social-btn--x-twitter:hover { background: #000; border-color: #444; }
.footer__social-btn--youtube:hover   { background: #ff0000; border-color: #ff0000; }
.footer__social-btn--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.footer__social-btn--pinterest:hover { background: #e60023; border-color: #e60023; }

.drawer__group--social { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-soft); margin-top: .5rem; }
.drawer__heading { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .85rem; }
.drawer__social-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.drawer__social-btn {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all .25s ease;
}
.drawer__social-btn:hover { transform: translateY(-2px); color: #fff; }
.drawer__social-btn--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.drawer__social-btn--instagram:hover { background: #e4405f; border-color: #e4405f; }
.drawer__social-btn--x-twitter:hover { background: #000; border-color: #444; }
.drawer__social-btn--youtube:hover   { background: #ff0000; border-color: #ff0000; }
.drawer__social-btn--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.drawer__social-btn--pinterest:hover { background: #e60023; border-color: #e60023; }

.nav__burger { display: none; }

/* --- Wide layout: five | crest | five -----------------------------------

   Measured: the two groups plus the crest need about 1452px inside the
   shell, so the flanking layout only switches on at 1500px — the width at
   which .shell--wide stops growing. Tighter fields here buy the headroom
   that keeps the fifth link on screen. */

@media (min-width: 1360px) {
  .nav__menus { display: contents; }
  .nav__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding-block: 0;
    min-height: var(--nav-h);
  }
  .nav__link { padding: .46rem .68rem; font-size: .74rem; }
  .nav__group { gap: .25rem; }
  /* The crest comes first in the DOM (it is what matters on mobile), so all
     three need an explicit row — otherwise sparse auto-placement pushes the
     groups onto a second row once the cursor has passed column 2. */
  .nav__group--left  { grid-area: 1 / 1; justify-content: flex-end;   flex-wrap: nowrap; }
  .nav__brand        { grid-area: 1 / 2; padding-inline: .75rem; }
  .nav__group--right { grid-area: 1 / 3; justify-content: flex-start; flex-wrap: nowrap; }
  .nav__spacer       { display: none; }

  /* The left group is right-aligned right up against the crest, so its
     first item (Legacy) sits close to the edge of the shell — a dropdown
     centred under it runs off the left edge of the viewport entirely. Open
     it from the trigger's own left edge instead, growing rightward, same
     as the last item on the right would need to grow leftward if it ever
     grows a submenu of its own. */
  .nav__group--left  > .nav__item:first-child > .nav__menu {
    left: 0; transform: translate(0, .6rem) scale(.97);
  }
  .nav__group--left  > .nav__item:first-child.is-open > .nav__menu,
  .nav__group--left  > .nav__item:first-child:hover > .nav__menu,
  .nav__group--left  > .nav__item:first-child:focus-within > .nav__menu {
    transform: translate(0, 0) scale(1);
  }
  .nav__group--right > .nav__item:last-child > .nav__menu {
    left: auto; right: 0; transform: translate(0, .6rem) scale(.97);
  }
  .nav__group--right > .nav__item:last-child.is-open > .nav__menu,
  .nav__group--right > .nav__item:last-child:hover > .nav__menu,
  .nav__group--right > .nav__item:last-child:focus-within > .nav__menu {
    transform: translate(0, 0) scale(1);
  }
}

@media (min-width: 1540px) {
  .nav__link { padding: .5rem .75rem; font-size: .76rem; }
  .nav__group { gap: .32rem; }
  .nav__brand { padding-inline: 1.25rem; }
}

/* --- Stacked layout: crest above a wrapped menu row --------------------- */

@media (max-width: 1359px) {
  .nav__inner { justify-items: center; }
  .nav__menus { width: 100%; padding-bottom: .15rem; }
  .nav__link { padding: .44rem .68rem; font-size: .74rem; }
}

/* --------------------------------------------------------------------------
   7b. Floating dock

   Appears when the navbar retracts. It is the same set of destinations the
   bar carries, reduced to the six people actually travel to, and it hovers
   clear of the page so it never covers the content it links to.
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 50%; bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 95;
  transform: translate(-50%, 150%);
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease-spring), opacity .35s ease, visibility .5s;
  max-width: calc(100vw - 2rem);
}
.dock.is-shown { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.dock__list {
  display: flex; align-items: stretch; gap: .25rem;
  margin: 0; padding: .4rem;
  list-style: none;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xl);
  overflow-x: auto;
  scrollbar-width: none;
}
.dock__list::-webkit-scrollbar { display: none; }

.dock__item {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-spring);
}
.dock__item:hover {
  background: var(--bg-sunken);
  color: var(--accent);
  transform: translateY(-4px);
}
.dock__icon { display: grid; place-items: center; line-height: 0; }
.dock__item[aria-current="page"] { color: var(--accent); background: var(--bg-sunken); }

/* Training keeps its saffron here too, so the call to action is constant. */
.dock__item--cta {
  background-image: var(--grad-brand);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: var(--on-accent);
  box-shadow: var(--shadow-sm), var(--sheen);
  padding-inline: 1.1rem;
  transition: background-position .5s var(--ease-out-expo), transform .3s var(--ease-spring), box-shadow .3s ease;
}
.dock__item--cta:hover {
  background-position: 100% 50%;
  color: #fff;
  box-shadow: var(--shadow-brand), var(--sheen);
}

/* The back-to-top control steps aside rather than sitting on the dock. */
.to-top.is-docked { bottom: calc(clamp(1rem, 3vh, 1.75rem) + 4.75rem); }

@media (max-width: 640px) {
  .dock__label { display: none; }       /* icons only where width is scarce */
  .dock__item { padding: .6rem .75rem; }
  .dock__item--cta { padding-inline: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: opacity .2s ease, visibility .2s; transform: translate(-50%, 0); }
}

/* --------------------------------------------------------------------------
   8. Mobile drawer
   -------------------------------------------------------------------------- */

.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg);
  padding: 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s var(--ease-out-expo);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.drawer__brand { align-items: flex-start; }
.drawer__group { border-bottom: 1px solid var(--border); }
.drawer__toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-strong);
}
.drawer__panel { display: none; padding-bottom: 1rem; }
.drawer__group.is-open .drawer__panel { display: block; }
.drawer__group.is-open .drawer__toggle .nav__caret { transform: rotate(180deg); }
.drawer__panel a { display: block; padding: .55rem 0 .55rem 1rem; color: var(--text); font-weight: 600; }
.drawer__panel a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Hero video overlay (download.mp4)
   -------------------------------------------------------------------------- */

.intro {
  position: fixed; inset: 0; z-index: 999;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .9s ease, visibility .9s;
}
.intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

/* Loading-screen.mp4 is a portrait clip (768x1046) — stretching it to fill
   a wide desktop viewport (the old download.mp4 was 16:9 and could get away
   with that) smears it badly. object-fit: contain never distorts, on any
   screen orientation, whatever video ends up here next — it letterboxes
   instead, which is the honest trade-off for a portrait source. */
.intro video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
}

.intro__hint {
  position: absolute; bottom: clamp(1.5rem, 5vh, 3.5rem); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.5rem; border-radius: var(--radius-full);
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  color: #fff; font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  animation: pulse-soft 2.4s ease-in-out infinite;
}

/* Countdown ring — shows the 20s auto-dismiss ticking down */
.intro__timer { position: absolute; top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; }
.intro__timer circle { fill: none; stroke-width: 3; }
.intro__timer .track { stroke: rgba(0,0,0,.12); }
.intro__timer .bar {
  stroke: var(--brand-500); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}
.intro__count {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--stone-800); font-size: .78rem; font-weight: 800;
}

@keyframes pulse-soft {
  0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.04); }
}

/* --------------------------------------------------------------------------
   10. Hero slider
   -------------------------------------------------------------------------- */

.hero { padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 0; }

.hero__frame {
  position: relative; height: clamp(30rem, 78vh, 46rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--stone-900);
  border: 8px solid color-mix(in srgb, var(--bg-elevated) 65%, transparent);
  box-shadow: var(--shadow-xl);
}

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.1);
  transition: opacity 1.4s ease, transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,25,23,.92) 0%, rgba(28,25,23,.55) 45%, rgba(28,25,23,.1) 100%);
}

.hero__body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 6vw, 5.5rem);
  max-width: 60rem;
}
.hero__badge {
  align-self: flex-start;
  padding: .5rem 1.4rem; margin-bottom: 1.75rem;
  border-radius: var(--radius-full);
  background: rgba(154,52,18,.35); border: 1px solid rgba(249,115,22,.5);
  backdrop-filter: blur(10px);
  color: var(--brand-300); font-size: .78rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
}
.hero__title { color: #fff; margin-bottom: 1.5rem; }
.hero__title em { font-style: normal; color: var(--brand-500); }
.hero__text {
  color: rgba(255,255,255,.85);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  max-width: 38rem; margin-bottom: 2.5rem;
}

.hero__controls { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vw, 4rem); z-index: 3; display: flex; gap: .85rem; }
.hero__btn {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full);
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  transition: transform .3s var(--ease-spring), background-color .25s ease;
}
.hero__btn:hover { transform: scale(1.1); background: rgba(255,255,255,.24); }
.hero__btn--accent { background: var(--brand-600); border-color: var(--brand-500); }
.hero__btn--accent:hover { background: var(--brand-500); }

.hero__dots { position: absolute; left: clamp(2rem, 6vw, 5.5rem); bottom: clamp(1.75rem, 4vw, 4.25rem); z-index: 3; display: flex; gap: .5rem; }
.hero__dot {
  width: 2.25rem; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.3); transition: background-color .35s ease, width .35s ease;
}
.hero__dot.is-active { background: var(--brand-500); width: 3.25rem; }

/* --------------------------------------------------------------------------
   11. Page banner (interior pages)
   -------------------------------------------------------------------------- */

/* Full-bleed, frameless: unlike the home hero, interior banners run edge
   to edge with no border/rounded card — a plain full-screen photo carousel
   the page content then overlaps (see .page-card's negative margin). */
.banner { padding: 0; }
.banner__frame {
  position: relative; width: 100%; height: clamp(30rem, 88vh, 50rem);
  overflow: hidden;
  background: var(--stone-900);
  display: grid; place-items: center; text-align: center;
  outline: none;
}
.banner__frame .carousel__slide img { opacity: .55; transform: scale(1); }
/* A slow, subtle zoom on whichever photo is showing — the classic
   "elegant full-screen carousel" touch, not a jarring one. Scoped to
   .is-active so each new slide starts its own zoom from scratch rather
   than picking up wherever a background-running animation happened to be. */
.banner__frame .carousel__slide.is-active img {
  animation: banner-ken-burns 9s ease-out forwards;
}
@keyframes banner-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .banner__frame .carousel__slide.is-active img { animation: none; }
}
.banner__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(28,25,23,.92), rgba(28,25,23,.35) 60%, rgba(28,25,23,.15));
}
.banner__frame .carousel__arrow { width: 3rem; height: 3rem; }
.banner__frame .carousel__dots { bottom: 1.5rem; }
.banner__body { position: relative; z-index: 2; padding: 2rem; }
.banner__body h1 { color: #fff; }
.banner__body .rule { margin: 1.5rem auto; }
.banner__body p { color: rgba(255,255,255,.85); font-size: clamp(1rem, 2vw, 1.35rem); max-width: 42rem; margin-inline: auto; }
.banner__badge {
  display: inline-block; padding: .45rem 1.3rem; margin-bottom: 1.5rem;
  border-radius: var(--radius-full);
  background: rgba(255,237,213,.16); border: 1px solid rgba(254,215,170,.32);
  backdrop-filter: blur(8px);
  color: var(--brand-200); font-size: .74rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
}

/* Content card that overlaps the banner */
.page-card {
  position: relative; z-index: 5;
  max-width: 1120px; margin: -5rem auto 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 5vw, 4.5rem);
}

.crumbs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 2.5rem; font-size: .76rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.crumbs span[aria-current] { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12. Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease-out-expo), box-shadow .4s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--brand-200); }

.card__media {
  aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden;
  margin: -0.5rem -0.5rem 1.75rem; background: var(--stone-200);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-expo); }
.card:hover .card__media img { transform: scale(1.07); }

.card__icon--flush { margin-bottom: 0; }
.card__icon {
  width: 3.75rem; height: 3.75rem; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 1.5rem;
  background: var(--bg-sunken); color: var(--accent);
  transition: background-color .3s ease, color .3s ease, transform .35s var(--ease-spring);
}
.card:hover .card__icon { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.06); }

.card--stat { text-align: center; }
.card--stat .card__icon { margin-inline: auto; }
.card__value {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3rem); color: var(--text-strong);
  line-height: 1; margin-bottom: .6rem;
}
.card__label { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }

/* Card header — icon on the left, badge or index on the right. Repeated on
   the structure, conferences, associated and social pages, where it used to
   be four different inline flex declarations. */
.card__head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem;
}
.card__head--between { justify-content: space-between; align-items: flex-start; }

/* Card title sits tight to the role/subtitle line underneath it. */
.card__title { margin-bottom: .35rem; }
.card__title--lg { font-size: clamp(1.2rem, 2vw, 1.35rem); }

/* Media object — icon or thumbnail beside a block of text that reflows
   underneath it on narrow screens. */
.media { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.media--center { align-items: center; }
.media__body { flex: 1; min-width: 16rem; }

/* An index numeral: 01, 02, 03 down a list of wings. */
.card__index { letter-spacing: .2em; }


/* Accent card — the "and one more thing" callout that closes most pages.
   Was written inline as background:var(--bg-sunken);border-color:var(--brand-200). */
.card--accent {
  background: var(--bg-sunken);
  border-color: var(--brand-200);
}
html[data-theme="dark"] .card--accent { border-color: var(--stone-700); }

/* Roomier padding for cards that hold a whole form or a long passage. */
.card--roomy { padding: clamp(1.75rem, 4vw, 3rem); }

/* Buttons inside a card always want air above them. */
.card .actions { margin-top: 1.75rem; }

/* Solid icon chip — the accent-filled variant used on the social page. */
.card__icon--solid { background: var(--accent); color: #fff; }

/* Photo-backed pillar card — the "Core Pillars" grid on the About page.
   A real photo behind a dark scrim, text in white on top, rather than a
   flat icon-only tile with no visual identity of its own. */
.card--pillar {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card--pillar::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(190deg, rgba(28,25,23,.55) 0%, rgba(28,25,23,.82) 65%, rgba(28,25,23,.94) 100%);
  transition: background-color .4s ease;
}
.card--pillar:hover::before { background: linear-gradient(190deg, rgba(28,25,23,.4) 0%, rgba(28,25,23,.72) 65%, rgba(28,25,23,.88) 100%); }
.card--pillar .card__icon { background: var(--accent); color: #fff; }
.card--pillar:hover .card__icon { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.06); }
.card--pillar .card__title { color: #fff; }
.card--pillar .label { color: var(--brand-300, var(--accent)); }
.card--pillar .muted { color: rgba(255,255,255,.8); }

/* Interactive clickable cards & tiles */
a.card--interactive {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), box-shadow .3s ease, border-color .3s ease;
}
a.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-300);
}
a.card--interactive:hover .card__title {
  color: var(--accent);
}
a.card--interactive .link-label {
  transition: transform .25s ease, color .25s ease;
}
a.card--interactive:hover .link-label {
  color: var(--accent-hover);
  transform: translateX(4px);
}
a.card--pillar.card--interactive:hover .card__title {
  color: #fff;
}

/* The single emphatic line inside a callout. */
.callout__line {
  margin: 0; flex: 1; min-width: 16rem;
  font-weight: 700; font-size: 1.1rem; color: var(--text-strong);
}

/* Video-card and media-card titles: smaller than a section h3. */
.video-card__body h3 { font-size: 1.1rem; margin-bottom: 0; }

/* Framed images carry a fixed height so the split layout stays balanced. */
.framed--tall img { height: 28rem; object-fit: cover; }
.framed--mid img  { height: 24rem; object-fit: cover; }
.framed--short img { height: 22rem; object-fit: cover; }

/* Logo variant — a brand mark shown whole on a plain panel (object-fit:
   contain), not cropped to fill the frame like a documentary photo. */
.framed--logo {
  height: 22rem; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--radius-xl); padding: clamp(2rem, 6vw, 4rem);
}

/* Timeline year + label sit on one baseline. */
.timeline__head {
  display: flex; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; margin-bottom: .5rem;
}

/* Honeypot: off-screen for people, in the DOM for bots. */
.honeypot { position: absolute; left: -9999px; }

/* Empty state, revealed by the gallery filter when nothing matches. */
.empty-state { margin-top: 2rem; }
.empty-state[hidden] { display: none; }

/* A doc row's label takes the free space between icon and meta. */
.doc__title { flex: 1; }


/* Numbered step — the "1. Send your list / 2. We confirm" pattern. */
.card--step { counter-increment: step; position: relative; }
.card--step .card__icon { margin-bottom: 1.25rem; }
.card--step h3 { font-size: 1.15rem; display: flex; align-items: baseline; gap: .6rem; }
.card--step h3::before {
  content: counter(step);
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 800;
  color: var(--accent);
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  width: 1.6rem; height: 1.6rem;
  display: inline-grid; place-items: center;
  letter-spacing: 0;
}
.steps { counter-reset: step; }

/* Icon + label + value row. Started life as .map__row and is now used for
   any labelled detail, so it has a name of its own. */
.info-row { display: flex; gap: .9rem; align-items: flex-start; }
.info-row + .info-row { margin-top: var(--space-md); }
.info-row > svg { color: var(--accent); flex-shrink: 0; margin-top: .2rem; }
.info-row strong {
  display: block; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 800;
}
.info-row__value { font-weight: 600; font-size: 1.05rem; color: var(--text-strong); }
a.info-row__value:hover { color: var(--accent); }


/* Portrait card (team / founders) */
.portrait { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg-elevated); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease-out-expo); }
.portrait:hover img { transform: scale(1.05); }
.portrait__placeholder {
  width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: var(--bg-sunken); color: var(--text-muted);
}
.portrait__body { padding: 1.5rem; }
.portrait__role { color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }


/* Pull quote — a <blockquote> that reads as one, rather than a .card wearing
   five inline overrides. The saffron edge marks it without shouting. */
.quote {
  position: relative;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
  border: 1px solid var(--brand-200);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .quote { border-color: var(--stone-700); border-left-color: var(--accent); }
.quote__mark { color: var(--accent); margin-bottom: 1rem; }
.quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-strong);
  margin: 0;
}
.quote__cite {
  display: block; margin-top: 1.25rem; font-style: normal;
  color: var(--accent); font-size: .74rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}

/* Small uppercase label. .portrait__role was being borrowed for this all
   over the site; now there is a name for it. */
.label {
  display: flex; align-items: center; gap: .5rem;
  color: var(--accent);
  font-size: .74rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.label--muted { color: var(--text-muted); }

/* Framed image with offset accent border */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(1rem, 1rem);
  border: 2px solid var(--accent); border-radius: var(--radius-xl);
  z-index: 0; transition: transform .5s var(--ease-out-expo);
}
.framed:hover::before { transform: translate(.5rem, .5rem); }
.framed img {
  position: relative; z-index: 1;
  width: 100%; border-radius: var(--radius-xl);
  object-fit: cover; box-shadow: var(--shadow-lg);
}
.framed--logo img {
  width: auto; height: auto; max-width: 75%; max-height: 45%;
  object-fit: contain; box-shadow: none; border-radius: 0;
}
@media (max-width: 640px) {
  .framed::before { transform: translate(0.4rem, 0.4rem); border-radius: var(--radius-lg); }
  .framed img { border-radius: var(--radius-lg); }
  .framed--tall img { height: clamp(16rem, 42vh, 22rem); }
}

/* Lets a photo escape the page-card's own padding and run edge to edge,
   instead of sitting inside another small boxed frame. */
.breakout { margin-inline: clamp(-4.5rem, -5vw, -2rem); }

.big-photo { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.big-photo img {
  display: block; width: 100%; height: clamp(20rem, 38vw, 34rem);
  object-fit: cover; transition: transform .8s var(--ease-out-expo);
}
.big-photo:hover img { transform: scale(1.03); }
.big-photo__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.75rem 1.25rem;
  background: linear-gradient(to top, rgba(20,15,10,.78), transparent);
  color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
}
@media (max-width: 720px) {
  .big-photo img { height: 16rem; }
}

/* Content carousel: one big photo at a time, auto-rotating, with manual
   arrows/dots — used for photo-essay sections that used to be small grids. */
.carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); outline: none; }
.carousel__track { position: relative; height: clamp(20rem, 42vw, 36rem); background: var(--stone-900); }
.carousel__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .7s ease;
}
.carousel__slide.is-active { opacity: 1; z-index: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0;
  padding: 2.5rem 4.5rem 1.25rem 1.75rem;
  background: linear-gradient(to top, rgba(20,15,10,.8), transparent);
  color: #fff; font-weight: 700; font-size: .95rem;
}
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  display: grid; place-items: center; color: #fff;
  background: rgba(20,15,10,.45); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  transition: background-color .25s ease, transform .25s var(--ease-spring);
}
.carousel__arrow:hover { background: rgba(20,15,10,.75); transform: translateY(-50%) scale(1.08); }
.carousel__arrow--prev { left: 1rem; }
.carousel__arrow--next { right: 1rem; }
.carousel__dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: .9rem; z-index: 3;
  display: flex; gap: .4rem;
}
.carousel__dot { width: 1.6rem; height: 4px; border-radius: 2px; background: rgba(255,255,255,.4); transition: background-color .3s ease, width .3s ease; }
.carousel__dot.is-active { background: #fff; width: 2.2rem; }
@media (max-width: 720px) {
  .carousel__track { height: 17rem; }
  .carousel__arrow { width: 2.25rem; height: 2.25rem; }
  .carousel__caption { padding: 2rem 3.5rem 1rem 1.25rem; font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   13. Timeline
   -------------------------------------------------------------------------- */

.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem;
  width: 2px; background: linear-gradient(var(--brand-400), var(--border));
}
.timeline__item { position: relative; padding-bottom: 3rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: -2.5rem; top: .35rem;
  width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full);
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 3px var(--brand-200);
}
.timeline__year {
  font-family: var(--font-serif); font-size: 1.85rem; font-weight: 700;
  color: var(--accent); line-height: 1;
}

/* --------------------------------------------------------------------------
   14. Diamond hub (social impact scrollytelling selector)
   -------------------------------------------------------------------------- */

/* Enlarged interactive diamond hub on solid background with tactile spring */
.diamond {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1.45rem; transform: rotate(45deg);
  width: min(27rem, 85vw); aspect-ratio: 1;
  margin: 2.25rem auto;
}
.diamond__node {
  border-radius: 14px; display: grid; place-items: center;
  padding: 1.05rem .85rem; text-align: center; cursor: pointer;
  background: var(--bg-elevated); border: 2px solid var(--border-soft);
  color: var(--text); box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease-spring), background-color .3s ease,
              color .3s ease, border-color .3s ease, box-shadow .35s ease, opacity .3s ease;
}
.diamond__node:hover {
  transform: scale(1.1);
  border-color: var(--brand-300);
  color: var(--brand-700);
  box-shadow: var(--shadow-lg);
}
.diamond__node.is-active {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  border: 3px solid var(--accent);
  color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.45), var(--shadow-brand);
  z-index: 2;
}
.diamond__node.is-hub {
  background: var(--bg-elevated);
  border: 2px solid var(--border-soft);
  color: var(--text);
}
.diamond__node.is-hub:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
}
.diamond__node.is-hub.is-active {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  border: 3px solid var(--accent);
  color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.45), var(--shadow-brand);
  z-index: 2;
}

.diamond__inner {
  transform: rotate(-45deg);
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; font-weight: 700; font-size: .84rem; line-height: 1.25;
  max-width: 6.5rem; text-align: center;
}
.diamond__inner span {
  width: min-content;
  text-wrap: balance;
  letter-spacing: .02em;
}
.diamond__spacer { visibility: hidden; }

/* --------------------------------------------------------------------------
   Touch-friendly Initiative Selector on Mobile & Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .diamond {
    transform: none;
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: .55rem;
    padding: .35rem .25rem;
    margin: .65rem 0 0;
  }
  .diamond::-webkit-scrollbar { display: none; }
  .diamond__spacer { display: none; }
  .diamond__node {
    flex: 0 0 auto;
    min-width: 8rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    scroll-snap-align: center;
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .diamond__node.is-hub { min-width: 9rem; }
  .diamond__node.is-active {
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
  }
  .diamond__inner {
    transform: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    max-width: none;
    font-size: .82rem;
    white-space: nowrap;
  }
  .diamond__inner span {
    width: auto;
    text-wrap: nowrap;
  }
}

/* Social Impact Scrollytelling Panels & Accents (Solid Theme) */
.scrollytell--impact {
  position: relative;
  background: var(--bg-sunken);
  margin-top: 0;
  margin-bottom: clamp(3rem, 6vh, 5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  clear: both;
}
.scrollytell__impact-story { flex: 1; min-width: 0; }
.scrollytell__impact-controls { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; }

.impact-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3.2vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  min-height: 15rem;
  transition: opacity .35s ease, transform .35s ease;
}
.impact-panel__step-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-700);
  background: rgba(168, 43, 37, 0.08);
  border: 1px solid rgba(168, 43, 37, 0.22);
  border-radius: 4px;
  padding: 0.25rem 0.65rem;
  margin-bottom: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.impact-panel__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; color: var(--accent); }
.impact-panel__head h3 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.65rem); color: var(--text-strong); }
.impact-panel__icon-wrap {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(212, 175, 55, 0.15); color: var(--accent);
  border: 1px solid rgba(212, 175, 55, 0.35); flex-shrink: 0;
  transition: transform .3s ease;
}

/* Scrollytelling Story Progress Segment Indicators */
.scrollytell__progress,
.impact-progress {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 0.65rem;
  align-items: center;
}
.scrollytell__progress-seg {
  flex: 1;
  height: 3.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color .28s ease, transform .28s ease;
}
.scrollytell__progress-seg.is-active {
  background: var(--accent, #d4af37);
  transform: scaleY(1.35);
}
.impact-progress__seg {
  flex: 1;
  height: 3.5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
  transition: background-color .28s ease, transform .28s ease;
}
[data-theme="dark"] .impact-progress__seg {
  background: rgba(255, 255, 255, 0.2);
}
.impact-progress__seg.is-active {
  background: var(--brand-600, #a82b25);
  transform: scaleY(1.35);
}

/* Mobile & Tablet Scrollytelling for Social Impact */
@media (max-width: 1023px) {
  .scrollytell--impact {
    height: calc(var(--pillar-count, 5) * 78vh);
    height: calc(var(--pillar-count, 5) * 78dvh);
    padding: 0 clamp(.75rem, 3vw, 1.5rem);
  }
  .scrollytell--impact .scrollytell__stage {
    position: sticky;
    top: calc(var(--nav-h, 4.5rem) - .25rem);
    height: calc(100vh - var(--nav-h, 4.5rem) - 1rem);
    height: calc(100dvh - var(--nav-h, 4.5rem) - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: clamp(0.35rem, 1.5vh, 0.85rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 3.75rem);
    box-sizing: border-box;
  }
  .scrollytell--impact .grid--split {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    width: 100%;
  }
  .scrollytell__impact-story .section-head {
    margin-bottom: .25rem;
    text-align: center;
  }
  .scrollytell__impact-story .section-head h2 {
    font-size: clamp(1.12rem, 4vw, 1.45rem);
  }
  .scrollytell__impact-story .section-head .rule {
    margin-inline: auto;
  }
  .impact-panel {
    min-height: auto;
    padding: clamp(.75rem, 2.5vw, 1.15rem);
    transition: opacity .2s ease, transform .2s ease;
  }
  .impact-panel.is-pulse {
    animation: impactPulse .3s ease;
  }
  @keyframes impactPulse {
    0% { transform: scale(.99); opacity: .88; }
    100% { transform: scale(1); opacity: 1; }
  }
  .impact-panel__step-badge {
    font-size: 0.7rem;
    padding: 0.14rem 0.45rem;
    margin-bottom: 0.35rem;
  }
  .impact-panel__head {
    gap: .55rem;
    margin-bottom: .45rem;
  }
  .impact-panel__head h3 {
    font-size: clamp(1.02rem, 3.4vw, 1.25rem);
  }
  .impact-panel__icon-wrap {
    width: 34px; height: 34px; border-radius: 9px;
  }
  .impact-panel .lede {
    font-size: clamp(0.82rem, 2.4vw, 0.9rem);
    line-height: 1.42;
    margin-bottom: .35rem;
  }
  .impact-panel .impact-panel__actions.mt-lg {
    margin-top: .45rem;
  }
}

/* Desktop Scrollytelling for Social Impact */
@media (min-width: 1024px) {
  .scrollytell__progress,
  .impact-progress {
    display: none !important;
  }
  .scrollytell--impact {
    height: calc(var(--pillar-count, 5) * 80vh);
    padding: clamp(2.5rem, 5vh, 4rem) clamp(1rem, 3vw, 2.5rem);
    margin-top: 0;
    margin-bottom: clamp(4rem, 8vh, 6.5rem);
  }
  .scrollytell--impact .scrollytell__stage {
    position: sticky;
    top: calc(var(--nav-height, 4.5rem) + 1.5rem);
    height: calc(100vh - var(--nav-height, 4.5rem) - 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   14b. Vision & Mission (home page) — scroll-driven across all devices.
   -------------------------------------------------------------------------- */
.scrollytell {
  position: relative;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.scrollytell__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--stone-900);
  border: 8px solid color-mix(in srgb, var(--bg-elevated) 65%, transparent);
  box-shadow: var(--shadow-xl);
}

.scrollytell__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.scrollytell__bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #14110f;
  transition: opacity .8s ease;
}
.scrollytell__bg-layer.is-active { opacity: 1; }
.scrollytell__bg-layer img { width: 100%; height: 100%; object-fit: cover; }

.scrollytell__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,17,15,.92) 0%, rgba(20,17,15,.76) 45%, rgba(20,17,15,.45) 75%, rgba(20,17,15,.25) 100%);
}

.scrollytell__text { margin-bottom: 2rem; }
.scrollytell__label {
  display: block; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem; color: var(--accent);
  margin-bottom: .35rem;
}
.scrollytell__mission {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.45;
  color: var(--text-strong); margin-bottom: 1.25rem;
}
.scrollytell__vision { color: var(--text-muted); line-height: 1.6; }

.scrollytell__list { display: flex; flex-direction: column; gap: .65rem; }
.scrollytell__pillar {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .85rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft); background: var(--bg-elevated);
  text-decoration: none; color: var(--text);
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.scrollytell__pillar:hover { border-color: var(--brand-300); background: var(--bg-sunken); transform: translateX(4px); }
.scrollytell__pillar-thumb {
  flex-shrink: 0; width: 5.5rem; height: 5.5rem; border-radius: var(--radius-lg);
  overflow: hidden;
}
.scrollytell__pillar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scrollytell__pillar-icon { flex-shrink: 0; color: var(--accent); display: none; }
.scrollytell__pillar-content { flex: 1; min-width: 0; }
.scrollytell__pillar-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.scrollytell__pillar strong { flex: 1; font-size: 1.05rem; }
.scrollytell__pillar-arrow { flex-shrink: 0; color: var(--text-muted); transition: transform .3s var(--ease-out-expo); }
.scrollytell__pillar:hover .scrollytell__pillar-arrow { transform: translateX(3px); color: var(--accent); }

/* Metadata container inside pillars (collapses when inactive, expands when active) */
.scrollytell__pillar-meta {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: max-height 0.45s var(--ease-out-expo), opacity 0.4s ease, margin-top 0.3s ease, transform 0.35s ease;
}
.scrollytell__pillar.is-active .scrollytell__pillar-meta {
  max-height: 160px;
  opacity: 1;
  margin-top: 0.5rem;
  transform: translateY(0);
  pointer-events: auto;
}
.scrollytell__pillar-badge {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f3e098;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.scrollytell__pillar-sub {
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Mobile & Tablet Scrollytelling for Vision Pillars */
@media (max-width: 1023px) {
  .scrollytell {
    height: calc(var(--pillar-count, 5) * 80vh);
    height: calc(var(--pillar-count, 5) * 80dvh);
    padding: 0 clamp(.75rem, 3vw, 1.5rem);
    margin-bottom: clamp(2.5rem, 5vh, 4rem);
  }
  .scrollytell__stage {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--nav-h, 4.5rem) + .45rem);
    height: calc(100vh - var(--nav-h, 4.5rem) - .9rem);
    height: calc(100dvh - var(--nav-h, 4.5rem) - .9rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scrollytell__frame {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - var(--nav-h, 4.5rem) - 1.1rem);
    max-height: calc(100dvh - var(--nav-h, 4.5rem) - 1.1rem);
    border-radius: var(--radius-lg);
    border-width: 3px;
    position: relative;
    overflow: hidden;
  }
  .scrollytell__scrim {
    background: linear-gradient(180deg, rgba(20,17,15,.93) 0%, rgba(20,17,15,.82) 40%, rgba(20,17,15,.96) 100%);
  }
  .scrollytell__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(.75rem, 3vw, 1.25rem);
    overflow: hidden;
  }
  .scrollytell__inner .shell {
    padding-inline: 0;
    max-width: 100%;
    width: 100%;
  }
  .scrollytell__grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .55rem;
  }
  .scrollytell__text {
    margin-bottom: .25rem;
    text-align: center;
  }
  .scrollytell__label {
    font-size: .7rem;
    margin-bottom: .15rem;
  }
  .scrollytell__mission {
    color: #fff;
    font-size: clamp(1.02rem, 3.5vw, 1.28rem);
    line-height: 1.32;
    margin-bottom: .25rem;
  }
  .scrollytell__vision {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(.78rem, 2.5vw, .88rem);
    line-height: 1.35;
    margin-bottom: .35rem;
  }
  .scrollytell__list {
    display: block;
    width: 100%;
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }
  /* On mobile: Hide inactive pillars completely */
  .scrollytell__pillar {
    display: none !important;
  }
  /* On mobile: Show only the active pillar as a prominent spotlight card */
  .scrollytell__pillar.is-active {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    background: rgba(20, 17, 15, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-md);
    padding: clamp(.85rem, 2.8vw, 1.2rem);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 24px rgba(212, 175, 55, 0.15);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    animation: pillarSpotlightIn .28s var(--ease-out-expo);
  }
  @keyframes pillarSpotlightIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .scrollytell__pillar-thumb { display: none; }
  .scrollytell__pillar-icon { display: none; }
  .scrollytell__pillar-step-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #f3e098;
    background: rgba(212, 175, 55, 0.18);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
    padding: 0.14rem 0.48rem;
    margin-bottom: 0.35rem;
  }
  .scrollytell__pillar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .scrollytell__pillar.is-active strong {
    font-size: clamp(1.05rem, 3.6vw, 1.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
  }
  .scrollytell__pillar-arrow {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.18);
    color: var(--accent);
    flex-shrink: 0;
    transition: transform .25s ease;
  }
  .scrollytell__pillar.is-active .scrollytell__pillar-meta {
    max-height: none;
    opacity: 1;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    pointer-events: auto;
  }
  .scrollytell__pillar-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
  }
  .scrollytell__pillar-lead {
    font-size: clamp(0.78rem, 2.5vw, 0.88rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
  }
  .scrollytell__pillar-sub {
    font-size: 0.74rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
  }
  .scrollytell__pillar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
  }
  .scrollytell__pillar-tag {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
  }
  .scrollytell__pillar-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
}

/* Desktop Scrollytelling for Vision Pillars */
@media (min-width: 1024px) {
  .scrollytell {
    height: calc(var(--pillar-count, 5) * 100vh);
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
  }
  .scrollytell__stage {
    position: sticky;
    top: calc(var(--nav-height, 4.5rem) + 1rem);
    height: calc(100vh - var(--nav-height, 4.5rem) - 2rem);
    display: flex;
    align-items: center;
  }
  .scrollytell__frame {
    width: 100%;
    height: clamp(32rem, calc(100vh - var(--nav-height, 4.5rem) - 2.5rem), 48rem);
  }
  .scrollytell__inner {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center;
  }
  .scrollytell__grid {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(2.5rem, 6vw, 5rem); width: 100%;
  }
  .scrollytell__text { margin-bottom: 0; flex: 0 1 580px; max-width: 580px; }
  .scrollytell__mission { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.15rem); }
  .scrollytell__vision { color: rgba(255,255,255,.78); font-size: 1rem; }

  .scrollytell__list {
    flex-grow: 0; flex-shrink: 0; flex-basis: 0; max-width: 0;
    opacity: 0; overflow: hidden; pointer-events: none;
    transition: flex-grow .7s var(--ease-out-expo), max-width .7s var(--ease-out-expo), opacity .5s ease .1s;
    gap: 0.65rem;
  }
  .scrollytell__grid.is-split .scrollytell__list {
    flex-grow: 1; max-width: 540px; opacity: 1; pointer-events: auto;
  }

  /* Inactive pillars: Minimized and collapsed */
  .scrollytell__pillar {
    background: transparent; border: none; border-left: 3px solid rgba(255,255,255,.2);
    border-radius: 0; padding: .65rem 0 .65rem 1.25rem; color: rgba(255,255,255,.5);
    opacity: 0.45;
    transform: scale(0.98);
    transform-origin: left center;
    transition: border-color .4s ease, color .4s ease, padding .4s var(--ease-out-expo), opacity .4s ease, transform .4s ease, background .4s ease;
  }
  .scrollytell__pillar-thumb { display: none; }
  .scrollytell__pillar-icon { display: grid; place-items: center; align-self: flex-start; margin-top: 0.25rem; }
  .scrollytell__pillar strong { font-weight: 700; font-size: 1.05rem; transition: font-size .4s var(--ease-out-expo), color .3s ease; }
  .scrollytell__pillar-arrow { opacity: 0; transition: opacity .3s ease, transform .3s ease; }
  .scrollytell__pillar:hover { background: rgba(255,255,255,0.03); opacity: 0.8; transform: scale(1); border-left-color: rgba(255,255,255,.5); }

  /* Active pillar: Spotlight focus, enlarged typography, expanded metadata */
  .scrollytell__pillar.is-active {
    border-left: 4px solid var(--accent);
    color: #fff;
    opacity: 1;
    transform: scale(1);
    background: rgba(212, 175, 55, 0.08);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem 1rem 1.6rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  }
  .scrollytell__pillar.is-active strong { font-size: 1.35rem; color: #fff; }
  .scrollytell__pillar.is-active .scrollytell__pillar-arrow { opacity: 1; transform: translateX(3px); color: var(--accent); }
  .scrollytell__pillar.is-active .scrollytell__pillar-icon { color: var(--accent); transform: scale(1.15); }

  .scrollytell__pillar-step-badge,
  .scrollytell__pillar-lead,
  .scrollytell__pillar-tags,
  .scrollytell__pillar-cta {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .scrollytell__frame { border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollytell { height: auto !important; }
  .scrollytell__bg { display: none !important; }
  .scrollytell__stage { position: static !important; height: auto !important; }
  .scrollytell__frame { height: auto !important; }
  .scrollytell__inner { position: static !important; }
  .scrollytell__grid.is-split .scrollytell__list,
  .scrollytell__list { flex-grow: 1 !important; max-width: 480px !important; opacity: 1 !important; pointer-events: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollytell { height: auto !important; }
  .scrollytell__bg { display: none !important; }
  .scrollytell__stage { position: static !important; height: auto !important; }
  .scrollytell__inner { position: static !important; }
  .scrollytell__grid.is-split .scrollytell__list,
  .scrollytell__list { flex-grow: 1 !important; max-width: 480px !important; opacity: 1 !important; pointer-events: auto !important; }
}

/* --------------------------------------------------------------------------
   15. Gallery
   -------------------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 3rem; }
.filter {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.5rem; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text); text-decoration: none;
  transition: all .3s var(--ease-out-expo);
}
.filter:hover { border-color: var(--brand-300); color: var(--accent); transform: translateY(-2px); }
.filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-brand); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.tile {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); background: var(--stone-200);
  transition: transform .45s var(--ease-out-expo), box-shadow .4s ease, opacity .4s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out-expo); }
.tile:hover img { transform: scale(1.08); }
.tile__cap {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.25rem 1.25rem;
  background: linear-gradient(transparent, rgba(28,25,23,.9));
  color: #fff;
}
.tile__cap strong { display: block; font-size: 1.05rem; }
.tile__cap span { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-300); }
.tile.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   16. Lists, books, PDFs, accordion
   -------------------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.ticks li { display: flex; gap: .85rem; align-items: flex-start; }
.ticks li::before {
  content: "✓"; flex: 0 0 1.5rem; height: 1.5rem;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--bg-sunken); color: var(--accent);
  font-size: .8rem; font-weight: 800; margin-top: .15rem;
}

.book {
  display: flex; flex-direction: column; gap: .35rem;
  height: 100%;                       /* so a row of books shares one baseline */
  padding: 1.5rem; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s ease, border-color .3s ease;
}
.book:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.book__icon { color: var(--accent); margin-bottom: .75rem; }
.book__title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--text-strong); }
.book__author { font-size: .85rem; color: var(--text-muted); }
/* The CTA is pushed to the bottom so every card in the row ends level. */
.book__actions { margin-top: auto; padding-top: 1.25rem; }

.doc-list { display: grid; gap: .75rem; }
.doc {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.35rem; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-weight: 600; color: var(--text);
  transition: border-color .25s ease, transform .3s var(--ease-out-expo), background-color .25s ease;
}
.doc:hover { border-color: var(--brand-300); transform: translateX(5px); background: var(--bg-sunken); color: var(--accent); }
.doc__icon { color: var(--accent); flex-shrink: 0; }
.doc__meta { margin-left: auto; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

.accordion {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-elevated);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.accordion + .accordion { margin-top: .75rem; }
.accordion:hover { border-color: var(--brand-200); }
.accordion.is-open { border-color: var(--brand-300); box-shadow: var(--shadow-md); }

.accordion__head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.15rem 1.5rem;
  font-weight: 700; color: var(--text-strong); text-align: left;
  transition: background-color .25s ease;
}
.accordion__head:hover { background: var(--bg-sunken); }
.accordion.is-open .accordion__head { background: var(--bg-sunken); }
.accordion__title { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; font-size: 1.05rem; }
.accordion__title > svg { color: var(--accent); flex-shrink: 0; }

/* Animated open/close via a JS-measured max-height (see initAccordions) —
   more reliable than the CSS-only "grid-template-rows: 0fr -> 1fr" trick,
   which can fail to clip a nested grid of aspect-ratio'd images and let
   them visibly spill out of a "closed" panel. `is-open` with no inline
   style yet (first paint, before JS) still renders correctly open. */
.accordion__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .42s var(--ease-out-expo);
}
.accordion.is-open .accordion__panel { max-height: none; }
.accordion__body { padding: 0 1.5rem 1.5rem; }
.accordion.is-open .nav__caret { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .accordion__panel { transition: none; }
}

/* --------------------------------------------------------------------------
   17. Video embeds
   -------------------------------------------------------------------------- */

.video-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-soft); box-shadow: var(--shadow-md); transition: transform .4s var(--ease-out-expo), box-shadow .4s ease; }
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.video-card__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-card__frame iframe, .video-card__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__body { padding: 1.25rem 1.5rem; }

.video-card__mute {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  display: grid; place-items: center; color: #fff;
  background: rgba(20,15,10,.55); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  transition: background-color .25s ease, transform .25s var(--ease-spring);
}
.video-card__mute:hover { background: rgba(20,15,10,.8); transform: scale(1.08); }
.video-card__mute-icon--on { display: none; }
.video-card__mute.is-muted .video-card__mute-icon--muted { display: block; }
.video-card__mute.is-muted .video-card__mute-icon--on { display: none; }
.video-card__mute:not(.is-muted) .video-card__mute-icon--muted { display: none; }
.video-card__mute:not(.is-muted) .video-card__mute-icon--on { display: block; }

/* The subscribe CTA pairs Google's own widget with our ghost button —
   align them on one baseline regardless of the widget's own inner height. */
.card--subscribe .actions { align-items: center; flex-wrap: wrap; }
.card--subscribe .g-ytsubscribe { line-height: 0; }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.25rem; }
/* The label is the only span that gets label treatment — .field__hint is
   also a direct child, and must not inherit it or the asterisk. */
.field > span:not(.field__hint) {
  display: block; font-weight: 700; color: var(--text-strong);
  margin-bottom: .5rem; font-size: .9rem;
}
/* Required fields say so, rather than leaving the visitor to guess. */
.field--required > span:not(.field__hint)::after {
  content: "*"; color: var(--accent); margin-left: .25rem; font-weight: 800;
}

.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.1rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text-strong);
  font: inherit; font-size: .95rem;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--brand-200); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-400);
  box-shadow: 0 0 0 var(--ring-width) var(--ring);
}
.field textarea { resize: vertical; min-height: 8rem; }

/* Native selects render differently in every browser — draw our own caret. */
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1.05rem;
}
html[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field__hint { display: block; margin-top: .45rem; font-size: .82rem; color: var(--text-muted); font-weight: 500; }

/* Invalid state — set by the browser, or by .is-invalid after a failed post. */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid {
  border-color: #dc2626;
}
.field.is-invalid input:focus, .field.is-invalid select:focus, .field.is-invalid textarea:focus {
  box-shadow: 0 0 0 var(--ring-width) rgba(220, 38, 38, .28);
}

.notice {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.35rem; border-radius: var(--radius);
  font-weight: 600; margin-bottom: 1.5rem;
}
.notice > svg { flex-shrink: 0; margin-top: .2rem; }
.notice--ok   { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.notice--err  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.notice--info { background: var(--bg-sunken); color: var(--accent-deep); border: 1px solid var(--border-soft); }
html[data-theme="dark"] .notice--ok   { background: #052e21; color: #6ee7b7; border-color: #065f46; }
html[data-theme="dark"] .notice--err   { background: #340d0d; color: #fca5a5; border-color: #7f1d1d; }
html[data-theme="dark"] .notice--info { background: var(--bg-sunken); color: var(--brand-300); border-color: var(--stone-700); }

/* --------------------------------------------------------------------------
   19. Map + footer
   -------------------------------------------------------------------------- */

.map {
  position: relative;
  margin-top: clamp(4.5rem, 10vh, 7.5rem);
  clear: both;
}
.map__frame {
  height: clamp(28rem, 60vh, 36rem);
  min-height: 450px;
  border-top: 1px solid var(--border);
  filter: grayscale(.25) contrast(1.05);
  transition: filter .5s ease;
}
.map:hover .map__frame { filter: grayscale(0) contrast(1); }
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
html[data-theme="dark"] .map__frame { filter: grayscale(.5) invert(.9) hue-rotate(180deg) contrast(.9); }
html[data-theme="dark"] .map:hover .map__frame { filter: grayscale(.35) invert(.9) hue-rotate(180deg); }

.map__card {
  position: absolute; top: 50%; left: max(2rem, calc(50% - 600px));
  transform: translateY(-50%);
  z-index: 10;
  width: min(25rem, calc(100% - 3rem));
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl); box-shadow: 0 20px 48px rgba(0,0,0,.18), var(--shadow-xl);
  padding: 2.25rem 2rem;
}
/* Address / phone / hours use the shared .info-row; the card just needs
   a gap between the last of them and the button underneath. */
.map__card .info-row:last-of-type { margin-bottom: 1.5rem; }
.map__title { font-size: 1.75rem; margin-bottom: 1.25rem; }
.map__card .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
}

/* In-page placement (Contact page, right under the banner) — the default
   .map__card is absolutely overlaid on the map and its left offset is
   computed against a full-bleed viewport width, which only makes sense
   when .map spans edge to edge. Framed instead sits inside the page's
   normal max-width content card, so the card drops into normal flow below
   the map image rather than floating on top of it. */
.map--framed {
  margin-top: 1.5rem !important;
  margin-bottom: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: 0 !important;
  border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border-soft);
}
.map--framed .map__frame { height: clamp(14rem, 28vh, 18rem); min-height: auto; border-top: 0; }
.map--framed .map__card {
  position: static; transform: none; width: auto; max-width: none;
  box-shadow: none; border: 0; border-top: 1px solid var(--border-soft);
  border-radius: 0; padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
  margin: 0;
}
.map--framed .map__title { font-size: 1.35rem; margin-bottom: 1rem; }

.footer { background: var(--stone-900); color: var(--stone-300); padding-block: 4.5rem 2rem; position: relative; overflow: hidden; }
html[data-theme="dark"] .footer { background: #000; border-top: 1px solid var(--stone-800); }
.footer::before, .footer::after {
  content: ""; position: absolute; border-radius: 50%;
  background: var(--brand-500); opacity: .07; filter: blur(90px);
}
.footer::before { width: 24rem; height: 24rem; top: -8rem; left: -6rem; }
.footer::after  { width: 28rem; height: 28rem; bottom: -10rem; right: -6rem; }
.footer > * { position: relative; z-index: 1; }

.footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1.25rem; }
.footer__brand { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--brand-500); margin: 0 0 1rem; }
.footer__grid { gap: 3rem; margin-bottom: 1rem; }
.footer__links { display: grid; gap: .7rem; }
.footer__links a { color: var(--stone-400); font-weight: 500; width: fit-content; }
.footer__links a:hover { color: var(--brand-400); }
.footer__row { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; color: var(--stone-400); }
.footer__row svg { color: var(--brand-500); flex-shrink: 0; margin-top: .25rem; }
.footer__row a { color: var(--stone-400); }
.footer__row a:hover { color: var(--brand-400); }
.footer__logo { height: 4.5rem; width: auto; margin-bottom: 1rem; }
.footer__desc { color: var(--stone-400); max-width: 26rem; }
.footer__estd {
  color: var(--stone-500); font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 800; margin-top: 1.5rem;
}
.footer__bar { border-top: 1px solid var(--stone-800); margin-top: 3rem; padding-top: 1.75rem; text-align: center; color: var(--stone-500); font-size: .85rem; }

/* Back-to-top */
.to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 3rem; height: 3rem; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--accent); color: #fff; box-shadow: var(--shadow-brand);
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: all .4s var(--ease-out-expo);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-hover); color: #fff; transform: translateY(-3px); }

/* Small floating social strip — bottom-left, mirroring .to-top's
   bottom-right so the two never collide. Deliberately small (2.5rem
   circles, four of them) rather than a big widget — "don't clutter the
   screen" was explicit. Shares .to-top's show/hide trigger in main.js. */
.social-float {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 90;
  display: flex; flex-direction: column; gap: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: all .4s var(--ease-out-expo);
}
.social-float.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.social-float__item {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-md);
  color: var(--text); transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-spring);
}
.social-float__item:hover { background: var(--accent); color: #fff; transform: translateY(-3px) scale(1.06); }

@media (max-width: 640px) {
  /* On phones .to-top already sits at right:1.5rem, and the dock spans
     most of the width along the bottom — a second fixed cluster on the
     left is one element too many on a small screen. Fold it into a
     plain, non-floating row at the end of the footer instead. */
  .social-float {
    position: static; flex-direction: row; justify-content: center;
    opacity: 1; visibility: visible; transform: none;
    margin-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   20. Motion — the "framer-motion" layer
   -------------------------------------------------------------------------- */

/* NOTE: [data-reveal] animates `transform`, so never put it on an element
   that already relies on transform for its layout (e.g. a translateY(-50%)
   centred box, or the rotated .diamond). Wrap such elements instead. */

/* Only hide content when JS is running; no-JS users see everything. */
.js [data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
  will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translateY(2.5rem); }
.js [data-reveal="down"]  { transform: translateY(-2rem); }
.js [data-reveal="left"]  { transform: translateX(-2.5rem); }
.js [data-reveal="right"] { transform: translateX(2.5rem); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal].is-in   { opacity: 1; transform: none; }

/* Staggered children */
.js [data-stagger] > * {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* Count-up numbers sit at 0 until animated */
.js [data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */

/* One line needs about 1340px. Below that, rather than let the row wrap
   raggedly and strand the divider, the resource links deliberately take a
   centred line of their own. Nothing is ever pushed off-screen. */
@media (max-width: 1340px) {
  .nav__link { padding: .45rem .75rem; font-size: .73rem; }
  .nav__row { gap: .35rem; row-gap: .3rem; }
  .nav__divider { display: none; }
  .nav__group { justify-content: center; }
  .nav__group--right {
    width: 100%;
    padding-top: .3rem;
    border-top: 1px solid var(--border-soft);
  }
}

@media (max-width: 1024px) {
  :root { --nav-h: 4.5rem; }

  /* Swap the whole menu row for the drawer */
  .nav__menus { display: none; }
  .nav__inner { grid-template-columns: auto 1fr auto; justify-items: start; }
  .nav__brand { justify-self: center; }
  .nav__burger {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm);
    color: var(--text-strong); justify-self: start; grid-column: 1;
  }
  .nav__burger:hover { background: var(--bg-sunken); color: var(--accent); }
  .nav__spacer { justify-self: end; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split, .grid--split-rev { grid-template-columns: minmax(0, 1fr); }
  .grid--split-rev > *:first-child { order: 2; }

  /* Responsive Map & Find Us Card on Tablet & Mobile */
  .map {
    margin-top: clamp(3.5rem, 8vh, 5.5rem);
    padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
    clear: both;
  }
  .map__frame {
    height: clamp(16rem, 36vh, 22rem);
    min-height: 250px;
  }
  .map__card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 10;
    width: min(28rem, calc(100% - 2rem));
    margin: -4.5rem auto 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), var(--shadow-xl);
    padding: clamp(1.35rem, 4vw, 1.85rem);
  }
  .map__title { font-size: 1.35rem; margin-bottom: 1rem; }
  .map__card .info-row { gap: .75rem; margin-bottom: .85rem; }
  .map__card .info-row:last-of-type { margin-bottom: 1.25rem; }
  .map__card .btn {
    width: 100%;
    justify-content: center;
    padding: .85rem 1.25rem;
    font-size: .95rem;
    font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
   Mobile Phones (< 768px) Layout Polish & Uncluttered Hero
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero {
    padding: .65rem .65rem 0;
  }
  .hero__frame {
    min-height: clamp(32rem, 80dvh, 42rem);
    height: clamp(32rem, 80vh, 42rem);
    border-width: 3px;
    border-radius: var(--radius-lg);
  }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(28,25,23,.6) 0%, rgba(28,25,23,.82) 40%, rgba(28,25,23,.96) 100%);
  }
  .hero__body {
    padding: 1.35rem 1.15rem clamp(4.5rem, 10vh, 5.5rem);
    justify-content: flex-end;
  }
  .hero__badge {
    padding: .35rem .95rem;
    font-size: .7rem;
    letter-spacing: .12em;
    margin-bottom: .65rem;
  }
  .hero__title {
    font-size: clamp(1.65rem, 5.8vw, 2.25rem);
    line-height: 1.22;
    margin-bottom: .65rem;
  }
  .hero__text {
    font-size: clamp(.88rem, 2.8vw, .98rem);
    line-height: 1.48;
    margin-bottom: 1.15rem;
    max-width: 100%;
  }
  .hero__body .actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .55rem;
    width: 100%;
  }
  .hero__body .actions .btn {
    padding: .65rem 1.15rem;
    font-size: .88rem;
    flex: 1 1 calc(50% - .55rem);
    min-width: 8.5rem;
    justify-content: center;
  }
  .hero__controls {
    position: absolute;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 3;
    display: flex;
    gap: .45rem;
  }
  .hero__btn {
    width: 2.35rem;
    height: 2.35rem;
  }
  .hero__btn svg {
    width: 16px;
    height: 16px;
  }
  .hero__dots {
    display: flex;
    position: absolute;
    left: 1.15rem;
    bottom: 1.75rem;
    z-index: 3;
    gap: .35rem;
  }
  .hero__dot {
    width: 1.25rem;
    height: 3px;
  }
  .hero__dot.is-active {
    width: 2rem;
  }
}

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .topbar__contact { display: none; }
  .banner__frame { height: 26rem; }
  .banner__frame .carousel__dots { display: none; }
  .page-card { margin-top: -3rem; border-radius: var(--radius-lg); }
  .intro__timer { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; }
}

@media (max-width: 480px) {
  .nav__crest { width: 2.6rem; height: 2.6rem; }
  .nav__brand { gap: .5rem; }
  .nav__brand-acronym { font-size: 1.15rem; }
  .nav__brand-full { font-size: .62rem; }
  .nav__brand-sub { font-size: .46rem; letter-spacing: .18em; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */

@media print {
  .topbar, .nav, .footer, .to-top, .intro, .hero__controls, .map { display: none !important; }
  body { background: #fff; color: #000; }
  .page-card { box-shadow: none; border: 0; margin: 0; }
}

/* --------------------------------------------------------------------------
   23. E-Library reader

   Three modes sharing one shell: a native PDF embed, a reflowed "Kindle"
   reading pane, and an StPageFlip-driven flipbook. Only the active
   .reader-panel is unhidden; reader.js owns that toggle and the lazy PDF.js
   work behind kindle/flip.
   -------------------------------------------------------------------------- */

.reader-head { padding-block: 2rem 0; }
.reader-head__back {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1.25rem;
}
.reader-head__back:hover { color: var(--accent); }

.reader-head__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.reader-head__title { margin-bottom: .35rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.reader-head__subtitle { color: var(--text-muted); margin: 0; }

/* Segmented control — the three modes are mutually exclusive, so this reads
   as one switch rather than three separate buttons. */
.reader-tabs {
  display: inline-flex; gap: .25rem; padding: .3rem;
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.reader-tabs__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem; border-radius: var(--radius-full);
  font-size: .82rem; font-weight: 700; color: var(--text-muted);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.reader-tabs__btn:hover { color: var(--text-strong); }
.reader-tabs__btn[aria-selected="true"] {
  background: var(--bg-elevated); color: var(--accent); box-shadow: var(--shadow-sm);
}

.reader-stage-wrap { padding-block: 1.5rem 5rem; }
.reader-stage {
  position: relative;
  min-height: 32rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.reader-panel { height: 100%; min-height: 32rem; }

/* --- Mode 1: plain PDF -------------------------------------------------- */

.reader-pdf__frame { width: 100%; height: 80vh; min-height: 32rem; border: 0; display: block; }

/* --- Shared loading / error overlay -------------------------------------- */

.reader-status {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; padding: 2rem; text-align: center;
  background: var(--bg-elevated);
}
/* Setting display:flex above means the [hidden] attribute alone can't hide
   it — an author rule beats the UA default regardless of specificity — so
   that has to be spelled out explicitly, same as .empty-state elsewhere. */
.reader-status[hidden] { display: none; }
.reader-status__spinner {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: btn-spin .8s linear infinite;
}
.reader-status p { max-width: 28rem; color: var(--text-muted); margin: 0; }
.reader-status.is-error .reader-status__spinner { display: none; }
.reader-status.is-error p { color: var(--text-strong); font-weight: 600; }

/* --- Mode 2: Kindle ------------------------------------------------------ */

.kindle {
  display: flex; flex-direction: column; height: 80vh; min-height: 32rem;
  background: var(--kindle-bg, var(--bg-elevated));
  color: var(--kindle-ink, var(--text));
  transition: background-color .3s ease, color .3s ease;
}
.kindle__toolbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
}
.kindle__group { display: flex; align-items: center; gap: .5rem; }
.kindle__font-label { font-size: .78rem; font-weight: 700; color: var(--text-muted); min-width: 3ch; text-align: center; }

.kindle__page {
  flex: 1; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem);
  display: flex; justify-content: center;
}
.kindle__page > div {
  max-width: 42rem; width: 100%;
  font-family: var(--kindle-font, var(--font-serif));
  font-size: var(--kindle-size, 1.05rem);
  line-height: 1.8;
}
.kindle__page p { margin: 0 0 1.2em; }
.kindle__page:focus-visible { outline: none; }

.kindle__nav {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 1rem; border-top: 1px solid var(--border);
}
.kindle__progress { font-size: .82rem; font-weight: 700; color: var(--text-muted); min-width: 9rem; text-align: center; }

/* Reading themes — deliberately separate from the site's own light/dark
   toggle, because a comfortable reading tone (sepia especially) is not the
   same choice as a comfortable browsing tone. */
.kindle[data-theme="light"] { --kindle-bg: #fefefe; --kindle-ink: #2a2a28; }
.kindle[data-theme="sepia"] { --kindle-bg: #f4ecd8; --kindle-ink: #433422; }
.kindle[data-theme="dark"]  { --kindle-bg: #1a1a1a; --kindle-ink: #d8d8d4; }
.kindle[data-theme="dark"] .kindle__toolbar,
.kindle[data-theme="dark"] .kindle__nav { border-color: rgba(255,255,255,.12); }

/* --- Mode 3: Flip book ---------------------------------------------------- */

.flipbook {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; height: 80vh; min-height: 32rem; padding: 2rem;
  background: radial-gradient(ellipse at center, var(--bg-inset) 0%, var(--stone-900) 140%);
}
html[data-theme="dark"] .flipbook { background: radial-gradient(ellipse at center, var(--bg-sunken) 0%, #000 140%); }
.flipbook__stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.flipbook__stage .stf__parent { margin: auto; }
.flipbook__stage canvas,
.flipbook__stage img { box-shadow: var(--shadow-xl); }

.flipbook__nav {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .6rem 1rem; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  box-shadow: var(--shadow-md);
}
.flipbook__nav .btn--ghost { border-color: var(--border); }
.flipbook__progress { font-size: .82rem; font-weight: 700; color: var(--text-muted); min-width: 9rem; text-align: center; }

@media (max-width: 720px) {
  .reader-head__row { align-items: flex-start; }
  .reader-tabs { display: flex; }
  .reader-tabs__btn { flex: 1; justify-content: center; padding-inline: .6rem; font-size: .74rem; }
  .reader-tabs__btn svg { display: none; }
  .kindle__toolbar { justify-content: center; }
  .kindle__page { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   24. Library search
   -------------------------------------------------------------------------- */

.library-search { position: relative; max-width: 26rem; margin-bottom: 0; }
.library-search__icon {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.library-search input[type="search"] { padding-left: 2.75rem; }
.library-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.library-card.is-hidden { display: none; }
.library-search__empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 2rem 0; }

/* Book-cover card: the PDF's own first page as a poster, title/meta below. */
.book-cover {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s ease, border-color .3s ease;
}
.book-cover:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--brand-200); }
.book-cover__media {
  aspect-ratio: 3 / 4; background: var(--stone-200); overflow: hidden; position: relative;
}
.book-cover__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}
.book-cover:hover .book-cover__media img { transform: scale(1.05); }
.book-cover__placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem;
  background: var(--bg-sunken); color: var(--text-muted); text-align: center; padding: 1rem;
}
.book-cover__placeholder span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.book-cover__body { padding: 1.35rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.book-cover__title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--text-strong); }
.book-cover__meta { font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
.book-cover__actions { margin-top: auto; padding-top: 1.1rem; }

/* Compact cover tile for dense listings (e.g. Vaichariki issues by year). */
.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.25rem; }
.issue-card { display: flex; flex-direction: column; gap: .6rem; }
.issue-card__media {
  aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background: var(--stone-200); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s ease;
}
.issue-card:hover .issue-card__media { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.issue-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   20. Prose — WordPress-synced page/blog body HTML (pages/custom-page.php,
   blog-single.php). h1-h4 already carry the large section-heading sizes
   used elsewhere on the site, too big for a subheading inside body copy —
   scoped smaller here to read as in-flow text, not another page section.
   -------------------------------------------------------------------------- */
.prose { color: var(--text); line-height: 1.75; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--text-strong); }
.prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--text-strong); }
.prose h4 { font-size: 1.05rem; color: var(--text-strong); }
.prose p { font-size: clamp(1.05rem, 1.6vw, 1.15rem); }
.prose ul, .prose ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.prose li { line-height: 1.7; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.prose blockquote {
  border-left: 3px solid var(--accent); padding-left: 1.25rem;
  color: var(--text-muted); font-style: italic;
}
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.issue-card__label { font-size: .78rem; font-weight: 700; color: var(--text-muted); line-height: 1.3; text-align: center; }

/* --------------------------------------------------------------------------
   24. Mobile & Universal Device Adaptations (Phones, Tablets & Small Screens)
   -------------------------------------------------------------------------- */

/* Responsive Interactive Modals */
.bvm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
.bvm-modal-dialog {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-soft, #e8e2d8);
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-xl);
  position: relative;
}

@media (max-width: 640px) {
  .bvm-modal-dialog {
    max-height: calc(100vh - 1rem);
    border-radius: var(--radius-md, 8px);
  }
  .bvm-modal-dialog .grid--2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }
  .bvm-modal-dialog form {
    padding: 1.15rem 1rem 1.5rem !important;
  }
  .bvm-modal-close {
    top: 0.75rem !important;
    right: 0.85rem !important;
  }

  /* Compact button and input touch targets */
  .btn--lg {
    padding: 0.85rem 1.5rem;
    font-size: 0.98rem;
  }
  .actions--spaced {
    gap: 0.65rem;
  }
  .actions--center {
    flex-direction: column;
    width: 100%;
  }
  .actions--center .btn {
    width: 100%;
    justify-content: center;
  }

  /* Shells & Sections padding on small phones */
  .shell {
    padding-inline: 1rem;
  }
  .section {
    padding-block: clamp(2.75rem, 7vw, 4.5rem);
  }
  .section--tight {
    padding-block: clamp(1.75rem, 4vw, 2.5rem);
  }

  /* Statistics grid on phones: 2 columns */
  .grid--4[data-stagger] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  .card--stat {
    padding: 1.25rem 0.85rem !important;
  }
  .card--stat .card__value {
    font-size: 1.85rem !important;
  }

  /* Table and data responsive scroll */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  /* Ultra-compact phones (e.g. iPhone SE, 360px Android) */
  .diamond__node {
    min-width: 7.25rem;
    padding: 0.5rem 0.65rem;
  }
  .diamond__inner {
    font-size: 0.78rem;
  }
  .scrollytell__stage,
  .scrollytell--impact .scrollytell__stage {
    height: calc(100vh - var(--nav-h, 4.5rem) - 0.5rem);
    height: calc(100dvh - var(--nav-h, 4.5rem) - 0.5rem);
  }
  .impact-panel {
    padding: 0.95rem 0.85rem;
  }
}