/* ==========================================================================
   THRIVE Resource Centre - shared stylesheet
   Base component styles (header, panels, split, hero, evidence, masonry,
   org-list, SMEDAN band, ladder, leadership, closing band, footer) are
   carried over verbatim from the client-approved .docs/final_demo.html -
   see THRIVE_DESIGN.md v1.1. New sections below extend the same language
   to routes the prototype didn't cover (marked NEW).
   ========================================================================== */

*{box-sizing:border-box;}
/* The browser's built-in [hidden]{display:none} rule is user-agent origin,
   which loses to ANY author rule that sets display on the same element
   regardless of specificity (e.g. .evidence-card{display:grid}) — so
   toggling the hidden attribute silently did nothing wherever a component
   also declared its own display. This makes [hidden] authoritative again
   sitewide (evidence filter, mobile nav, any future use). */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.1;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
.mono{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.03em;}
/* Gold-500 alone contrasts well on dark panels (~9-11:1) but only ~1.4:1 on
   cream — physically impossible to fix by darkening while it still reads as
   gold (bright yellow-gold text/outlines can't hit AA on a light ground at
   any usable lightness). The added dark halo keeps the ring visible on
   light backgrounds regardless, while staying a subtle secondary layer
   behind the gold line everywhere else. */
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px; box-shadow:0 0 0 5px rgba(43,12,62,0.35);}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ==========================================================================
   Motion (THRIVE_DESIGN.md §6) — the approved prototype shipped with zero
   motion as a deliberate prototyping simplification, not a final decision.
   Per §6: subtle hover elevation on cards/tiles (no colour-inversion), and
   at least one section per page allowed a "non-generic" reveal moment —
   explicitly never decorative tech-flourish. Applied sitewide via main.js
   (main.js adds .reveal/.is-visible; this file only defines the states) so
   every page gets it through the shared header/footer, not just the
   homepage. JS skips this entirely for prefers-reduced-motion, and nothing
   here depends on JS running — un-enhanced elements are simply never
   given the starting hidden state, so they render normally with no motion. ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* Subtle elevation + border-colour shift on hover — no colour-inversion. */
.index-card, .evidence-card, .pillar, .workstream, .tile, .location-row{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .15s ease;
}
.index-card:hover, .evidence-card:hover, .workstream:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px -18px rgba(29,14,44,0.35);
}
.tile:hover{transform:translateY(-2px);}
.rung{transition:border-color .2s ease;}
.rung:hover{border-top-color:var(--gold-600);}

/* ---------- image placeholder ---------- */
.img-slot{
  position:relative;
  width:100%;
  border-radius:2px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(198,161,91,0.25), transparent 60%),
    repeating-linear-gradient(45deg, rgba(28,23,16,0.05) 0 2px, transparent 2px 14px),
    var(--panel-light);
  border:1px solid var(--border);
}
.img-slot.on-dark{
  background:
    linear-gradient(135deg, rgba(198,161,91,0.22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    var(--purple-700);
  border-color:var(--border-dark);
}
.img-slot .slot-label{
  position:absolute;
  left:14px; bottom:12px;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.02em;
  background:rgba(255,255,255,0.75);
  padding:4px 8px;
}
.img-slot.on-dark .slot-label{
  color:#D8D0E0;
  background:rgba(29,14,44,0.6);
}
/* Real <img> tags replace .img-slot divs; site-img keeps the same footprint
   and card treatment (DESIGN.md §0/§2 - bordered inset cards, not full-bleed,
   pending re-test once real photography lands). */
.site-img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  border-radius:2px;
  border:1px solid var(--border);
}
.site-img.on-dark{border-color:var(--border-dark);}
.site-img.ratio-4-5{aspect-ratio:4/5;}
.site-img.ratio-1-1{aspect-ratio:1/1;}
.site-img.ratio-16-10{aspect-ratio:16/10;}
.site-img.ratio-3-2{aspect-ratio:3/2;}
.site-img.tile-fill{position:absolute; inset:0; border-radius:0;}

/* AC-3 - staging content-governance banner and inline review flags */
.staging-banner{
  background:var(--gold-500); color:var(--purple-900);
  text-align:center; padding:8px 12px; font-size:0.72rem; letter-spacing:0.02em;
}
.review-flag{
  display:inline-block; margin-left:10px; padding:2px 8px;
  background:rgba(255,204,42,0.18); color:var(--purple-700); /* gold-600 text fails AA here; this needs to stay legible */
  border:1px solid var(--gold-600); font-size:0.62rem; letter-spacing:0.03em;
  vertical-align:middle; cursor:help;
}
.panel.dark .review-flag, .panel.darkest .review-flag{color:var(--gold-500); border-color:var(--gold-500);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px;}
.logo{display:inline-flex; align-items:center;}
/* logo.png's glyphs fill ~92% of the canvas height (barely any internal
   padding), so the CSS height translates almost directly to visible
   letterform size — 24px here targets roughly the same visual weight the
   old 1.28rem text logotype had next to the 0.92rem nav links. */
.logo-img{height:24px; width:auto; display:block;}
nav.links{display:flex; gap:34px; margin-left:auto; margin-right:30px;}
nav.links a{font-size:0.92rem; color:var(--ink-soft); border-bottom:1px solid transparent; padding:6px 0; transition:border-color .15s, color .15s;}
nav.links a:hover, nav.links a.is-active{color:var(--purple-900); border-color:var(--gold-600);}
.btn-gold{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-500); color:var(--purple-900);
  font-weight:600; font-size:0.92rem; padding:11px 22px;
  border:1px solid var(--gold-500); cursor:pointer;
  transition:background .15s, border-color .15s;
  white-space:nowrap;
}
.btn-gold:hover{background:var(--gold-600); border-color:var(--gold-600);}
.btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:inherit;
  font-weight:600; font-size:0.92rem; padding:10px 21px;
  border:1px solid currentColor; cursor:pointer;
  transition:opacity .15s;
}
.btn-outline:hover{opacity:0.7;}
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:0.92rem;
}
.link-arrow svg{width:16px; height:16px; transition:transform .15s;}
.link-arrow:hover svg{transform:translateX(3px);}

