/* ─────────────────────────────────────────────────────────
 * Body light-theme overlay
 * Hero stays cinematic dark · everything below converts to
 * warm cream + navy ink + hairline gold = institutional, transparent
 * ──────────────────────────────────────────────────────── */

:root {
  /* Light palette · only used by sections that opt-in via .body-light */
  --bl-bg:        #FAF7F0;     /* warm off-white, like Brookfield */
  --bl-bg-soft:   #F2EFE5;     /* slightly darker for alternating bands */
  --bl-bg-card:   #FFFFFF;     /* pure white cards */
  --bl-ink:       #0F1B2D;     /* navy text */
  --bl-ink-soft:  #1F2A3F;     /* secondary text · darkened for stronger contrast on cream */
  --bl-ink-mute:  #4A5468;     /* muted text · was #5A6275, darkened so captions don't read as gray */
  --bl-rule:      rgba(15, 27, 45, 0.10);
  --bl-rule-strong: rgba(15, 27, 45, 0.22);
  --bl-gold:      #A07820;     /* richer gold · was #B8902C, deeper for stronger contrast on cream */
  --bl-gold-bright:#C8A84E;
  --bl-shadow:    0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.06);
  --bl-shadow-lg: 0 2px 4px rgba(15, 27, 45, 0.06), 0 24px 56px rgba(15, 27, 45, 0.08);

  /* ─── AAA+ ceremonial layer for body-light register (additive) ───
   * Used by Physics Gate, NANANOM Council, heritage Sika Dwa Kofi
   * and any cream-paper hero needing royal struck-bronze treatment.
   * Reads as "engraved gold on cream parchment" — the institutional /
   * royal hybrid this site lives in.
   * ──────────────────────────────────────────────────────────── */

  --bl-gold-royal:    #B8902C;
  --bl-gold-mid:      #9C7A2E;
  --bl-gold-deep:     #735E2A;
  --bl-gold-shadow:   #3F2E10;
  --bl-gold-bright-r: #D6B355;

  --bl-grad-gold-face: radial-gradient(circle at 32% 28%,
                          #D6B355 0%, #B8902C 22%, #9C7A2E 50%, #735E2A 78%, #3F2E10 100%);
  --bl-grad-gold-bar:  linear-gradient(180deg,
                          #D6B355 0%, #B8902C 14%, #9C7A2E 42%, #735E2A 78%, #3F2E10 100%);

  --bl-paper-grain:    rgba(184, 144, 44, 0.04);
  --bl-centre-warmth:  rgba(184, 144, 44, 0.08);

  --bl-ff-ceremonial: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

/* ─── Wrapper class · everything inside flips to light ─── */
.body-light {
  background: var(--bl-bg);
  color: var(--bl-ink);
  position: relative;
}
.body-light h1, .body-light h2, .body-light h3, .body-light h4 {
  color: var(--bl-ink);
  /* Defensive: long proper-noun phrases like "Sika Dwa Kofi" mustn't clip on narrow mobile */
  overflow-wrap: break-word;
  text-wrap: balance;
}
.body-light h1 em, .body-light h2 em, .body-light h3 em {
  overflow-wrap: break-word;
}
.body-light p { color: var(--bl-ink-soft); }
.body-light strong { color: var(--bl-ink); }
.body-light a { color: var(--bl-gold); }

.body-light .section-eyebrow,
.body-light .eyebrow {
  color: var(--bl-gold);
}
.body-light .rule { background: var(--bl-rule); }

/* ─── Tiles ─── */
.body-light .tile {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow);
  transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
}
.body-light .tile:hover {
  border-color: var(--bl-gold);
  box-shadow: var(--bl-shadow-lg);
  transform: translateY(-3px);
}
.body-light .tile h3 { color: var(--bl-ink); }
.body-light .tile p { color: var(--bl-ink-mute); }
.body-light .tile a { color: var(--bl-gold); }
.body-light .tile-icon {
  border-color: var(--bl-rule-strong);
  color: var(--bl-gold);
  background: rgba(184, 144, 44, 0.06);
}

/* ─── Cards (paths, standing, resources, etc.) ─── */
.body-light .path,
.body-light .standing-card,
.body-light .resource,
.body-light .doc-card {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow);
  transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
}
.body-light .path:hover,
.body-light .standing-card:hover,
.body-light .resource:hover,
.body-light .doc-card:hover {
  border-color: var(--bl-gold);
  box-shadow: var(--bl-shadow-lg);
  transform: translateY(-3px);
}
.body-light .path h3,
.body-light .standing-card h3,
.body-light .resource-body .name,
.body-light .doc-body h4 { color: var(--bl-ink); }
.body-light .path p,
.body-light .standing-card p,
.body-light .resource-body .desc,
.body-light .doc-body p { color: var(--bl-ink-mute); }
.body-light .path .label,
.body-light .standing-card .role,
.body-light .resource-body .meta,
.body-light .doc-body .meta { color: var(--bl-gold); }
.body-light .path a.go { color: var(--bl-gold); }
.body-light .resource-icon,
.body-light .doc-icon {
  border-color: var(--bl-rule-strong);
  color: var(--bl-gold);
  background: rgba(184, 144, 44, 0.05);
}

