/* ============================================================================
   PROSPEX DESIGN SYSTEM  ·  prospex-ds.css
   The single source of truth for the whole Prospex website.
   Extracted from the completed homepage ("Prospex Original").

   USAGE (every page, in this order, inside <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bowlby+One&amp;family=Caveat:wght@600;700&amp;family=Archivo:wght@400;500;600;700;800&amp;display=swap">
   <link rel="stylesheet" href="ds/prospex-ds.css?v=2026-10d">
   <script defer src="ds/prospex-ds.js?v=2026-10d"></script>
   (Fonts are linked from each page rather than @import-ed here, so the browser
   fetches them in parallel instead of after this file.)
   Bump ?v= on every page (and VERSION in prospex-ds.js) whenever ds/ changes:
   the server caches these files for 10 years.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* Brand palette */
  --p-orange:#F26B1F;      --p-orange-deep:#D4521A;  --p-orange-soft:#FFB87A;
  --p-cream:#FFF6E5;       --p-paper:#FFFAF0;
  --p-pink:#FF4D9D;        --p-pink-deep:#D6186E;
  --p-yellow:#FFD43A;
  --p-blue:#2D4DA8;        --p-blue-light:#6BA8E8;
  --p-green:#2A8E5C;
  --p-purple:#7B3CB8;
  /* Accessible variants (WCAG AA for small text) — use for white-text buttons and links */
  --p-orange-a11y:#C2410C; --p-pink-a11y:#C2185B; --p-green-a11y:#1F7A4D; --p-link:#A63C0F;
  --p-ink:#1A1410;         --p-body:#3A322B;         --p-soft:#6B5F54;

  /* Type families */
  --p-disp:"Bowlby One","Archivo Black",sans-serif;      /* display / headings   */
  --p-hand:"Caveat","Permanent Marker",cursive;          /* handwritten accents  */
  --p-body-f:"Archivo","Inter",system-ui,sans-serif;     /* body / UI            */

  /* Layout */
  --p-pad-x:clamp(20px,5vw,56px);
  --p-max:1400px;

  /* Signature hard offset shadow */
  --p-shadow:0 4px 0 rgba(26,20,16,0.85);
  --p-shadow-lg:0 6px 0 rgba(26,20,16,0.85);
}

/* ---- 2. BASE ------------------------------------------------------------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{
  margin:0;padding:0;
  background:var(--p-cream);
  color:var(--p-ink);
  font-family:var(--p-body-f);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block} /* height:auto keeps width/height attributes from distorting scaled images */
a{color:var(--p-link)}
a:hover{color:var(--p-pink-a11y)}
button,input,textarea,select{font-family:inherit}
/* Skip link (first item in ds/header.html): hidden until focused */
.p-skip{position:absolute;left:12px;top:-200px;z-index:400;background:var(--p-ink);color:#fff;
  padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;box-shadow:var(--p-shadow)}