/* About Us dropdown (desktop) */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{font:inherit; font-size:0.92rem; color:var(--ink-soft); background:none; border:0; border-bottom:1px solid transparent; padding:6px 0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:border-color .15s, color .15s;}
.nav-dropdown-toggle::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px);}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.is-active, .nav-dropdown-toggle[aria-expanded="true"]{color:var(--purple-900); border-color:var(--gold-600);}
.nav-dropdown-menu{display:none; position:absolute; top:100%; left:-16px; min-width:230px; background:var(--cream); border:1px solid var(--border); padding:8px 0; box-shadow:0 12px 28px rgba(29,14,44,0.12); z-index:50;}
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu, .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{display:block;}
nav.links .nav-dropdown-menu a{display:block; padding:9px 18px; border-bottom:0;}
nav.links .nav-dropdown-menu a:hover{background:var(--panel-light);}
.mobile-nav .mobile-sub a{padding-left:18px; font-size:0.95rem; color:var(--ink-soft);}

/* Logos (organisations served, partnerships) */
.org-logos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px;}
.org-logo{background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; min-height:120px; text-align:center; color:var(--ink); font-size:0.82rem;}
.org-logo img{max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain;}
@media (max-width:900px){.org-logos{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.org-logos{grid-template-columns:1fr;}}
.partner-logo{height:auto; max-height:100px; width:auto; max-width:220px; object-fit:contain; background:#fff; padding:12px 16px; margin-bottom:18px;}
.partner-logo-lg{max-height:140px; max-width:340px; padding:16px 24px; margin-bottom:24px;}
.partner-feature{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; margin-top:8px;}
.partner-feature-logo{display:flex; justify-content:flex-end; align-items:flex-start;}
img.site-img.partner-logo.partner-logo-xl{width:auto; height:auto; max-width:100%; max-height:400px; padding:0; margin:0; background:transparent; border:0; object-fit:contain;}
@media (max-width:800px){.partner-feature{grid-template-columns:1fr; gap:24px;} .partner-feature-logo{order:-1; justify-content:flex-start;} img.site-img.partner-logo.partner-logo-xl{max-height:260px;}}
.partner-card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:32px;}

/* NEW - mobile nav toggle + panel */
.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:0; padding:8px; cursor:pointer;}
.nav-toggle span{width:22px; height:2px; background:var(--purple-900); display:block;}
.mobile-nav{background:var(--cream); border-bottom:1px solid var(--border);}
.mobile-nav nav{display:flex; flex-direction:column; padding:8px 0 20px;}
.mobile-nav nav a{padding:12px 0; font-size:1rem; color:var(--ink); border-bottom:1px solid var(--border);}