/* ─── Resources two-tier (public · NDA-gated) ─── */
.body-light .resources-tier-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bl-rule);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
}
.body-light .resources-tier-label.resources-tier-gated {
  margin-top: 36px;
}
.body-light .tier-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.body-light .tier-dot-open {
  background: #1FE07F;
  box-shadow: 0 0 6px rgba(31, 224, 127, 0.55);
}
.body-light .tier-dot-gated {
  background: var(--bl-gold);
  box-shadow: 0 0 6px rgba(184, 144, 44, 0.55);
}
.body-light .tier-text { font-weight: 600; }

/* Gated resource cards · visually distinct from public ones */
.body-light .resource-gated {
  background: linear-gradient(135deg, rgba(184, 144, 44, 0.04), rgba(255, 255, 255, 0.95)) !important;
  border: 1px solid rgba(184, 144, 44, 0.32) !important;
  border-left: 3px solid var(--bl-gold) !important;
}
.body-light .resource-gated:hover {
  background: linear-gradient(135deg, rgba(184, 144, 44, 0.08), rgba(255, 255, 255, 1)) !important;
  border-color: rgba(184, 144, 44, 0.55) !important;
  transform: translateY(-2px);
}
.body-light .resource-gated .resource-icon {
  background: rgba(184, 144, 44, 0.10);
  border-color: rgba(184, 144, 44, 0.45);
  color: var(--bl-gold);
}
.body-light .resource-gated .meta {
  color: var(--bl-gold) !important;
  font-weight: 600;
}

/* Pill badges next to the resource name */
.resource-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 600;
}
.resource-badge-open {
  background: rgba(31, 224, 127, 0.10);
  color: #0E7C52;
  border: 1px solid rgba(31, 224, 127, 0.40);
}
.resource-badge-gated {
  background: rgba(184, 144, 44, 0.10);
  color: var(--bl-gold);
  border: 1px solid rgba(184, 144, 44, 0.45);
  letter-spacing: 0.10em;
}

/* CTA strip below the gated cards */
.body-light .resources-cta {
  margin-top: 32px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #0F1B2D 0%, #0A1422 100%);
  border: 1px solid rgba(184, 144, 44, 0.42);
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 27, 45, 0.10);
}
.body-light .resources-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 28px;
  background: rgba(244, 196, 64, 0.08);
  border: 1px solid var(--bl-gold-bright);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #F4D470;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.body-light .resources-cta-btn:hover {
  background: rgba(244, 196, 64, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(244, 196, 64, 0.18);
  text-decoration: none;
}
.body-light .resources-cta-btn:focus-visible {
  outline: 2px solid #F4D470;
  outline-offset: 3px;
}
.body-light .resources-cta-btn .arrow {
  transition: transform 0.18s;
  font-size: 14px;
}
.body-light .resources-cta-btn:hover .arrow { transform: translateX(4px); }
.body-light .resources-cta-foot {
  margin: 14px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(232, 224, 204, 0.55);
  text-transform: uppercase;
}

/* ─── Flow diagram wrap ─── */
.body-light .flow-wrap {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow);
}
.body-light .flow-caption { color: var(--bl-ink-mute); }