.p-skip:focus{top:12px;color:#fff}
main:focus{outline:none}

/* ---- 3. TYPOGRAPHY ------------------------------------------------------- */
.p-disp1{font-family:var(--p-disp);font-size:clamp(64px,12vw,200px);line-height:.9;letter-spacing:-.02em}
.p-hero-word{font-family:var(--p-disp);font-size:clamp(56px,9vw,140px);line-height:.95;letter-spacing:-.03em;word-break:break-word}
.p-disp2{font-family:var(--p-disp);font-size:clamp(40px,6vw,80px);line-height:.95;letter-spacing:-.015em}
.p-disp3{font-family:var(--p-disp);font-size:clamp(28px,3.6vw,48px);line-height:1}
.p-hand1{font-family:var(--p-hand);font-weight:700;font-size:clamp(40px,7vw,96px);line-height:.95}
.p-hand2{font-family:var(--p-hand);font-weight:700;font-size:clamp(28px,3.6vw,48px);line-height:1}
.p-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6}
.p-body{font-size:16px;line-height:1.7}
.p-sm{font-size:14px;line-height:1.55}
.p-kicker{font-family:var(--p-disp);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.p-mute{color:var(--p-body)}
/* Small kickers in brand colours fail contrast on cream — darken them */
.p-kicker.p-c-orange,.p-kicker.p-c-orange-deep{color:var(--p-orange-a11y)}
.p-kicker.p-c-pink{color:var(--p-pink-a11y)}
.p-kicker.p-c-green{color:var(--p-green-a11y)}

/* Text-colour helpers */
.p-c-orange{color:var(--p-orange)} .p-c-orange-deep{color:var(--p-orange-deep)}
.p-c-pink{color:var(--p-pink)}     .p-c-blue{color:var(--p-blue)}
.p-c-green{color:var(--p-green)}   .p-c-purple{color:var(--p-purple)}
.p-c-yellow{color:var(--p-yellow)} .p-c-cream{color:var(--p-cream)}
.p-c-ink{color:var(--p-ink)}

/* ---- 4. LAYOUT ----------------------------------------------------------- */
.p-section{padding:clamp(56px,7vw,96px) var(--p-pad-x)}
.p-wrap{max-width:var(--p-max);margin:0 auto}

.p-bg-cream{background:var(--p-cream)}
.p-bg-paper{background:var(--p-paper)}
.p-bg-ink{background:var(--p-ink);color:var(--p-cream)}
.p-bg-orange{background:var(--p-orange);color:var(--p-ink)}

/* Split (text + media) */
.p-split{display:grid;gap:56px;align-items:center}
.p-split--12{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.p-split--top{align-items:flex-start}
@media (max-width:900px){.p-split,.p-split--12{grid-template-columns:1fr!important;gap:32px!important}}

/* Auto-fit grids */
.p-grid{display:grid;gap:24px}
.p-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.p-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.p-grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.p-row-end{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
@media (max-width:480px){.p-row-end{flex-direction:column;align-items:flex-start}}

/* Fixed 3-column poster/schedule grids (inline grid-template-columns) -> 2-up on mobile */
@media (max-width:600px){
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---- 5. CHIPS / BUTTONS -------------------------------------------------- */
.p-chip{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:14px;
  font-family:var(--p-disp);font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:none;white-space:nowrap;
  box-shadow:var(--p-shadow);transform:translateY(0);transition:transform .12s,box-shadow .12s;
}
.p-chip:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(26,20,16,.85)}
.p-chip--orange-deep:hover,.p-chip--green:hover,.p-chip--blue:hover,.p-chip--pink:hover,.p-chip--purple:hover,.p-chip--ink:hover,.p-chip--donate:hover{color:#fff}
.p-chip--orange:hover,.p-chip--yellow:hover,.p-chip--cream:hover{color:var(--p-ink)}
/* Contrast: ink on orange (5.99:1); white only on the darker a11y variants */
.p-chip--orange{background:var(--p-orange);color:var(--p-ink)}
.p-chip--orange-deep{background:var(--p-orange-a11y);color:#fff}
.p-chip--green{background:var(--p-green-a11y);color:#fff}
.p-chip--blue{background:var(--p-blue);color:#fff}
.p-chip--pink{background:var(--p-pink-a11y);color:#fff}
.p-chip--yellow{background:var(--p-yellow);color:var(--p-ink)}
.p-chip--purple{background:var(--p-purple);color:#fff}
.p-chip--cream{background:var(--p-cream);color:var(--p-ink)}
.p-chip--ink{background:var(--p-ink);color:var(--p-cream)}
.p-chip--donate{background:var(--p-pink-a11y);color:#fff;border:3px solid var(--p-ink)}
.p-chip--donate:hover{background:var(--p-ink);color:#fff}
.p-chip--lg{padding:14px 24px;font-size:16px;border-radius:16px}
@media (max-width:400px){.p-chip--lg{font-size:13px;padding:11px 16px}}

/* ---- 6. STICKER / TAPE / FRAME ------------------------------------------- */
.p-sticker{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--p-yellow);color:var(--p-ink);
  padding:8px 16px;border-radius:999px;
  font-family:var(--p-hand);font-size:22px;font-weight:700;
  transform:rotate(-3deg);box-shadow:0 3px 0 rgba(26,20,16,.6);
}
/* Checker tape divider (reusable strip) */
.p-tape{
  height:16px;
  background:repeating-conic-gradient(var(--p-orange) 0% 25%,var(--p-cream) 0% 50%) 0 0/24px 24px;
  border-top:4px dashed var(--p-orange);border-bottom:4px dashed var(--p-orange);
}
/* Thin checker rule above/below a positioned element */
.p-checker::before,.p-checker::after{content:"";position:absolute;left:0;right:0;height:4px;
  background-image:linear-gradient(to right,var(--p-orange) 50%,transparent 50%);background-size:14px 4px}
.p-checker::before{top:-4px}.p-checker::after{bottom:-4px}
/* Polaroid photo frame (white border + tilt) */
.p-frame{background:#fff;padding:12px 12px 16px;border:3px solid var(--p-ink);
  box-shadow:var(--p-shadow-lg);transform:rotate(-3deg)}
.p-frame--r{transform:rotate(3deg)}
.p-frame img{display:block;width:100%}

/* ---- 7. CARD ------------------------------------------------------------- */
.p-card{background:#fff;border:3px solid var(--p-ink);border-radius:18px;box-shadow:var(--p-shadow-lg);overflow:hidden}
.p-card--pad{padding:24px}
.p-card__body{padding:24px}
.p-card--orange{border-color:var(--p-orange)} .p-card--pink{border-color:var(--p-pink)}
.p-card--blue{border-color:var(--p-blue)}     .p-card--green{border-color:var(--p-green)}
.p-card--purple{border-color:var(--p-purple)} .p-card--yellow{border-color:var(--p-yellow)}

/* ---- 8. PHOTO ------------------------------------------------------------ */
.p-photo{position:relative;overflow:hidden;border-radius:18px;background:var(--p-orange-deep)}
.p-photo img{width:100%;height:100%;object-fit:cover;display:block}
.p-photo__cap{position:absolute;top:12px;left:12px;background:var(--p-yellow);color:var(--p-ink);
  display:flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:8px;
  font-family:var(--p-disp);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 3px 0 rgba(26,20,16,.4)}

/* ---- 9. PROGRESS --------------------------------------------------------- */
.p-progress{height:12px;border-radius:999px;overflow:hidden;background:rgba(26,20,16,.12)}
.p-progress>i{display:block;height:100%;border-radius:999px;background:var(--p-orange)}

/* ---- 10. PAGE HEADER / BREADCRUMB (interior pages) ----------------------- */
.p-pagehead{position:relative;background:var(--p-ink);color:var(--p-cream);
  padding:clamp(48px,6vw,88px) var(--p-pad-x);overflow:hidden}
.p-pagehead__inner{max-width:var(--p-max);margin:0 auto;position:relative}
.p-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;
  font-weight:700;letter-spacing:.02em;margin-bottom:18px}
.p-crumb a{color:var(--p-orange-soft);text-decoration:none}
.p-crumb a:hover{color:var(--p-yellow)}
.p-crumb span{opacity:.5}

/* ---- 11. FORMS ----------------------------------------------------------- */
.p-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.p-label{font-family:var(--p-disp);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink)}
.p-input,.p-textarea,.p-select{
  width:100%;background:#fff;border:2px solid rgba(26,20,16,.16);border-radius:12px;
  padding:13px 15px;font-size:15px;color:var(--p-ink);
  transition:border-color .15s ease,box-shadow .15s ease}
.p-input:hover,.p-textarea:hover,.p-select:hover{border-color:rgba(26,20,16,.34)}
.p-input:focus,.p-textarea:focus,.p-select:focus{outline:none;border-color:var(--p-ink);
  box-shadow:0 0 0 3px var(--p-orange)}
.p-textarea{min-height:130px;resize:vertical}

/* ---- 12. FAQ ACCORDION --------------------------------------------------- */
.p-acc{background:#fff;border:3px solid var(--p-ink);border-radius:14px;box-shadow:var(--p-shadow);margin-bottom:14px;overflow:hidden}
.p-acc>summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--p-disp);font-size:17px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.p-acc>summary::-webkit-details-marker{display:none}
.p-acc>summary::after{content:"+";font-size:26px;line-height:1;color:var(--p-orange)}
.p-acc[open]>summary::after{content:"–"}
.p-acc__body{padding:0 22px 20px;line-height:1.7;color:var(--p-body)}

/* ============================================================================
   NAVIGATION  (announce bar · checker-tape header · dropdowns · mobile drawer)
   Contract: pages contain <div id="site-header"></div>; prospex-ds.js injects
   ds/header.html into it. #site-header itself is the sticky element (a sticky
   child inside a ~70px wrapper can never stick).
   ========================================================================== */
#site-header{position:sticky;top:0;z-index:60}
.p-announce{background:var(--p-ink);color:var(--p-cream);padding:8px var(--p-pad-x);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em}
.p-announce a{text-decoration:none;color:#fff;opacity:1}
@media (max-width:540px){
  .p-announce{flex-direction:column;gap:4px;padding-top:10px;padding-bottom:10px;text-align:center}
  .p-announce a{margin-left:0!important;width:100%;text-align:center}
}

.p-nav-mobile{display:none}
.p-navwrap{position:relative;z-index:60}
/* Checks are anchored to the bottom edge so the row above the border is always whole squares
   (the header height changes with the scrolled state); a solid border avoids dashes clashing with them. */
.p-nav-tape{background:repeating-conic-gradient(var(--p-orange) 0% 25%,var(--p-cream) 0% 50%) 0 100%/24px 24px;
  border-bottom:4px solid var(--p-orange);padding:16px var(--p-pad-x);display:flex;align-items:center;gap:16px}
.p-nav-tape__logo{background:#fff;border:3px solid #f78707;padding:9px 18px;border-radius:12px;
  box-shadow:var(--p-shadow);display:inline-flex;align-items:center;flex-shrink:0}
.p-nav-tape__logo img{height:32px;width:auto;display:block}
.p-nav-tape__list{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex:1;flex-wrap:nowrap;align-items:center}
.p-nav-tape__social{display:inline-flex;gap:6px;flex-shrink:0}
.p-nav-tape__social a{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--p-ink);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:var(--p-shadow);font-size:16px;font-weight:700}
/* Header social icons only when there is clearly room for them (they are also in the footer and drawer) */
@media (max-width:1759px){.p-nav-tape__social{display:none}}
/* Just above the breakpoint the full nav is tight: trim the side padding */
@media (min-width:1301px) and (max-width:1439px){.p-nav-tape{padding-left:24px;padding-right:24px}}

/* Top-level chips in the tape: white pills that take their colour on hover */
.p-nav-tape__list>.p-navli>.p-chip{background:#fff;color:var(--p-ink);padding:10px 14px;transition:background .2s,color .2s,transform .12s,box-shadow .12s}
.p-nav-tape__list>.p-navli>.p-chip--blue:hover,.p-nav-tape__list>.p-navli.p-open>.p-chip--blue{background:var(--p-blue);color:#fff}
.p-nav-tape__list>.p-navli>.p-chip--green:hover,.p-nav-tape__list>.p-navli.p-open>.p-chip--green{background:var(--p-green-a11y);color:#fff}
.p-nav-tape__list>.p-navli>.p-chip--pink:hover{background:var(--p-pink-a11y);color:#fff}
.p-nav-tape__list>.p-navli>.p-chip--orange:hover{background:var(--p-orange);color:var(--p-ink)}
.p-nav-tape__list>.p-navli>.p-chip--yellow:hover{background:var(--p-yellow);color:var(--p-ink)}
.p-nav-tape__list>.p-navli>.p-chip--purple:hover{background:var(--p-purple);color:#fff}
.p-nav-tape__list>.p-navli>.p-chip--ink:hover{background:var(--p-ink);color:#fff}

/* Chip tilt inside the tape (Donate is deliberately outside the list: solid, untilted) */
.p-nav-tape__list .p-chip{transform:rotate(var(--tilt,0deg))}
.p-nav-tape__list .p-chip:hover{transform:rotate(var(--tilt,0deg)) translateY(2px)}
.p-nav-tape__list li:nth-child(1) .p-chip{--tilt:-2deg}
.p-nav-tape__list li:nth-child(2) .p-chip{--tilt:1.5deg}
.p-nav-tape__list li:nth-child(3) .p-chip{--tilt:-1deg}
.p-nav-tape__list li:nth-child(4) .p-chip{--tilt:2deg}
.p-nav-tape__list li:nth-child(5) .p-chip{--tilt:-1.5deg}
.p-nav-tape__list li:nth-child(6) .p-chip{--tilt:1deg}
.p-nav-tape__list li:nth-child(7) .p-chip{--tilt:-2deg}

/* Donate button: solid, untilted, always visible (desktop + mobile header) */
.p-nav-impact{flex-shrink:0;margin-left:auto;padding:12px 18px;font-size:15px;min-height:44px;border:3px solid var(--p-ink)}
.p-nav-impact+.p-nav-donate{margin-left:0}
/* Below 700px the logo needs the room; the Impact Report stays in the drawer */
@media (max-width:699px){.p-nav-impact{display:none}}
.p-nav-donate{flex-shrink:0;margin-left:auto;padding:12px 22px;font-size:15px;min-height:44px}

/* Dropdown submenus — open state is managed by prospex-ds.js (.p-open),
   so only one can be open at a time and Escape closes it. */
.p-navli{position:relative}
.p-subnav{list-style:none;margin:0;padding:8px;padding-top:18px;position:absolute;top:100%;left:0;min-width:240px;
  background:#fff;border:3px solid var(--p-ink);border-radius:14px;box-shadow:var(--p-shadow-lg);
  flex-direction:column;gap:4px;z-index:80}
.p-nav-tape__list .p-subnav{display:none}
.p-nav-tape__list .p-has-sub.p-open>.p-subnav{display:flex}
/* No-JS fallback (header is JS-injected, so this is belt and braces) */
html:not(.p-js) .p-nav-tape__list .p-has-sub:hover>.p-subnav,html:not(.p-js) .p-nav-tape__list .p-has-sub:focus-within>.p-subnav{display:flex}
.p-subnav li{transform:none;list-style:none}
.p-subnav a{display:flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:9px;font-family:var(--p-body-f);
  font-weight:700;font-size:14px;color:var(--p-ink);text-decoration:none;white-space:nowrap}
.p-subnav a:hover{background:var(--p-cream);color:var(--p-ink)}
.p-has-sub>.p-chip::after{content:"\00a0\25be";font-size:.75em}

/* Active page state — the chip for the page you're on reads as a solid ink pill */
.p-nav-tape__list>.p-navli>.p-chip.p-nav-current,
.p-nav-tape__list>.p-navli>.p-chip.p-nav-current:hover{background:var(--p-ink);color:var(--p-cream);box-shadow:var(--p-shadow),inset 0 0 0 2px var(--p-orange)}
.p-subnav a.p-nav-current{background:var(--p-cream);color:var(--p-ink);position:relative}
.p-subnav a.p-nav-current::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--p-orange)}
.p-mob-drawer a.p-nav-current{outline:3px solid var(--p-cream);outline-offset:2px}
.p-mdaccord__list a.p-nav-current{outline:none;background:rgba(26,20,16,.08)}

/* Sticky header condenses slightly once the page is scrolled */
.p-navwrap .p-nav-tape,.p-nav-tape__logo,.p-nav-tape__logo img{transition:padding .25s ease,height .25s ease}
.p-navwrap.p-scrolled .p-nav-tape{padding-top:9px;padding-bottom:9px}
.p-navwrap.p-scrolled .p-nav-tape__logo{padding:6px 14px}
.p-navwrap.p-scrolled .p-nav-tape__logo img{height:26px}
.p-navwrap.p-scrolled{box-shadow:0 6px 20px rgba(26,20,16,.18)}

/* Between the breakpoint and 1600px, compact the chips so logo + 7 chips + Impact Report + Donate fit */
@media (min-width:1301px) and (max-width:1599px){
  .p-nav-tape{gap:10px}
  .p-nav-tape__logo{padding:8px 14px}
  .p-nav-tape__logo img{height:28px}
  .p-nav-tape__list{gap:6px}
  .p-nav-tape__list>.p-navli>.p-chip{padding:9px 10px;font-size:13px}
  .p-nav-impact{padding:10px 12px;font-size:13px}
  .p-nav-donate{padding:10px 16px;font-size:13px}
}

/* Desktop / mobile switch. 1300px: the full desktop nav (logo + 7 chips +
   Impact Report + Donate) needs ~1290px with the compact chips above, so anything narrower gets
   the drawer instead of a wrapped or overflowing header. Re-measure if you add
   or rename a top-level item. */
@media (max-width:1300px){
  .p-nav-tape__list{display:none}
  .p-nav-mobile{display:inline-flex;gap:8px;order:-2;flex-shrink:0;padding:10px 16px;min-height:44px;font-size:14px}
  .p-nav-mobile__icon{font-size:20px;line-height:1}
  .p-nav-tape{flex-wrap:nowrap}
  .p-nav-tape__logo{order:-1;flex-shrink:1;min-width:0}
  .p-nav-tape__social{display:none}
}
@media (max-width:480px){
  .p-nav-tape{gap:8px;padding:10px}
  .p-nav-tape__logo{padding:7px 10px}
  .p-nav-tape__logo img{height:24px}
  .p-nav-mobile{padding:10px 12px}
  .p-nav-mobile__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .p-nav-donate{padding:10px 14px;font-size:13px}
}
@media (max-width:340px){
  .p-nav-tape__logo img{height:20px}
}

/* Mobile drawer (built by prospex-ds.js) — premium composition */
.p-mob-drawer{
  display:none;
  position:fixed;
  inset:0;
  z-index:300;
  background:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.6px) 0 0/22px 22px,
    var(--p-ink);
  flex-direction:column;
  height:100vh;
  height:100dvh;
}
.p-mob-drawer.open{display:flex}
.p-mob-drawer__head{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px var(--p-pad-x);
  background:repeating-conic-gradient(rgba(242,107,31,.07) 0% 25%, transparent 0% 50%) 0 0/20px 20px;
  border-bottom:3px dashed rgba(242,107,31,.5);
}
.p-mob-drawer__logo{
  background:#fff;
  border:3px solid #f78707;
  padding:8px 16px;
  border-radius:12px;
  box-shadow:var(--p-shadow);
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.p-mob-drawer__logo img{height:26px;width:auto;display:block}
.p-mob-drawer__close{
  position:relative;
  width:44px;
  height:44px;
  min-width:44px;
  flex-shrink:0;
  border-radius:50%;
  border:2px solid rgba(255,246,229,.35);
  background:rgba(255,246,229,.06);
  cursor:pointer;
  padding:0;
  transition:background .15s,border-color .15s,transform .2s;
}
.p-mob-drawer__close:hover,.p-mob-drawer__close:focus-visible{
  background:var(--p-orange);
  border-color:var(--p-orange);
  transform:rotate(90deg);
}
.p-mob-drawer__close span{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:var(--p-cream);
  border-radius:2px;
}
.p-mob-drawer__close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.p-mob-drawer__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

.p-mob-drawer__body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px var(--p-pad-x) calc(20px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Primary accordions: About / Programmes */
.p-mdaccord{
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--p-shadow);
}
.p-mdaccord__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:none;
  cursor:pointer;
  padding:15px 18px;
  font-family:var(--p-disp);
  font-size:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
}
.p-mdaccord--blue .p-mdaccord__trigger{background:var(--p-blue)}
.p-mdaccord--green .p-mdaccord__trigger{background:var(--p-green-a11y)}
.p-mdaccord__chevron{flex-shrink:0;transition:transform .25s ease}
.p-mdaccord__trigger[aria-expanded=true] .p-mdaccord__chevron{transform:rotate(180deg)}

.p-mdaccord__panelwrap{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  background:var(--p-cream);
}
.p-mdaccord__panel{overflow:hidden}
.p-mdaccord__list{list-style:none;margin:0;padding:6px 0}
.p-mdaccord__list li{transform:none}
.p-mdaccord__list a{
  display:flex;align-items:center;min-height:44px;
  padding:10px 18px 10px 16px;
  margin:2px 8px;
  border-left:3px solid var(--p-orange);
  border-radius:0 8px 8px 0;
  font-family:var(--p-body-f);
  font-weight:700;
  font-size:14px;
  color:var(--p-ink);
  text-decoration:none;
}
.p-mdaccord__list a:hover,.p-mdaccord__list a:focus-visible{background:rgba(26,20,16,.06)}

/* Secondary nav grid */
.p-mob-drawer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:380px){
  .p-mob-drawer__grid{grid-template-columns:1fr 1fr}
  .p-mdcard--full{grid-column:1/-1}
}
.p-mdcard{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  border-radius:16px;
  padding:12px 16px;
  font-family:var(--p-disp);
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  box-shadow:var(--p-shadow);
  transition:transform .12s,box-shadow .12s;
}
.p-mdcard:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(26,20,16,.85)}
.p-mdcard:focus-visible{outline:3px solid var(--p-cream);outline-offset:2px}
.p-mdcard--pink{background:var(--p-pink-a11y);color:#fff}
.p-mdcard--orange{background:var(--p-orange);color:var(--p-ink)}
.p-mdcard--donate{background:var(--p-pink-a11y);color:#fff;border:3px solid var(--p-cream);grid-column:1/-1;min-height:56px;font-size:17px}
.p-mdcard--impact{background:var(--p-yellow);color:var(--p-ink);border:3px solid var(--p-cream);grid-column:1/-1;min-height:56px;font-size:17px}
.p-mdcard--yellow{background:var(--p-yellow);color:var(--p-ink)}
.p-mdcard--purple{background:var(--p-purple);color:#fff}
.p-mdcard--ink{background:var(--p-ink);color:var(--p-cream);border:2px solid rgba(255,246,229,.3)}

.p-mob-drawer__social{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  padding-top:16px;
  border-top:1px dashed rgba(255,246,229,.25);
}
.p-mob-drawer__social a{
  width:38px;height:38px;border-radius:50%;background:#fff;color:var(--p-ink);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 3px 0 rgba(26,20,16,.85);
}

/* Entrance animation */
.p-mob-drawer__head,.p-mob-drawer__body>*{
  opacity:0;
  transform:translateY(14px);
}
.p-mob-drawer.open .p-mob-drawer__head{animation:p-mdIn .35s ease forwards}
.p-mob-drawer.open .p-mob-drawer__body>*{animation:p-mdIn .35s ease forwards}
.p-mob-drawer.open .p-mob-drawer__body>*:nth-child(1){animation-delay:.06s}
.p-mob-drawer.open .p-mob-drawer__body>*:nth-child(2){animation-delay:.11s}
.p-mob-drawer.open .p-mob-drawer__body>*:nth-child(3){animation-delay:.16s}
.p-mob-drawer.open .p-mob-drawer__body>*:nth-child(4){animation-delay:.21s}
@keyframes p-mdIn{to{opacity:1;transform:translateY(0)}}

/* ============================================================================
   ACCESSIBILITY  (focus, touch targets, utilities)  — added Oct 2026
   ========================================================================== */
.p-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.p-skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--p-ink);color:var(--p-cream);padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.p-skip:focus{top:12px}

/* One visible focus style everywhere (keyboard only) */
:focus-visible{outline:3px solid var(--p-ink);outline-offset:3px}
.p-bg-ink :focus-visible,.p-footer :focus-visible,.p-pagehead :focus-visible,.p-mob-drawer :focus-visible,.p-bg-orange :focus-visible{outline-color:var(--p-yellow)}
.p-chip:focus-visible{outline:3px solid var(--p-ink);outline-offset:3px}
.p-footer .p-chip:focus-visible,.p-pagehead .p-chip:focus-visible,.p-bg-ink .p-chip:focus-visible{outline-color:var(--p-yellow)}

/* Filter pills (team page, timeline eras, etc.) — 44px targets */
.tm-fbtn,.p-tl-fbtn,.p-filter button,button[aria-pressed]{min-height:44px}

/* ============================================================================
   FOOTER  (ds/footer.html)
   ========================================================================== */
.p-footer{background:var(--p-ink);color:var(--p-cream);padding:64px var(--p-pad-x) 32px}
.p-footer a{color:var(--p-cream)}
.p-footer a:hover{color:var(--p-yellow)}
.p-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-bottom:40px}
.p-footer__logo{height:44px;width:auto;margin-bottom:20px}
.p-footer__addr{font-size:15px;line-height:1.7;margin:0;color:rgba(255,246,229,.88)}
.p-footer__addr a{display:inline-flex;align-items:center;min-height:44px}
.p-footer__h{font-family:var(--p-disp);color:var(--p-orange);font-size:18px;line-height:1.1;margin:0 0 12px;text-transform:uppercase;letter-spacing:.02em}
.p-footer__links{list-style:none;padding:0;margin:0;display:grid;gap:0}
.p-footer__links a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none}
.p-footer__links a:hover{text-decoration:underline}
.p-footer__social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none;padding:0}
.p-footer__social a{width:44px;height:44px;border-radius:50%;background:var(--p-orange);color:var(--p-ink);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.p-footer__social a:hover{background:var(--p-yellow);color:var(--p-ink)}
.p-footer__text{font-size:15px;line-height:1.6;margin:0 0 14px;color:rgba(255,246,229,.88)}
.p-footer__cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.p-footer .p-chip--orange,.p-footer .p-chip--orange:hover{color:var(--p-ink)}
.p-footer__badges{list-style:none;margin:0;padding:24px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;border-top:1px solid rgba(255,255,255,.15)}
.p-footer__badges li{background:#fff;border-radius:12px;padding:8px 10px;height:92px;display:flex;align-items:center}
.p-footer__badges img{height:76px;width:auto}
.p-footer__note{font-size:13px;line-height:1.5;margin:0 0 18px;color:rgba(255,246,229,.8)}
.p-footer__bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:rgba(255,246,229,.8)}
.p-footer__legal{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0}
.p-footer__legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
@media (max-width:520px){.p-footer__badges li{height:76px}.p-footer__badges img{height:60px}}

/* ============================================================================
   SHARED CONTENT PATTERNS  (policy pages, help boxes, donate tiles, role cards)
   ========================================================================== */
.p-prose{max-width:760px;font-size:16px;line-height:1.7;color:var(--p-body)}
.p-prose h2{font-family:var(--p-disp);font-size:clamp(22px,2.6vw,30px);line-height:1.1;color:var(--p-ink);margin:40px 0 12px}
.p-prose h3{font-size:18px;color:var(--p-ink);margin:24px 0 8px}
.p-prose ul{padding-left:22px}
.p-prose li{margin-bottom:6px}
.p-prose table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:15px}
@media (max-width:600px){.p-prose table{display:block;overflow-x:auto;font-size:14px}.p-prose th,.p-prose td{padding:8px;min-width:110px}}
.p-prose th,.p-prose td{border:2px solid rgba(26,20,16,.15);padding:10px 12px;text-align:left;vertical-align:top}
.p-prose th{background:#fff}
.p-draft{background:var(--p-yellow);color:var(--p-ink);border:3px solid var(--p-ink);border-radius:14px;padding:14px 18px;font-weight:700;margin:0 0 32px;box-shadow:var(--p-shadow)}

.p-help{background:#fff;border:3px solid var(--p-pink-a11y);border-radius:18px;box-shadow:var(--p-shadow-lg);padding:24px}
.p-help__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.p-help__list li{background:var(--p-cream);border-radius:12px;padding:12px 14px;line-height:1.45}
.p-help__list b{display:block;font-family:var(--p-disp);font-weight:400;font-size:16px;color:var(--p-ink)}
.p-help__list a{font-weight:700;font-size:18px}

.p-amounts{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.p-amount{display:flex;flex-direction:column;gap:10px;background:#fff;border:3px solid var(--p-ink);border-radius:18px;box-shadow:var(--p-shadow-lg);padding:24px;color:var(--p-ink);text-decoration:none}
.p-amount__val{font-family:var(--p-disp);font-size:clamp(40px,5vw,56px);line-height:1}
.p-amount__what{margin:0;line-height:1.55;color:var(--p-body);flex:1}
.p-amount .p-chip{align-self:flex-start}
.p-toggle{display:inline-flex;gap:6px;background:#fff;border:3px solid var(--p-ink);border-radius:999px;padding:4px}
.p-toggle button{border:0;background:transparent;border-radius:999px;padding:10px 18px;font-family:var(--p-disp);font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;color:var(--p-ink);min-height:44px}
.p-toggle button[aria-pressed=true]{background:var(--p-ink);color:var(--p-cream)}
.p-trust{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;padding:18px 24px;border:2px dashed rgba(26,20,16,.3);border-radius:16px;font-size:15px;color:var(--p-body)}
.p-trust b{color:var(--p-ink)}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .p-chip,.p-input,.p-textarea,.p-select{transition:none}
  .p-mob-drawer__head,.p-mob-drawer__body>*{opacity:1;transform:none;animation:none}
  .p-mdaccord__panelwrap,.p-mdaccord__chevron,.p-mob-drawer__close,.p-mdcard{transition:none}
}

/* ---- Click-to-load embed placeholder (see initEmbeds in prospex-ds.js) ---- */
.p-embed{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:24px;border:2px dashed rgba(26,20,16,.28);border-radius:12px;background:var(--p-paper);color:var(--p-ink);
  font:inherit;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.p-embed:hover{background:#fff;border-color:var(--p-ink)}
.p-embed__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;background:var(--p-ink);color:var(--p-cream);
  font-family:var(--p-disp);font-size:14px;letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--p-shadow)}
.p-embed__note{font-size:13px;line-height:1.5;color:var(--p-body);max-width:46ch}
/* Image placeholder (e.g. a local static map): the picture fills the button; button at the top and note at the bottom, so a centred map marker stays visible. */
.p-embed--img{position:relative;overflow:hidden;isolation:isolate;justify-content:space-between;padding:14px 14px 24px;background:var(--p-paper)}
.p-embed--img:hover{background:var(--p-paper)}
.p-embed__img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center;transition:filter .15s}
.p-embed--img:hover .p-embed__img{filter:saturate(.7) brightness(.92)}
.p-embed--img:hover .p-embed__btn{background:var(--p-orange-a11y)}
.p-embed--img:focus-visible{outline-offset:-4px}
.p-embed--img .p-embed__note{padding:3px 10px;border-radius:999px;background:rgba(255,250,240,.92);color:var(--p-ink);font-size:12px}
.p-embed__credit{position:absolute;right:0;bottom:0;padding:2px 6px;border-top-left-radius:6px;background:rgba(255,250,240,.85);
  color:var(--p-body);font-size:10px;line-height:1.4}