/* ---------- panel shell ---------- */
.panel{padding:104px 0; position:relative; overflow:hidden;}
.panel.light{background:var(--panel-light); color:var(--ink);}
.panel.cream{background:var(--cream); color:var(--ink);}
.panel.dark{background:var(--purple-800); color:var(--cream);}
.panel.darkest{background:var(--purple-900); color:var(--cream);}
.eyebrow{
  display:block; font-size:0.92rem; font-weight:600;
  margin-bottom:20px; color:var(--purple-700); /* gold-600 fails AA on light backgrounds at this hue; purple-700 (exact brand purple) tests at ~9-10:1 */
}
.panel.dark .eyebrow, .panel.darkest .eyebrow{color:var(--gold-500);}
.panel h1{font-size:clamp(2.2rem, 3.8vw, 3.4rem); max-width:20ch;}
.panel h2{font-size:clamp(1.9rem, 3.4vw, 2.9rem);}
.panel .lede{margin-top:20px; font-size:1.05rem; max-width:60ch;}
.panel.dark .lede, .panel.darkest .lede{color:#D8D0E0;}
.panel.light .lede, .panel.cream .lede{color:var(--ink-soft);}
.panel .body-copy{margin-top:20px; font-size:1rem; max-width:68ch;}
.panel .body-copy p + p{margin-top:16px;}
.panel.light .body-copy, .panel.cream .body-copy{color:var(--ink-soft);}
.panel.dark .body-copy, .panel.darkest .body-copy{color:#D8D0E0;}

/* split layout: image + text */
.split{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}
.split.reverse{grid-template-columns:1.95fr 1.05fr;}
.split.reverse .split-media{order:2;}
.split.reverse .split-text{order:1;}
.split-media .img-slot, .split-media .site-img{aspect-ratio:4/5;}

/* Text-heavy split rows (leadership bios: name, title, multiple credentials,
   personal note) — give the text column more room than the default
   image-forward ratio, since a narrow column wraps long credential lines
   awkwardly. Image side stays proportioned, just no longer the larger half. */
.split.text-wide{grid-template-columns:0.85fr 1.15fr;}
.split.text-wide.reverse{grid-template-columns:1.15fr 0.85fr;}

/* ---------- hero ---------- */
.hero{padding-top:76px;}
.hero-wave{position:absolute; inset:0; pointer-events:none; z-index:0;}
.hero .split{position:relative; z-index:1;}
.hero h1{font-size:clamp(2.5rem, 4.4vw, 4rem); max-width:13ch;}
.hero > .wrap:not(.split) h1{max-width:24ch;} /* text-only hero: no image column, so allow a wider measure */
.hero-cta-row{margin-top:36px; display:flex; gap:30px; align-items:center; flex-wrap:wrap;}

/* ---------- evidence dark panel ---------- */
.evidence-panel .split-media .img-slot, .evidence-panel .split-media .site-img{aspect-ratio:1/1;}
.evidence-panel blockquote{margin:0;}
.evidence-panel .serif{font-size:clamp(1.2rem,1.7vw,1.5rem); max-width:34ch; line-height:1.35;}
.evidence-source{margin-top:22px; color:var(--gold-500); font-size:0.88rem;}

/* ---------- services masonry ---------- */
.masonry{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(3, minmax(150px,auto));
  grid-template-areas:
    "a a b c"
    "a a d c"
    "e f f g";
  gap:2px;
}
.tile{
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  min-height:150px;
}
.tile h3{font-family:'Work Sans',sans-serif; font-weight:600; font-size:1.02rem;}
.tile p{font-size:0.88rem;}
.tile.t-image{padding:0; position:relative;}
.tile.t-image .img-slot, .tile.t-image .site-img{width:100%; height:100%; position:absolute; inset:0; border-radius:0;}
/* Photo tiles: a full dark scrim (not just a bottom fade) so caption text stays legible over any photograph */
.tile.t-image::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(0deg, rgba(29,14,44,0.94) 0%, rgba(29,14,44,0.82) 45%, rgba(29,14,44,0.62) 100%);}
.tile.t-image .tile-caption{position:relative; z-index:1; padding:22px; margin-top:auto;}
.tile.t-image .tile-caption h3, .tile.t-image .tile-caption p{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.tile.t-image .tile-caption p{color:#F1ECF6;}
.tile.t-dark{background:var(--purple-800); color:var(--cream);}
.tile.t-dark p{color:#D8D0E0;}
.tile.t-darkest{background:var(--purple-900); color:var(--cream);}
.tile.t-darkest p{color:#D8D0E0;}
.tile.t-light{background:var(--cream); color:var(--ink);}
.tile.t-light p{color:var(--ink-soft);}
.tile.t-gold{background:var(--gold-500); color:var(--purple-900);}
.tile.t-gold p{color:var(--purple-900); opacity:0.85;}
.tile a.tile-link{position:absolute; inset:0; z-index:2;}
.a-area{grid-area:a;} .b-area{grid-area:b;} .c-area{grid-area:c;}
.d-area{grid-area:d;} .e-area{grid-area:e;} .f-area{grid-area:f;} .g-area{grid-area:g;}

/* ---------- partner names panel ---------- */
.org-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px 40px;
  margin-top:44px;
}
.org-list div{
  padding:18px 0;
  border-top:1px solid var(--border-dark);
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  color:var(--cream);
}
.org-note{margin-top:32px; color:#B9AECB; font-size:0.85rem; max-width:52ch;}

/* ---------- SMEDAN band ---------- */
.flagship-figure{font-size:clamp(3.2rem, 6.4vw, 5rem); color:var(--gold-500); line-height:1;}
.flagship-figure + p{margin-top:12px; font-size:1.02rem; color:#D8D0E0; max-width:22ch;}
.flagship-body p{color:#E6E0F0; font-size:0.98rem; margin-bottom:14px;}
.flagship-body p:last-child{margin-bottom:0;}
.flagship-caption{margin-top:18px; color:#B9AECB; font-size:0.85rem; font-style:italic;}

/* ---------- ladder ---------- */
.ladder{max-width:820px;}
.ladder.linked .rung{cursor:pointer;}
.rung{
  display:grid; grid-template-columns:230px 1fr; gap:28px;
  border-top:1px solid var(--border); padding:26px 0;
}
.rung:last-child{border-bottom:1px solid var(--border);}
.rung-level{font-family:'Fraunces', serif; color:var(--purple-900); font-weight:500;}
.rung-level a{color:inherit;}
.rung:nth-child(1) .rung-level{font-size:1.55rem;}
.rung:nth-child(2) .rung-level{font-size:1.34rem;}
.rung:nth-child(3) .rung-level{font-size:1.18rem;}
.rung:nth-child(4) .rung-level{font-size:1.05rem;}
.rung:nth-child(5) .rung-level{font-size:0.97rem;}
.rung-offerings{color:var(--ink-soft); font-size:0.94rem; align-self:center;}

/* ---------- leadership split ---------- */
.credential-strip{margin-top:26px; display:flex; flex-direction:column; gap:10px;}
.credential-strip .cred{
  display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px;
  font-size:0.87rem; color:var(--ink-soft);
}
/* minmax(0,1fr) (not bare 1fr) stops the text column's default automatic
   minimum size from being its content's min-content width — without it, a
   long word can force the column to size to that word instead of the space
   actually available. cred-text wraps the title + detail as a single grid
   item; two separate nodes here would auto-place onto a second implicit
   row, dropping the detail text into the 14px dot column instead. */
.credential-strip .cred::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-600); margin-top:7px; flex-shrink:0;}
.cred-text{min-width:0;}
.panel.dark .credential-strip .cred, .panel.darkest .credential-strip .cred{color:#D8D0E0;}
.cred-title{font-weight:600; color:var(--ink);}
.panel.dark .cred-title, .panel.darkest .cred-title{color:var(--cream);}

/* ---------- closing band ---------- */
.closing-band{background:var(--purple-900); color:var(--cream); padding:90px 0; text-align:center;}
.closing-band h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
.closing-band .links-row{margin-top:22px; display:flex; gap:10px; justify-content:center; font-size:0.98rem; color:#D8D0E0; flex-wrap:wrap;}
.closing-band .links-row a{text-decoration:underline; text-underline-offset:3px; color:var(--cream);}

/* ---------- footer - darkest surface on the page ---------- */
footer{background:var(--footer-bg); border-top:1px solid rgba(198,161,91,0.18); padding:60px 0 30px; color:#B9AECB;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--border-dark);}
.footer-grid h4{color:var(--gold-500); font-size:0.8rem; font-weight:600; margin-bottom:16px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:9px; font-size:0.9rem; color:#B9AECB;}
.footer-grid a:hover{color:var(--gold-500);}
/* logo.png is a single-colour-on-transparent PNG (purple letters, gold
   arrow) — its purple only measures ~1.8:1 against --footer-bg, nearly
   invisible. brightness(0) flattens the whole mark to solid black
   (alpha untouched), then invert(1) flips that to solid white — a
   standard technique for reusing one colour source on a dark background.
   This loses the gold arrow's two-tone accent; swap in a dedicated
   logo-reversed.png (already speced in .docs/images.md) to get it back. */
.footer-logo-img{height:20px; margin-bottom:14px; filter:brightness(0) invert(1);}
.footer-brand p{font-size:0.88rem; color:#8F82A0; max-width:32ch; margin-bottom:6px;}
.footer-legal{padding-top:22px; display:flex; justify-content:space-between; font-size:0.78rem; color:#71678A; flex-wrap:wrap; gap:8px;}
.footer-legal a:hover{color:var(--gold-500);}
.social-row{display:flex; gap:14px;}
.social-row a{font-size:0.85rem;}

/* ==========================================================================
   NEW - components not exercised in final_demo.html, extending the same
   language to interior routes per THRIVE_DESIGN.md (spec unchanged from v1.0
   where noted) and PRD §4.
   ========================================================================== */

/* Breadcrumb - FR-IA-2, every [slug] template */
.breadcrumb{padding:18px 0;}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; font-size:0.82rem; color:var(--ink-soft);}
.breadcrumb li:not(:last-child)::after{content:"/"; margin-left:8px; color:var(--border);}
.breadcrumb a:hover{color:var(--purple-900); text-decoration:underline;}
.breadcrumb [aria-current="page"]{color:var(--ink);}

/* Acrostic wall - C-18, S-3, About page only */
.acrostic-wall{display:flex; flex-direction:column; margin-top:20px;}
.acrostic-row{display:grid; grid-template-columns:64px 220px 1fr; gap:28px; align-items:start; border-top:1px solid var(--border-dark); padding:24px 0;}
.acrostic-row:last-child{border-bottom:1px solid var(--border-dark);}
.acrostic-letter{font-family:'Fraunces', serif; font-size:2.2rem; color:var(--gold-500); line-height:1;}
.acrostic-arrow{width:40px; height:40px;}
.acrostic-value{font-family:'Fraunces', serif; font-size:1.25rem; color:var(--cream);}
.acrostic-definition{color:#D8D0E0; font-size:0.95rem; max-width:60ch;}

/* Capability pillar - C-20, used for Approach (About) and LMS features (Platform) */
.pillar-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; margin-top:44px; background:var(--border);}
.pillar{background:var(--cream); padding:32px 30px;}
.pillar-index{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--purple-700);}
.pillar h3{margin-top:12px; font-size:1.15rem;}
.pillar p{margin-top:10px; color:var(--ink-soft); font-size:0.94rem;}
.panel.dark .pillar-grid, .panel.darkest .pillar-grid{background:var(--border-dark);}
.panel.dark .pillar, .panel.darkest .pillar{background:var(--purple-800);}
.panel.dark .pillar p, .panel.darkest .pillar p{color:#D8D0E0;}
.panel.dark .pillar h3, .panel.darkest .pillar h3{color:var(--cream);}
.panel.dark .pillar-index, .panel.darkest .pillar-index{color:var(--gold-500);} /* purple-700 on purple-800 would be low-contrast */

/* Index card grids - Capabilities index, Engagements-linked chips */
.card-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; margin-top:44px; background:var(--border);}
.index-card{background:#fff; border:1px solid var(--border); padding:34px 32px; display:flex; flex-direction:column; gap:14px; transition:background .15s;}
.index-card:hover{background:var(--panel-light);}
.index-card .card-number{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--purple-700);}
.index-card h3{font-size:1.3rem;}
.index-card p{color:var(--ink-soft); font-size:0.94rem;}
.index-card .link-arrow{margin-top:auto;}
.panel-distinct{margin-top:2px; background:var(--purple-800); color:var(--cream); padding:40px 32px; grid-column:1/-1;}
.panel-distinct .eyebrow{color:var(--gold-500);}
.panel-distinct p{color:#D8D0E0; margin-top:14px; max-width:70ch;}

/* Related-level chips on capability detail pages */
.chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.chip{display:inline-flex; border:1px solid var(--border); padding:8px 16px; font-size:0.85rem; color:var(--ink-soft);}
.chip:hover{border-color:var(--gold-600); color:var(--ink);}

/* Evidence cards */
.evidence-cards{display:flex; flex-direction:column; gap:2px; margin-top:44px; background:var(--border);}
.evidence-card{background:#fff; border:1px solid var(--border); padding:34px 36px; display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.evidence-card .ev-meta{display:flex; flex-direction:column; gap:8px;}
.evidence-card .ev-category{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--purple-700); text-transform:uppercase; letter-spacing:0.04em;}
.evidence-card h3{font-size:1.2rem;}
.evidence-card .ev-level{font-size:0.85rem; color:var(--ink-soft);}
.evidence-card .ev-description{color:var(--ink-soft); font-size:0.94rem;}
.evidence-filter{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px;}
.evidence-filter button{background:transparent; border:1px solid var(--border); padding:8px 16px; font-size:0.85rem; font-family:'Work Sans',sans-serif; color:var(--ink-soft); cursor:pointer;}
.evidence-filter button.is-active{background:var(--purple-900); color:var(--cream); border-color:var(--purple-900);}

/* Leadership grid */
.leadership-grid{display:flex; flex-direction:column; gap:2px; margin-top:20px; background:var(--border);}
.leader-row{background:var(--cream); padding:48px 0;}
.leader-row:nth-child(even){background:var(--panel-light);}

/* Facilities / workstreams */
.workstream-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; margin-top:40px; background:var(--border-dark);}
.workstream{background:var(--purple-800); padding:28px 26px;}
.workstream h3{font-size:1.05rem; color:var(--cream);}
.workstream p{margin-top:10px; color:#D8D0E0; font-size:0.9rem;}

/* Locations table */
.locations-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 40px; margin-top:32px;}
.location-row{border-top:1px solid var(--border); padding:18px 0;}
.location-region{font-family:'Fraunces', serif; font-size:1.05rem;}
.location-countries{color:var(--ink-soft); font-size:0.92rem; margin-top:6px;}

/* Gallery - real photography (.docs/upgrade.md §1.4). Photo-wall grid with
   hairline gaps matching the card-grid/evidence-cards convention; wide/large
   tiles avoid hard-cropping the two very wide (2.4:1) outing photos. */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  gap:2px;
  background:var(--border);
  margin-top:20px;
}
.gallery-tile{position:relative; overflow:hidden; background:var(--panel-light);}
.gallery-tile.size-wide{grid-column:span 2;}
.gallery-tile.size-large{grid-column:span 2; grid-row:span 2;}
.gallery-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .4s ease;
}
.gallery-tile:hover .gallery-img{transform:scale(1.04);}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:14px 16px;
  background:linear-gradient(0deg, rgba(29,14,44,0.85), transparent 80%);
  color:var(--cream);
  font-size:0.82rem;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.gallery-tile:hover .gallery-caption{opacity:1; transform:translateY(0);}
.gallery-trigger{
  position:absolute; inset:0; width:100%; height:100%;
  background:none; border:0; padding:0; margin:0; cursor:pointer; z-index:2;
}

@media (max-width: 900px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:180px;}
  .gallery-tile.size-large{grid-column:span 2; grid-row:span 1;}
  .gallery-caption{opacity:1; transform:translateY(0);} /* no hover on touch - always visible */
}

/* Fullscreen photo viewer */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(29,14,44,0.94);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-width:90vw; max-height:88vh;
}
.lightbox-img{
  max-width:90vw; max-height:78vh; width:auto; height:auto;
  object-fit:contain; display:block;
  border:1px solid var(--border-dark);
  animation:lightbox-in .2s ease;
}
@keyframes lightbox-in{from{opacity:0; transform:scale(0.98);} to{opacity:1; transform:scale(1);}}
.lightbox-caption{color:var(--cream); font-size:0.92rem; text-align:center; max-width:70ch;}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,0.08); color:var(--cream);
  border:1px solid var(--border-dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,0.18);}
.lightbox-close{top:20px; right:20px; width:44px; height:44px; font-size:1.6rem; line-height:1; border-radius:50%;}
.lightbox-prev, .lightbox-next{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2rem; line-height:1; border-radius:50%;}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}

@media (max-width: 900px){
  .lightbox-close{top:12px; right:12px; width:38px; height:38px; font-size:1.3rem;}
  .lightbox-prev, .lightbox-next{width:42px; height:42px; font-size:1.5rem;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* Empty states - Programmes, Calendar, Facilitators-if-unresolved */
.empty-state{border:1px dashed var(--border); padding:64px 40px; text-align:center; margin-top:20px;}
.panel.dark .empty-state, .panel.darkest .empty-state{border-color:var(--border-dark);}
.empty-state h3{font-size:1.4rem; max-width:32ch; margin:0 auto;}
.empty-state p{margin-top:16px; color:var(--ink-soft); max-width:52ch; margin-left:auto; margin-right:auto;}
.empty-state .btn-gold{margin-top:26px;}

/* Contact form */
.contact-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start;}
.contact-details{display:flex; flex-direction:column; gap:20px;}
.contact-details .detail-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--purple-700);}
.contact-details .detail-value{font-size:1.05rem; margin-top:6px;}
.named-contact{border-top:1px solid var(--border); padding-top:20px; margin-top:8px;}
form.briefing-form{display:flex; flex-direction:column; gap:18px;}
.form-row label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:8px;}
.form-row input, .form-row textarea{
  width:100%; border:1px solid var(--border); background:var(--cream);
  padding:13px 14px; font-family:'Work Sans',sans-serif; font-size:0.95rem; color:var(--ink);
}
.form-row textarea{min-height:130px; resize:vertical;}
.form-row input:focus, .form-row textarea:focus{border-color:var(--gold-600);}

/* Platform interstitial handoff - FR-IA-3 */
.handoff-note{margin-top:36px; border:1px solid var(--border-dark); background:rgba(198,161,91,0.08); padding:24px 26px; display:flex; flex-direction:column; gap:14px; max-width:52ch;}
.handoff-note p{font-size:0.92rem; color:#D8D0E0;}
.handoff-note strong{color:var(--cream);}

/* Address / map fallback block */
.address-block{border:1px solid var(--border); padding:28px 30px; margin-top:20px; max-width:420px;}
.address-block .detail-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--purple-700);}
.address-block p{margin-top:10px; font-size:1rem;}