/* ─── Mobile-stacked flow (≤640px) under body-light ─── */
.body-light .flow-step {
  background: linear-gradient(135deg, #0F1B2D 0%, #0A1422 100%);
  border: 1px solid rgba(184, 144, 44, 0.35);
  box-shadow: 0 4px 14px rgba(15, 27, 45, 0.10);
}
.body-light .flow-step-icon {
  background: rgba(244, 196, 64, 0.06);
  border: 1px solid rgba(244, 196, 64, 0.40);
}
.body-light .flow-step-stage { color: rgba(244, 212, 112, 0.85); }
.body-light .flow-step-title { color: #F1F5F9; }
.body-light .flow-step-sub   { color: rgba(232, 224, 204, 0.72); }
.body-light .flow-step::after {
  background: linear-gradient(180deg, rgba(184, 144, 44, 0.65), rgba(184, 144, 44, 0));
}

/* ─── Ledger table ─── */
.body-light .ledger-table-shell {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow-lg);
}
.body-light .ledger-table th {
  background: var(--bl-bg-soft);
  color: var(--bl-ink-mute);
  border-bottom: 1px solid var(--bl-rule);
}
.body-light .ledger-table td { border-bottom: 1px solid var(--bl-rule); }
.body-light .ledger-table tr:hover td { background: rgba(184, 144, 44, 0.04); }
.body-light .ledger-table .name { color: var(--bl-ink); }
.body-light .ledger-table .addr a { color: var(--bl-gold); }
.body-light .ledger-table .verified { color: #1A8B5A; }
.body-light .ledger-foot {
  background: var(--bl-bg-soft);
  color: var(--bl-ink-mute);
  border-top: 1px solid var(--bl-rule);
}
.body-light .ledger-foot a { color: var(--bl-gold); }

/* ─── Built-on row ─── */
.body-light .builton {
  background: var(--bl-bg-soft);
  border-color: var(--bl-rule);
}
.body-light .builton-label b { color: var(--bl-gold); }
.body-light .builton-label { color: var(--bl-ink-mute); }
.body-light .builton-cell {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
}
.body-light .builton-cell:hover { border-color: var(--bl-gold); }
.body-light .builton-cell .name { color: var(--bl-ink); }
.body-light .builton-cell .role { color: var(--bl-ink-mute); }

/* ─── Pull box (heritage quote, etc.) ─── */
.body-light .pull {
  background: rgba(184, 144, 44, 0.07);
  border-left: 3px solid var(--bl-gold);
  color: var(--bl-ink-soft);
}
.body-light .pull em { color: var(--bl-gold); }

/* ─── Stat strip + context band ─── */
.body-light .cine-proof-cell,
.body-light .stat-card {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
}
.body-light .cine-proof-cell .lbl { color: var(--bl-ink-mute); }
.body-light .cine-proof-cell .num { color: var(--bl-gold); }

/* ─── Footer ─── */
.body-light .footer {
  background: var(--bl-bg-soft);
  border-top: 1px solid var(--bl-rule);
}
.body-light .footer h4 { color: var(--bl-ink-mute); }
.body-light .footer ul li a { color: var(--bl-ink-soft); }
.body-light .footer ul li a:hover { color: var(--bl-gold); }
.body-light .footer-meta { color: var(--bl-ink-mute); }
.body-light .footer-meta strong { color: var(--bl-ink); }
.body-light .footer-bottom { color: var(--bl-ink-mute); border-top: 1px solid var(--bl-rule); }

/* ─── Buttons override ─── */
.body-light .btn-ghost {
  border-color: rgba(15, 27, 45, 0.42) !important;
  color: #0F1B2D !important;
  background: transparent !important;
}
.body-light .btn-ghost:hover {
  border-color: var(--bl-gold) !important;
  background: rgba(184, 144, 44, 0.06) !important;
  color: var(--bl-gold) !important;
}

/* ─── Inner-page header (technical, heritage, compliance) ─── */
.body-light .page-header {
  background: var(--bl-bg);
  border-bottom: 1px solid var(--bl-rule);
}
.body-light .page-toc a {
  border-color: var(--bl-rule);
  color: var(--bl-ink-mute);
}
.body-light .page-toc a:hover { color: var(--bl-gold); border-color: var(--bl-gold); }


/* ─────────────────────────────────────────────────────────
 *  CONTINUOUS MOTION · the chain never sleeps
 * ──────────────────────────────────────────────────────── */

/* Animated gradient line under section eyebrows · always flowing */
.section-eyebrow-flow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bl-gold);
  margin-bottom: 22px;
}
.section-eyebrow-flow::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bl-gold), transparent);
  background-size: 200% 100%;
  animation: lineFlow 3.6s linear infinite;
}
@keyframes lineFlow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Section divider · perpetually flowing gold thread */
.flow-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bl-gold) 30%,
    rgba(184, 144, 44, 0.2) 50%,
    var(--bl-gold) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: lineFlow 8s linear infinite;
  margin: 0;
  border: 0;
}

