/* ============================================================
   TRAILS - plain static stylesheet (no build step)
   Concept: WAYFINDING. Light-primary, warm, logo-derived.
   All contrast values verified WCAG 2.2 (see handoff notes).
   ============================================================ */

/* ---------- self-hosted fonts ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  --navy-900:#12293B; --navy-800:#1D3A52; --navy-700:#2A4A64;
  --paper:#FCFAF7; --sand-100:#F2E9E1; --sand-text:#E8D9C8;
  --clay-600:#CC333B; --clay-700:#BC2E36; --terracotta:#D97A3A; --ocean:#4996CE;
  /* Lighter terracotta, for the accent sitting over a photograph rather than flat navy. */
  --terracotta-lift:#F5B98A;
  --ink:#22303C; --ink-soft:#4A5A66;

  --bg:var(--paper); --surface:#ffffff; --surface-2:var(--sand-100);
  --text:var(--navy-800); --text-body:var(--ink); --text-soft:var(--ink-soft);
  --border:rgba(29,58,82,.14); --accent:var(--clay-600); --accent-strong:var(--clay-700);
  --night:var(--navy-900); --night-2:var(--navy-800); --on-night:#ffffff; --on-night-soft:var(--sand-text);

  --display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,sans-serif;
  --serif:"Spectral",Georgia,serif;

  --r-card:14px; --r-img:18px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(18,41,59,.06),0 1px 2px rgba(18,41,59,.08);
  --shadow-md:0 18px 40px -18px rgba(18,41,59,.35);
  --shadow-lg:0 40px 80px -30px rgba(18,41,59,.45);
  --wrap:1200px; --sp:clamp(4rem,9vw,8rem); --ease:cubic-bezier(.16,1,.3,1);
}
/* Light theme only. Dark-mode auto-switching intentionally removed so the site
   always shows the warm paper theme, regardless of the visitor's device setting.
   The navy "night" sections (hero-free bands, impact, donate, page headers) stay
   dark by design because they use the fixed --night tokens, not --bg. */

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);color:var(--text-body);background:var(--bg);line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;color:var(--text);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.25rem,4vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.4rem;font-weight:600;letter-spacing:-.01em}
p{max-width:65ch}
strong{font-weight:600}

/* ---------- utilities ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.section{padding-block:var(--sp)}
.lead{font-size:clamp(1.1rem,1.6vw,1.28rem);color:var(--text-soft);line-height:1.6;text-wrap:pretty}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:.6rem}
.eyebrow.terra{color:var(--terracotta)}
.center{text-align:center}
.p-body{margin-top:1.1rem;color:var(--text-body)}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.section-head{max-width:60ch;margin-inline:auto}
.section-head h2{margin-top:.1rem}
.section-head p{margin-inline:auto;margin-top:.6rem;text-wrap:balance}
.cta-row{display:flex;gap:.9rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;font-size:1rem;padding:.85rem 1.5rem;border-radius:var(--r-pill);border:1.5px solid transparent;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s,border-color .18s;white-space:nowrap}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(204,51,59,.6)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(204,51,59,.65)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--text);transform:translateY(-2px)}
.btn-ghost-light{background:rgba(252,250,247,.12);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.btn-ghost-light:hover{background:rgba(252,250,247,.22);transform:translateY(-2px)}
.arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.link-more{color:var(--accent);font-weight:600;display:inline-flex;gap:.4rem;align-items:center}
.link-more:hover .arrow{transform:translateX(4px)}

/* reveal / motion */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal.d1{transition-delay:.07s}
  html.js .reveal.d2{transition-delay:.14s}
  html.js .reveal.d3{transition-delay:.21s}
}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-24px)}}
.starfield .st{position:absolute;background:#fff;border-radius:50%}
@media (prefers-reduced-motion: no-preference){.starfield .st{animation:drift linear infinite alternate}}
@keyframes trail-draw{to{stroke-dashoffset:0}}

/* ============================================================ HEADER */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--border)}
.site-head .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:70px}
.site-head .brand{display:inline-flex;align-items:center}
.site-head .logo{height:34px;width:auto}
.site-head .logo-dark{display:none}
.site-head .nav{display:flex;align-items:center;gap:1.6rem}
.site-head .nav a{font-weight:500;font-size:.97rem;color:var(--text);position:relative;padding:.2rem 0}
.site-head .nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .25s var(--ease)}
.site-head .nav a:hover::after,.site-head .nav a:focus-visible::after,.site-head .nav a.active::after{right:0}
.head-cta{display:flex;align-items:center;gap:1rem}
.head-cta .need{font-size:.9rem;color:var(--text-soft);font-weight:500;border-bottom:1px dotted var(--text-soft)}
.head-cta .need:hover{color:var(--accent);border-color:var(--accent)}
.head-donate{padding:.6rem 1.2rem}
.hamb{display:none;background:none;border:0;color:var(--text);padding:.3rem}
/* The panel slides in from the right. display:none cannot be transitioned, so it
   is held off-screen and hidden instead: visibility keeps it out of the tab order
   and the accessibility tree while it is closed. */
.mobile-nav{position:fixed;inset:70px 0 0;background:var(--night);padding:2rem clamp(1.15rem,4vw,2rem);z-index:39;
  overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateX(100%);
  transition:transform .38s var(--ease),visibility 0s linear .38s}