/* Pull quote */
.pull-quote{border-left:3px solid var(--gold-500); padding-left:24px; margin-top:28px; font-family:'Fraunces',serif; font-size:1.15rem; max-width:56ch;}
.panel.dark .pull-quote, .panel.darkest .pull-quote{color:var(--cream);}

/* ===================== MOBILE ===================== */
@media (max-width: 900px){
  .wrap{padding:0 22px;}
  nav.links{display:none;}
  .nav-toggle{display:flex;}
  .panel{padding:64px 0;}
  .split, .split.reverse, .split.text-wide, .split.text-wide.reverse{grid-template-columns:1fr; gap:32px;}
  .split .split-media, .split.reverse .split-media{order:1;}
  .split .split-text, .split.reverse .split-text{order:2;}
  .split-media .img-slot, .split-media .site-img{aspect-ratio:16/10;}
  .hero-wave{display:none;} /* decorative graphic hidden on mobile per instruction */
  .masonry{
    grid-template-columns:1fr;
    grid-template-areas:
      "a" "b" "c" "d" "e" "f" "g";
    gap:2px;
  }
  .tile{min-height:auto; padding:22px 20px;}
  .tile.t-image{min-height:220px;}
  .org-list{grid-template-columns:1fr;}
  .rung{grid-template-columns:1fr; gap:6px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .pillar-grid, .card-grid{grid-template-columns:1fr;}
  .evidence-card{grid-template-columns:1fr;}
  .workstream-grid{grid-template-columns:1fr;}
  .locations-grid{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr;}
  .acrostic-row{grid-template-columns:44px 1fr; grid-template-areas:"letter value" "def def";}
  .acrostic-letter{grid-area:letter;}
  .acrostic-value{grid-area:value;}
  .acrostic-definition{grid-area:def;}
}
.leader-row{scroll-margin-top:90px;}
.org-logo.is-dark{background:var(--purple-800); color:var(--cream);}

/* Service pages */
.site-img.ratio-4-3{aspect-ratio:4/3;}
.split-media .site-img.ratio-4-3{aspect-ratio:4/3;}
.other-services{list-style:none; padding:0; margin:20px 0 48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px 28px;}
.other-services a{display:block; padding:10px 0; border-bottom:1px solid var(--border); font-weight:500;}
.other-services a:hover{color:var(--purple-900); border-color:var(--gold-600);}
.index-card .card-photo{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; margin:0 0 16px;}

/* Contrast on purple: white or brand-gold text only */
.panel.dark .rung-level, .panel.darkest .rung-level, .panel.dark .rung-level a, .panel.darkest .rung-level a{color:#fff;}
.panel.dark .rung-offerings, .panel.darkest .rung-offerings{color:#E9E2F0;}
.panel.dark .rung, .panel.darkest .rung{border-color:rgba(255,255,255,0.28);}
.panel.dark .rung:hover, .panel.darkest .rung:hover{border-top-color:var(--gold-500);}
.panel.dark .rung-level a:hover, .panel.darkest .rung-level a:hover{color:var(--gold-500);}
.workstream .link-arrow, .panel.dark .link-arrow, .panel.darkest .link-arrow, .tile.t-dark .link-arrow, .tile.t-darkest .link-arrow{color:var(--gold-500);}
.workstream a{color:var(--gold-500);}
.workstream a:hover{color:#fff;}
.panel.dark a:not(.btn-gold):not(.btn-outline), .panel.darkest a:not(.btn-gold):not(.btn-outline){color:var(--gold-500);}
.panel.dark .rung-level a, .panel.darkest .rung-level a{color:#fff;}

/* Logos are not photo cards: no border, never cropped */
.org-logo img.site-img, img.site-img.partner-logo{border:0; border-radius:0; box-shadow:none;}
.org-logo img.site-img{width:auto; height:auto; max-width:100%; max-height:56px; object-fit:contain;}

/* Mobile About Us group: stack the sub-links like the other menu items */
.mobile-nav .mobile-sub{display:flex; flex-direction:column;}
.mobile-nav .mobile-sub a{display:block; padding:12px 0 12px 18px; border-bottom:1px solid var(--border);}

/* Mobile About Us: same look as the other top-level items, collapsible */
.mobile-nav .mobile-group-toggle{display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 0; font:inherit; font-size:1rem; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--border); text-align:left; cursor:pointer;}
.mobile-nav .mobile-group-toggle::after{content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s;}
.mobile-nav .mobile-group-toggle[aria-expanded="true"]::after{transform:rotate(-135deg);}
.mobile-nav .mobile-sub[hidden]{display:none;}
.mobile-nav .mobile-sub a{background:var(--panel-light);}
footer address{font-style:normal;}

/* Video: hero video fills the image column; gallery videos sit above the photo grid */
.hero-video{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--purple-900); border:1px solid var(--border);}
.gallery-videos{display:grid; grid-template-columns:repeat(2, minmax(0, 360px)); gap:24px; margin:20px 0 28px;}
.gallery-video video{display:block; width:100%; aspect-ratio:9/16; max-height:70vh; object-fit:contain; background:#000;}
.gallery-video figcaption{margin-top:10px; font-size:0.85rem; color:var(--ink-soft);}
@media (max-width:900px){
  .hero-video{aspect-ratio:16/10;}
  .gallery-videos{grid-template-columns:1fr;}
  .gallery-video video{max-height:60vh;}
}
.hero-video.is-contain{object-fit:contain; background:#000;}

/* ---------- Calendar: programme cards (managed via /admin) ---------- */
.cohort-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px;}
.cohort-card{background:#fff; border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;}
.cohort-img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;}
.cohort-body{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; align-items:flex-start;}
.cohort-date{color:var(--purple-700); font-size:.8rem; letter-spacing:.04em; margin:0;}
.cohort-body h3{margin:0; font-size:1.25rem;}
.cohort-meta{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--ink-soft); font-size:.9rem;}
.cohort-meta li+li::before{content:"\00b7"; margin-right:14px; color:var(--neutral-600);}
.cohort-summary{margin:0; color:var(--ink-soft); font-size:.95rem; flex:1;}

.cohort-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:auto;}
.cohort-more{cursor:pointer; font:inherit; font-weight:600; font-size:0.92rem; padding:11px 22px; border:1px solid var(--purple-700); color:var(--purple-700); background:transparent;}
.cohort-more:hover{background:var(--purple-700); color:#fff; opacity:1;}
html.dialog-open{overflow:hidden;}
.cohort-dialog{border:0; padding:0; width:min(760px,calc(100vw - 32px)); max-height:calc(100vh - 48px); background:#fff; color:var(--ink); box-shadow:0 30px 80px rgba(22,8,30,.45); overflow:auto; overscroll-behavior:contain;}
.cohort-dialog::backdrop{background:rgba(22,8,30,.7);}
.dialog-close{position:absolute; top:12px; right:14px; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.92); font-size:1.7rem; line-height:1; cursor:pointer; color:var(--purple-900); z-index:2;}
.dialog-img{width:100%; aspect-ratio:16/8; object-fit:cover; display:block;}
.dialog-body{padding:32px 36px 36px;}
.dialog-body h2{margin:6px 0 14px; font-size:1.7rem;}
.dialog-summary{color:var(--ink-soft); margin:18px 0 0;}
.dialog-details{margin-top:22px; padding-top:22px; border-top:1px solid var(--border); color:var(--ink-soft);}
.dialog-details h4{margin:22px 0 8px; color:var(--purple-900); font-size:1.05rem;}
.dialog-details h4:first-child{margin-top:0;}
.dialog-details p{margin:0 0 12px;}
.dialog-details ul{margin:0 0 12px; padding-left:20px;}
.dialog-details li{margin-bottom:6px;}
.dialog-actions{margin-top:28px;}
@media (max-width:600px){.dialog-body{padding:24px 20px 28px;}}