/* Live indicator · permanently pulsing */
.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1FE07F;
  position: relative;
}
.live-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1FE07F;
  animation: livePulseExp 1.8s ease-out infinite;
}
@keyframes livePulseExp {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Hover-tracked light gradient on cards */
.body-light .tile,
.body-light .path,
.body-light .resource,
.body-light .standing-card {
  position: relative;
  overflow: hidden;
}
.body-light .tile::before,
.body-light .path::before,
.body-light .resource::before,
.body-light .standing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(244, 196, 48, 0.10), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.body-light .tile:hover::before,
.body-light .path:hover::before,
.body-light .resource:hover::before,
.body-light .standing-card:hover::before { opacity: 1; }

/* Stat numbers · subtle perpetual breathing */
.body-light .cine-proof-cell .num,
.body-light .stat-num {
  animation: numBreathe 4.8s ease-in-out infinite;
}
@keyframes numBreathe {
  0%, 100% { opacity: 0.92; text-shadow: 0 0 0 transparent; }
  50%      { opacity: 1; text-shadow: 0 0 12px rgba(184, 144, 44, 0.18); }
}

/* Animated tile-icon glow · perpetual */
.body-light .tile-icon,
.body-light .resource-icon,
.body-light .doc-icon {
  animation: iconBreathe 5s ease-in-out infinite;
}
@keyframes iconBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 144, 44, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(184, 144, 44, 0.06); }
}

/* Photo band: an actual photographic anchor.
   2026-05-21 · added designed gradient floor so the section reads as a
   composed dark hero even if /assets/photo-anchor.jpg fails to load.
   The fallback uses Ghana-flag-accented warm gold band over deep navy
   with a subtle radial glow centered on the headline — so the user
   never sees an "empty navy gap" with stranded text.
   When the <img> fires onerror, JS sets `.photo-anchor--no-image` which
   amps the fallback gradients to full strength. */
.photo-anchor {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  background:
    /* Warm gold band sweeping diagonal (Ghana-flag accent) */
    linear-gradient(115deg,
      transparent 0%,
      transparent 28%,
      rgba(244,196,64,0.10) 42%,
      rgba(244,221,141,0.14) 50%,
      rgba(244,196,64,0.10) 58%,
      transparent 72%,
      transparent 100%),
    /* Centred gold halo behind headline */
    radial-gradient(ellipse 60% 70% at 30% 50%,
      rgba(184,144,44,0.18) 0%,
      rgba(184,144,44,0.06) 35%,
      transparent 70%),
    /* Deep navy floor */
    linear-gradient(180deg, #0A1322 0%, #0F1B2D 50%, #060D18 100%);
}
/* Image-loaded state: dim the fallback gradients so they don't compete
   with the photo. Image-failed state: amp them so the section sings. */
.photo-anchor--no-image {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 22%,
      rgba(244,196,64,0.20) 40%,
      rgba(244,221,141,0.30) 50%,
      rgba(244,196,64,0.20) 60%,
      transparent 78%,
      transparent 100%),
    radial-gradient(ellipse 65% 75% at 30% 50%,
      rgba(184,144,44,0.32) 0%,
      rgba(184,144,44,0.10) 38%,
      transparent 75%),
    linear-gradient(180deg, #0A1322 0%, #0F1B2D 50%, #060D18 100%);
}
.photo-anchor .photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) contrast(1.05) saturate(1.1);
  animation: photoZoom 24s ease-in-out infinite alternate;
}
@keyframes photoZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}
.photo-anchor .photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 27, 45, 0.82) 0%, rgba(15, 27, 45, 0.30) 50%, rgba(15, 27, 45, 0.50) 100%),
    radial-gradient(ellipse at left, transparent 20%, rgba(15, 27, 45, 0.65) 100%);
}
.photo-anchor .photo-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.photo-anchor .photo-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F4D470;
  margin-bottom: 22px;
}
.photo-anchor .photo-headline {
  font-family: var(--ff-serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 720px;
  margin-bottom: 18px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.photo-anchor .photo-headline em {
  font-style: italic;
  background: linear-gradient(180deg, #F5D547 0%, #C8A84E 60%, #8E6B14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.photo-anchor .photo-sub {
  font-size: 18px;
  color: #E8E4D8;
  max-width: 580px;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.photo-anchor::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 196, 48, 0.4), transparent);
  z-index: 3;
}

/* ─────────────────────────────────────────────────────────
 * SIKA DWA KOFI · the soul of VPAY · 1701 → 2026
 * The Ano touch · Asante anchor surfaced on the front page
 * ──────────────────────────────────────────────────────── */
.throne-band {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(244,200,74,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(13,148,136,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #050B14 0%, #0A1626 50%, #050B14 100%);
  border-top: 1px solid rgba(244,200,74,0.22);
  border-bottom: 1px solid rgba(244,200,74,0.22);
}
.throne-band::before,
.throne-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,200,74,0.55) 50%, transparent 100%);
  z-index: 4;
}
.throne-band::before { top: 0; }
.throne-band::after  { bottom: 0; }