.mobile-nav.open{visibility:visible;transform:translateX(0);transition:transform .38s var(--ease)}
.mobile-nav nav{display:flex;flex-direction:column;gap:.4rem}
.mobile-nav a{color:var(--on-night);font-family:var(--display);font-weight:600;font-size:1.5rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav .btn{margin-top:1.2rem;justify-content:center;border-bottom:0;color:#fff}
/* The links follow the panel in, each a beat behind the one above it. */
@media (prefers-reduced-motion: no-preference){
  .mobile-nav a{opacity:0;transform:translateX(26px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
  .mobile-nav.open a{opacity:1;transform:none}
  .mobile-nav.open a:nth-child(1){transition-delay:.10s}
  .mobile-nav.open a:nth-child(2){transition-delay:.15s}
  .mobile-nav.open a:nth-child(3){transition-delay:.20s}
  .mobile-nav.open a:nth-child(4){transition-delay:.25s}
  .mobile-nav.open a:nth-child(5){transition-delay:.30s}
  .mobile-nav.open a:nth-child(6){transition-delay:.35s}
  .mobile-nav.open a:nth-child(7){transition-delay:.40s}
}
@media (prefers-reduced-motion: reduce){
  .mobile-nav{transition:none}
  .mobile-nav.open{transition:none}
}
@media (max-width:900px){.site-head .nav,.head-cta .need{display:none}.hamb{display:block}}

/* ============================================================ FOOTER (organised, on-brand) */
.foot{background:var(--night);color:var(--on-night-soft);padding-block:clamp(3.5rem,6vw,5rem) 1.8rem}
.foot-top{display:grid;grid-template-columns:1.8fr 1fr 1.1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.foot-brand .logo{height:40px;width:auto;margin-bottom:1.2rem}
.foot-brand p{font-size:.92rem;color:var(--on-night-soft);line-height:1.75;max-width:38ch}
.foot-acnc{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.6rem}
.foot-acnc img{width:52px;height:52px;background:#fff;border-radius:10px;padding:4px;flex-shrink:0}
.foot-acnc span{font-size:.8rem;color:var(--on-night-soft);max-width:15ch;line-height:1.4}
.foot-col h4{font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1.15rem}
.foot-col nav{display:flex;flex-direction:column;gap:.7rem}
.foot-col a,.foot-col p{font-size:.94rem;color:var(--on-night-soft);line-height:1.5}
.foot-col nav a:hover{color:#fff}
.foot-col .email{color:#fff;font-weight:600;display:inline-block}
.foot-col .email:hover{color:var(--terracotta)}
.foot-col .welcome{margin-top:.75rem;font-size:.86rem;line-height:1.6;opacity:.85}
.foot-social{display:flex;flex-direction:column;gap:.7rem}
.foot-social a{display:inline-flex;align-items:center;gap:.6rem;color:var(--on-night-soft)}
.foot-social a svg{color:var(--terracotta);flex-shrink:0}
.foot-social a:hover{color:#fff}
.foot-contact{margin-top:1.2rem}
.foot-contact a{display:inline-flex;align-items:center;gap:.45rem;color:var(--terracotta);font-weight:600;font-size:.94rem}
.foot-contact a:hover .arrow{transform:translateX(3px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom p{font-size:.82rem;color:var(--on-night-soft);opacity:.7;margin:0}
.foot-bottom a{font-size:.82rem;color:var(--on-night-soft);opacity:.9}
.foot-bottom a:hover{color:#fff}
@media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr;gap:2rem}.foot-brand{grid-column:1 / -1}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

/* ---------- video: cinematic "play" panel (facade) ---------- */
.video-wrap{max-width:940px;margin:2.4rem auto 0}
.vwatch{margin-bottom:1rem}
.video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--night);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.video-facade:hover{transform:translateY(-4px)}
.vf-poster{width:100%;height:100%;object-fit:cover;display:block}
.vf-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,41,59,.12),rgba(18,41,59,.62));pointer-events:none}
.vf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(204,51,59,.7);transition:transform .22s var(--ease),background .22s;pointer-events:none}
.vf-play svg{margin-left:4px}
.video-facade:hover .vf-play,.video-facade:focus-visible .vf-play{transform:translate(-50%,-50%) scale(1.09);background:var(--accent-strong)}
.vf-meta{position:absolute;left:1.4rem;right:1.4rem;bottom:1.2rem;pointer-events:none}
.vf-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.25rem}
.vf-title{color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.2;text-shadow:0 2px 16px rgba(0,0,0,.6)}
/* mission video: navy cinematic section */
.video-feature{position:relative;background:var(--night);color:#fff;overflow:hidden}
.video-feature .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.video-feature .wrap{position:relative;z-index:2}
.video-feature h2{color:#fff}
.vfeat-head{max-width:60ch;margin-inline:auto;margin-bottom:2.2rem}
.vfeat-player{max-width:940px;margin:0 auto}
.prog .tagline{display:block;font-family:var(--sans);font-weight:600;color:var(--terracotta);font-size:1rem;margin-top:.3rem}

/* ============================================================ PAGE HEADER (interior) */
.page-header{position:relative;background:var(--night);color:#fff;overflow:hidden;padding-block:clamp(3.5rem,8vw,6rem)}
.page-header .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.page-header .trail{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55;pointer-events:none}
.page-header .inner{position:relative;z-index:2;max-width:62ch}
.page-header h1{color:#fff}
.page-header .ph-lead{color:var(--on-night-soft);margin-top:1rem}
.page-header .star-mark{display:inline-flex;color:var(--terracotta);margin-top:1.4rem}
@media (prefers-reduced-motion: no-preference){html.js .page-header .trail-line{stroke-dasharray:2200;stroke-dashoffset:2200;animation:trail-draw 2.2s var(--ease) forwards}}
/* Optional photo behind a page header. Same treatment as the Touchdown hero:
   the photo sits under the starfield and trail, with a navy gradient over it so
   the heading keeps its contrast. Heaviest on the left, where the words are. */
/* Our Story: the hero runs as two columns, with the photograph kept in its own
   portrait shape rather than stretched behind the words. A 736px-wide picture
   cannot fill a 1900px band without being upscaled, which is what made it look
   soft. Only this page opts in, through .ph-split. */
/* The figure is capped at 368px because the photograph is only 736px wide, and
   368 x 2 is exactly 736: at that size it is still sharp on a retina screen.
   Given a larger original the cap can rise with it. */
.ph-split .ph-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30vw,368px);gap:clamp(1.8rem,4vw,3.4rem);align-items:center;position:relative;z-index:2}
.ph-split .inner{max-width:56ch}
.ph-figure{position:relative}
.ph-figure .pic{box-shadow:var(--shadow-lg);object-position:50% 42%}
.phf-tag{position:absolute;left:-11%;bottom:-7%;background:var(--surface);color:var(--navy-800);border-radius:var(--r-card);padding:.85rem 1.1rem;box-shadow:var(--shadow-md);font-size:.85rem;line-height:1.45;max-width:15rem}
.phf-tag b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--accent)}
@media (max-width:900px){
  /* Headline first on a phone, picture under it: a page header should lead with
     its words. Square here so it stays compact, and 368 x 2 still covers it. */
  .ph-split .ph-grid{grid-template-columns:1fr;gap:2.2rem}
  .ph-split .inner{max-width:none}
  .ph-figure{max-width:368px}
  .ph-figure .pic{aspect-ratio:1/1}
  .phf-tag{left:auto;right:-4%;bottom:-7%;font-size:.8rem;padding:.7rem .95rem}
}
.page-header .ph-bg{position:absolute;inset:0;z-index:0}
.page-header .ph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.page-header .ph-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,41,59,.88) 0%,rgba(18,41,59,.8) 52%,rgba(18,41,59,.5) 80%,rgba(18,41,59,.3) 100%)}
@media (max-width:760px){
  .page-header .ph-bg::after{background:linear-gradient(180deg,rgba(18,41,59,.82) 0%,rgba(18,41,59,.86) 58%,rgba(18,41,59,.45) 100%)}
  .page-header .ph-bg img{object-position:50% 42%}
}
/* Per-photo overrides go BELOW the defaults above. They match on the same number
   of classes, so the later rule is the one that wins, not the more specific one. */
/* Coast: landscape, so the horizon sits in the upper third and the open water
   falls behind the words while the detailed edge stays clear of them. Sunlit
   water and surf are far brighter than the rainforest shot, and the end of the
   paragraph runs over the breaking waves, so it carries more cover across the
   text before opening up. */
.page-header .ph-bg-coast img{object-position:50% 30%}
.page-header .ph-bg-coast::after{
  background:linear-gradient(100deg,rgba(18,41,59,.9) 0%,rgba(18,41,59,.87) 56%,rgba(18,41,59,.56) 82%,rgba(18,41,59,.32) 100%)}
@media (max-width:760px){
  .page-header .ph-bg-coast img{object-position:50% 34%}
  .page-header .ph-bg-coast::after{
    background:linear-gradient(180deg,rgba(18,41,59,.85) 0%,rgba(18,41,59,.88) 60%,rgba(18,41,59,.5) 100%)}
}
/* Terracotta on navy is only 4.83:1, a whisker over the 4.5 minimum, so it is
   what caps how light the scrim can go. Over a photo the eyebrow takes a lighter
   tint of the same warm accent, which buys enough headroom for the photograph to
   actually be visible. Only applies where a photo is present. */
.page-header .ph-bg ~ .inner .eyebrow{color:var(--terracotta-lift)}

/* ============================================================ HERO (home) */
.hero{background:var(--bg);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;min-height:clamp(560px,82vh,780px);padding-block:clamp(2rem,5vw,3.5rem)}
.hero-copy{position:relative;z-index:2}
.hero h1,.hero .hero-h{font-family:var(--display);color:var(--text);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.01;letter-spacing:-.025em;text-wrap:balance;margin:0}
.hero h1 .accent,.hero .hero-h .accent{color:var(--accent)}
/* hero rotator */
.hero-rotor{display:grid}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.hero-slide.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s var(--ease)}
@media (prefers-reduced-motion: reduce){.hero-slide,.hero-slide.is-on{transition:none}}
.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1rem}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--terracotta)}
.eb-chip{font-size:.74rem;max-width:220px}
.eb-chip b{color:var(--accent)}
.hero-dots{display:flex;gap:.55rem;justify-content:center;padding-bottom:1.6rem}
.hd{width:10px;height:10px;border-radius:99px;border:0;padding:0;background:var(--border);cursor:pointer;transition:width .25s var(--ease),background .25s var(--ease)}
.hd.is-on{width:26px;background:var(--accent)}
.hd:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero .sub{margin-top:1.3rem;max-width:44ch}
.hero .cta{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.hero-figure{position:relative}
.hero-figure .ph{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;border-radius:var(--r-img);box-shadow:var(--shadow-lg);height:auto}
.hero-figure .ph.op-top{object-position:50% 12%}
.float-stat{position:absolute;left:-6%;bottom:8%;background:var(--night);color:#fff;border-radius:var(--r-card);padding:1rem 1.25rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.85rem;max-width:270px}
.float-stat .num{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;color:#fff}
.float-stat .lbl{font-size:.82rem;color:var(--on-night-soft);line-height:1.3}
.acnc-chip{position:absolute;right:-4%;top:7%;background:#fff;border-radius:12px;padding:.55rem .7rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;color:var(--navy-800);max-width:190px}
.acnc-chip img{width:38px;height:38px}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-figure{order:-1}.float-stat{left:3%}.acnc-chip{right:3%}}

/* ============================================================ PROGRAMS (home cards) */
.prog-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.6rem}
.prog-head h2{margin-top:.2rem}
.prog-head p{max-width:46ch;margin-top:.6rem}
.prog-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.2rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease);display:flex;flex-direction:column;gap:.7rem;min-height:240px}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card.feature{background:var(--night-2);border-color:transparent}
.card.feature :is(h3,.who){color:#fff}
.card.feature p{color:var(--on-night-soft)}
.card.feature .who{color:var(--terracotta)}
.card.feature .link-more{color:#fff}
.card.feature .ic{background:rgba(255,255,255,.12);color:#fff}
.card .ic{width:46px;height:46px;border-radius:11px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;margin-bottom:.3rem}
.card .who{font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--terracotta);text-transform:uppercase}
.card h3{color:var(--text)}
.card p{font-size:.98rem;color:var(--text-soft);flex:1}
@media (max-width:820px){.prog-grid{grid-template-columns:1fr}}

/* ============================================================ IMPACT band (home + page) */
.impact,.impact-band{position:relative;background:var(--night);color:#fff;overflow:hidden}
.impact .starfield,.impact-band .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.impact .wrap,.impact-band .wrap{position:relative;z-index:2}
.impact h2,.impact-band h2{color:#fff}
.impact .sub{color:var(--on-night-soft);max-width:52ch}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.impact-band .stat-grid{margin-top:0}
.stat{border-top:2px solid rgba(255,255,255,.16);padding-top:1.1rem}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.impact-band .stat .num{font-size:clamp(2.8rem,6vw,4.4rem)}
.stat .num .plus{color:var(--terracotta)}
.stat .lbl{margin-top:.5rem;color:#fff;font-weight:600;font-size:1.02rem;max-width:26ch}
.impact .stat .lbl{color:var(--on-night-soft);font-weight:400;font-size:.98rem}
.stat .ctx{margin-top:.5rem;color:var(--on-night-soft);font-size:.9rem;max-width:30ch}
.verify{margin-top:1.6rem;font-size:.82rem;color:var(--text-soft);font-style:italic}
.impact-band .verify{color:var(--on-night-soft)}
@media (max-width:720px){.stat-grid{grid-template-columns:1fr;gap:1.2rem}}

/* ============================================================ STORY (home) */
.story{background:var(--surface-2)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.story-img{border-radius:var(--r-img);box-shadow:var(--shadow-md);aspect-ratio:16/11;object-fit:cover;width:100%;height:auto}
.quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.35;color:var(--text);margin-top:.4rem}
.story .body{margin-top:1.3rem;color:var(--text-body);font-size:1.02rem}
.story .sig{margin-top:1.2rem;font-weight:600;color:var(--accent)}
.story-cta{margin-top:1.6rem}
@media (max-width:820px){.story-grid{grid-template-columns:1fr}.story-img{order:-1}}

/* ============================================================ TEAM */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-top:2.6rem;max-width:1000px;margin-inline:auto}
/* A short group would otherwise stretch its few cards across the whole row and
   dwarf the ones above it. Capping the track keeps every card the same size
   whichever group it sits in. */
/* Six cards across a five-wide row leave the sixth alone at the start of the
   second row, and grid cannot centre a part-filled row. Wrapping with flex
   centres each row instead, so a leftover card sits in the middle. The basis is
   the width a grid column worked out to, so the cards do not change size. */
.team-grid.tg-flow{display:flex;flex-wrap:wrap;justify-content:center}
.team-grid.tg-flow .person{flex:0 1 187px}
/* Flex wraps on the basis before it shrinks anything, so a 187px basis drops a
   phone to one card per row. Half the row, less the gap, keeps it at two. */
@media (max-width:560px){.team-grid.tg-flow .person{flex:0 1 calc(50% - .5rem)}}
.team-grid.tg-center{grid-template-columns:repeat(auto-fit,minmax(170px,200px));justify-content:center}
.person{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.4rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm)}
.person .avatar{width:66px;height:66px;border-radius:50%;margin:0 auto .8rem;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.4rem;color:#fff;background:var(--navy-800)}
/* A real photograph in place of the initials. The tinted background stays as
   the colour behind it while the picture loads. */
.person .avatar-photo{overflow:hidden;padding:0}
.person .avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.person:nth-child(3n) .avatar{background:var(--accent)}
.person:nth-child(3n + 2) .avatar{background:var(--terracotta)}
.person .nm{font-weight:700;color:var(--text);font-size:1rem}
.person .ro{font-size:.85rem;color:var(--text-soft)}
@media (max-width:820px){.team-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ DONATE block */
.give{background:var(--night-2);color:#fff}
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.give h2{color:#fff}
.give .sub{color:var(--on-night-soft);margin-top:.7rem;max-width:44ch}
.amounts{display:flex;gap:.7rem;margin-top:1.8rem;flex-wrap:wrap}
.amt{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:12px;padding:.9rem 1.1rem;min-width:120px;text-align:left;color:#fff;transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease)}
.amt:hover{transform:translateY(-2px)}
.amt.on{background:#fff;color:var(--navy-900);border-color:#fff}
.amt .a{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;display:block}
.amt .d{font-size:.76rem;opacity:.85;margin-top:.25rem;display:block}
.give-card{background:var(--night);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);padding:1.8rem;box-shadow:var(--shadow-lg)}
.give-card h3{color:#fff}
.gc-sub{color:var(--on-night-soft);font-size:.95rem;margin-top:.5rem}
.give-btn{width:100%;justify-content:center;margin-top:.9rem;color:#fff}
.trust-row{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:var(--on-night-soft)}
.trust-row img{width:52px;height:52px;background:#fff;border-radius:8px;padding:3px;flex-shrink:0}
@media (max-width:820px){.give-grid{grid-template-columns:1fr}}

/* ============================================================ OUR STORY page */
.narrative{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.narrative .quote2{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.35;color:var(--text)}
.narrative .prose p{margin-bottom:1.1rem;color:var(--text-body)}
.narrative .prose .sig{font-weight:600;color:var(--accent);margin-top:1.4rem}
@media (max-width:820px){.narrative{grid-template-columns:1fr}}
.name-band{background:var(--surface-2)}
.acro{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
.acro-item{display:flex;align-items:baseline;gap:.9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm)}
.acro .letter{font-family:var(--display);font-weight:800;font-size:1.8rem;color:var(--accent);line-height:1}
.acro .word{font-weight:600;color:var(--text)}
@media (max-width:700px){.acro{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split .img{border-radius:var(--r-img);box-shadow:var(--shadow-md);aspect-ratio:16/11;object-fit:cover;width:100%;height:auto}
.split .link-more{margin-top:1.3rem}
@media (max-width:820px){.split{grid-template-columns:1fr}.split .img{order:-1}}
/* Vision and mission. Two statements, given room to be read rather than
   dressed up: the words are short, so the type carries them. */
.vm-band{background:var(--surface-2)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem}
.vm{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-img);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-sm)}
.vm-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.15rem}
.vm-k{display:block;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.55rem}
/* One card leans terracotta, the other the red, so the pair reads as two ideas
   rather than the same card printed twice. */
.vm-vision .vm-ic{background:color-mix(in srgb,var(--terracotta) 14%,transparent);color:var(--terracotta)}
.vm-vision .vm-k{color:var(--terracotta)}
.vm-mission .vm-ic{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
.vm-mission .vm-k{color:var(--accent)}
.vm-t{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;color:var(--text);margin:0;text-wrap:balance}
@media (max-width:760px){.vm-grid{grid-template-columns:1fr;gap:1rem}}
.values-band{background:var(--night);color:#fff}
.values-band h2{color:#fff}
.values-band .lead{color:var(--on-night-soft)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.value{background:var(--night-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);padding:1.5rem}
.v-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.7rem}
.v-head .term{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff}
.v-head .gloss{font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--terracotta)}
.value p{color:var(--on-night-soft);font-size:.96rem}
@media (max-width:820px){.values-grid{grid-template-columns:1fr}}
.team-photo{width:100%;border-radius:var(--r-img);box-shadow:var(--shadow-md);margin:0 auto 2.4rem;max-width:1000px;aspect-ratio:16/9;object-fit:cover;height:auto}
/* Group headings above each team grid. The first sits tighter to the section
   intro; later ones need room to read as a fresh group. */
.team-cat{text-align:center;font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);margin:2.8rem 0 0}
.team-cat+.team-grid{margin-top:1.1rem}
.team-grid+.team-cat{margin-top:2.6rem}
.aiga-note{margin-top:1.6rem;font-size:.85rem;color:var(--text-soft);font-style:italic}
.cta-band{background:var(--surface-2)}

/* ============================================================ PROGRAMS page */
.prog-nav{position:sticky;top:70px;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.prog-nav ul{list-style:none;padding:0;margin:0;display:flex;gap:.5rem;flex-wrap:wrap;padding-block:.7rem}
.prog-nav a{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:var(--text);padding:.45rem .85rem;border-radius:var(--r-pill);border:1px solid var(--border);transition:border-color .2s,color .2s,background .2s}
.prog-nav a:hover,.prog-nav a:focus-visible{border-color:var(--accent);color:var(--accent)}
.prog{scroll-margin-top:130px}
.prog.alt{background:var(--surface-2)}
.prog-detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.prog .ic{width:54px;height:54px;border-radius:13px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;margin-bottom:1rem}
.prog.alt .ic{background:var(--surface)}
.prog .who{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--terracotta);display:block;margin-bottom:.4rem}
.prog .flag{display:inline-block;margin-top:.7rem;font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--accent);padding:.25rem .7rem;border-radius:var(--r-pill)}
.prog .blurb{margin-top:1rem;color:var(--text-body)}
.prog .detail p{margin-bottom:1.05rem;color:var(--text-body)}
.prog-cta{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
@media (max-width:820px){.prog-detail{grid-template-columns:1fr}}
.cta-dark{background:var(--night);color:#fff;text-align:center}
.cta-dark h2{color:#fff}
.cta-dark .lead{color:var(--on-night-soft);margin-inline:auto}
.cta-dark .btn-outline{color:#fff;border-color:rgba(255,255,255,.4)}
.cta-dark .btn-outline:hover{border-color:#fff}

/* ============================================================ IMPACT page extras */
.partner-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
.partner{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm);font-weight:600;color:var(--text)}
.partner .p-ic{color:var(--accent);display:inline-flex;flex-shrink:0}
@media (max-width:820px){.partner-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.partner-grid{grid-template-columns:1fr}}
.stories-band{background:var(--surface-2)}
.story-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.stories-sub{margin:2.8rem 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2vw,1.45rem);color:var(--text)}
.stories-sub.center{text-align:center}
.story-card{background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-card);padding:1.6rem}
/* A published review is real, so it gets a solid edge and a little lift. The
   dashed border stays on the placeholders, where it reads as "not yet filled". */
.story-card.is-real{border-style:solid;box-shadow:var(--shadow-sm)}
/* The quotes are different lengths, so without this the name sits wherever the
   text happens to stop and no two cards line up. Pushing it to the bottom of the
   card puts every name on the same line across the row. */
.story-cards{align-items:stretch}
.story-card{display:flex;flex-direction:column}
.story-card blockquote{margin:0}
.sc-who{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:1.25rem}
.sc-av{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.92rem;color:#fff;background:var(--navy-800)}
.story-card:nth-child(3n) .sc-av{background:var(--accent)}
.story-card:nth-child(3n + 2) .sc-av{background:var(--terracotta)}
/* The unnamed avatar keeps the same colour cycle as the rest. Greying it out
   would mark out the people who asked not to be named, which is the opposite of
   the point. Only the glyph differs. */
.sc-av-anon svg{opacity:.92}
.sc-who .attr{margin:0}
.story-card .badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);background:var(--surface-2);padding:.25rem .65rem;border-radius:var(--r-pill);margin-bottom:1rem}
.story-card blockquote{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.4;color:var(--text)}
.story-card .attr{margin-top:1rem;font-size:.88rem;font-weight:600;color:var(--text-soft)}
@media (max-width:820px){.story-cards{grid-template-columns:1fr}}
.cta-navy2{background:var(--night-2);color:#fff}
.cta-navy2 h2{color:#fff}
.cta-navy2 .lead{color:var(--on-night-soft);margin-inline:auto}
.cta-navy2 .btn-outline{color:#fff;border-color:rgba(255,255,255,.4)}
.cta-navy2 .btn-outline:hover{border-color:#fff}

/* ============================================================ GET INVOLVED page */
.paths-band{background:var(--surface-2)}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.path{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.path:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.path .p-ic{width:46px;height:46px;border-radius:11px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center}
.path .p-label{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--text)}
.path .p-text{color:var(--text-soft);font-size:.96rem;flex:1}
.path .p-more{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.path:hover .arrow{transform:translateX(4px)}
@media (max-width:820px){.path-grid{grid-template-columns:1fr}}
.gi-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.gi-split .body{margin:1rem 0 1.6rem;color:var(--text-body)}
.pill-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.8rem}
.pill-list li{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1rem 1.2rem;font-weight:600;color:var(--text);box-shadow:var(--shadow-sm)}
.pill-list svg{color:var(--accent);flex-shrink:0}
.partner-band{background:var(--surface-2)}
@media (max-width:820px){.gi-split{grid-template-columns:1fr}.partner-band .pill-list{order:1}}
.help-band{background:var(--night);color:#fff;scroll-margin-top:90px}
.help-inner{max-width:60ch}
.help-band h2{color:#fff}
.help-band .lead{color:var(--on-night-soft);margin-top:.8rem}
.help-actions{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.help-actions .btn-ghost-light{color:#fff}
.help-note{margin-top:1.6rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--sand-text)}
#volunteer,#partner{scroll-margin-top:90px}

/* ============================================================ CONTACT page */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;margin:1.6rem 0;display:flex;flex-direction:column;gap:1.2rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.c-ic{width:44px;height:44px;border-radius:11px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.c-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.2rem}
.c-value{font-weight:600;color:var(--text);font-size:1.05rem}
a.c-value:hover{color:var(--accent)}
.c-socials{margin-top:1.8rem}
.social-row{display:flex;gap:1.2rem;margin-top:.5rem}
.social-row a{font-weight:600;color:var(--accent)}
.social-row a:hover{text-decoration:underline}
.support-note{margin-top:2rem;padding:1.4rem 1.5rem;background:var(--surface-2);border-radius:var(--r-card);border:1px solid var(--border)}
.support-note p{margin:.4rem 0 1rem;color:var(--text-body);font-size:.96rem}
.form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-img);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow-md)}
.contact-form{margin-top:1.4rem}
.field{margin-bottom:1.1rem;display:flex;flex-direction:column}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.contact-form label{font-weight:600;font-size:.92rem;color:var(--text);margin-bottom:.4rem}
.contact-form .opt{font-weight:400;color:var(--text-soft)}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;color:var(--text-body);background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-card);padding:.75rem .9rem;width:100%;transition:border-color .18s,box-shadow .18s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.contact-form textarea{resize:vertical}
.submit{margin-top:.4rem}
.form-note{margin-top:1rem;font-size:.85rem;color:var(--text-soft)}
.hp{position:absolute;left:-5000px}

/* ============================================================ PRIVACY page */
.prose{max-width:70ch}
.prose h2{margin:2rem 0 .6rem;font-size:1.5rem}
.prose p{margin-bottom:1rem;color:var(--text-body)}
.prose a{color:var(--accent);font-weight:600}
.prose a:hover{text-decoration:underline}
.draft-note{background:var(--surface-2);border-left:3px solid var(--accent);padding:.9rem 1.1rem;border-radius:8px;font-size:.9rem;color:var(--text-soft);font-style:italic}

/* ============================================================ 404 page */
.lost{position:relative;background:var(--night);color:#fff;overflow:hidden;min-height:calc(100dvh - 70px);display:grid;place-items:center;padding-block:clamp(3rem,8vw,6rem);text-align:center}
.lost .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.lost .inner{position:relative;z-index:2;max-width:56ch}
.lost .mark{display:inline-flex;color:var(--terracotta);margin-bottom:1rem}
.lost .code{font-family:var(--display);font-weight:800;font-size:clamp(3rem,10vw,5rem);line-height:1;color:rgba(255,255,255,.25)}
.lost h1{color:#fff;margin-top:.4rem}
.lost .lead{color:var(--on-night-soft);margin:1rem auto 0}
.lost .cta{display:flex;gap:.9rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.lost .cta .btn-ghost-light{color:#fff}
.lost .quick{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12)}
.lost .quick a{color:var(--sand-text);font-weight:600;font-size:.92rem}
.lost .quick a:hover{color:#fff}

/* ============================================================ TOUCHDOWN PROGRAM PAGE */
.td-hero{position:relative;min-height:clamp(560px,78vh,740px);display:flex;align-items:center;background:var(--night);color:#fff;overflow:hidden}
.td-hero-bg{position:absolute;inset:0;z-index:0}
.td-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.td-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,41,59,.97) 0%,rgba(18,41,59,.93) 40%,rgba(18,41,59,.66) 76%,rgba(18,41,59,.42) 100%)}
.td-hero .wrap{position:relative;z-index:2;width:100%}
.td-hero-inner{max-width:640px;padding-block:clamp(3rem,7vw,4.5rem)}
.td-badge{display:inline-flex;align-items:center;gap:.55rem;background:rgba(217,122,58,.18);border:1px solid rgba(217,122,58,.55);color:var(--terracotta);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:.44rem .95rem;border-radius:var(--r-pill);margin-bottom:1.4rem}
.td-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta);box-shadow:0 0 0 4px rgba(217,122,58,.25);animation:tdpulse 2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.td-badge .dot{animation:none}}
@keyframes tdpulse{0%,100%{box-shadow:0 0 0 4px rgba(217,122,58,.25)}50%{box-shadow:0 0 0 8px rgba(217,122,58,.05)}}
.td-hero h1{color:#fff;font-size:clamp(3.3rem,9vw,6rem);line-height:.94;letter-spacing:-.03em}
.td-hero .td-sub{font-family:var(--sans);font-weight:600;font-size:clamp(1.2rem,2.1vw,1.65rem);color:#fff;margin-top:1rem;line-height:1.3;max-width:24ch}
.td-wins{list-style:none;padding:0;display:flex;gap:1.1rem 1.6rem;flex-wrap:wrap;margin-top:1.6rem}
.td-wins li{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:var(--sand-text);font-size:1rem}
.td-wins li svg{color:var(--terracotta);flex-shrink:0}
.td-hero-cta{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.td-risk{margin-top:1.15rem;font-size:.9rem;color:var(--on-night-soft)}
@media (max-width:600px){.td-wins li{font-size:.94rem}}

/* offer / value stack */
.td-offer{background:var(--surface-2)}
.td-offer-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:1.4rem;margin-top:2.6rem;align-items:stretch}
.td-offer-stack{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-img);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-md)}
.td-stack{list-style:none;padding:0;margin:0}
.td-stack li{display:flex;align-items:flex-start;gap:.85rem;padding:.72rem 0;border-bottom:1px solid var(--border)}
.td-stack li:last-of-type{border-bottom:none}
.td-stack .ic{width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.td-stack .tx{flex:1;min-width:0}
.td-stack .tx b{display:block;color:var(--text);font-size:.97rem;font-weight:700;line-height:1.3}
.td-stack .tx p{margin:.18rem 0 0;font-size:.84rem;color:var(--text-soft);line-height:1.45}
.td-stack li.bonus{background:color-mix(in srgb,var(--terracotta) 9%,transparent);border:1px solid color-mix(in srgb,var(--terracotta) 32%,transparent);border-radius:12px;padding:.72rem .85rem;margin-top:.6rem}
.td-offer-cta{background:var(--night);color:#fff;border-radius:var(--r-img);padding:clamp(1.6rem,3vw,2.1rem);box-shadow:var(--shadow-md);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1.15rem;position:relative;overflow:hidden}
.td-offer-cta .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.td-offer-cta>*{position:relative;z-index:2}
.oc-chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta)}
.oc-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta)}
.oc-mid{align-self:stretch}
.oc-lead{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:1.12;color:#fff;margin:0}
.oc-sub{margin:.9rem 0 1.4rem;font-size:.95rem;color:var(--on-night-soft);line-height:1.6;max-width:30ch}
.td-offer-cta .btn{align-self:stretch;justify-content:center;width:100%}
.td-risk-2{margin:0;font-size:.85rem;color:var(--on-night-soft);line-height:1.5;display:flex;gap:.55rem;align-items:flex-start;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);align-self:stretch}
.td-risk-2 svg{flex-shrink:0;margin-top:.1rem;color:var(--terracotta)}
.td-offer-fine{margin:.8rem 0 0;font-size:.76rem;color:var(--text-soft);font-style:italic}
@media (max-width:840px){.td-offer-wrap{grid-template-columns:1fr}}

.td-facts{background:var(--night-2);color:#fff}
.td-facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:1.7rem}
.td-fact .k{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--terracotta);display:block;margin-bottom:.25rem}
.td-fact .v{font-weight:600;font-size:1.02rem}
.td-fact .tbc{font-size:.72rem;color:var(--on-night-soft);font-style:italic}
@media (max-width:720px){.td-facts .wrap{grid-template-columns:1fr 1fr;gap:1.2rem}}

.td-intro-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.4;color:var(--text);max-width:24ch}
.td-intro-body p{color:var(--text-body);margin-bottom:1.1rem}
.td-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:820px){.td-split{grid-template-columns:1fr}}

.td-pillars{background:var(--surface-2)}
.td-temple-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;margin-top:2.6rem}
.td-temple-rows{display:flex;flex-direction:column;gap:1.1rem}
.tp-row{display:flex;align-items:center;gap:.9rem}
.tp-pill{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:.95rem 1.35rem;box-shadow:var(--shadow-sm)}
.tp-pill b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--text)}
.tp-pill p{margin:.2rem 0 0;font-size:.84rem;line-height:1.5;color:var(--text-soft)}
.tp-num{width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--accent);border:3px solid var(--accent);flex-shrink:0;box-shadow:var(--shadow-sm)}
.td-temple{max-width:400px;margin-inline:auto;width:100%}
.td-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.td-value{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.6rem 1.2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}
.td-value .vic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:.2rem}
.td-value .vic.clay{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.td-value .vic.terra{background:color-mix(in srgb,var(--terracotta) 14%,transparent);color:var(--terracotta)}
.td-value .vic.ocean{background:color-mix(in srgb,var(--ocean) 14%,transparent);color:var(--ocean)}
.td-value b{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--text)}
.td-value .vl{font-size:.85rem;color:var(--text-soft)}
@media (max-width:820px){.td-pillars-grid{grid-template-columns:1fr}.td-values{grid-template-columns:1fr}}

.td-snap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
.td-snap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;gap:1rem;align-items:flex-start}
.td-snap .ic{width:44px;height:44px;border-radius:11px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.td-snap .k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.25rem}
.td-snap .v{font-weight:600;color:var(--text);line-height:1.35;font-size:.98rem}
@media (max-width:820px){.td-snap-grid{grid-template-columns:1fr}}

.td-snap-band{background:var(--surface-2)}
.td-ov-pic{margin-top:1.9rem}
.td-enrol-pic{margin-top:1.8rem}
.td-rhythm-band{background:var(--surface-2)}
.td-rhythm-flow{display:flex;gap:5px;margin-top:2.6rem;align-items:stretch}
.rf-seg{flex:var(--w);display:flex;flex-direction:column;min-width:0}
.rf-time{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--accent);margin-bottom:.5rem;white-space:nowrap}
.rf-bar{display:block;height:16px;background:var(--navy-800)}
.rf-seg:first-child .rf-bar{border-radius:99px 0 0 99px}
.rf-seg.last .rf-bar{border-radius:0 99px 99px 0;background:var(--terracotta)}
.rf-label{font-size:.85rem;color:var(--text-soft);line-height:1.4;margin-top:.55rem;padding-right:.5rem}
.rf-note{text-align:center;margin-top:1.8rem;color:var(--text-soft);font-size:.95rem}
@media (max-width:720px){
  .td-rhythm-flow{flex-direction:column;gap:.9rem}
  .rf-seg{display:grid;grid-template-columns:76px 16px 1fr;align-items:center;gap:.8rem}
  .rf-time{margin:0}
  .rf-bar{height:100%;min-height:44px;border-radius:0}
  .rf-seg:first-child .rf-bar{border-radius:99px 99px 0 0}
  .rf-seg.last .rf-bar{border-radius:0 0 99px 99px}
  .rf-label{margin:0;padding:0}
}

.td-weeks{background:var(--night);color:#fff;position:relative;overflow:hidden}
.td-weeks .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.td-weeks .wrap{position:relative;z-index:2}
.td-weeks h2,.td-weeks .section-head h2{color:#fff}
.td-tl{margin-top:2.8rem}
.td-prog-cta{display:flex;justify-content:center;gap:.9rem;margin-top:1.6rem;position:relative;z-index:2;flex-wrap:wrap}
.td-prog-price{display:flex;justify-content:center;gap:1rem;margin-top:2.6rem;position:relative;z-index:2;flex-wrap:wrap}
.tpp{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);padding:1.1rem 1.7rem;text-align:center;min-width:220px}
.tpp .k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta)}
.tpp .v{display:block;font-family:var(--display);font-weight:800;font-size:1.65rem;color:#fff;margin-top:.25rem}
.tpp .s{display:block;font-size:.78rem;color:var(--on-night-soft);margin-top:.15rem}
.td-tl-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;font-size:.86rem;font-weight:600;color:var(--sand-text);margin:0 0 1.7rem}
.td-tl-hint svg{color:var(--terracotta);flex-shrink:0}
.td-tl-track{display:flex;justify-content:space-between;position:relative;gap:.3rem}
.td-tl-track::before{content:'';position:absolute;left:4%;right:4%;top:16px;height:2px;background:linear-gradient(90deg,var(--terracotta),var(--ocean));opacity:.55}
.td-tl-stop{position:relative;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.55rem;flex:1;min-width:0;padding:0;font:inherit}
.td-tl-stop .n{width:32px;height:32px;border-radius:50%;background:var(--night);border:2px solid var(--terracotta);color:var(--terracotta);font-family:var(--display);font-weight:800;font-size:.8rem;display:grid;place-items:center;box-shadow:0 0 0 4px var(--night);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.td-tl-stop .t{font-size:.7rem;line-height:1.3;color:var(--on-night-soft);text-align:center;max-width:12ch}
.td-tl-stop:hover .n{transform:scale(1.12)}
.td-tl-stop:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:8px}
.td-tl-stop.is-active .n{background:var(--terracotta);color:var(--navy-900)}
.td-tl-stop.is-active .t{color:#fff;font-weight:600}
.td-tl-stop.final .n{border-color:var(--ocean);color:var(--ocean)}
.td-tl-stop.final.is-active .n{background:var(--ocean);color:#fff}
@media (prefers-reduced-motion: no-preference){
  .td-tl-stop:not(.is-active) .n{animation:tl-pulse 3.2s var(--ease) infinite}
  .td-tl-stop:nth-child(odd):not(.is-active) .n{animation-delay:1.6s}
}
@keyframes tl-pulse{0%,70%,100%{box-shadow:0 0 0 4px var(--night),0 0 0 4px rgba(217,122,58,0)}35%{box-shadow:0 0 0 4px var(--night),0 0 0 9px rgba(217,122,58,.28)}}
.td-tl-pane{position:relative;margin:2.4rem 0 0;max-width:620px;background:rgba(255,255,255,.08);border:2px solid rgba(217,122,58,.55);border-radius:var(--r-card);padding:1.5rem 1.7rem;text-align:center;box-shadow:0 10px 34px -14px rgba(0,0,0,.55)}
.td-tl-pane::before{content:'';position:absolute;top:-13px;left:var(--tail-x,50%);width:24px;height:24px;background:#253A4B;border-left:2px solid rgba(217,122,58,.55);border-top:2px solid rgba(217,122,58,.55);transform:translateX(-50%) rotate(45deg)}
.td-tl-pane::after{content:'';position:absolute;top:2px;left:var(--tail-x,50%);transform:translateX(-50%);width:34px;height:16px;background:#253A4B}
@media (prefers-reduced-motion: no-preference){
  .td-tl-pane{animation:pane-pop .28s var(--ease)}
  @keyframes pane-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
}
.td-tl-pane .wk{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--terracotta)}
.td-tl-pane h3{color:#fff;margin:.15rem 0 .45rem}
.td-tl-pane p{color:var(--on-night-soft);font-size:.95rem;line-height:1.6}
.td-tl-pane .foc{display:inline-block;margin-top:.7rem;font-size:.74rem;font-weight:600;color:var(--sand-text);background:rgba(255,255,255,.09);border-radius:var(--r-pill);padding:.22rem .75rem}
.no-js .td-tl-pane[hidden]{display:block}
@media (prefers-reduced-motion: reduce){.td-tl-stop .n{transition:none}.td-tl-stop:hover .n{transform:none}}
@media (max-width:760px){
  .td-tl-track{overflow-x:auto;justify-content:flex-start;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
  .td-tl-stop{flex:0 0 auto;min-width:80px}
  .td-tl-track::before{left:40px;right:40px}
}

.td-rsvp{background:var(--surface-2)}
.td-rsvp-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.td-rsvp .what li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.8rem;color:var(--text-body)}
.td-rsvp .what li svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.td-rsvp .what{list-style:none;padding:0;margin:1.4rem 0}
.td-rsvp .detail-strip{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.td-rsvp .detail-strip .d .k{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);display:block}
.td-rsvp .detail-strip .d .v{font-weight:700;color:var(--text)}
.td-rsvp .detail-strip .d .tbc{font-weight:600;color:var(--accent);font-style:italic}
@media (max-width:820px){.td-rsvp-grid{grid-template-columns:1fr}}

/* ============================================================ TOUCHDOWN: interactive components */
/* countdown band */
.td-countdown{background:var(--night-2);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.cd-wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;padding-block:1.7rem}
.cd-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.65rem}
.cd-clock{display:flex;align-items:flex-start;gap:.5rem}
.cd-unit{background:var(--night);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.55rem .8rem;min-width:66px;text-align:center}
.cd-num{display:block;font-family:var(--display);font-weight:800;font-size:1.95rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cd-lab{display:block;font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-soft);margin-top:.35rem}
.cd-sep{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--terracotta);margin-top:.35rem}
.td-countdown .btn{color:#fff}
@media (max-width:640px){.cd-wrap{justify-content:center;text-align:center}.cd-copy{width:100%}.cd-num{font-size:1.55rem}.cd-unit{min-width:56px}}

/* values marquee */
.td-marquee{background:var(--night);color:#fff;overflow:hidden;padding-block:1.05rem;border-block:1px solid rgba(255,255,255,.08)}
.mq-track{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;animation:mq 104s linear infinite}
.mq-track span{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--sand-text);letter-spacing:.01em}
.mq-track i{color:var(--terracotta);font-style:normal;font-size:1rem;align-self:center}
@media (prefers-reduced-motion: reduce){.mq-track{animation:none}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* drive-to-the-endzone meter (weeks header) */
.drive-meter{margin-top:2.6rem;margin-bottom:.5rem}
.dm-track{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.13);margin:0 26px}
.dm-track::before{content:'';position:absolute;inset:0;border-radius:99px;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),rgba(255,255,255,.28) calc(10% - 2px),rgba(255,255,255,.28) 10%)}
.dm-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--terracotta),var(--ocean));box-shadow:0 0 18px -2px rgba(73,150,206,.6)}
.dm-endzone{position:absolute;right:-26px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--ocean);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 5px var(--night)}
.dm-start{position:absolute;left:-26px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--terracotta);display:grid;place-items:center;color:var(--navy-900);box-shadow:0 0 0 5px var(--night)}
.dm-labels{display:flex;justify-content:space-between;margin-top:1rem;font-size:.82rem;color:var(--on-night-soft);font-weight:600}
.dm-labels b{color:#fff}
@media (prefers-reduced-motion: no-preference){
  html.js .dm-fill{width:9%;transition:width 1.7s var(--ease)}
  html.js .drive-meter.in .dm-fill{width:100%}
}

/* sticky RSVP bar */
.td-sticky{position:fixed;left:0;right:0;bottom:0;z-index:45;background:color-mix(in srgb,var(--night) 95%,transparent);backdrop-filter:saturate(140%) blur(10px);border-top:1px solid rgba(255,255,255,.14);color:#fff;transform:translateY(115%);transition:transform .35s var(--ease);box-shadow:0 -12px 34px -14px rgba(0,0,0,.55)}
.td-sticky.show{transform:translateY(0)}
.ts-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.ts-left strong{font-family:var(--display);font-weight:800;color:#fff;font-size:1.05rem}
.ts-left span{color:var(--on-night-soft);font-size:.9rem;margin-left:.5rem}
.ts-cta{display:flex;align-items:center;gap:1rem}
.ts-mini{font-variant-numeric:tabular-nums;font-weight:700;color:var(--terracotta);font-size:.95rem}
.td-sticky .btn{color:#fff}
@media (prefers-reduced-motion: reduce){.td-sticky{transition:none}}
@media (max-width:560px){.ts-left span,.ts-mini{display:none}}

/* ============================================================ TOUCHDOWN: payment / enrol */
.td-enrol{background:var(--surface-2)}
.td-enrol-grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.td-enrol .what{list-style:none;padding:0;margin:1.4rem 0}
.td-enrol .what li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.8rem;color:var(--text-body)}
.td-enrol .what li svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.td-enrol .detail-strip{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.td-enrol .detail-strip .d .k{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);display:block}
.td-enrol .detail-strip .d .v{font-weight:700;color:var(--text)}
.td-price-card{background:var(--night);color:#fff;border-radius:var(--r-img);padding:clamp(1.8rem,3vw,2.4rem);box-shadow:var(--shadow-lg);position:relative;overflow:hidden;text-align:center}
.td-price-card .starfield{position:absolute;inset:0;z-index:0;pointer-events:none}
.td-price-card>*{position:relative;z-index:1}
.pc-badge{display:inline-block;background:var(--terracotta);color:var(--navy-900);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.38rem .95rem;border-radius:var(--r-pill);margin-bottom:1.2rem}
.pc-price{display:flex;align-items:baseline;justify-content:center;gap:.5rem}
.pc-was{color:var(--on-night-soft);text-decoration:line-through;font-weight:600;font-size:1.2rem}
.pc-amt{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,4.3rem);line-height:1;color:#fff}
.pc-per{color:var(--on-night-soft);font-weight:600}
.pc-note{color:var(--on-night-soft);font-size:.9rem;margin:.75rem auto 1.5rem;max-width:32ch}
.pc-btn{width:100%;justify-content:center;color:#fff;font-size:1.05rem;padding-block:1rem}
.pc-paypal{position:relative;z-index:2;margin-top:.4rem;min-height:0}
.pc-paypal:not(:empty){margin-bottom:.4rem}
.pp-done{background:rgba(255,255,255,.08);border:1px solid rgba(217,122,58,.5);border-radius:var(--r-card);padding:1.1rem 1.2rem;font-size:.95rem;color:var(--on-night-soft);line-height:1.55}
.pp-done b{color:#fff;display:block;margin-bottom:.2rem}
.pc-sub{margin-top:.8rem;font-size:.82rem;color:var(--on-night-soft)}
.pc-trust{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:var(--on-night-soft)}
.pc-trust img{width:34px;height:34px;background:#fff;border-radius:7px;padding:2px;flex-shrink:0}
@media (max-width:820px){.td-enrol-grid{grid-template-columns:1fr}}

/* touchdown overview (item 1: broken-up, scannable) */
.td-overview{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.td-ov-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.5;color:var(--text-soft);margin-top:1.5rem;max-width:34ch;padding-left:1.1rem;border-left:3px solid var(--terracotta)}
.td-ov-points{display:grid;gap:1.1rem}
.td-ov-point{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.25rem 1.4rem;box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.td-ov-point:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.td-ov-point .ic{width:44px;height:44px;border-radius:11px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.td-ov-point b{display:block;color:var(--text);font-size:1.05rem;margin-bottom:.2rem}
.td-ov-point p{color:var(--text-soft);font-size:.95rem;line-height:1.5;margin:0}
@media (max-width:820px){.td-overview{grid-template-columns:1fr}}

/* ============================================================ TOUCHDOWN: offer to 10/10 */
/* value-anchored stack */
.td-stack .val{font-family:var(--display);font-weight:800;color:var(--accent);font-size:.98rem;white-space:nowrap}
.td-stack li.bonus .ic{background:color-mix(in srgb,var(--terracotta) 16%,transparent);color:var(--terracotta)}
.td-stack li.bonus b{color:var(--terracotta)}
.td-stack li.bonus .val{color:var(--terracotta)}
.td-tag{display:inline-block;font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--terracotta);background:color-mix(in srgb,var(--terracotta) 12%,transparent);padding:.12rem .42rem;border-radius:var(--r-pill);margin-left:.35rem;vertical-align:middle}
.td-total{margin-top:1rem;padding-top:1rem;border-top:2px dashed var(--border);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.td-total .tv{color:var(--text-soft);font-weight:600;font-size:.92rem}
.td-total .tv s{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--text-soft);text-decoration-color:var(--accent);text-decoration-thickness:2.5px;margin-left:.15rem}
.td-total .pay{text-align:right}
.td-total .pay .p{font-family:var(--display);font-weight:800;color:var(--accent);font-size:1.8rem;line-height:1}
.td-total .pay .l{display:block;font-size:.74rem;color:var(--text-soft)}

/* guarantee strip (slim) */
/* Touchdown enrolment form, shown inside the price card in place of the price */
[hidden]{display:none!important}
.no-js .td-tl-pane[hidden]{display:block!important}
.pc-form{text-align:left}
@media (prefers-reduced-motion: no-preference){.pc-form,.pc-face{animation:pcf-in .28s var(--ease)}@keyframes pcf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
.pcf-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.pcf-back{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:var(--on-night-soft);font:inherit;font-size:.8rem;font-weight:600;padding:.35rem .8rem .35rem .6rem;border-radius:var(--r-pill);cursor:pointer;transition:background .18s,color .18s}
.pcf-back:hover{background:rgba(255,255,255,.16);color:#fff}
.pcf-kicker{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta)}
.pcf-title{margin:0 0 .9rem;font-size:clamp(1.3rem,2.4vw,1.6rem);color:#fff}
.pcf-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:.5rem}
.pcf-fill{display:block;height:100%;width:100%;transform:scaleX(.3334);transform-origin:left center;background:var(--terracotta);border-radius:99px;transition:transform .3s var(--ease)}
@media (prefers-reduced-motion: reduce){.pcf-fill{transition:none}}
.pcf-stepline{display:flex;gap:.5rem;align-items:baseline;font-size:.82rem;color:var(--on-night-soft);margin:0 0 1.2rem}
.pcf-stepline b{color:#fff}
.pcf-fields .field{margin-bottom:.9rem}
.pcf-fields label{font-weight:600;font-size:.85rem;color:#fff;margin-bottom:.35rem}
.pcf-fields .opt{font-weight:400;color:var(--on-night-soft)}
.pcf-fields input,.pcf-fields select,.pcf-fields textarea{font:inherit;font-size:.95rem;color:#fff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r-card);padding:.68rem .85rem;width:100%;transition:border-color .18s,box-shadow .18s,background .18s}
.pcf-fields input::placeholder,.pcf-fields textarea::placeholder{color:rgba(255,255,255,.42)}
.pcf-fields select option{color:var(--text);background:var(--surface)}
.pcf-fields input:focus,.pcf-fields select:focus,.pcf-fields textarea:focus{outline:none;background:rgba(255,255,255,.12);border-color:var(--terracotta);box-shadow:0 0 0 3px color-mix(in srgb,var(--terracotta) 28%,transparent)}
.pcf-fields textarea{resize:vertical}
.pcf-fields input.bad,.pcf-fields select.bad,.pcf-fields textarea.bad{border-color:var(--terracotta)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--terracotta) 22%,transparent)}
.pcf-fields .checks{margin:.2rem 0 0}
.pcf-fields .check{color:var(--on-night-soft);font-size:.84rem}
.pcf-fields .check input{width:auto;flex-shrink:0}
.pcf-fields .check a{color:var(--terracotta-lift);text-decoration:underline;text-underline-offset:2px}
.pcf-player{position:relative;padding-top:.2rem}
.pcf-player+.pcf-player{margin-top:.4rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
.pcf-player-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.pcf-player-head b{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta)}
.pcf-rm{background:none;border:0;padding:0;font:inherit;font-size:.78rem;font-weight:600;color:var(--on-night-soft);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pcf-rm:hover{color:#fff}
.pcf-add{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.07);border:1.5px dashed rgba(255,255,255,.28);color:#fff;font:inherit;font-size:.85rem;font-weight:600;padding:.6rem 1rem;border-radius:var(--r-card);cursor:pointer;width:100%;justify-content:center;margin:.3rem 0 1rem;transition:background .18s,border-color .18s}
.pcf-add:hover{background:rgba(255,255,255,.13);border-color:var(--terracotta)}
.pcf-max{font-size:.8rem;color:var(--on-night-soft);margin:.3rem 0 1rem;text-align:center}
.pcf-summary{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);padding:.9rem 1.05rem;margin-bottom:1.1rem}
.pcf-sum-row{display:flex;justify-content:space-between;gap:1rem;font-size:.87rem;color:var(--on-night-soft);padding:.22rem 0}
.pcf-sum-row b{color:#fff;font-weight:600;text-align:right}
.pcf-prices{margin-top:.8rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.14)}
.pcf-price-row{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--on-night-soft);padding:.2rem 0}
.pcf-price-row b{font-weight:700;color:var(--terracotta-lift);font-size:.76rem;letter-spacing:.03em;text-transform:uppercase}
.pcf-price-row.is-free{color:#fff}
.pcf-price-row.is-free b{color:var(--terracotta-lift)}
.pcf-saved{margin:.6rem 0 0;font-size:.82rem;font-weight:700;color:var(--terracotta-lift);text-align:right}
.pcf-sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem;color:var(--on-night-soft)}
.pcf-sum-total b{font-family:var(--display);font-weight:800;color:var(--terracotta-lift);font-size:1.25rem;white-space:nowrap}
.pcf-err{color:var(--terracotta-lift);font-weight:600;font-size:.85rem;margin:.9rem 0 0}
.pcf-nav{display:flex;gap:.7rem;margin-top:1.2rem}
.pcf-nav .btn{flex:1;justify-content:center;color:#fff}
.pcf-nav .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.pcf-ghost{flex:0 0 auto;border-color:rgba(255,255,255,.32)}
.pcf-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* Stripe paints its own surface in here, on white, so the card gives it a light
   panel to sit on rather than trying to tint it. */
.pcf-pay{background:#fff;border-radius:var(--r-card);padding:.5rem;margin-top:.4rem;min-height:120px}
.pcf-pay:empty{display:none}
.pcf-back-pay{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;background:none;border:0;padding:0;font:inherit;font-size:.82rem;font-weight:600;color:var(--on-night-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pcf-back-pay:hover{color:#fff}
.pcf-done{background:rgba(255,255,255,.08);border:1px solid rgba(217,122,58,.5);border-radius:var(--r-card);padding:1.1rem 1.2rem;font-size:.92rem;line-height:1.6;color:var(--on-night-soft)}
.pcf-done b{display:block;color:#fff;margin-bottom:.25rem}
.pcf-done a{color:var(--terracotta-lift);text-decoration:underline;text-underline-offset:2px}
.pcf-sub{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:var(--on-night-soft);text-align:center}
.pc-return{position:relative;z-index:2;margin-top:1rem;background:rgba(255,255,255,.08);border:1px solid rgba(217,122,58,.5);border-radius:var(--r-card);padding:1rem 1.1rem;font-size:.9rem;color:var(--on-night-soft);line-height:1.55;text-align:left}
.pc-return b{color:#fff}
.pc-next{display:block;margin:.7rem 0 .9rem}
.pc-next-btn{width:100%;justify-content:center;color:#fff}
.pc-later{display:block;margin-top:.8rem;font-size:.82rem;line-height:1.6;color:var(--on-night-soft)}
.pc-later b{color:#fff;font-weight:700}
.pc-again{display:inline-block;margin-top:1rem;font-size:.82rem;font-weight:600;color:var(--terracotta-lift);text-decoration:underline;text-underline-offset:3px}
.pc-again:hover{color:#fff}

/* Anchor targets clear the sticky header when jumped to */
[id]{scroll-margin-top:96px}

/* ============================================================ REVIEW form */
/* The form is the whole point of this page, so it starts close under the
   heading rather than a full section's padding below it. */
.rv-section{padding-block-start:clamp(1.8rem,3.5vw,3rem)}
.rv-wrap{max-width:680px;margin-inline:auto}
.field-hint{margin:.4rem 0 0;font-size:.82rem;color:var(--text-soft);line-height:1.5}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv-rate{border:0;padding:0;margin:0 0 1.1rem;min-inline-size:0}
.rv-rate legend{padding:0;font-weight:600;font-size:.92rem;color:var(--text);margin-bottom:.4rem}
/* Laid out in reverse so a plain CSS sibling selector can light up the chosen
   star and every star before it, without any JavaScript. */
.rv-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.25rem}
.rv-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rv-stars label{width:38px;height:38px;cursor:pointer;color:var(--border);display:grid;place-items:center;border-radius:8px;
  background:currentColor;-webkit-mask:var(--star) center/26px 26px no-repeat;mask:var(--star) center/26px 26px no-repeat;
  transition:color .15s var(--ease),transform .15s var(--ease)}
.rv-stars label:hover,.rv-stars label:hover ~ label,
.rv-stars input:checked,.rv-stars input:checked ~ label{color:var(--terracotta)}
.rv-stars input:checked + label,.rv-stars input:checked + label ~ label{color:var(--terracotta)}
.rv-stars label:hover{transform:scale(1.08)}
.rv-stars input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px}
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion: reduce){.rv-stars label{transition:none}.rv-stars label:hover{transform:none}}

/* Contact form thank-you (shown in place of the form after sending) */
.form-thanks{text-align:center;padding:2rem 0 1rem}
.form-thanks .ft-badge{width:58px;height:58px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:inline-grid;place-items:center;margin-bottom:1.1rem}
.form-thanks h2{margin:0 0 .6rem}
.form-thanks p{color:var(--text-soft);max-width:40ch;margin:0 auto 1.6rem;line-height:1.65}

/* Contact form consent checkboxes */
.checks{display:flex;flex-direction:column;gap:.6rem;margin:.2rem 0 .4rem}
.check{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--text-soft);line-height:1.5;cursor:pointer}
.check input{width:17px;height:17px;margin-top:.15rem;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.check a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Inline video playback (facade swaps to iframe on click) */
.video-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Touchdown feature block (programs page) */
.td-feature-band{padding-top:clamp(2.5rem,5vw,4rem)}
.td-feature{background:var(--night);color:#fff;position:relative;overflow:hidden;border-radius:var(--r-img);padding:clamp(1.8rem,4vw,3.2rem);box-shadow:var(--shadow-lg)}
.td-feature .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.td-feature .tdf-grid{position:relative;z-index:2}
.tdf-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.tdf-chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1rem}
.tdf-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--terracotta)}
.td-feature h2{color:#fff;margin:0}
.tdf-tagline{display:block;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--sand-text);margin:.35rem 0 1rem}
.tdf-body{color:var(--on-night-soft);line-height:1.7;max-width:52ch}
.tdf-list{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:flex;flex-direction:column;gap:.55rem}
.tdf-list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--sand-text);font-weight:600;font-size:.95rem;line-height:1.45}
.tdf-list svg{color:var(--terracotta);flex-shrink:0;margin-top:.15rem}
.tdf-card{background:var(--surface);color:var(--text);border-radius:var(--r-img);padding:1.7rem;box-shadow:var(--shadow-lg)}
.tdf-eb{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--terracotta);background:color-mix(in srgb,var(--terracotta) 12%,transparent);padding:.28rem .65rem;border-radius:var(--r-pill);margin-bottom:.8rem}
.tdf-price{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.7rem;flex-wrap:wrap}
.tdf-price .p{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;color:var(--accent)}
.tdf-price .was{color:var(--text-soft);text-decoration:line-through;font-weight:600}
.tdf-price .per{font-size:.8rem;color:var(--text-soft)}
.tdf-card .row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.tdf-card .row:last-of-type{border-bottom:none}
.tdf-card .k{color:var(--text-soft)}
.tdf-card .v{font-weight:700;color:var(--text);text-align:right}
.tdf-btn{width:100%;justify-content:center;margin-top:1.1rem}
@media (max-width:860px){.tdf-grid{grid-template-columns:1fr}}

/* Touchdown top banner (all pages except touchdown.html) */
.td-topbar{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap;background:var(--night);color:#fff;padding:.65rem 1.2rem;text-decoration:none;position:sticky;top:70px;z-index:38}
.td-topbar .tb-left{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--on-night-soft)}
.td-topbar .tb-left::before{content:'';width:11px;height:11px;border-radius:50%;background:#E0343E;flex-shrink:0}
@media (prefers-reduced-motion: no-preference){
  .td-topbar .tb-left::before{animation:tb-blink 1.2s steps(1) infinite,tb-ping 1.2s cubic-bezier(0,0,.2,1) infinite}
  .td-topbar .ts-mini{animation:tb-blink 1.2s steps(1) infinite}
}
@keyframes tb-blink{0%,49%{opacity:1}50%,99%{opacity:.2}100%{opacity:1}}
@keyframes tb-ping{0%{box-shadow:0 0 8px rgba(224,52,62,.9),0 0 0 0 rgba(224,52,62,.75)}60%,100%{box-shadow:0 0 8px rgba(224,52,62,.9),0 0 0 13px rgba(224,52,62,0)}}
.td-topbar .tb-left b{font-family:var(--display);font-weight:800;color:#fff}
.td-topbar .tb-right{display:inline-flex;align-items:center;gap:.9rem}
.td-topbar .ts-mini{font-size:.84rem;font-weight:800;color:#E4535B;white-space:nowrap}
.td-topbar .tb-cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--navy-800);color:#E4535B;border-radius:var(--r-pill);padding:.4rem 1.05rem;font-size:.88rem;font-weight:800;transition:background .2s var(--ease),color .2s var(--ease)}
.td-topbar:hover .tb-cta{background:var(--accent);color:#fff}
.td-topbar .tb-cta .arrow{transition:transform .2s var(--ease)}
.td-topbar:hover .tb-cta .arrow{transform:translateX(3px)}
.td-topbar:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px}
@media (max-width:640px){.td-topbar .tb-sub{display:none}.td-topbar{gap:.8rem}}
.td-guarantee{background:var(--night);color:#fff;position:relative;overflow:hidden}
.td-guarantee .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.td-guarantee .tg-inner{position:relative;z-index:2;max-width:640px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.95rem}
.tg-badge{width:64px;height:64px;border-radius:50%;background:var(--terracotta);color:var(--navy-900);display:grid;place-items:center;flex-shrink:0;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.td-guarantee h3{margin:0;color:#fff;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.tg-copy{margin:0;color:var(--on-night-soft);font-size:1rem;line-height:1.65;max-width:52ch}
.tg-copy b{color:#fff}
.tg-flag{font-size:.74rem;color:var(--sand-text);opacity:.7;font-style:italic}

/* enrol extras */
.pc-guarantee{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-top:1rem;font-size:.86rem;color:var(--sand-text)}
.pc-guarantee svg{color:var(--terracotta);flex-shrink:0}
.pc-scarce{display:inline-flex;align-items:center;gap:.5rem;background:rgba(217,122,58,.16);border:1px solid rgba(217,122,58,.45);color:var(--terracotta);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .85rem;border-radius:var(--r-pill);margin-bottom:1rem}
.td-instant{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.2rem;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.td-instant svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.td-instant b{color:var(--text)}
.td-instant span{color:var(--text-soft);font-size:.92rem}
.cd-jump{display:block;margin-top:.5rem;font-size:.78rem;color:var(--on-night-soft)}
.cd-jump b{color:#fff}

/* ============================================================ PHOTOGRAPHY
   The Touchdown photos are shot vertical (9:16). These components use that
   shape instead of fighting it: one frame style, four arrangements.
     .pic          a single framed photo (pick an aspect + a focal point)
     .photo-pair   two vertical frames, the second dropped down the page
     .strip        the sideline: vertical frames staggered along a trail line
     .photo-band   a full-bleed landscape band with a caption over the scrim
   ============================================================ */

/* ---------- the frame ---------- */
.pic{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r-img);background:var(--surface-2)}
.pic-tall{aspect-ratio:4/5}
.pic-port{aspect-ratio:3/4}
.pic-wide{aspect-ratio:16/9}
.pic-lift{box-shadow:var(--shadow-md)}
/* Focal point. Most subjects in this set stand in the upper half of the frame. */
.op-top{object-position:50% 16%}
.op-upper{object-position:50% 28%}
.op-lower{object-position:50% 68%}
/* On a navy band the frame needs an edge so it does not float in the dark. */
:is(.impact,.impact-band,.td-weeks,.values-band,.give,.td-feature,.td-hero) .pic{border:1px solid rgba(255,255,255,.16)}

.pic-fig{margin:0}
.pic-fig figcaption{margin-top:.75rem;font-size:.85rem;line-height:1.55;color:var(--text-soft);max-width:44ch}
.cap-k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.2rem}
:is(.impact,.impact-band,.td-weeks,.values-band,.give) .pic-fig figcaption{color:var(--on-night-soft)}

/* ---------- two frames, walking down the page ---------- */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.6vw,1.1rem);align-items:start}
.photo-pair .pic{aspect-ratio:3/4;box-shadow:var(--shadow-md)}
.photo-pair .pic:last-child{margin-top:clamp(1.4rem,4vw,3rem)}

/* ---------- the sideline strip ----------
   Five frames kept at their native vertical crop and staggered like a team on
   a sideline. The shape of the photograph is the whole idea, so nothing is
   layered over it. */
.strip{position:relative}
.impact-strip{margin-top:clamp(2.6rem,5vw,3.6rem)}
.strip-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.6rem,1.3vw,1rem);align-items:start}
.strip-inner .pic{aspect-ratio:3/4;box-shadow:var(--shadow-md)}
.strip-inner>*:nth-child(1){margin-top:0}
.strip-inner>*:nth-child(2){margin-top:clamp(1rem,2.6vw,2.1rem)}
.strip-inner>*:nth-child(3){margin-top:clamp(1.6rem,4.2vw,3.4rem)}
.strip-inner>*:nth-child(4){margin-top:clamp(1rem,2.6vw,2.1rem)}
.strip-inner>*:nth-child(5){margin-top:0}
.strip-cap{margin-top:1.6rem;font-size:.86rem;color:var(--text-soft);max-width:56ch;text-wrap:balance}
.strip-cap.center{margin-inline:auto}
:is(.impact,.impact-band,.td-weeks,.give) .strip-cap{color:var(--on-night-soft)}
@media (max-width:820px){
  /* A phone cannot hold five frames. It becomes a rail you swipe. */
  .strip-inner{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:.6rem;margin-inline:calc(-1*clamp(1.15rem,4vw,2rem));padding-inline:clamp(1.15rem,4vw,2rem);
    /* without this the snap origin ignores the padding and frame 1 sits flush to the screen edge */
    scroll-padding-inline:clamp(1.15rem,4vw,2rem)}
  .strip-inner>*{flex:0 0 clamp(150px,44vw,210px);margin-top:0;scroll-snap-align:start}
}

/* ---------- full-bleed band ---------- */
.photo-band{position:relative;background:var(--night);overflow:hidden}
.photo-band>.pic{height:clamp(280px,42vw,540px);aspect-ratio:auto;border-radius:0;object-position:50% 58%}
.photo-band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,41,59,.42) 0%,rgba(18,41,59,.06) 34%,rgba(18,41,59,.82) 100%)}
.pb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-block:clamp(1.2rem,3vw,2rem)}
.pb-cap .k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.3rem}
.pb-cap p{margin:0;color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.2;max-width:26ch;text-shadow:0 2px 18px rgba(0,0,0,.5)}

/* ---------- touchdown hero: copy left, one real face on the right ---------- */
.td-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:center}
.td-hero-figure{position:relative}
.td-hero-figure .pic{aspect-ratio:4/5;box-shadow:var(--shadow-lg)}
.tdh-tag{position:absolute;left:-6%;bottom:7%;background:var(--surface);color:var(--navy-800);border-radius:var(--r-card);
  padding:.7rem .95rem;box-shadow:var(--shadow-md);font-size:.78rem;font-weight:700;line-height:1.35;max-width:190px}
.tdh-tag b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--accent)}
@media (max-width:900px){
  .td-hero-grid{grid-template-columns:1fr}
  /* A 9:16 frame squeezed into 16:10 keeps a third of the height and beheads the
     subject. Square is the widest crop this photography survives on a phone. */
  .td-hero-figure .pic{aspect-ratio:1/1}
  .tdh-tag{left:auto;right:4%;bottom:-10%}
  .td-hero-figure{margin-bottom:2.4rem}
}

/* ---------- the Touchdown film ----------
   A square film (576x576), so it sits beside the copy rather than spanning the
   page. Native <video controls preload="none">: nothing downloads until the
   visitor presses play, and scrubbing, fullscreen and keyboard control come
   from the browser rather than being reimplemented. */
.td-film{background:var(--night);color:#fff;position:relative;overflow:hidden}
.td-film .starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.td-film .wrap{position:relative;z-index:2}
.td-film h2{color:#fff}
.td-film .lead{color:var(--on-night-soft)}
.td-film-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* Hosted here rather than on YouTube, because a YouTube embed refuses to play on
   a 127.0.0.1 preview and the file has to work wherever it is opened. The file is
   576x576, so the frame is square. */
.td-film-player{margin:0;min-width:0}
.td-film-facade{aspect-ratio:1/1}
.td-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--night)}
/* The whole poster is the play target, and the button is what the keyboard lands
   on. text-align:left because a button centres its text where an anchor does not,
   which would otherwise centre the Watch/title block. */
.vf-launch{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.vf-launch:focus-visible{outline:3px solid var(--terracotta);outline-offset:-5px;border-radius:var(--r-img)}
/* Once it is playing it is a player, not a poster: stop it lifting on hover. */
.td-film-facade.is-playing,.td-film-facade.is-playing:hover{transform:none}
.td-film-player figcaption{margin-top:.9rem;font-size:.84rem;line-height:1.55;color:var(--on-night-soft);text-align:center}
.td-film-cta{margin-top:1.8rem}
@media (max-width:860px){.td-film-grid{grid-template-columns:1fr}.td-film-player{order:-1}}

/* ---------- photo behind the Touchdown feature block (programs page) ---------- */
.tdf-bg{position:absolute;inset:0;z-index:0}
.tdf-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.tdf-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,41,59,.97) 0%,rgba(18,41,59,.94) 46%,rgba(18,41,59,.74) 80%,rgba(18,41,59,.6) 100%)}

.contact-pic{margin-top:2rem}

/* ---------- photo under a program block (programs page) ---------- */
.prog-media{max-width:940px;margin:clamp(2rem,4vw,2.8rem) auto 0}

/* ---------- photo above a pill list (get involved) ---------- */
.gi-media{display:flex;flex-direction:column;gap:clamp(1rem,2.4vw,1.5rem)}
.gi-media .pic{box-shadow:var(--shadow-md)}
@media (max-width:820px){.partner-band .gi-media{order:1}}

/* ---------- Touchdown registration form (/touchdown/intakeform/) ----------
   A long form asked one section at a time. It reuses .form-wrap, .field, .two
   and .check from the contact form, and adds only what the wizard needs. */
.itk-wrap{max-width:760px}
.itk-gate{text-align:center}
.itk-lock{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);margin-bottom:1rem}
.itk-gate-title{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:0 0 .5rem}
.itk-gate-lead{color:var(--text-soft);font-size:.95rem;line-height:1.6;max-width:46ch;margin:0 auto}
.itk-gate-form{max-width:400px;margin:1.6rem auto 0;text-align:left}
.itk-gate-form input{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.itk-gate-form input::placeholder{text-transform:none;letter-spacing:normal;font-weight:400}
.itk-unlock{width:100%;justify-content:center}
.itk-unlock.is-busy{opacity:.6;pointer-events:none}
.itk-msg{margin:.9rem 0 0;font-size:.9rem;line-height:1.55;padding:.7rem .9rem;border-radius:var(--r-card)}
.itk-msg.is-bad{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.itk-msg.is-wait{color:var(--text-soft);background:var(--surface-2)}
.itk-gate .form-note{text-align:left;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.itk-gate .form-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.itk-head{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.itk-chip{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:.25rem .7rem}
.itk-chip.is-ref{color:var(--text);background:var(--surface-2);letter-spacing:.08em}
.itk-chip.is-paid{color:#2E7D5B;background:color-mix(in srgb,#2E7D5B 12%,transparent)}
.itk-chip.is-who{color:var(--terracotta);background:color-mix(in srgb,var(--terracotta) 14%,transparent)}

.itk-title{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 .9rem}
.itk-bar{height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:.5rem}
.itk-fill{display:block;height:100%;width:100%;transform:scaleX(.125);transform-origin:left center;
  background:var(--accent);border-radius:99px;transition:transform .3s var(--ease)}
@media (prefers-reduced-motion: reduce){.itk-fill{transition:none}}
.itk-stepline{display:flex;gap:.5rem;align-items:baseline;font-size:.84rem;color:var(--text-soft);margin:0 0 1.5rem}
.itk-stepline b{color:var(--text)}

.itk-fields{margin-top:0}
.itk-lead{font-size:.92rem;line-height:1.65;color:var(--text-soft);margin:0 0 1.2rem}
.itk-sub{font-size:1.02rem;color:var(--text);margin:1.6rem 0 .5rem}
.itk-group{border:1px solid var(--border);border-radius:var(--r-card);padding:1rem 1.1rem .3rem;margin:0 0 1.1rem}
.itk-group legend{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);padding:0 .4rem}
.itk-radios{border:0;padding:0;margin-bottom:1.1rem}
.itk-radios legend{font-weight:600;font-size:.92rem;color:var(--text);margin-bottom:.5rem;padding:0}
.itk-choices{display:flex;gap:.6rem;flex-wrap:wrap;border-radius:var(--r-card)}
.itk-choices.is-stack{flex-direction:column}
.itk-choices.bad{outline:2px solid var(--accent);outline-offset:5px}
.itk-choice{display:flex;align-items:flex-start;gap:.6rem;flex:1 1 auto;min-width:min(100%,140px);
  border:1.5px solid var(--border);border-radius:var(--r-card);padding:.7rem .9rem;cursor:pointer;
  font-size:.9rem;line-height:1.5;color:var(--text-body);background:var(--bg);transition:border-color .18s,background .18s}
.itk-choice:hover{border-color:var(--text-soft)}
.itk-choice input{width:17px;height:17px;margin-top:.12rem;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.itk-choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.itk-fields input.bad,.itk-fields select.bad,.itk-fields textarea.bad{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.itk-note{background:var(--surface-2);border-radius:var(--r-card);padding:.9rem 1.1rem;font-size:.88rem;
  line-height:1.65;color:var(--text-body)}
.itk-note b{color:var(--text)}

/* The terms scroll in their own box so the declarations underneath stay in view
   rather than sitting several screens further down. */
.itk-terms{max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-card);
  padding:1.1rem 1.2rem;background:var(--bg);font-size:.87rem;line-height:1.7;color:var(--text-body)}
.itk-terms:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.itk-terms h3{font-size:.94rem;color:var(--text);margin:1.3rem 0 .4rem}
.itk-terms h3:first-child{margin-top:0}
.itk-terms p{margin:0 0 .7rem}
.itk-terms ul{margin:0 0 .7rem;padding-left:1.1rem}
.itk-terms li{margin-bottom:.5rem}
.itk-terms a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.itk-decs{gap:.75rem;margin-bottom:1.4rem}
.itk-sigline{font-size:.82rem;color:var(--text-soft);margin:.2rem 0 0}

.itk-recap{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.itk-recap-box{background:var(--surface-2);border-radius:var(--r-card);padding:.7rem 1rem}
.itk-recap-row{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.86rem;color:var(--text-soft)}
.itk-recap-row b{color:var(--text);font-weight:600;text-align:right}
.itk-recap-note{font-size:.82rem;color:var(--text-soft);margin:.7rem 0 0}

.itk-err{color:var(--accent);font-weight:600;font-size:.9rem;margin:1rem 0 0}
.itk-nav{display:flex;gap:.7rem;margin-top:1.6rem}
.itk-nav .btn{flex:1;justify-content:center}
.itk-nav .btn:disabled,.itk-nav .btn.is-busy{opacity:.55;cursor:not-allowed}
.itk-ghost{flex:0 0 auto}
.itk-done{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:var(--r-card);
  padding:1.3rem 1.4rem;font-size:.94rem;line-height:1.7;color:var(--text-body);background:var(--surface-2)}
.itk-done b{display:block;font-size:1.05rem;color:var(--text);margin-bottom:.4rem}
.itk-done p{margin:0 0 .7rem}
.itk-done a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.itk-again{margin-top:.4rem}
@media (max-width:520px){.itk-nav{flex-wrap:wrap}.itk-nav .btn{flex:1 1 100%}}