/* Atmospheric orbs */
.throne-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.55;
}
.throne-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.throne-orb-1 {
  width: 60vw; height: 60vw;
  top: -15%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #F4C84A 0%, transparent 60%);
  animation: throneOrbBreathe 6s ease-in-out infinite;
}
.throne-orb-2 {
  width: 80vw; height: 50vw;
  bottom: -20%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #B8902C 0%, transparent 65%);
  opacity: 0.6;
  animation: throneOrbBreathe 8s ease-in-out infinite alternate;
}
@keyframes throneOrbBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.12); }
}

/* Particle canvas (gold ascending) */
.throne-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.throne-content {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.throne-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border: 1px solid rgba(244,200,74,0.35);
  border-radius: 999px;
  background: rgba(15, 30, 51, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #F4D470;
  margin-bottom: 56px;
}

/* ════════════════════════════════════════════════════════════
   THRONE · AAA+ CEREMONIAL HEADER (added 2026-05-10)
   Sits above the existing .throne-eyebrow, giving the section
   the same royal register as NANANOM. Adinkrahene seal +
   SIKA DWA KOFI royal-mark + gold rule + sublabel.

   MOBILE behaviour (≤640px): hidden. Three stacked headers
   (royal-mark + essence + eyebrow) is too much vertical noise
   on small screens — the eyebrow chip alone introduces the
   section adequately. Desktop keeps the full ceremony.
   ═══════════════════════════════════════════════════════════ */
.throne-ceremony {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}
/* Inclusive breakpoint at 768px so most phones AND small tablets get the
   simplified mobile layout · only desktop (≥769px) sees the full ceremony */
@media (max-width: 768px) {
  .throne-ceremony { display: none !important; }
}
.throne-ceremony .seal {
  display: inline-block;
  width: 32px; height: 32px;
  margin-bottom: 16px;
  color: #F4DD8D;
  position: relative;
}
.throne-ceremony .seal::before,
.throne-ceremony .seal::after,
.throne-ceremony .seal > span {
  content: ""; position: absolute; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid currentColor;
}
.throne-ceremony .seal::before { width: 100%; height: 100%; }
.throne-ceremony .seal::after  { width: 60%;  height: 60%;  border-width: 1.2px; }
.throne-ceremony .seal > span  { width: 22%;  height: 22%;  background: currentColor; border: 0; }
.throne-ceremony .royal-mark {
  display: block;
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 12px;
  color: #F4DD8D;
  font-weight: 500;
  margin-bottom: 8px;
}
.throne-ceremony .gold-rule {
  display: inline-block;
  width: 110px; height: 0.5px;
  background: linear-gradient(90deg, transparent, #F4DD8D, transparent);
  margin-top: 14px;
  margin-bottom: 14px;
}
.throne-ceremony .essence {
  display: block;
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(244, 196, 64, 0.7);
  letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════
   THRONE · MEDALLION CHASSIS around the throne SVG
   The throne now sits inside an authority frame: concentric
   ceremonial rings + 4 corner brackets + cardinal tick marks.
   ═══════════════════════════════════════════════════════════ */
.throne-medallion {
  position: relative;
  width: 380px; height: 380px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    rgba(244,196,64,0) 0%,
    rgba(244,196,64,0.08) 70%,
    rgba(244,196,64,0.03) 100%);
}
@media (max-width: 1024px) {
  .throne-medallion { width: 300px; height: 300px; }
}
@media (max-width: 640px) {
  .throne-medallion { width: clamp(240px, 70vw, 280px); height: clamp(240px, 70vw, 280px); }
}

/* Outer ceremonial ring */
.throne-medallion::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.2px solid rgba(244, 221, 141, 0.55);
}
.throne-medallion::after {
  content: ""; position: absolute; inset: 5%;
  border-radius: 50%;
  border: 0.6px solid rgba(244, 221, 141, 0.4);
}
.throne-medallion .ring-3 {
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 0.5px solid rgba(184, 144, 44, 0.45);
}

/* Cardinal tick marks · light-touch authority anchors */
.throne-medallion .tk {
  position: absolute; background: #F4DD8D; opacity: 0.85;
}
.throne-medallion .tk-t { top: 0;    left: 50%; width: 1.6px; height: 14px; transform: translateX(-50%); }
.throne-medallion .tk-b { bottom: 0; left: 50%; width: 1.6px; height: 14px; transform: translateX(-50%); }
.throne-medallion .tk-l { left: 0;   top: 50%; width: 14px;   height: 1.6px; transform: translateY(-50%); }
.throne-medallion .tk-r { right: 0;  top: 50%; width: 14px;   height: 1.6px; transform: translateY(-50%); }

/* Scan brackets at 4 corners */
.throne-medallion .br {
  position: absolute; width: 22px; height: 22px;
  border: 1.4px solid rgba(244, 221, 141, 0.65); opacity: 0.9;
}
.throne-medallion .br-tl { top: 12%;    left: 12%;   border-right: 0; border-bottom: 0; }
.throne-medallion .br-tr { top: 12%;    right: 12%;  border-left: 0;  border-bottom: 0; }
.throne-medallion .br-bl { bottom: 12%; left: 12%;   border-right: 0; border-top: 0; }
.throne-medallion .br-br { bottom: 12%; right: 12%;  border-left: 0;  border-top: 0; }

.throne-medallion .throne-stage {
  position: relative;
  z-index: 2;
}

.throne-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin-bottom: 48px;
}

.throne-side {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #CBD5E1;
}
.throne-side-left { text-align: right; }
.throne-side-right { text-align: left; }
.throne-year {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: #F4D470;
  font-weight: 600;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.throne-text {
  margin: 0;
  color: #E8E4D8;
  font-size: 14px;
  line-height: 1.75;
}

/* The stage holding the stool + halo rings */
.throne-stage {
  position: relative;
  width: 280px;
  height: 200px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 60px rgba(244,200,74,0.35));
}
.throne-svg {
  width: 240px;
  height: auto;
  position: relative;
  z-index: 3;
  animation: thronePulse 5s ease-in-out infinite;
}
@keyframes thronePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(244,200,74,0.4)); }
  50%      { transform: scale(1.025); filter: drop-shadow(0 0 36px rgba(244,200,74,0.65)); }
}

/* Concentric expanding halos behind the stool */
.throne-halo {
  position: absolute;
  border: 1px solid #F4C84A;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
}
.throne-halo-1 {
  width: 120px; height: 120px;
  animation: throneHalo 4.2s ease-out infinite;
}
.throne-halo-2 {
  width: 120px; height: 120px;
  animation: throneHalo 4.2s ease-out infinite;
  animation-delay: 1.4s;
}
.throne-halo-3 {
  width: 120px; height: 120px;
  animation: throneHalo 4.2s ease-out infinite;
  animation-delay: 2.8s;
}
@keyframes throneHalo {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.throne-cap {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 2.4vw, 30px);
  color: #F1F5F9;
  margin: 0 0 16px;
  line-height: 1.4;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.throne-cap strong {
  background: linear-gradient(180deg, #F5D547 0%, #C8A84E 60%, #8E6B14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
  filter: drop-shadow(0 2px 12px rgba(244,196,48,0.3));
}
.throne-cap em {
  font-style: italic;
  color: #CBD5E1;
}

.throne-meta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #94A3B8;
  margin-bottom: 36px;
}
.throne-meta strong { color: #F4D470; font-weight: 600; }
.throne-meta-divider {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(244,200,74,0.4);
}

.throne-cta-link {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F4D470;
  border-bottom: 1px solid rgba(244,200,74,0.35);
  padding: 4px 0;
  transition: color 0.2s, border-color 0.2s;
}
.throne-cta-link:hover {
  color: #FFE08A;
  border-color: #F4D470;
  text-decoration: none;
}
.throne-cta-link .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.throne-cta-link:hover .arrow { transform: translateX(4px); }

/* ─── Founder signature · the Ano touch ─── */
.throne-signature {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(244, 200, 74, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  width: 100%;
}
/* Twi proverb · upgraded to AAA+ ceremonial register (matches homepage duality anchor) */
.throne-twi {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #FFEFA8 0%, #F4DD8D 30%, #D6B355 65%, #9C7A2E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(244, 221, 141, 0.28));
  position: relative;
  padding-bottom: 18px;
}
.throne-twi em {
  font-style: italic;
  font-weight: 500;
}
/* Hand-drawn underline accent below the proverb */
.throne-twi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 320px;
  height: 1.4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244,221,141,0.8) 25%,
    #F4DD8D 50%,
    rgba(244,221,141,0.8) 75%,
    transparent 100%);
  border-radius: 2px;
  opacity: 0.85;
}
.throne-translation {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 6px;
  font-weight: 300;
  color: rgba(203, 213, 225, 0.9);
  text-transform: uppercase;
  margin: 18px 0 24px;
}
.throne-signoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.throne-sig-line {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #F4D470, transparent);
  margin-bottom: 8px;
}
.throne-sig-name {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 600;
  color: #F1F5F9;
  letter-spacing: 0.01em;
}
.throne-sig-role {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A3B8;
}

@media (max-width: 640px) {
  .throne-signature { margin-top: 36px !important; padding-top: 26px !important; }
  .throne-twi { font-size: 18px !important; }
  .throne-translation { font-size: 13.5px !important; margin-bottom: 16px !important; }
  .throne-sig-name { font-size: 16px !important; }
  .throne-sig-role { font-size: 8.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .throne-orb, .throne-svg, .throne-halo { animation: none !important; }
}

@media (max-width: 1024px) {
  .throne-band { padding: 80px 0 !important; }
  .throne-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    max-width: 480px !important;
  }
  .throne-side-left, .throne-side-right { text-align: center !important; }
  .throne-stage { margin: 0 auto !important; }
}
@media (max-width: 640px) {
  .throne-band { padding: 56px 0 !important; }
  .throne-content { padding: 0 18px !important; }
  .throne-eyebrow { font-size: 9.5px !important; padding: 7px 14px !important; margin-bottom: 36px !important; }
  .throne-grid { gap: 28px !important; margin-bottom: 36px !important; }
  .throne-stage { width: 220px !important; height: 160px !important; }
  .throne-svg { width: 200px !important; }
  .throne-halo-1, .throne-halo-2, .throne-halo-3 { width: 100px !important; height: 100px !important; }
  .throne-cap { font-size: 18px !important; }
  .throne-meta { font-size: 10px !important; gap: 10px !important; }
  .throne-meta-divider { display: none !important; }
}


/* ─────────────────────────────────────────────────────────
 * CLOSING CTA · CSS-only dramatic dark band
 * Gradient mesh + texture · no external image dependency
 * ──────────────────────────────────────────────────────── */
.closing-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 20% 50%, #0F1E33 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, #142840 0%, transparent 50%),
    linear-gradient(180deg, #050B14 0%, #02060C 100%);
  border-top: 1px solid rgba(244,196,48,0.18);
  border-bottom: 1px solid rgba(244,196,48,0.18);
}
/* Top + bottom hairline gold seams */
.closing-cta::before,
.closing-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,196,48,0.55) 50%, transparent 100%);
  z-index: 4;
}
.closing-cta::before { top: 0; }
.closing-cta::after  { bottom: 0; }

.closing-mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(110px);
  opacity: 0.6;
}
.closing-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.closing-orb-1 {
  width: 60vw; height: 60vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, #C8A84E 0%, transparent 60%);
  animation: closingOrb1 28s ease-in-out infinite alternate;
}
.closing-orb-2 {
  width: 55vw; height: 55vw;
  top: 10%; right: -10%;
  background: radial-gradient(circle, #0D9488 0%, transparent 60%);
  animation: closingOrb2 34s ease-in-out infinite alternate;
  opacity: 0.7;
}
.closing-orb-3 {
  width: 70vw; height: 70vw;
  bottom: -25%; left: 25%;
  background: radial-gradient(circle, #F4D470 0%, transparent 65%);
  animation: closingOrb3 40s ease-in-out infinite alternate;
  opacity: 0.55;
}
@keyframes closingOrb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,3vh) scale(1.18); } }
@keyframes closingOrb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw,4vh) scale(1.12); } }
@keyframes closingOrb3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(-4vw,-3vh) scale(1.22); } }

.closing-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244,196,48,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,196,48,0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: closingGridDrift 50s linear infinite;
}
@keyframes closingGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 88px 88px, 88px 88px; }
}

.closing-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
}

.closing-content {
  position: relative;
  z-index: 3;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border: 1px solid rgba(244,196,48,0.32);
  border-radius: 999px;
  background: rgba(15, 30, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 36px;
}

.closing-headline {
  font-family: var(--ff-serif);
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 32px;
  text-shadow: 0 6px 32px rgba(0,0,0,0.5);
}
.closing-headline em {
  font-style: italic;
  background: linear-gradient(180deg, #F5D547 0%, #C8A84E 55%, #8E6B14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(244,196,48,0.22));
}

.closing-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 720px;
  margin: 0 0 44px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.closing-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.closing-btn-primary {
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: #C8A84E;
  color: #0F1B2D;
  border-color: #C8A84E;
  box-shadow: 0 12px 36px rgba(244,196,48,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.closing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(244,196,48,0.4);
  background: #F5D547;
  text-decoration: none;
}
.closing-btn-primary .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.closing-btn-primary:hover .arrow { transform: translateX(4px); }

.closing-btn-ghost {
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.06em;
  background: rgba(15, 27, 45, 0.4);
  border-color: rgba(244, 196, 48, 0.3);
  color: #F4D470;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.closing-btn-ghost:hover {
  background: rgba(15, 27, 45, 0.7);
  border-color: #C8A84E;
  color: #FFE08A;
  text-decoration: none;
}
.closing-btn-ghost .arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
  .closing-orb, .closing-grid { animation: none !important; }
}

@media (max-width: 1024px) {
  .closing-cta { padding: 80px 0; }
  .closing-headline { font-size: clamp(32px, 7vw, 56px); }
}
@media (max-width: 640px) {
  .closing-cta { padding: 56px 0; }
  .closing-eyebrow { font-size: 9.5px; padding: 7px 16px; margin-bottom: 24px; }
  .closing-headline { font-size: 28px; }
  .closing-sub { font-size: 15px; padding: 0 8px; }
  .closing-cta-row { flex-direction: column; gap: 10px; align-items: stretch; max-width: 280px; margin: 0 auto; width: 100%; }
  .closing-btn-primary, .closing-btn-ghost { text-align: center; padding: 14px 22px; }
}


/* ─── Closing CTA photo anchor (second photographic moment) ─── */
.photo-cta {
  height: auto;
  min-height: 600px;
  max-height: none;
  padding: 96px 0;
}
.photo-cta .photo-content {
  height: auto;
  align-items: center;
  text-align: center;
}
.photo-content-cta {
  align-items: center !important;
}
.photo-content-cta .photo-eyebrow {
  margin: 0 auto 28px;
}
.cta-headline {
  font-size: clamp(40px, 5.4vw, 78px) !important;
  text-align: center;
  margin: 0 auto 28px !important;
  max-width: 920px !important;
}
.photo-content-cta .photo-sub {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 720px;
}
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-btn-primary {
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: var(--bl-gold-bright, #C8A84E);
  color: #0F1B2D;
  border-color: var(--bl-gold-bright, #C8A84E);
  box-shadow: 0 12px 36px rgba(244, 196, 48, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(244, 196, 48, 0.4);
  text-decoration: none;
}
.cta-btn-primary .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.cta-btn-primary:hover .arrow { transform: translateX(4px); }

.cta-btn-ghost {
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.06em;
  background: rgba(15, 27, 45, 0.4);
  border-color: rgba(244, 196, 48, 0.3);
  color: #F4D470;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-btn-ghost:hover {
  background: rgba(15, 27, 45, 0.6);
  border-color: var(--bl-gold-bright, #C8A84E);
  color: #FFE08A;
  text-decoration: none;
}
.cta-btn-ghost .arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.9em;
}

@media (max-width: 1024px) {
  .photo-cta { padding: 64px 0; min-height: 480px; }
  .cta-headline { font-size: clamp(32px, 7vw, 52px) !important; }
}
@media (max-width: 640px) {
  .photo-cta { padding: 48px 0; min-height: 420px; }
  .cta-headline { font-size: 28px !important; }
  .cta-row { flex-direction: column; gap: 10px; align-items: stretch; max-width: 280px; margin: 0 auto; }
  .cta-btn-primary, .cta-btn-ghost { text-align: center; padding: 14px 22px; }
}


/* ─── Marquee stat tail (preventing wrap of "of attested physical gold") ─── */
.cine-stat-tail {
  font-family: var(--ff-mono);
  font-size: 0.28em !important;
  font-weight: 500 !important;
  color: var(--text-mute) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  margin-left: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Mobile responsive adjustments for light theme */
@media (max-width: 640px) {
  .photo-anchor { height: 50vh; min-height: 380px; }
  .photo-anchor .photo-headline { font-size: 28px; }
  .photo-anchor .photo-sub { font-size: 15px; }
  .body-light .builton-row { grid-template-columns: 1fr 1fr !important; }
  .body-light .resources { grid-template-columns: 1fr !important; }
}