/* ============================================================
   Help2Serve.Care — H2S SYSTEM
   Journey map + progressive disclosure + interactive shell.
   Loads AFTER styles.css. Everything is namespaced .h2s-*
   so it cannot collide with the legacy stylesheet.
   ============================================================ */

:root{
  --h2s-forest:#1B4332;
  --h2s-mid:#2D6A4F;
  --h2s-bright:#52B788;
  --h2s-gold:#E9C46A;
  /* 24 Aug 2026: was #B08D2A. The master identity sheet
     (H2S_Collegiate_Identity_v8.svg) uses #B08A2A in four places — one
     digit apart, two values for one dark gold. The identity sheet wins. */
  --h2s-gold-dk:#B08A2A;
  /* 24 Aug 2026: the site had six unrelated pale creams doing the same
     job. Both of these are DERIVED from --h2s-gold so the family can
     never drift: wash = the gold at 40% over white, line = at 70%.
     He chose 40% from a rendered A/B/C of 22% / 40% / the literal gold;
     the literal gold was rejected because gold-on-gold elements (the
     institutional prize pill, the 21-day callout heading) disappear. */
  --h2s-gold-wash:#F6E7C3;
  --h2s-gold-line:#F0D697;
  --h2s-ivory:#F8F5F0;
  --h2s-ink:#12281D;
  --h2s-line:#2D6A4F;
  --h2s-rail-h:64px;
}

/* ============================================================
   1. JOURNEY MAP
   ============================================================ */

.h2s-journey{
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(233,196,106,.20), transparent 62%),
    var(--h2s-ivory);
  border-bottom:1px solid rgba(45,106,79,.16);
  position:relative;
  container-type:inline-size;
}
.h2s-journey *{box-sizing:border-box}
.h2s-journey a{text-decoration:none;color:inherit}

.h2s-j-inner{max-width:1180px;margin:0 auto;padding:20px 20px 8px}

/* ---------- YOU-ARE-HERE RAIL (collapsed state) ---------- */
.h2s-rail{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.h2s-rail-step{display:none}
.h2s-rail-eyebrow{
  font-family:'DM Sans',sans-serif;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--h2s-gold-dk);
  white-space:nowrap;
}
.h2s-crumbs{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  flex:1 1 320px;
  min-width:0;
}
.h2s-crumb{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  border:2px solid rgba(45,106,79,.28);
  border-radius:999px;
  padding:6px 13px;
  font-family:'DM Sans',sans-serif;
  font-size:.8rem;
  font-weight:600;
  color:var(--h2s-mid);
  line-height:1.2;
  transition:border-color .18s,transform .18s,box-shadow .18s;
  white-space:nowrap;
}
.h2s-crumb:hover,.h2s-crumb:focus-visible{
  border-color:var(--h2s-gold);
  transform:translateY(-2px);
  outline:none;
}
.h2s-crumb .h2s-cn{
  width:19px;height:19px;border-radius:50%;
  background:var(--h2s-forest);color:var(--h2s-gold);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:.68rem;font-weight:700;
  flex:0 0 auto;
}
/* the active / "you are here" crumb — this is the one that gets larger */
.h2s-crumb.is-here{
  background:var(--h2s-forest);
  border-color:var(--h2s-gold);
  color:#fff;
  font-size:.92rem;
  font-weight:700;
  padding:9px 18px;
  box-shadow:0 4px 0 rgba(27,67,50,.22),0 0 0 4px rgba(233,196,106,.28);
  transform:scale(1.02);
}
.h2s-crumb.is-here .h2s-cn{background:var(--h2s-gold);color:var(--h2s-forest)}
.h2s-crumb-sep{color:rgba(45,106,79,.42);font-weight:700;flex:0 0 auto}

.h2s-rail-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--h2s-gold);
  color:var(--h2s-forest);
  border:none;
  border-radius:999px;
  padding:10px 18px;
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(27,67,50,.20);
  transition:transform .15s,box-shadow .15s;
  white-space:nowrap;
  margin-left:auto;
}
.h2s-rail-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(27,67,50,.22)}
.h2s-rail-toggle:focus-visible{outline:3px solid var(--h2s-forest);outline-offset:2px}
.h2s-rail-toggle .h2s-chev{transition:transform .25s}
.h2s-journey.is-open .h2s-rail-toggle .h2s-chev{transform:rotate(180deg)}

/* ---------- EXPANDING PANEL ---------- */
.h2s-j-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.22,.8,.28,1);
}
.h2s-journey.is-open .h2s-j-panel{grid-template-rows:1fr}
.h2s-j-panel > div{overflow:hidden;min-height:0}

/* ---------- AUDIENCE TOGGLE ---------- */
.h2s-aud{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  padding:16px 0 4px;
}
.h2s-aud-pill{
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.95rem;
  padding:12px 26px;border-radius:999px;cursor:pointer;
  border:2px solid var(--h2s-gold);
  background:var(--h2s-gold-wash);color:var(--h2s-forest);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.h2s-aud-pill:hover{transform:translateY(-2px)}
.h2s-aud-pill:focus-visible{outline:3px solid var(--h2s-gold);outline-offset:3px}
/* SELECTED = GOLD, 23 August 2026 (his call). The pressed pill was forest
   with white text, which read as a different UI element from the map it
   controls. It now takes the EXACT fill of the map's stage pills
   (.h2s-stage: gold ground, forest text) plus the gold halo that
   .h2s-stage.is-here-stage uses to mark "you are here" — so the selected
   audience reads as the same "this one is active" language as the rest of
   the map. The forest border is kept so the pill still has a hard edge
   against the ivory page; without it a gold pill on gold-tinted ground
   loses its outline. */
.h2s-aud-pill[aria-pressed="true"]{
  background:var(--h2s-gold);color:var(--h2s-forest);border-color:var(--h2s-forest);
  box-shadow:0 3px 0 rgba(27,67,50,.2),0 0 0 5px rgba(233,196,106,.32);
}
.h2s-aud-or{
  font-family:'Fraunces',serif;font-weight:900;color:var(--h2s-gold-dk);
  font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;
}

.h2s-j-head{text-align:center;padding:14px 16px 2px}
.h2s-j-head h2{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(1.5rem,4vw,2.4rem);
  color:var(--h2s-forest);line-height:1.08;margin:0;
}
.h2s-j-head p{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(.95rem,2vw,1.08rem);color:#3c5548;
  max-width:560px;margin:10px auto 0;line-height:1.5;
}

.h2s-swipe{display:none;text-align:center;margin:10px 0 0}
.h2s-swipe span{
  display:inline-block;background:#fff;border:2px solid var(--h2s-gold);
  color:var(--h2s-forest);font-weight:700;font-size:.85rem;
  padding:7px 18px;border-radius:999px;
}
@media(max-width:820px){.h2s-swipe{display:block}}

/* ---------- THE TREE ---------- */
.h2s-scroll{overflow-x:auto;padding:10px 8px 4px;-webkit-overflow-scrolling:touch}
.h2s-map{min-width:720px;max-width:1000px;margin:0 auto}

.h2s-root-wrap{display:flex;justify-content:center}

.h2s-tree ul{padding-top:22px;position:relative;display:flex;justify-content:center}
.h2s-tree > ul{padding-top:0}
.h2s-tree li{
  list-style:none;text-align:center;position:relative;
  padding:22px 6px 0;display:flex;flex-direction:column;align-items:center;
}
.h2s-tree > ul > li{padding-top:0}
.h2s-tree ul ul li::before,.h2s-tree ul ul li::after{
  content:'';position:absolute;top:0;right:50%;
  border-top:3px solid var(--h2s-line);width:50%;height:22px;
}
.h2s-tree ul ul li::after{right:auto;left:50%;border-left:3px solid var(--h2s-line)}
.h2s-tree ul ul li:only-child::before,.h2s-tree ul ul li:only-child::after{display:none}
.h2s-tree ul ul li:only-child{padding-top:22px}
.h2s-tree ul ul li:first-child::before,.h2s-tree ul ul li:last-child::after{border-top:none;border-left:none}
.h2s-tree ul ul li:last-child::before{border-right:3px solid var(--h2s-line);border-radius:0 14px 0 0}
.h2s-tree ul ul li:first-child::after{border-radius:14px 0 0 0}
.h2s-tree ul ul::before{
  content:'';position:absolute;top:0;left:50%;
  border-left:3px solid var(--h2s-line);width:0;height:22px;
}

.h2s-stage{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--h2s-gold);color:var(--h2s-forest);
  font-family:'DM Sans',sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 18px;border-radius:999px;
  box-shadow:0 3px 0 rgba(27,67,50,.2);
}
.h2s-stage .n{
  background:var(--h2s-forest);color:var(--h2s-gold);
  width:21px;height:21px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-family:'Fraunces',serif;
}
.h2s-stage.is-here-stage{
  box-shadow:0 3px 0 rgba(27,67,50,.2),0 0 0 5px rgba(233,196,106,.32);
}

/* nodes */
.h2s-node{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:3px solid var(--h2s-mid);border-radius:18px;
  padding:12px 10px;
  width:136px;min-width:136px;max-width:136px;min-height:132px;
  justify-content:center;
  box-shadow:0 4px 0 rgba(27,67,50,.18);
  transition:transform .2s,box-shadow .2s,border-color .2s;
  position:relative;cursor:pointer;font-family:'DM Sans',sans-serif;
}
.h2s-node:hover,.h2s-node:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 12px 22px rgba(27,67,50,.22);
  border-color:var(--h2s-gold);outline:none;
}
.h2s-node .h2s-emoji{font-size:1.55rem;line-height:1}
.h2s-node .h2s-name{
  font-family:'Fraunces',serif;font-weight:700;font-size:.92rem;
  color:var(--h2s-forest);line-height:1.15;
}
.h2s-node .h2s-hint{
  font-size:.63rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#8a9a90;line-height:1.3;
}
.h2s-node:hover .h2s-hint{color:var(--h2s-mid)}

/* ★ YOU ARE HERE — the node grows ★ */
.h2s-node.is-here{
  border-color:var(--h2s-gold);
  background:linear-gradient(160deg,#1B4332,#2D6A4F);
  transform:scale(1.16);
  z-index:3;
  box-shadow:0 10px 0 rgba(27,67,50,.18),0 0 0 6px rgba(233,196,106,.30);
  cursor:default;
}
.h2s-node.is-here:hover{transform:scale(1.16)}
.h2s-node.is-here .h2s-name{color:var(--h2s-gold);font-size:.95rem}
.h2s-node.is-here .h2s-hint{color:#cfe3d8}
.h2s-node.is-here .h2s-youarehere{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--h2s-gold);color:var(--h2s-forest);
  font-size:.52rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 6px rgba(27,67,50,.28);
}

.h2s-node.root{
  background:var(--h2s-forest);border-color:var(--h2s-forest);
  padding:16px 30px;width:auto;min-width:0;max-width:none;min-height:0;
}
/* --- the root cue only runs AFTER a pathway is chosen — 25 August 2026 ------
   HIS INSTRUCTION: "I want to serve" must not blink until the visitor clicks
   Students / Faculty / Institutional Partner. The gold highlight on the
   Students pill at rest is fine and is unchanged; only the blink waits.
   `is-cued` is written by h2s-journey.js from sessionStorage['h2s-audience'],
   which only EXISTS after a deliberate pill click — so a first-time visitor
   gets a still root, and ↻ Reset Journey (which clears that key) returns it
   to still.
   MEASURED, the old cue at 1440 sampling the 25px band outside the node
   across a full 2.6s cycle: peak deviation from the ivory ground was 90 on a
   0-765 scale, i.e. 45% of solid gold's 198 — and the ring was COMPLETELY
   absent (deviation 0) for 0.7s of every cycle, 27% of the time. The old
   keyframes coupled spread to alpha inversely: at 0px spread the gold was
   .55 alpha but had no width, and by 14px spread it had faded to 0. It could
   never be both wide and visible.
   NOW: a solid gold ring that is never transparent, 3px -> 6px, with a second
   halo expanding behind it to 20px and fading. Floor is a 3px ring at .95
   alpha, so the cue is legible at every point in the cycle.
   ------------------------------------------------------------------------ */
.h2s-node.root.is-cued{
  animation:h2sPulse 2.6s ease-in-out infinite;
}
.h2s-node.root .h2s-name{color:#fff;font-size:1.25rem}
.h2s-node.root .h2s-hint{color:var(--h2s-gold)}
@keyframes h2sPulse{
  0%,100%{box-shadow:0 4px 0 rgba(27,67,50,.18),
                     0 0 0 3px rgba(233,196,106,.95),
                     0 0 0 3px rgba(233,196,106,.45)}
  50%    {box-shadow:0 4px 0 rgba(27,67,50,.18),
                     0 0 0 6px rgba(233,196,106,1),
                     0 0 0 20px rgba(233,196,106,0)}
}

/* --- PATHWAY PILL CUES — 26 August 2026 ------------------------------------
   His instruction: make the Integrated / Three Tracks box behave like the
   audience box above it. The colour half of that lives in the two style
   objects in index.html and focus-integrated.html; these are the two motion
   cues.

   h2sPathFlash (option C) is a ONE-SHOT on the pill that was clicked. It
   exists because a continuous pulse cannot solve the thing he actually
   reported — if the selected pill were already pulsing, clicking it again
   would still look like nothing happened. The flash re-fires on every click,
   including a click on the pill already chosen. It starts and ends on the
   selected pill's resting halo (5px at .32) and peaks at 10px at .55, so
   there is no jump in or out and no fill-mode needed.

   h2s-path-cued (option D) is the h2sPulse cue above, reused verbatim on the
   .path-frame below the pills — the structural twin of the journey map's
   "I want to serve" root node: the thing the control acts on. Both are gated
   on a real click, exactly as `is-cued` is gated on sessionStorage, so a
   first-time visitor gets a still box.
   -------------------------------------------------------------------------- */
@keyframes h2sPathFlash{
  0%  {box-shadow:0 3px 0 rgba(27,67,50,.2),0 0 0 5px rgba(233,196,106,.32)}
  28% {box-shadow:0 3px 0 rgba(27,67,50,.2),0 0 0 10px rgba(233,196,106,.55)}
  100%{box-shadow:0 3px 0 rgba(27,67,50,.2),0 0 0 5px rgba(233,196,106,.32)}
}
.h2s-path-flash{animation:h2sPathFlash .55s ease-out 1}

/* D is scoped to >=1101px — 26 August 2026, his instruction.
   MEASURED on index.html, .path-frame against the viewport:
     390x844   358x2202   1358px taller than the viewport
     820x900   756x1796    896px taller
     900x900   836x1786    886px taller
     1101x900  920x1062    162px taller
     1440x900  920x1069    169px taller
   The frame overruns the viewport at EVERY width, so no breakpoint makes the
   ring fully visible; 1101 is where the three cards go side-by-side and the
   frame collapses from ~1786px to ~1062px, which is the only place the number
   changes materially. 820 (the journey map's own H2S_MOBILE_MQ) would leave a
   900-wide screen pulsing a 1786px box, barely better than a phone. */
@media (min-width:1101px){
  .h2s-path-cued{animation:h2sPulse 2.6s ease-in-out infinite}
}

/* Parity with the cue this mirrors: h2sPulse on the journey root node is
   already silenced by the .h2s-journey * reduce rule at line 660. These two
   sit outside .h2s-journey, so they need their own. */
@media (prefers-reduced-motion:reduce){
  .h2s-path-flash,.h2s-path-cued{animation:none!important}
}

.h2s-node.gold{background:var(--h2s-gold-wash);border-color:var(--h2s-gold)}
.h2s-node.prize{background:linear-gradient(150deg,#1B4332,#2D6A4F);border-color:var(--h2s-gold)}
.h2s-node.prize .h2s-name{color:var(--h2s-gold)}
.h2s-node.prize .h2s-hint{color:#cfe3d8}
.h2s-node.muted{
  background:var(--h2s-ivory);border-style:dashed;border-color:#a9bbb1;box-shadow:none;
}
.h2s-node.muted .h2s-name{color:#6c7d73}
.h2s-node.wide{width:230px;min-width:230px;max-width:230px}

.h2s-ribbon{
  position:absolute;top:-11px;right:-8px;
  background:var(--h2s-gold);color:var(--h2s-forest);
  font-size:.54rem;font-weight:700;letter-spacing:.07em;
  padding:3px 9px;border-radius:999px;text-transform:uppercase;
}
.h2s-ribbon.green{background:var(--h2s-mid);color:#fff}
.h2s-chip-days{
  background:var(--h2s-gold-wash);border:1.5px solid var(--h2s-gold);color:#8a6d1f;
  font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:2px;
}
.h2s-g21{color:var(--h2s-gold-dk);font-size:1.5em;line-height:1}

.h2s-flow{width:3px;height:26px;background:var(--h2s-line);margin:6px auto 0;position:relative}
.h2s-flow::after{
  content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top:10px solid var(--h2s-line);
}

.h2s-finish{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:var(--h2s-forest);border-radius:22px;padding:20px 24px;
  color:#fff;max-width:680px;margin:14px auto 22px;text-align:center;
}
.h2s-finish .h2s-big{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1rem,3.2vw,1.35rem)}
.h2s-finish .h2s-big span{color:var(--h2s-gold)}
.h2s-finish .h2s-cta{
  background:var(--h2s-gold);color:var(--h2s-forest);font-weight:700;
  padding:12px 24px;border-radius:999px;font-size:.9rem;transition:transform .15s;
  font-family:'DM Sans',sans-serif;
}
.h2s-finish .h2s-cta:hover{transform:scale(1.05)}
.h2s-finish .h2s-quiet{color:#fff;font-size:.8rem;border-bottom:2px solid var(--h2s-gold);padding-bottom:1px}

/* ---------- MODAL ---------- */
.h2s-overlay{
  position:fixed;inset:0;background:rgba(18,40,29,.66);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;z-index:9000;
}
.h2s-overlay[hidden]{display:none}
.h2s-modal{
  background:linear-gradient(160deg,#1B4332,#2D6A4F);color:#fff;
  border-radius:24px;padding:34px 28px 30px;max-width:460px;width:100%;
  position:relative;box-shadow:0 24px 60px rgba(0,0,0,.42);animation:h2sPop .3s ease;
  font-family:'DM Sans',sans-serif;
}
@keyframes h2sPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.h2s-modal .h2s-close{
  position:absolute;top:14px;right:14px;background:rgba(255,255,255,.16);
  border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;
}
.h2s-modal .h2s-close:hover{background:rgba(255,255,255,.3)}
.h2s-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8fd4b8;display:block;margin-bottom:8px}
.h2s-modal h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.6rem;line-height:1.1;margin-bottom:10px;color:#fff}
.h2s-modal h3 span{color:var(--h2s-gold)}
.h2s-modal-sub{font-size:.86rem;opacity:.92;margin-bottom:20px;line-height:1.55}
.h2s-ladder{display:grid;gap:16px;margin-bottom:22px}
.h2s-rung-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-size:.88rem}
.h2s-rung-top span{color:var(--h2s-gold);font-weight:700;font-size:.78rem;text-align:right}
.h2s-bar{height:13px;border-radius:999px;background:rgba(255,255,255,.9);overflow:hidden}
.h2s-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#E9C46A,#d4a93f);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.h2s-overlay.is-open .h2s-bar i{width:var(--w)}
.h2s-modal-cta{
  display:block;text-align:center;background:var(--h2s-gold);color:var(--h2s-forest);
  font-weight:700;padding:13px 20px;border-radius:999px;font-size:.92rem;transition:transform .15s;
}
.h2s-modal-cta:hover{transform:scale(1.03)}

/* ============================================================
   2. PROGRESSIVE DISCLOSURE  ("read more" / hover to discover)
   Content is NEVER removed from the DOM — only visually folded,
   so search engines still index 100% of the text.
   ============================================================ */

.h2s-fold{position:relative;margin:0 0 18px}
.h2s-fold-body{
  position:relative;
  overflow:hidden;
  max-height:var(--h2s-peek,6.2em);
  transition:max-height .45s cubic-bezier(.22,.8,.28,1);
}
.h2s-fold.is-open .h2s-fold-body{max-height:var(--h2s-full,4000px)}
/* The part-line under the peek is faded with a MASK, not with a colored
   gradient painted on top. The old ::after guessed the section's background
   color and, over a photograph, guessed white — which painted a white bar
   across the picture. A mask fades the text itself to transparent, so it is
   correct over a flat color, a gradient or a photo alike. */
.h2s-fold-body{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--h2s-fadeh,1.5em)),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - var(--h2s-fadeh,1.5em)),transparent 100%);
}
.h2s-fold.is-open .h2s-fold-body{-webkit-mask-image:none;mask-image:none}

.h2s-fold-btn{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:10px;
  background:transparent;
  border:2px solid var(--h2s-mid);
  color:var(--h2s-mid);
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;font-weight:700;letter-spacing:.05em;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.h2s-fold-btn:hover{background:var(--h2s-mid);color:#fff;transform:translateY(-2px)}
.h2s-fold-btn:focus-visible{outline:3px solid var(--h2s-gold);outline-offset:2px}
.h2s-fold-btn .h2s-chev{transition:transform .3s;font-size:.85em}
.h2s-fold.is-open .h2s-fold-btn .h2s-chev{transform:rotate(180deg)}
.h2s-fold-btn .h2s-wc{
  font-weight:500;opacity:.72;text-transform:none;letter-spacing:0;
}

/* dark-section variant */
.h2s-fold.on-dark .h2s-fold-btn{border-color:var(--h2s-gold);color:var(--h2s-gold)}
.h2s-fold.on-dark .h2s-fold-btn:hover{background:var(--h2s-gold);color:var(--h2s-forest)}

/* ---------- OVER A PHOTOGRAPH ----------
   A transparent pill with a green outline disappears against a picture. Over
   an image or gradient the control gets its own opaque backdrop so it reads
   regardless of what is behind it. */
.h2s-fold.on-photo .h2s-fold-btn{
  background:rgba(15,36,26,.86);
  border-color:var(--h2s-gold);
  color:var(--h2s-gold);
  box-shadow:0 6px 18px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.h2s-fold.on-photo .h2s-fold-btn .h2s-wc{opacity:.85}
.h2s-fold.on-photo .h2s-fold-btn:hover{
  background:var(--h2s-gold);
  border-color:var(--h2s-gold);
  color:var(--h2s-forest);
}
.h2s-fold.on-photo .h2s-fold-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- SUMMARY HOOK (the 2–3 line "pop" line) ---------- */
.h2s-hook{
  font-family:'Fraunces',serif;
  font-size:clamp(1.05rem,2.3vw,1.35rem);
  font-weight:600;
  line-height:1.42;
  color:var(--h2s-forest);
  max-width:60ch;
  margin:0 0 14px;
  padding-left:16px;
  border-left:4px solid var(--h2s-gold);
}
.h2s-hook.on-dark{color:#fff;border-left-color:var(--h2s-gold)}

/* ---------- HOVER-TO-DISCOVER CARD ---------- */
.h2s-discover{
  position:relative;border-radius:18px;overflow:hidden;
  min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--h2s-forest);cursor:pointer;isolation:isolate;
}
.h2s-discover img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.28,1),filter .4s;z-index:0;
}
.h2s-discover::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(18,40,29,.92) 8%,rgba(18,40,29,.35) 55%,rgba(18,40,29,.08));
  transition:background .4s;
}
.h2s-discover:hover img,.h2s-discover:focus-within img{transform:scale(1.07)}
.h2s-discover:hover::after{background:linear-gradient(to top,rgba(18,40,29,.96) 20%,rgba(18,40,29,.7))}
.h2s-discover-body{position:relative;z-index:2;padding:20px}
.h2s-discover-body h3{color:#fff;font-size:1.2rem;margin-bottom:6px}
.h2s-discover-body p{color:rgba(255,255,255,.86);font-size:.88rem;line-height:1.5;margin:0}
.h2s-discover-more{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s cubic-bezier(.22,.8,.28,1),opacity .3s,margin .3s;
}
.h2s-discover:hover .h2s-discover-more,
.h2s-discover:focus-within .h2s-discover-more,
.h2s-discover.is-open .h2s-discover-more{max-height:320px;opacity:1;margin-top:10px}
.h2s-discover-cue{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--h2s-gold);
}
.h2s-discover:hover .h2s-discover-cue,.h2s-discover.is-open .h2s-discover-cue{opacity:.5}

/* ---------- ACCORDION (used on Additional Content) ---------- */
.h2s-acc{border:2px solid rgba(45,106,79,.2);border-radius:16px;overflow:hidden;margin-bottom:12px;background:#fff}
.h2s-acc summary{
  cursor:pointer;list-style:none;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;color:var(--h2s-forest);
  transition:background .18s;
}
.h2s-acc summary::-webkit-details-marker{display:none}
.h2s-acc summary:hover{background:var(--h2s-ivory)}
.h2s-acc summary::after{content:'+';font-size:1.5rem;color:var(--h2s-gold-dk);line-height:1;transition:transform .25s}
.h2s-acc[open] summary::after{transform:rotate(45deg)}
.h2s-acc-body{padding:2px 20px 20px}
.h2s-acc-body p{margin-bottom:12px}

/* ---------- READING PROGRESS + BACK TO TOP ---------- */
.h2s-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--h2s-gold),var(--h2s-bright));
  z-index:9500;transition:width .1s linear;
}
.h2s-top{
  position:fixed;right:18px;bottom:18px;z-index:8000;
  width:46px;height:46px;border-radius:50%;
  background:var(--h2s-forest);color:var(--h2s-gold);
  border:2px solid var(--h2s-gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s,transform .25s;
  box-shadow:0 6px 18px rgba(27,67,50,.3);
}
.h2s-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.h2s-top:hover{background:var(--h2s-mid)}

/* ---------- SKIP LINK ---------- */
.h2s-skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--h2s-gold);color:var(--h2s-forest);
  padding:12px 20px;font-weight:700;border-radius:0 0 12px 0;
}
.h2s-skip:focus{left:0}

/* ---------- NAV: fit eight map-derived items without overflow ----------
   The journey taxonomy needs more top-level room than the old nav did, so
   the desktop bar is tightened and the hamburger takes over earlier. */
@media(min-width:1101px){
  .nav-links > li > a{padding:8px 9px!important;font-size:.8rem!important;white-space:nowrap}
  .nav-links .nav-donate{padding:8px 13px!important}
  .nav-links .btn-apply-nav{padding:9px 15px!important;font-size:.79rem!important}
  .nav-logo-text .brand-sub{font-size:.58rem}
  /* Eight map-derived items do not fit one row on a 1280px laptop.
     Rather than hide them behind a hamburger at desktop width, let the bar
     wrap to a second row and stay fully hoverable. One row on wide screens. */
  .nav-inner{flex-wrap:wrap;row-gap:4px}
  .nav-links{flex-wrap:wrap;justify-content:flex-end;row-gap:2px;flex:1 1 auto;min-width:0}
}
@media(max-width:1100px){
  .nav-links{display:none}
  .hamburger{display:flex!important}
  .nav-links.mobile-open{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;
    background:var(--white,#fff);
    box-shadow:0 14px 34px rgba(27,67,50,.16);
    padding:10px 0 16px;max-height:78vh;overflow-y:auto;z-index:60;
  }
  /* Home + Donate + Apply Now are the last three <li> in nav_html(), which
     puts them at the BOTTOM of the stacked mobile panel. Pull them to the
     top. Same positional selector the >=1101px tier-1 rule uses at line 704,
     so both breakpoints stay keyed to the same fact about the markup. */
  .nav-links.mobile-open > li:nth-last-child(3),
  .nav-links.mobile-open > li:nth-last-child(2),
  .nav-links.mobile-open > li:last-child{order:-1}
  .nav-links.mobile-open > li > a{padding:13px 22px;display:block}
  .nav-links.mobile-open .has-dropdown > a::after{content:' \25B8'}
  .nav-links.mobile-open .nav-dropdown{display:none}
  .nav-links.mobile-open .has-dropdown.dropdown-open > a::after{content:' \25BE'}
  .nav-links.mobile-open .has-dropdown.dropdown-open .nav-dropdown{
    display:block;position:static;box-shadow:none;border:none;background:var(--ivory,#F8F5F0);
  }
}

/* ---------- NAV: "additional content" + step labels ---------- */
.nav-links .h2s-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--gold,#E9C46A);color:var(--green-deep,#1B4332);
  font-size:.62rem;font-weight:800;margin-right:6px;
  font-family:'Fraunces',serif;
}

@media(max-width:820px){
  .h2s-j-inner{padding:14px 14px 6px}
  .h2s-rail{gap:10px}
  .h2s-rail-eyebrow{width:100%}
  .h2s-rail-toggle{margin-left:0;width:100%;justify-content:center}
  .h2s-crumbs{flex:1 1 100%;gap:0}
  /* on a phone the whole trail is noise — show only where you are */
  .h2s-crumb:not(.is-here),.h2s-crumb-sep{display:none}
  .h2s-crumb.is-here{font-size:.9rem;padding:9px 16px;transform:none}
  .h2s-rail-step{
    display:block;font-size:.68rem;font-weight:700;letter-spacing:.02em;
    text-transform:none;color:var(--h2s-mid);margin-top:3px;
  }
  .h2s-rail-eyebrow{display:block}
  .h2s-hook{font-size:1.02rem;padding-left:12px}
}

@media(prefers-reduced-motion:reduce){
  .h2s-journey *,.h2s-fold *,.h2s-discover *{animation:none!important;transition:none!important}
  .h2s-overlay.is-open .h2s-bar i{width:var(--w)}
}

@media print{
  .h2s-journey,.h2s-top,.h2s-progress{display:none!important}
  .h2s-fold-body{max-height:none!important;overflow:visible!important}
  .h2s-fold-body::after{display:none!important}
  .h2s-fold-btn{display:none!important}
}


/* ---------- ANCHOR OFFSET ----------
   In-page anchors used by the journey map. The empty span keeps the target
   out of the layout while scroll-margin stops the heading landing under the nav. */
.h2s-anchor{display:block;position:relative;top:-90px;visibility:hidden;height:0}
[id]{scroll-margin-top:90px}


/* ---------- LONG DROPDOWN (Additional Content) ---------- */
@media(min-width:1101px){
  .nav-dropdown{max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
}
.h2s-aud-inpanel{padding-top:6px}

/* ============================================================
   NAV v2 — two-tier header (added 2026-08-09)
   ------------------------------------------------------------
   PROBLEM THIS FIXES
   `.nav-inner` in styles.css carries a fixed `height:72px`. Once the
   nine top-level items wrapped onto a second row, that row had
   nowhere to live: measured at every desktop width from 1101px to
   1728px the links row ran y=92 -> y=128.4 while the nav's own
   bottom border sat at y=117, so ~11px of navigation — including the
   Donate and Apply Now pills — physically overhung the photograph
   below it on every page.

   THE FIX
   Make the desktop header a deliberate two-tier bar instead of an
   accidental one:
     Tier 1 (white)  — brand, with Donate / Apply Now at the right
     Tier 2 (ivory)  — full-bleed strip of pill-shaped nav items
   The bar now sizes to its own content, so nothing can spill onto
   whatever sits below it, and a soft shadow lifts it off the photo.

   CSS ONLY — no markup change, so `build.py`'s `nav_html()` output is
   untouched and a rebuild cannot undo this. Nothing here lives in
   `styles.css`. Scoped to >=1101px; the hamburger panel below that
   width is left exactly as it was.
   ============================================================ */

/* Lift the whole bar off whatever sits underneath it. */
.site-nav{
  box-shadow:0 6px 20px rgba(27,67,50,.13),0 1px 0 rgba(27,67,50,.06)!important;
}

@media(min-width:1101px){

  /* ---- the tinted tier-2 band, drawn full-bleed on .site-nav so it
          runs edge to edge instead of stopping at the 1280px container.
          Anchored 70px from the top = 4px .nav-accent + 66px tier 1. ---- */
  .site-nav{position:sticky}
  .site-nav::after{
    content:'';position:absolute;left:0;right:0;top:70px;bottom:0;
    background:var(--ivory,#F8F5F0);
    border-top:1px solid var(--border,#D4CFC5);
    z-index:0;pointer-events:none;
  }
  .site-nav > .nav-accent,
  .site-nav > .nav-inner{position:relative;z-index:1}

  /* ---- the bar sizes to its content instead of a fixed 72px ---- */
  .nav-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:66px auto;
    align-items:center;
    height:auto!important;
    min-height:0!important;
    padding:0 32px!important;
    gap:0!important;
  }
  .nav-inner > .nav-logo{grid-column:1;grid-row:1;display:flex;align-items:center}
  .nav-inner > .hamburger{grid-column:2;grid-row:1;justify-self:end}

  /* ---- the <ul> spans both tiers and breaks itself into two lines ---- */
  .nav-inner > .nav-links{
    grid-column:1 / -1;grid-row:1 / -1;
    display:flex;flex-wrap:wrap;align-items:center;
    justify-content:flex-start!important;
    column-gap:6px!important;row-gap:0!important;
    background:none;border:0;margin:0!important;padding:0!important;
    /* the empty stretch of line 1 sits over the logo cell — let clicks
       fall through to the logo underneath */
    pointer-events:none;
  }
  .nav-links > li{pointer-events:auto}

  /* Home + Donate + Apply Now are the last three <li> in nav_html(); pull
     them onto line 1 (tier 1) and hard-break the line after them so the
     seven navigation items fall onto line 2 (tier 2). Positional rather
     than :has() so this holds in older browsers too — the order is fixed
     by nav_html(), which is the only thing that emits this markup. */
  .nav-links > li:nth-last-child(3),
  .nav-links > li:nth-last-child(2),
  .nav-links > li:last-child{order:-1;min-height:66px;display:flex;align-items:center}
  .nav-links > li:nth-last-child(3){margin-left:auto}
  .nav-links::before{content:'';flex:0 0 100%;height:0;order:0}

  /* ---- tier-2 items become pills ---- */
  .nav-links > li:not(:nth-last-child(3)):not(:nth-last-child(2)):not(:last-child){
    padding:9px 0 10px;
  }
  .nav-links > li > a:not(.nav-home):not(.nav-donate):not(.btn-apply-nav){
    display:inline-flex;align-items:center;
    background:var(--white,#fff);
    border:1px solid rgba(27,67,50,.11);
    border-radius:var(--radius-pill,50px);
    padding:7px 14px!important;
    font-size:.8rem!important;line-height:1.15;
    color:var(--text,#2F3A34);
    box-shadow:0 1px 2px rgba(27,67,50,.05);
    transition:background .18s,border-color .18s,color .18s,box-shadow .18s;
  }
  .nav-links > li > a:not(.nav-home):not(.nav-donate):not(.btn-apply-nav):hover,
  .nav-links > li:hover > a:not(.nav-home):not(.nav-donate):not(.btn-apply-nav){
    border-color:var(--gold,#E9C46A);
    color:var(--green-deep,#1B4332)!important;
    box-shadow:0 2px 8px rgba(27,67,50,.10);
  }

  /* Current page. build.py already emits class="is-current"
     aria-current="page" — nothing had ever styled it. */
  .nav-links > li > a.is-current:not(.nav-home):not(.nav-donate):not(.btn-apply-nav){
    background:var(--green-deep,#1B4332);
    border-color:var(--green-deep,#1B4332);
    color:#fff!important;font-weight:600;
  }
  .nav-links > li > a.is-current .h2s-step-num{
    background:var(--gold,#E9C46A);color:var(--green-deep,#1B4332);
  }

  /* the three action items keep their own shapes.
     Weighting is deliberate: Home is the quietest (outlined), Donate is
     gold-filled, Apply Now is solid forest — so the two conversion
     buttons still read as the primary actions. */
  .nav-links .nav-home{
    display:inline-flex;align-items:center;
    background:transparent;
    border:2px solid rgba(45,106,79,.45);
    color:var(--green-deep,#1B4332)!important;
    font-weight:600;font-size:.84rem!important;
    padding:8px 18px!important;border-radius:var(--radius-pill,50px);
    margin-right:8px;
    transition:background .18s,border-color .18s,transform .15s;
  }
  .nav-links .nav-home:hover{
    background:var(--ivory,#F8F5F0);
    border-color:var(--green-deep,#1B4332);
    transform:translateY(-1px);
  }
  .nav-links .nav-home.is-current{
    background:var(--ivory,#F8F5F0);
    border-color:var(--gold,#E9C46A);
    font-weight:700;
  }
  .nav-links .nav-donate{padding:9px 18px!important;margin-right:8px!important;font-size:.84rem!important}
  .nav-links .btn-apply-nav{padding:10px 20px!important;font-size:.84rem!important}

  /* dropdowns hang off the pill, clear of the band edge */
  .nav-links .nav-dropdown{top:calc(100% + 7px)}
}

/* Tablet / mobile: tier 2 collapses into the hamburger panel, so the
   grid must not reserve an empty second row and the band must not draw. */
@media(max-width:1100px){
  .nav-inner{height:72px}
}

/* ============================================================
   MINI MAP — collapsed state on every page (added 2026-08-09)
   ------------------------------------------------------------
   Replaces the old breadcrumb rail (`.h2s-rail` / `.h2s-crumb`,
   whose CSS is left above but is now unused). The rail showed a
   linear trail of stage labels plus, on Additional Content pages,
   a stray pair of audience pills — a fragment of the map that read
   as broken rather than as navigation.

   This shows the WHOLE map in miniature at the head of every page:
   every destination, focus, people option and shape option, in the
   same four-stage order, with the current page's box enlarged,
   filled forest-green and tagged "You are here". Any box enlarges
   on hover. "See the whole map" still opens the full-size version,
   and the mini steps aside while that is open so the two never
   compete.

   Rendered by `miniHTML()` in h2s-journey.js — live data, no
   rebuild needed, no generated HTML touched.
   ============================================================ */

.h2s-mini{font-family:'DM Sans',sans-serif}

.h2s-mini-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:10px;
}
.h2s-mini-eyebrow{
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--h2s-gold-dk);white-space:nowrap;
}
.h2s-mini-note{
  font-size:.72rem;color:#5d7568;flex:1 1 auto;min-width:0;
}
.h2s-mini-bar .h2s-rail-toggle{margin-left:auto;flex:0 0 auto}

/* ---- the track: root → 4 stage columns ---- */
.h2s-mini-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.h2s-mini-track{
  display:flex;align-items:flex-start;gap:6px;
  min-width:max-content;padding:2px 2px 6px;
}
.h2s-mini-col{
  display:flex;flex-direction:column;gap:5px;
  padding:7px 7px 8px;border-radius:14px;
  border:1px solid transparent;
}
.h2s-mini-col{align-items:flex-start}
.h2s-mini-col.is-root{justify-content:center;padding-top:26px}
.h2s-mini-col.is-here-stage{
  background:rgba(233,196,106,.20);
  border-color:rgba(233,196,106,.55);
}
.h2s-mini-arrow{
  align-self:center;margin-top:26px;
  color:rgba(45,106,79,.45);font-weight:700;font-size:.85rem;flex:0 0 auto;
}

.h2s-mini-stage{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--h2s-gold);color:var(--h2s-forest)!important;
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px 4px 4px;border-radius:999px;
  align-self:flex-start;white-space:nowrap;
  transition:box-shadow .18s;
}
.h2s-mini-stage:hover{box-shadow:0 3px 9px rgba(27,67,50,.25)}
.h2s-mini-stage i{
  background:var(--h2s-forest);color:var(--h2s-gold);
  width:16px;height:16px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-style:normal;font-size:.6rem;
}
.h2s-mini-col.is-here-stage .h2s-mini-stage{
  box-shadow:0 0 0 4px rgba(233,196,106,.35);
}
.h2s-mini-chips{display:flex;flex-direction:column;align-items:flex-start;gap:4px}

/* ---- the chips ---- */
.h2s-mchip{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid rgba(45,106,79,.30);
  border-radius:999px;padding:4px 11px 4px 8px;
  font-size:.71rem;line-height:1.2;color:var(--h2s-ink)!important;
  white-space:nowrap;cursor:pointer;
  transition:transform .16s cubic-bezier(.22,.8,.28,1),box-shadow .16s,border-color .16s,background .16s;
  transform-origin:left center;
}
.h2s-mchip .e{font-size:.85rem;line-height:1}
.h2s-mchip:hover,.h2s-mchip:focus-visible{
  transform:scale(1.09);
  border-color:var(--h2s-mid);
  box-shadow:0 5px 14px rgba(27,67,50,.20);
  z-index:2;position:relative;
}
.h2s-mchip.gold{background:var(--h2s-gold-wash);border-color:var(--h2s-gold)}
.h2s-mchip.prize{
  background:linear-gradient(150deg,#1B4332,#2D6A4F);
  border-color:var(--h2s-gold);color:var(--h2s-gold)!important;font-weight:600;
}
.h2s-mchip.muted{
  background:transparent;border-style:dashed;border-color:rgba(45,106,79,.35);
  color:#6c7d73!important;cursor:default;
}
.h2s-mchip.muted:hover{transform:none;box-shadow:none}
.h2s-mchip.is-rootchip{
  background:var(--h2s-forest);border-color:var(--h2s-forest);
  color:#fff!important;font-weight:600;padding:6px 13px 6px 10px;
}

/* ---- YOU ARE HERE: the current page's box, enlarged ---- */
.h2s-mchip.is-here{
  background:var(--h2s-forest);border-color:var(--h2s-gold);border-width:2px;
  color:var(--h2s-gold)!important;font-weight:700;font-size:.78rem;
  padding:7px 13px 7px 10px;
  transform:scale(1.04);
  box-shadow:0 6px 16px rgba(27,67,50,.30);
  z-index:1;position:relative;
}
.h2s-mchip.is-here:hover{transform:scale(1.12)}
.h2s-mchip.is-here .e{font-size:1rem}
.h2s-mhere{
  background:var(--h2s-gold);color:var(--h2s-forest);
  font-size:.5rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:999px;margin-left:2px;
}

/* while the full-size map is open, the mini steps aside */
.h2s-journey.is-open .h2s-mini-scroll{display:none}
.h2s-journey.is-open .h2s-mini-bar{margin-bottom:0}

/* small screens: the track scrolls sideways, so say so */
.h2s-mini-swipe{display:none;text-align:center;margin:0 0 8px}
.h2s-mini-swipe span{
  display:inline-block;background:#fff;border:2px solid var(--h2s-gold);
  color:var(--h2s-forest);font-weight:700;font-size:.74rem;
  padding:5px 14px;border-radius:999px;
}
@media(max-width:820px){
  .h2s-mini-note{display:none}
  .h2s-mini-bar .h2s-rail-toggle{margin-left:0;width:100%;justify-content:center}
  .h2s-mini-swipe{display:block}
  .h2s-journey.is-open .h2s-mini-swipe{display:none}
}
@media print{
  .h2s-mini-scroll{overflow:visible}
}

/* ---------- "swipe or scroll sideways" prompt (14 August 2026) ----------
   His instruction: label the sideways scrollbar the way the audience pills
   are labeled. Same treatment as `.h2s-aud-hint` — uppercase, tracked,
   forest, centered, no pill — one step smaller because it sits under a
   4px scroll strip rather than over a pair of buttons. Shown at every
   width; hidden when the rail is pinned, where every pixel is rented. */
.h2s-mini-scrollhint{
  margin:4px 0 0;
  text-align:center;
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--h2s-forest,#1B4332);
}
.h2s-journey.is-pinned .h2s-mini-scrollhint{display:none}
@media(max-width:560px){
  .h2s-mini-scrollhint{font-size:.62rem;letter-spacing:.08em}
}

/* ============================================================
   HOMEPAGE HERO — map directly under the headline (2026-08-09)
   ------------------------------------------------------------
   index.html's hero used to be one .hero-content column holding
   the headline, the descriptive paragraph, the buttons and the
   "since 2006" line, with the journey map placed much further
   down the page, just above "Currently Accepting Applications".

   The hero is now split in two around the map: headline, then the
   map full-bleed, then the copy. `.hero` is already a column
   flexbox with align-items:center, so the map only needs
   align-self:stretch to run edge to edge — no 100vw trick, which
   would have risked a scrollbar-width overflow.
   ============================================================ */
.hero > .h2s-journey{
  align-self:stretch;
  width:100%;
  position:relative;
  z-index:4;                 /* same layer as .hero-content, above the photo */
  margin:30px 0 0;
  border-top:1px solid rgba(45,106,79,.16);
}
.hero-content-lower{margin-top:34px}

@media(max-width:900px){
  .hero > .h2s-journey{margin-top:22px}
  .hero-content-lower{margin-top:24px}
}

/* ==========================================================================
   DEEP RESTRUCTURE — 9 August 2026
   Step-page components. Namespaced .h2s-* so they cannot collide with
   styles.css. Nothing here overrides an existing rule.
   ========================================================================== */

/* --- "you are deciding X" strip ---------------------------------------- */
.h2s-stepintro{padding:30px 0 6px}
.h2s-stepintro-card{max-width:820px;margin:0 auto;display:flex;gap:18px;
  align-items:flex-start;background:var(--white);border:1px solid var(--border);
  border-left:6px solid var(--gold);border-radius:var(--radius-lg);padding:22px 26px}
.h2s-stepintro-num{font-family:'Fraunces',serif;font-size:2.1rem;line-height:1;
  color:var(--gold);flex-shrink:0}
.h2s-stepintro-eyebrow{display:block;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px}
.h2s-stepintro-lead{margin:0;font-size:.95rem;line-height:1.7;color:var(--text-dark)}

/* --- next-step focus tiles --------------------------------------------- */
.h2s-nextstep-head{text-align:center;margin-bottom:32px}
.h2s-nextgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.h2s-nexttile{display:flex;flex-direction:column;gap:8px;padding:26px 22px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  position:relative;overflow:hidden}
.h2s-nexttile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .22s ease}
.h2s-nexttile:hover,.h2s-nexttile:focus-visible{transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(27,67,50,.16);border-color:var(--green-mid)}
.h2s-nexttile:hover::after,.h2s-nexttile:focus-visible::after{transform:scaleY(1)}
.h2s-nexttile-icon{font-size:1.8rem;line-height:1}
.h2s-nexttile-title{font-family:'Fraunces',serif;font-weight:700;font-size:1.02rem;
  color:var(--green-deep);line-height:1.3}
.h2s-nexttile-hint{font-size:.84rem;line-height:1.55;color:var(--text-muted)}
.h2s-nexttile-go{margin-top:auto;padding-top:10px;font-size:.8rem;font-weight:700;
  color:var(--green-mid);opacity:0;transform:translateX(-6px);
  transition:opacity .2s ease,transform .2s ease}
.h2s-nexttile:hover .h2s-nexttile-go,.h2s-nexttile:focus-visible .h2s-nexttile-go{opacity:1;transform:none}

/* --- "want the detail?" library bar ------------------------------------ */
.h2s-detailbar-head{text-align:center;margin-bottom:30px;max-width:640px;margin-left:auto;margin-right:auto}
.h2s-detailbar-head p{font-size:.92rem;color:var(--text-muted);margin-top:12px}
.h2s-detailgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.h2s-detailtile{display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md,12px);
  text-decoration:none;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.h2s-detailtile:hover,.h2s-detailtile:focus-visible{background:var(--ivory);
  border-color:var(--green-mid);transform:translateY(-2px)}
.h2s-detailtile-title{font-weight:700;color:var(--green-deep);font-size:.96rem}
.h2s-detailtile-title::after{content:" \2192";color:var(--gold-dark)}
.h2s-detailtile-sub{font-size:.82rem;line-height:1.5;color:var(--text-muted)}

/* --- library page on-this-page rail ------------------------------------ */
.h2s-libnav{padding:26px 0 0}
.h2s-libnav-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.h2s-libnav-grid a{padding:8px 16px;border-radius:50px;background:var(--ivory);
  border:1px solid var(--border);font-size:.85rem;font-weight:600;
  color:var(--green-deep);text-decoration:none;transition:background .18s,color .18s}
.h2s-libnav-grid a:hover,.h2s-libnav-grid a:focus-visible{background:var(--green-deep);color:#fff}

/* --- library index (additional-content.html) --------------------------- */
.h2s-shelf{margin-bottom:38px}
.h2s-shelf-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;
  padding-bottom:10px;border-bottom:2px solid var(--gold)}
.h2s-shelf-head h2{margin:0;font-size:1.15rem}
.h2s-shelf-count{font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted)}
.h2s-shelf-note{font-size:.86rem;color:var(--text-muted);margin:0 0 16px}
.h2s-shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

@media (max-width:900px){
  .h2s-nextgrid{grid-template-columns:repeat(2,1fr)}
  .h2s-detailgrid,.h2s-shelf-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .h2s-nextgrid,.h2s-detailgrid,.h2s-shelf-grid{grid-template-columns:1fr}
  .h2s-stepintro-card{padding:18px 20px}
}

/* ==========================================================================
   HERO PHOTOGRAPH — 9 August 2026
   Diagnosis: the photo sat at opacity .32 over a SATURATED GREEN gradient,
   so 68% of every hero pixel was flat green and the picture read as a wash.
   A 64px white grid sat on top of it. Worst case (a light area of the photo)
   the gold sub-headline measured 2.60:1 — below AA.
   Fix: raise the photo, and do the darkening with a near-NEUTRAL scrim
   instead of more green. Same amount of photo shows through (31% vs 32%),
   but the color cast drops 22% -> 10% and white contrast rises to 6.5:1,
   so it reads as a dimmed photograph rather than a green rectangle.
   Vertical, not radial, so the wide headline stays covered at every width.
   styles.css is untouched; these override from the later stylesheet.
   ========================================================================== */
.hero-bg-photo{
  opacity:.85;
  filter:saturate(.96) contrast(1.06);
}
.hero-pattern{
  background-image:
    linear-gradient(180deg,
      rgba(10,22,17,.68)   0%,
      rgba(10,22,17,.66)  15%,
      rgba(10,22,17,.44)  30%,
      rgba(10,22,17,.42)  74%,
      rgba(10,22,17,.62) 100%),
    radial-gradient(circle at 15% 85%, rgba(82,183,136,.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(233,196,106,.08) 0%, transparent 45%);
}
/* the 64px white grid read as a screen artifact over a photograph */
/* 15 Aug 2026: it is `position:absolute; inset:0` with no z-index, so on
   index.html it paints OVER the injected `.h2s-apply-top` section (which is a
   sibling of `.hero-content`, and `.hero-content` is the only child with a
   z-index). Measured: 15 of the 42 interactive elements inside the hero were
   hit-tested to this div instead of themselves, including 14 of the 15
   application option boxes. It is purely decorative and empty, so it must
   never take a pointer event. */
.hero-grid-overlay{opacity:.22;pointer-events:none}
/* `.hero-pattern` and `.hero-bg-photo` are the same shape — empty decorative
   divs, `position:absolute; inset:0`, no z-index — stacked beneath the grid.
   Each one caught the identical 15 elements the moment the layer above it
   stopped catching them, so all three are fixed together.
   `.hero-pattern::after` (the 14 Aug hero photo band) inherits this, which is
   also what we want. */
.hero-pattern,.hero-bg-photo{pointer-events:none}

/* Structural guard, so a FOURTH decorative layer can never reintroduce this.
   `.hero-content` already carries `z-index:4` in styles.css:319 precisely
   because of these layers; the injected `.h2s-apply-top` section is its
   sibling inside `.hero` on index.html and had no stacking context at all. */
.hero > .h2s-apply-top{position:relative;z-index:4}

/* --- homepage hero: photograph brought forward — 12 August 2026 -----------
   Asked for: the photo slightly more visible, desktop and mobile alike.
   MEASURED, before: photo opacity .85 under a scrim of .67 at the headline
   and .42 at the introduction, so 28% of the photograph survived to the
   screen behind the headline and 49% behind the introduction.
   After: opacity .93 under .61 / .36 -> 36% and 60%. That is +29% and +22%
   more photograph, not a different picture.
   Worst case checked against a PURE WHITE photo pixel (I do not have the
   image file, so this is the ceiling, not a sample): white headline 7.20:1
   -> 5.43:1, gold headline 4.31:1 -> 3.25:1 (AA large-text floor is 3:1),
   introduction body text, counting its own radial scrim, 8.50:1 -> 7.18:1
   at the center and 5.87:1 -> 4.69:1 at the soft edge (AA floor 4.5:1).
   Every real pixel of a green landscape sits far above those numbers.
   Scoped to the homepage hero via :has(.hero-content-lower) so engage.html,
   which uses a bright back-lit photograph, is untouched.
   ------------------------------------------------------------------------ */
.hero:has(.hero-content-lower) > .hero-bg-photo{opacity:.93}
.hero:has(.hero-content-lower) > .hero-pattern{
  background-image:
    linear-gradient(180deg,
      rgba(10,22,17,.62)   0%,
      rgba(10,22,17,.60)  15%,
      rgba(10,22,17,.38)  30%,
      rgba(10,22,17,.36)  74%,
      rgba(10,22,17,.56) 100%),
    radial-gradient(circle at 15% 85%, rgba(82,183,136,.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(233,196,106,.08) 0%, transparent 45%);
}

/* the introduction sits low in the hero where the scrim has eased off */
.hero-content-lower{position:relative}
.hero-content-lower::before{
  content:"";position:absolute;inset:-26px -30px;z-index:-1;pointer-events:none;
  border-radius:26px;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,
    rgba(10,22,17,.52) 0%, rgba(10,22,17,.32) 62%, rgba(10,22,17,0) 100%);
}

/* --- homepage hero: two photo layers instead of one zoomed crop ----------
   The hero is 2,394px tall, but only two bands of it are visible: the
   headline (0-362px) and the introduction (1,934-2,394px). The 1,535px
   between them is covered by the journey map's opaque ivory panel.
   A single `background-size:cover` therefore scaled one photo to 2,394px —
   about 2.2x — and cropped the sides off to reach it. That is the zoom.
   Two layers at natural aspect, one anchored top and one anchored bottom,
   put the top of the photo behind the headline and the bottom of it behind
   the introduction, at full width and with no upscaling.
   The layers are declared inline on index.html so engage.html — which uses
   a different photograph — is untouched. Below 900px the photo is too short
   at natural aspect to fill the headline band, so cover is restored.
   ------------------------------------------------------------------------ */
/* --- the same two bands on a phone — 12 August 2026 ----------------------
   BUG, MEASURED. The 9 August rule above restored `cover` below 900px. But
   `cover` is computed against the WHOLE hero, and on a phone the hero is
   2,205px tall while only two bands of it are ever seen: the headline band,
   401px at 393px wide, and the introduction, 168px. Covering 2,205px of
   height with a landscape photograph means scaling it to 2,205 x (2,205 x
   its aspect ratio) — 5.61x the width of the screen whatever that aspect
   ratio is. You therefore see about a fifth of the picture, blown up. That
   is the zoom.
   FIX. Size each layer to its band instead of to the hero, which is what
   the desktop declaration does by accident of the hero being short and wide.
   `auto 460px` covers the tallest headline band measured (401px at 360-393px
   wide; 357 at 414-430; 313-366 from 540 to 899) with 59px to spare, and
   magnification falls from 5.61x the screen width to 1.17x — a 4.8x
   reduction, again independent of the photograph's aspect ratio.
   The second layer cannot simply anchor to `bottom` here as it does on
   desktop: the CTA cards stack on a phone and stand 380px tall (416px from
   700px up), so a bottom-anchored layer lands entirely behind them. Anchored
   400px up it spans 400-860px above the hero's foot, and the introduction
   block measures 420-588px above that foot at every width tested, so it is
   covered with 272px of slack — enough that the fold opening or closing
   cannot expose a seam.
   I do not have the photograph, so this is verified as coverage geometry
   with a stand-in image, not as a judgment of how the crop looks.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  /* the element's own two layers stop painting; the bands below replace them */
  .hero:has(.hero-content-lower) > .hero-bg-photo{
    background-size:0 0,0 0!important;
  }
  /* `background-image:inherit` picks up the two layers declared inline on
     index.html, so engage.html's different photograph is never referenced
     here and no filename is hardcoded in the stylesheet. */
  .hero:has(.hero-content-lower) > .hero-bg-photo::before,
  .hero:has(.hero-content-lower) > .hero-bg-photo::after{
    content:"";position:absolute;left:0;right:0;height:460px;
    background-image:inherit;background-repeat:no-repeat;background-size:cover;
  }
  .hero:has(.hero-content-lower) > .hero-bg-photo::before{
    top:0;background-position:center top;      /* behind the headline */
  }
  .hero:has(.hero-content-lower) > .hero-bg-photo::after{
    bottom:376px;background-position:center bottom; /* behind the introduction */
    /* If the reader opens "Read the full detail" the introduction grows to
       about 2,230px at 393px wide and runs off the top of this band. The
       band is not made taller to meet it — that is the zoom, back again —
       so its top 150px dissolves into the hero's own green instead of
       ending on a hard line. Folded, the whole fade sits behind the map
       panel (the band reaches 836px above the hero's foot, the folded
       introduction only 588px), so nothing about the normal view changes. */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 150px);
    mask-image:linear-gradient(to bottom,transparent 0,#000 150px);
  }
}

/* --- desktop: the bottom band gets the phone's fade too — 14 August 2026 ---
   HIS REPORT, and it is real: open "Read the full detail" on the homepage
   introduction and a hard horizontal line cuts straight across the prose,
   green above, photograph below.

   MEASURED at 1440px. Folded, the hero is 3,612px and the introduction sits
   160-346px above its foot, comfortably inside the bottom band. Opened, the
   hero grows to 5,145px and the introduction spans 160-1,879px above the
   foot — far taller than a band drawn at the photograph's natural aspect can
   ever be. So the text runs off the top of the picture and ends on the band's
   own edge. The phone already solved this (see the mask on ::after above);
   desktop never got it, because there the bands are background layers on the
   element itself and a mask would fade BOTH of them.

   FIX: move the bottom band onto its own pseudo-element so it can carry its
   own mask. The element keeps painting the TOP band only — the inline
   declaration on index.html lists the bottom layer first, so `0 0` on layer
   one and `100% auto` on layer two leaves the headline band untouched.

   WHY `cover` HERE AND NOT `100% auto`: with `cover` the picture fills the
   box exactly, so the box's top edge IS the picture's top edge and a
   top-anchored fade always lands on it — no need to know the file's aspect
   ratio, which I do not have. At 620px tall and 1,440px wide or more, cover
   CROPS rather than upscales for any photograph up to about 2.3:1, so this
   reintroduces none of the zoom the two-layer approach was built to remove.
   Folded, the band covers the introduction with 274px to spare, so the
   normal view is unchanged; opened, the top 180px dissolves into the hero's
   own green instead of ending on a line.
   ------------------------------------------------------------------------ */
@media (min-width:901px){
  .hero:has(.hero-content-lower) > .hero-bg-photo{
    /* `!important` because the two layers are declared INLINE on index.html
       and an inline style beats a stylesheet rule — the mobile block above
       needs it for the same reason. */
    background-size:0 0,100% auto!important;   /* bottom layer off, headline kept */
  }
  .hero:has(.hero-content-lower) > .hero-bg-photo::after{
    content:"";position:absolute;left:0;right:0;bottom:0;
    /* Height scales with width so `cover` always CROPS rather than upscales:
       at 901px the band is 414px against a natural render of 507px even for a
       16:9 file, and at 1440px it is 620px against 810px. The 400px floor
       keeps the folded introduction covered (it reaches 346px above the hero
       foot at every desktop width measured). */
    height:clamp(400px,46vw,620px);
    background-image:inherit;background-repeat:no-repeat,no-repeat;
    background-size:cover,0 0;background-position:center bottom,center top;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 180px);
            mask-image:linear-gradient(to bottom,transparent 0,#000 180px);
  }
}

/* ==========================================================================
   NAV DROPDOWNS — hover bridge (9 August 2026)
   ------------------------------------------------------------
   BUG, MEASURED
   `.nav-dropdown` sits at `top: calc(100% + 8px)` in styles.css, tightened
   to +7px for the two-tier header. That leaves a 7px dead band between the
   bottom of the `<li>` and the top of the menu. Because the previous session
   set `pointer-events:none` on `.nav-links` (so the logo stays clickable
   through the overlaying `<ul>`), nothing in that band holds the hover —
   the pointer falls straight through to the page behind.
   Measured on all six menus: each opens on hover, then closes the instant
   the pointer moves 0px below the pill. Hence "it only works if you click".
   FIX
   Two invisible bridges that live INSIDE `.has-dropdown`, so hovering them
   keeps `:hover` true: one spanning the pill's width, one spanning the
   menu's width (the two differ, and people drift diagonally). Plus
   `:focus-within` so the menus open from the keyboard as well.
   Nothing moves visually — the 7px gap is still there.
   ========================================================================== */
@media(min-width:901px){
  .nav-links .has-dropdown{position:relative}

  /* bridge A — the width of the nav pill */
  .nav-links .has-dropdown:hover::after,
  .nav-links .has-dropdown:focus-within::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:10px;
    background:transparent;
  }
  /* bridge B — the width of the menu itself */
  .nav-links .nav-dropdown::before{
    content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
    background:transparent;
  }
  /* keyboard: tabbing into the pill opens its menu */
  .nav-links .has-dropdown:focus-within > .nav-dropdown{display:block}
}

/* ==========================================================================
   ADDITIONAL CONTENT MENU — grouped reference list (9 August 2026)
   ------------------------------------------------------------
   Replaces a single generic "Reference Library — everything" link plus a
   flat 20-item list that omitted 9 of the library's entries. Every one of
   the 29 items in additional-content.html now has its own titled link,
   grouped under the same seven headings the library page itself uses, so
   the menu and the page read as one reference system.
   Right-anchored: this is the last item in the tier-2 strip, so `left:0`
   would push a wide panel off the right edge of the viewport.
   ========================================================================== */
@media(min-width:901px){
  .nav-links .nav-dropdown.h2s-dd-library{
    left:auto;right:0;
    width:min(860px,calc(100vw - 48px));
    max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
    padding:20px 22px 16px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px 22px;
    align-items:start;
  }
  /* display is set ONLY on hover/focus. Putting it on the base rule made
     `.nav-links .nav-dropdown.h2s-dd-library` (0,3,0, later in the cascade
     than `.has-dropdown:hover .nav-dropdown`) win unconditionally, which
     pinned the panel open on all 49 pages. */
  .nav-links .has-dropdown:hover > .nav-dropdown.h2s-dd-library,
  .nav-links .has-dropdown:focus-within > .nav-dropdown.h2s-dd-library{display:grid}

  .h2s-dd-group{break-inside:avoid}
  .h2s-dd-group > ul{list-style:none;margin:0;padding:0}
  .h2s-dd-head{
    display:block;
    font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-dark,#B8860B);
    padding:10px 10px 6px;margin-bottom:2px;
    border-bottom:1px solid var(--border,#E5E1D8);
  }
  .nav-links .h2s-dd-library a{
    padding:7px 10px;font-size:.845rem;line-height:1.35;border-radius:6px;
  }
  .nav-links .h2s-dd-library a.h2s-dd-pdf::after{
    content:" PDF";font-size:.62rem;font-weight:800;letter-spacing:.08em;
    color:var(--gold-dark,#B8860B);
  }
}

/* Hamburger panel: the grid would be unusable in a narrow column. */
@media(max-width:900px){
  .nav-links.mobile-open .has-dropdown.dropdown-open > .h2s-dd-library{display:block}
  .nav-links.mobile-open .h2s-dd-group > ul{list-style:none;margin:0;padding:0}
  .nav-links.mobile-open .h2s-dd-head{
    display:block;padding:10px 22px 4px;
    font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-dark,#B8860B);
  }
  .nav-links.mobile-open .h2s-dd-library a{padding-left:22px}
}

/* ---------- HOOKS inside center-aligned sections (9 August 2026) ----------
   `.h2s-hook` is `max-width:60ch; margin:0` with a gold rule on its left, so
   in a centered section it sat flush left while the H2 above it was centered —
   the text inside inherited `text-align:center`, which is why only the last
   line looked centered and the block looked broken. `applyHooks()` now tags
   hooks whose heading resolves to `text-align:center`; those center their
   own box, and the left rule becomes a short centered rule underneath so a
   centered paragraph isn't hanging off a left-hand bar. Left-aligned hooks
   elsewhere on the site are untouched. */
.h2s-hook.is-centered{
  margin-left:auto;margin-right:auto;
  padding-left:0;
  border-left:0;
  text-align:center;
  padding-bottom:14px;
}
.h2s-hook.is-centered::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--h2s-gold,#E9C46A);
  margin:14px auto 0;
}
@media(max-width:700px){
  .h2s-hook.is-centered{padding-left:0}
}

/* ---------- "tap a pill to switch view" reminder (9 August 2026) ----------
   The two audience pills read as labels rather than as a control, so people
   did not realize the whole map could be switched. Rendered from audHTML in
   h2s-journey.js, so it appears wherever the pills appear — above the map on
   index/journey/404, and inside the expandable panel everywhere else. */
.h2s-aud-hint{
  margin:20px 0 0;
  text-align:center;
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--h2s-forest,#1B4332);
}
.h2s-aud{padding-top:8px}
.h2s-aud-hint + .h2s-aud.h2s-aud-inpanel{padding-top:6px}
@media(max-width:560px){
  .h2s-aud-hint{font-size:.72rem;letter-spacing:.1em;margin-top:16px}
}

/* ============================================================
   PINNED JOURNEY RAIL — 10 August 2026
   ------------------------------------------------------------
   The collapsed rail now parks under the sticky header instead of
   scrolling away, so the map keeps orienting you on a long page.

   Why it has to compact: measured on apply.html, the rail is 266px tall
   at 1440x900 and 330px at 390x844 — 30% and 39% of the viewport. Pinned
   at that height it would be a wall, not a guide. Pinned, the four stage
   columns lay out as one horizontal row (measurements in the commit
   note), and the eyebrow/hint row is dropped unless it still carries a
   control.

   `.site-nav` is position:sticky;top:0 and measures 123px at 1440 and
   77px at 390, so the parking offset is published as --h2s-navh by
   h2s-journey.js rather than hard-coded per breakpoint.
   ============================================================ */

.h2s-pin-sentinel{height:1px;margin-bottom:-1px;pointer-events:none}

/* Override of .h2s-journey{position:relative} (line 29): sticky needs the
   position, and nothing inside the rail is absolutely positioned against it. */
.h2s-journey.h2s-pinnable{
  position:sticky;
  top:var(--h2s-navh,0px);
  /* below .site-nav's z-index:200 so the header dropdowns still overlay the rail */
  z-index:150;
}
/* The eight Additional Content pages keep the expander (originally because
   the student/faculty pills lived inside that panel; since 11 August 2026 the
   pills sit above the rail on every page and the expander only reaches the
   big map). Opening it while the rail is
   pinned must not drop the rail back into the flow — it would open the panel
   off-screen above you. It stays pinned and the panel gets a viewport-bounded
   height with its own scroll instead. The 90px allows for the bar plus the
   rail's own padding. Overrides .h2s-j-panel > div{overflow:hidden} (line
   135), which is there to clip the closed state. */
.h2s-journey.h2s-pinnable.is-pinned.is-open .h2s-j-panel > div{
  max-height:calc(100vh - var(--h2s-navh,0px) - 90px);
  overflow:auto;
}

.h2s-journey.is-pinned{
  box-shadow:0 6px 16px rgba(27,67,50,.12);
  border-bottom-color:rgba(45,106,79,.28);
}
.h2s-journey.is-pinned .h2s-j-inner{padding:5px 20px 5px}

/* Drop the eyebrow, the hint and the swipe prompt while pinned — but keep the
   bar itself if it still holds the expander, which it does only on the eight
   Additional Content pages. */
.h2s-journey.is-pinned .h2s-mini-eyebrow,
.h2s-journey.is-pinned .h2s-mini-note,
.h2s-journey.is-pinned .h2s-mini-swipe{display:none}
.h2s-journey.is-pinned .h2s-mini-bar:not(:has(.h2s-rail-toggle)){display:none}
.h2s-journey.is-pinned .h2s-mini-bar{margin-bottom:4px}
.h2s-journey.is-pinned .h2s-rail-toggle{padding:3px 12px;font-size:.68rem}

/* Four stacked columns become one row of chips. */
.h2s-journey.is-pinned .h2s-mini-track{padding:1px 2px 2px}
.h2s-journey.is-pinned .h2s-mini-col{flex-direction:row;align-items:center;gap:6px;padding:2px 6px}
.h2s-journey.is-pinned .h2s-mini-col.is-root{padding-top:2px}
.h2s-journey.is-pinned .h2s-mini-chips{flex-direction:row;align-items:center;gap:5px}
.h2s-journey.is-pinned .h2s-mini-stage{align-self:center}
.h2s-journey.is-pinned .h2s-mini-arrow{align-self:center;margin-top:0}
.h2s-journey.is-pinned .h2s-mini-scroll{padding-bottom:1px}

@media (prefers-reduced-motion:reduce){
  .h2s-journey.h2s-pinnable{transition:none}
}

.h2s-pin-spacer{height:0;pointer-events:none}

/* ============================================================
   FLAG GLYPHS — 10 August 2026
   ------------------------------------------------------------
   The country flags are Unicode regional-indicator pairs (U+1F1E6–1F1FF).
   Whether they draw as a flag or as two plain letters ("DO", "CR") is
   decided by the device's emoji font, not by this site — measured: the
   markup and the element visibility are identical at 1440px and 390px, so
   nothing here was hiding them. Platforms without flag glyphs fell back to
   the letters.

   h2s-interactive.js paints the four flags the site uses over the emoji at
   runtime, so every device renders the same picture. The emoji itself stays
   in the HTML — nothing is deleted, and with JS off you get exactly the
   behavior you have today.

   Artwork: Twemoji (https://github.com/jdecked/twemoji), graphics CC-BY 4.0.
   26.4KB across four files, four cached requests, only on pages that use them.
   ============================================================ */

.h2s-flag{
  display:inline-block;
  /* 4:3 at the size of the surrounding text, so it swaps in for the emoji
     without changing line height. Sized in em, so the font-size must stay
     inherited — that rules out hiding the original characters with
     font-size:0. */
  width:1.18em;height:.885em;
  vertical-align:-.11em;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  flex:0 0 auto;
  /* The original emoji characters are kept inside the span so copy-paste and
     find-in-page still return the flag rather than a gap. They are pushed out
     of the box and clipped rather than removed, which keeps them findable. */
  overflow:hidden;
  text-indent:-100em;
  white-space:nowrap;
}
.h2s-flag-do{background-image:url("flag-do.svg")}
.h2s-flag-cr{background-image:url("flag-cr.svg")}
.h2s-flag-bz{background-image:url("flag-bz.svg")}

/* Printing a background image is unreliable and these are decorative. */
@media print{.h2s-flag{display:none}}

/* ============================================================
   EQUAL-HEIGHT MAP NODES — 10 August 2026
   ------------------------------------------------------------
   .h2s-node sets min-height:132px, which is a floor, not a height — so a
   box with more inside it grew past its row-mates. Measured at 1440 / 636
   / 390px, identically at all three:

     student  (4) Make it yours : "21 days" 132px vs
                                  "Fully custom immersion" 161px  — 29px out
     faculty  (4) Make it yours : "21 days" 132px vs
                                  "Fully Customized Academic Immersion" 145px — 13px out

   Both outliers are the boxes carrying an extra .h2s-chip-days element on
   top of name + hint. Every other row measured 0px spread.

   (The faculty (3) row reads as 158x153 for "Bring or co-lead a group",
   but that is the you-are-here scale(1.16) on a 136x132 box — a visual
   transform, not a layout difference. Left alone; it is deliberate.)

   The rows are already flex with the default align-items:stretch, so each
   <li> is the height of its tallest sibling; the box inside it just was not
   filling that height. Fixing it here rather than by trimming the copy
   means it holds whatever the text does — including under the real
   Fraunces/DM Sans metrics, which differ from the fallback fonts any
   measurement here can see.
   ============================================================ */

.h2s-tree ul ul > li > .h2s-node{flex:1 1 auto}

/* ============================================================
   MOBILE JOURNEY MAP — option B hybrid — 10 August 2026
   ------------------------------------------------------------
   Below 820px the expanded map renders as four collapsible sections
   instead of the five-across decision tree. Measured at 390x844 before
   this change: the map alone was 1,737px tall on index.html and 1,681px
   on faculty.html, with fixed 136x132px boxes and connector lines.

   Only the arrangement changes. Every node is still nodeHTML() output —
   same names, hints, chips, ribbons, you-are-here marker and links.
   Nothing is hidden from crawlers: <details> content stays in the DOM.

   820px matches the existing .h2s-swipe breakpoint (line 179) rather
   than introducing a fifth number.
   ============================================================ */

@media(max-width:820px){

  .h2s-mmap{display:block;margin:0 auto;max-width:560px}

  /* the root node, laid flat as an intro row rather than a box */
  .h2s-mroot{display:flex;align-items:center;gap:12px;background:var(--green-deep,#1B4332);
    border-radius:16px;padding:14px 16px;text-decoration:none;margin-bottom:6px}
  .h2s-mroot .h2s-emoji{font-size:1.4rem;line-height:1}
  .h2s-mroot .h2s-name{display:block;font-family:'Fraunces',serif;font-weight:700;
    font-size:1.02rem;color:#fff}
  .h2s-mroot .h2s-hint{display:block;font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gold,#E9C46A);margin-top:2px}

  .h2s-msec{border-top:1px solid rgba(45,106,79,.20)}
  .h2s-msec:first-of-type{border-top:none}
  .h2s-mhead{display:flex;align-items:center;gap:11px;padding:16px 2px;cursor:pointer;
    list-style:none}
  .h2s-mhead::-webkit-details-marker{display:none}
  .h2s-mhead:focus-visible{outline:3px solid var(--gold,#E9C46A);outline-offset:2px;border-radius:8px}
  .h2s-mhead .n{flex:0 0 auto;width:27px;height:27px;border-radius:50%;
    background:var(--gold,#E9C46A);color:var(--green-deep,#1B4332);
    font-family:'Fraunces',serif;font-weight:700;font-size:.86rem;
    display:flex;align-items:center;justify-content:center}
  .h2s-mtitle{font-family:'Fraunces',serif;font-weight:700;font-size:1.14rem;
    color:var(--green-deep,#1B4332)}
  .h2s-mchev{margin-left:auto;color:var(--green-mid,#2D6A4F);font-size:.95rem;
    transition:transform .2s}
  .h2s-msec[open] .h2s-mchev{transform:rotate(180deg)}
  .h2s-mbody{padding-bottom:18px}
  .h2s-mswipe{font-size:.8rem;color:#5d7568;margin:0 0 10px}

  /* Default arrangement: two cards per row. */
  .h2s-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  /* Step 3 reads better full width — the labels are the longest on the map. */
  .h2s-msec-people .h2s-mgrid{grid-template-columns:1fr}
  /* Step 1 is a swipe rail, so five destinations cost one row, not three. */
  .h2s-msec-place .h2s-mgrid{display:flex;gap:11px;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 -18px;padding:2px 18px 12px;
    /* WITHOUT THIS the rail opens mis-aligned — 14 Aug 2026. `scroll-snap-type:
       x mandatory` snaps the first card's start edge to the START OF THE
       SNAPPORT, and the snapport ignores padding unless scroll-padding says
       otherwise. So the browser scrolled to 18px on load, swallowing the
       18px gutter and pushing the first card under the section's negative
       margin: measured scrollLeft 18 at rest at both 390px and 430px, with
       the card's left edge 4px outside the viewport. Matching the padding
       here makes the snapport start where the gutter ends, so at rest the
       rail sits at 0 and the first card keeps its gutter. */
    scroll-padding-left:18px;scroll-padding-right:18px;
    -webkit-overflow-scrolling:touch}
  .h2s-msec-place .h2s-mgrid::-webkit-scrollbar{height:0}
  .h2s-msec-place .h2s-node{flex:0 0 62%;max-width:210px;scroll-snap-align:start}

  /* Overrides of .h2s-node's fixed 136px width and 132px min-height (lines
     955-965): inside these sections the cards are fluid and left-aligned,
     which is what buys back the legible subtitle. */
  .h2s-mgrid .h2s-node{width:auto;min-height:0;align-items:flex-start;
    text-align:left;padding:14px;margin:0}
  .h2s-mgrid .h2s-node .h2s-name{font-size:1rem;line-height:1.2}
  .h2s-mgrid .h2s-node .h2s-hint{font-size:.78rem;text-transform:none;letter-spacing:0}
  .h2s-mgrid .h2s-node .h2s-emoji{font-size:1.35rem}
  .h2s-mgrid .h2s-node.is-here{transform:none;box-shadow:0 0 0 2px var(--gold,#E9C46A)}
  .h2s-msec-people .h2s-mgrid .h2s-node{flex-direction:row;align-items:center;gap:12px}

  /* Connectors are the clutter this layout exists to remove. */
  .h2s-mmap ~ .h2s-flow,.h2s-mmap .h2s-flow{display:none}

  .h2s-mmap + .h2s-finish{margin-top:22px}
}

/* ==========================================================================
   PHASE ONE SAMPLE ITINERARY LINK  ·  added 2026-08-10, revised same day
   Its own section in the seam between the Phase One and Phase Two sections
   on the three destination pages. Both neighbors are .section (80px top and
   bottom) and .section-ivory, so the band carries padding:0 and the ivory
   background: it uses the 160px of whitespace that already existed there.
   The document title is 135 characters, so it is set as four named lines
   that break at the title's own separators rather than wrapping wherever the
   column happens to end. Each line also wraps on its own if the column is
   narrower than the line, and overflow-wrap is on so no single token can
   push the card sideways.
   Color note: --gold-dark (#C9A84C) on white measures 2.29:1, which fails
   WCAG AA for text, so gold is used only for the decorative left rule. The
   title is --green-deep (11.08:1) and the note --text-muted (5.65:1).
   ========================================================================== */
.h2s-sample-band{padding:0;background:var(--ivory)}
.h2s-sample-head{text-align:center;margin-bottom:24px}
.h2s-sample-card{
  display:block;max-width:760px;margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--gold-dark);
  border-radius:var(--radius-md);
  padding:22px 26px;
  text-decoration:none;
  transition:box-shadow .18s ease,transform .18s ease;
}
.h2s-sample-card:hover,.h2s-sample-card:focus-visible{
  box-shadow:0 6px 22px rgba(27,67,50,.12);
  transform:translateY(-2px);
}
.h2s-sample-title{
  display:block;color:var(--green-deep);
  overflow-wrap:break-word;word-break:normal;hyphens:none;
}
.h2s-sample-title > span{display:block}
.h2s-sample-l1{
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.h2s-sample-l2{
  font-family:'Fraunces',serif;font-weight:700;
  font-size:1.02rem;line-height:1.35;
}
.h2s-sample-l3,.h2s-sample-l4{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:.94rem;line-height:1.4;
}
.h2s-sample-l3{margin-top:4px}
.h2s-sample-l4::after{content:' \2192'}
.h2s-sample-note{
  display:block;margin-top:12px;
  font-size:.86rem;line-height:1.6;color:var(--text-muted);
  overflow-wrap:break-word;
}
.h2s-sample-pdf{
  display:inline-block;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);
}
@media (max-width:820px){
  .h2s-sample-card{padding:18px 20px}
  .h2s-sample-l2{font-size:.95rem}
  .h2s-sample-l3,.h2s-sample-l4{font-size:.88rem}
}

/* ==========================================================================
   HOW THE 21 DAYS WORK  ·  All Countries consolidation  ·  2026-08-10
   The page carried the DR and CR wording as near-identical scrolls
   (~85% shared). One worked example is kept; every
   line that genuinely differed is preserved verbatim in .h2s-variations, so
   no sentence left the site. Two small components support that:
     .h2s-ce-links     one link per country to its own 7-day itinerary,
                       replacing the single DR-only highlights box
     .h2s-variations   a collapsed archive of the per-country wording
   ========================================================================== */
.h2s-ce-links a{
  color:var(--green-mid);font-weight:600;text-decoration:none;
  display:block;padding:2px 0;
  transition:color .15s;
}
.h2s-ce-links a:hover,.h2s-ce-links a:focus-visible{
  color:var(--green-deep);text-decoration:underline;
}
/* Belize has no itinerary yet — muted so it does not read as available,
   but still a live link to the country page. --text-muted on --ivory
   measures 5.28:1, which passes AA. */
.h2s-ce-links a.is-soon{color:var(--text-muted);font-weight:500}

.h2s-variations-box{
  max-width:920px;margin:0 auto;
  background:#fff;border:1px solid var(--border);
  border-left:4px solid var(--gold-dark);
  border-radius:var(--radius-md);
  padding:20px 24px;
}
.h2s-variations-box > summary{
  cursor:pointer;list-style:none;
  font-family:'Fraunces',serif;font-weight:700;
  font-size:1.02rem;line-height:1.4;color:var(--green-deep);
}
.h2s-variations-box > summary::-webkit-details-marker{display:none}
.h2s-variations-box > summary::after{content:'  \25BE';color:var(--gold-dark)}
.h2s-variations-box[open] > summary::after{content:'  \25B4'}
.h2s-variations-body{margin-top:18px}
.h2s-var-intro{font-size:.88rem;line-height:1.7;color:var(--text-muted);margin:0 0 18px}
.h2s-variations-body h3{
  font-size:1.02rem;color:var(--green-deep);
  margin:20px 0 8px;padding-top:14px;border-top:1px solid var(--border);
}
.h2s-variations-body ul{margin:0;padding-left:20px}
.h2s-variations-body li{
  font-size:.88rem;line-height:1.7;color:var(--text-dark);margin-bottom:8px;
}
.h2s-variations-body li strong{color:var(--green-deep)}

/* The bottom map is the page's navigation, so it gets room to breathe and
   never inherits the pinned-rail treatment (it renders open, and only
   collapsed rails are pinnable). */
.h2s-bottom-map{margin-top:8px}
@media (max-width:820px){
  .h2s-variations-box{padding:18px 20px}
  .h2s-variations-box > summary{font-size:.95rem}
}

/* ============================================================
   AUDIENCE PILLS ON EVERY MAP — 11 August 2026
   ------------------------------------------------------------
   The student/faculty toggle now renders at the top of all 51 map
   hosts, not just the 12 that carried it before. On the 39 hosts
   that render a collapsed mini rail that control has to earn its
   height twice over: once at rest, and again while the rail is
   pinned under the sticky header.

   Measured at 390px on dominican-republic.html with the pills at
   their full hero size: resting block 293px -> 444px (+151), and
   the pinned rail 55px -> 206px (+151), which is 24% of an
   844px-tall viewport spent on a control. The rules below shrink
   the pills on rail hosts only. The expanded hero placement on
   index / journey / 404 / faculty is untouched.
   ============================================================ */

/* Rail hosts at rest. Overrides .h2s-aud-hint{margin:20px 0 0} (line 1200)
   and .h2s-aud{padding:16px 0 4px} (line 138) — measured above. */
.h2s-journey.h2s-pinnable .h2s-aud-hint{margin:10px 0 0;font-size:.68rem;letter-spacing:.1em}
.h2s-journey.h2s-pinnable .h2s-aud{padding:6px 0 2px;gap:8px}
.h2s-journey.h2s-pinnable .h2s-aud-pill{font-size:.8rem;padding:7px 16px}
.h2s-journey.h2s-pinnable .h2s-aud-or{font-size:.85rem}

/* Pinned. The hint goes with the eyebrow and the swipe prompt (line 1265):
   while pinned the whole block is a single compacted row, and a two-line
   instruction is not what that row is for. The pills stay — they are the
   control the visitor came for, and hiding them would put the site back
   where it started on the 39 fixed-audience hosts. */
.h2s-journey.is-pinned .h2s-aud-hint{display:none}
.h2s-journey.is-pinned .h2s-aud{padding:1px 0 3px;gap:6px}
.h2s-journey.is-pinned .h2s-aud-pill{font-size:.68rem;padding:3px 11px;border-width:1px}
.h2s-journey.is-pinned .h2s-aud-pill:hover{transform:none}
.h2s-journey.is-pinned .h2s-aud-or{font-size:.7rem}

/* At 390px the two pills wrapped to two rows (pill tops measured 206 and
   247), costing the rail 41px more than the single row they form at 1440.
   Tightened just enough to fit one row on a phone. */
@media (max-width:560px){
  .h2s-journey.h2s-pinnable .h2s-aud{gap:6px}
  .h2s-journey.h2s-pinnable .h2s-aud-pill{font-size:.72rem;padding:6px 10px}
  .h2s-journey.h2s-pinnable .h2s-aud-or{font-size:.72rem}
}

/* ============================================================
   MOBILE MAP — CARDS NEVER WENT FLUID — 11 August 2026
   ------------------------------------------------------------
   The 10 August accordion set `.h2s-mgrid .h2s-node{width:auto}` to
   free the cards from the tree's fixed box, but `.h2s-node` (line 232)
   also carries `min-width:136px;max-width:136px`, and neither was
   reset — so max-width kept every card pinned at 136px inside a
   362px-wide section. Measured at 390x844 with the section open:

     step 2, two per row : cell 175px, card 136px (39px short)
     step 3, full-width  : cell 362px, card 136px (226px short), and
                           because these cards are flex ROWS the hint
                           text ran outside the border — "Refer Students
                           or Ambassador" by 37px, "Accompany a cohort"
                           by 29px, "Spark a Campus Club" by 12px
     step 4, .wide card  : 230px card in a 362px section, right edge
                           55px past the section on faculty.html

   Resetting the two width clamps lets the cards fill their cell, which
   is what the row layout in step 3 assumed all along.
   ============================================================ */
@media(max-width:820px){
  /* Completes the override begun at line 1423. */
  .h2s-mgrid .h2s-node{min-width:0;max-width:none}
  /* Step 1 stays a swipe rail: restated at 0,3,0 so the reset above
     cannot lift the 210px cap that keeps the next card peeking. */
  .h2s-msec-place .h2s-mgrid .h2s-node{flex:0 0 62%;max-width:210px}

  /* Step 3's rows: the name takes the space it needs, the hint sits to
     its right and wraps inside the card instead of running past it. */
  .h2s-msec-people .h2s-mgrid .h2s-node{gap:10px}
  .h2s-msec-people .h2s-mgrid .h2s-node .h2s-name{flex:1 1 auto;min-width:0}
  .h2s-msec-people .h2s-mgrid .h2s-node .h2s-hint{flex:0 1 auto;min-width:0;
    max-width:46%;text-align:right;margin-left:auto}
  /* The emoji is a fixed-size leading glyph, not a shrinking flex item. */
  .h2s-msec-people .h2s-mgrid .h2s-node .h2s-emoji{flex:0 0 auto}
}

/* Steps ② and ④ are the two-per-row cards — short labels with a one- or
   two-line hint, not rows like step ③. With the cards now filling their
   cell (176px at 390px, was 136px sitting at the left of a 176px cell with
   40px of dead space on the right), centring the content reads straighter
   than the left alignment inherited from the step ③ rows, and matches the
   base .h2s-node (line 228). Steps ① and ③ keep their own alignment. */
@media(max-width:820px){
  .h2s-msec-focus .h2s-mgrid .h2s-node,
  .h2s-msec-shape .h2s-mgrid .h2s-node{
    align-items:center;text-align:center;justify-content:center;padding:13px 12px}
  .h2s-msec-focus .h2s-mgrid .h2s-node .h2s-hint,
  .h2s-msec-shape .h2s-mgrid .h2s-node .h2s-hint{max-width:100%}
}


/* ==========================================================================
   Help2Serve.Care — H2S collegiate brand marks
   Merged from H2S-Website-Branding-Handoff.zip, 12 Aug 2026.
   Requires DM Sans 700, which styles.css does NOT request (it asks for
   300;400;500;600). The 700 face is linked in every page head instead —
   see HEAD_ASSETS in build.py. Without it the lockup letters and the chip
   render as a synthesised bold.
   Add to h2s-system.css. All selectors namespaced .h2s-*  ·  styles.css untouched.
   These are ADDITIVE. The main logo in the header is unchanged.
   ========================================================================== */

/* Colors come from :root at the top of this file (--h2s-forest/mid/gold/ivory,
   identical hex to the package's own copies). The package declared them locally
   so the standalone component sheet would work; keeping that copy here would
   give the palette two sources of truth. Removed 12 Aug 2026. */
.h2s-mark,
.h2s-crest,
.h2s-chip {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1 · BLOCK LOCKUP — H2S over Help2Serve.Care
   -------------------------------------------------------------------------- */

.h2s-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .34em;
  line-height: 1;
  font-size: 48px;            /* the ONE knob — everything below scales from it */
  text-align: center;
}

.h2s-mark__letters {
  font-weight: 700;
  font-size: 1em;
  letter-spacing: .01em;
  color: var(--h2s-ivory);
  margin: 0;
}

.h2s-mark__letters em {           /* the 2 */
  font-style: normal;
  color: var(--h2s-gold);
}

.h2s-mark__rule {
  display: block;
  width: 4.6em;
  height: .13em;
  background: var(--h2s-gold);
  border-radius: .06em;
}

.h2s-mark__name {
  font-weight: 400;
  font-size: .30em;
  letter-spacing: .01em;
  color: var(--h2s-ivory);
  margin: 0;
  white-space: nowrap;
}

/* -- variant: forest keyline around the letters (use on mid green only) ---- */
.h2s-mark--keyline .h2s-mark__letters {
  -webkit-text-stroke: .055em var(--h2s-forest);
  paint-order: stroke fill;
}

/* -- variant: gold frame ---------------------------------------------------- */
.h2s-mark--framed {
  padding: .78em 1.15em;
  border: .035em solid var(--h2s-gold);
}

/* -- variant: on a light ground -------------------------------------------- */
.h2s-mark--on-light .h2s-mark__letters,
.h2s-mark--on-light .h2s-mark__name { color: var(--h2s-forest); }
.h2s-mark--on-light.h2s-mark--keyline .h2s-mark__letters { -webkit-text-stroke: 0; }

/* -- variant: single line, no name (below 3.2in / ~200px wide) -------------- */
.h2s-mark--compact { gap: 0; }
.h2s-mark--compact .h2s-mark__rule,
.h2s-mark--compact .h2s-mark__name { display: none; }

/* --------------------------------------------------------------------------
   2 · CREST — shield with the 2
   -------------------------------------------------------------------------- */

.h2s-crest {
  display: inline-block;
  width: 96px;                /* the only knob */
  height: auto;
  color: var(--h2s-gold);     /* the SVG inherits this via currentColor */
}

.h2s-crest svg { display: block; width: 100%; height: auto; }
.h2s-crest--on-light { color: var(--h2s-forest); }

/* --------------------------------------------------------------------------
   3 · COHORT CHIP — country over year
   -------------------------------------------------------------------------- */

.h2s-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18em;
  font-size: 34px;            /* the only knob */
  line-height: 1;
  aspect-ratio: 1 / 1;
  min-width: 4.6em;
  min-height: 4.6em;   /* aspect-ratio alone lost to the content box: the chip
                          measured 212x198 at font-size:34px. 12 Aug 2026. */
  padding: .5em .7em;
  border: .12em solid var(--h2s-gold);
  text-align: center;
}

.h2s-chip__place {
  font-weight: 700;
  font-size: 1em;
  letter-spacing: .045em;
  color: var(--h2s-ivory);
  margin: 0;
  white-space: nowrap;
}

.h2s-chip__rule {
  display: block;
  width: 3.4em;
  height: .12em;
  background: var(--h2s-gold);
}

.h2s-chip__year {
  font-weight: 700;
  font-size: 1.24em;
  letter-spacing: .02em;
  color: var(--h2s-gold);
  margin: 0;
}

.h2s-chip--on-light .h2s-chip__place { color: var(--h2s-forest); }

/* -- inline pill form, for sitting in a row of text ------------------------- */
.h2s-chip--inline {
  flex-direction: row;
  gap: .4em;
  aspect-ratio: auto;
  min-width: 0;
  min-height: 0;
  font-size: 15px;
  padding: .34em .7em;
  border-width: 1.5px;
  border-radius: 999px;
}
.h2s-chip--inline .h2s-chip__rule { width: .1em; height: 1em; }
.h2s-chip--inline .h2s-chip__year { font-size: 1em; }

/* --------------------------------------------------------------------------
   Motion / print
   -------------------------------------------------------------------------- */
@media print {
  .h2s-mark__letters,
  .h2s-mark__name,
  .h2s-chip__place { color: #1B4332; }
  .h2s-mark--keyline .h2s-mark__letters { -webkit-text-stroke: 0; }
}

/* ============================================================
   H2S LOCKUP ON THE EXPANDED MAP — 12 August 2026
   ------------------------------------------------------------
   Framed lockup, ivory letters and gold 2 on a forest ground, at the
   top and foot of the map. Rendered by build() in h2s-journey.js and
   only for hosts that open expanded — 5 of the 51. On the 46 collapsed
   hosts the same pair measured 87px -> 254px on the pinned rail at
   390px, so they are deliberately excluded.
   ============================================================ */
.h2s-map-mark{display:flex;justify-content:center;width:100%;margin:4px 0 18px}
.h2s-j-inner > .h2s-map-mark:last-child{margin:26px 0 4px}

.h2s-map-mark .h2s-mark{
  font-size:34px;
  background:var(--h2s-forest);
  /* --framed already supplies the gold keyline and the padding; the ivory
     letters and gold 2 are the base colors, which need this dark ground. */
}
@media(max-width:820px){
  .h2s-map-mark .h2s-mark{font-size:27px}
  .h2s-map-mark{margin:2px 0 14px}
  .h2s-j-inner > .h2s-map-mark:last-child{margin:20px 0 2px}
}

/* --- Additional Content library panel: long entries must wrap — 12 August 2026
   MEASURED, before: "Phase One Day-by-Day — Health-Focused Example" needs 351px
   of text inside a 257px grid column, so 94px of it painted straight over the
   next column's "Global Recognition & Awards". Cause is `white-space:nowrap` on
   `.nav-links a` (styles.css:119-152), which every link in the panel inherits,
   combined with `grid-template-columns:repeat(3,minmax(0,1fr))` — the column
   cannot widen to absorb the overflow, so the text simply escapes it.
   Scoped to `.h2s-dd-library` so the single-line nav pills and the other five
   dropdowns keep their nowrap. `hyphens:none` stops a wrapped entry breaking a
   word mid-title. The panel already has `max-height` + `overflow-y:auto`, so the
   extra line costs no layout elsewhere.
   -------------------------------------------------------------------------- */
.nav-links .h2s-dd-library a{white-space:normal;hyphens:none}

/* --- Cohort chip on a dates panel — 12 August 2026 --------------------------
   The chip component is drawn for a DARK ground: `.h2s-chip__place` is ivory and
   only the keyline and year are gold. The cohort-date panels sit on
   `var(--ivory)`, so the chip needs its own forest tile or the country name
   renders ivory-on-ivory and disappears. `.h2s-chip--on-light` exists, but the
   version he approved is the one in his screenshot: ivory letters and a gold
   year on forest. This wrapper reproduces exactly that, at the size the panel
   header can carry.
   MEASURED: at font-size 34px the chip is 156x156; the panel header row is
   ~26px tall, so the chip is floated to the right of the heading rather than
   sitting in the flex row with it, and the heading keeps its own line.
   -------------------------------------------------------------------------- */
.h2s-chip-mark{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--h2s-forest,#1B4332);
  border-radius:10px;
  padding:12px 14px;
  flex-shrink:0;
}
/* RETIRED 13 Aug 2026: `.h2s-chip--stack` let a long country name wrap onto two
   lines inside the square chip (DOMINICAN REPUBLIC measured 253x253 on one
   line). Chips now carry the two-letter code — DR, CR, BZ — which cannot
   wrap, so the rule could never fire again and the class has been removed from
   the markup and from consolidate.py. */
.h2s-dates-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:6px;
}
.h2s-dates-head h3{margin:0}
@media (max-width:640px){
  .h2s-chip-mark{padding:10px 12px}
}

/* --- Inline cohort chip on a schedule table — 13 August 2026 ----------------
   The schedule tables sit on white and ivory rows. `.h2s-chip--inline` alone
   is unusable there: the component is drawn for a dark ground, so the place
   name is ivory (invisible on white) and the year is gold.
   MEASURED: gold #E9C46A on white is 1.67:1 — far below any legibility floor.
   `--on-light` fixes only the place name and leaves the year at 1.67:1, so it
   is not enough on its own. This variant instead carries its own forest tile,
   which is the treatment already approved for the stacked chip: the name reads
   at 10.19:1 and the year at 6.63:1, and the mark looks identical to the
   printed cohort chip, only pill-shaped.
   -------------------------------------------------------------------------- */
.h2s-chip--tile{
  background:var(--h2s-forest,#1B4332);
  border-color:var(--h2s-gold);
  white-space:nowrap;
}
.h2s-chip--tile .h2s-chip__place{color:var(--h2s-ivory)}
.h2s-chip--tile .h2s-chip__year{color:var(--h2s-gold)}
/* The schedule table is the one place a cohort chip repeats a dozen times in a
   column, so it runs a step smaller than the standalone inline pill. */
.h2s-sched-chip .h2s-chip--inline{font-size:13px}
.h2s-sched td{vertical-align:middle}
/* On a 390px screen the schedule table already scrolls inside its own
   overflow-x:auto wrapper, and "DOMINICAN REPUBLIC" on one line makes the chip
   259px wide — 72% of the 358px visible strip, so the reader sees a chip and
   almost nothing else before swiping. Letting the place name wrap to two lines
   inside the pill keeps the mark intact and gives the dates room. */
@media (max-width:640px){
  /* The place-name wrap that used to sit here is gone: it existed to stop
     "DOMINICAN REPUBLIC" eating 259px of a 358px strip, and a two-letter code
     cannot wrap. The size step still earns its place. */
  .h2s-sched-chip .h2s-chip--inline{font-size:12px;border-radius:14px}
}

/* --- H2S band above and below a schedule table — 13 August 2026 ------------
   The framed block lockup is drawn for a dark ground: `.h2s-mark__letters` and
   `.h2s-mark__name` are ivory, and `--framed` supplies only a gold keyline, no
   fill. The schedule tables sit on white, so the mark needs to carry its own
   forest ground exactly as the cohort chip does. The band spans the full table
   width and is radiused on the outer corners only, so band + table + band read
   as one badged object rather than three stacked blocks.
   The band sits OUTSIDE the table's overflow-x:auto wrapper on purpose: inside
   it, the mark would scroll sideways away from the reader on a phone.
   -------------------------------------------------------------------------- */
.h2s-sched-band{
  background:var(--h2s-forest,#1B4332);
  display:flex;align-items:center;justify-content:center;
  padding:20px 16px;
}
.h2s-sched-band--top{border-radius:10px 10px 0 0}
.h2s-sched-band--bot{border-radius:0 0 10px 10px}
.h2s-sched-band .h2s-mark{font-size:38px}
@media (max-width:640px){
  .h2s-sched-band{padding:14px 12px}
  .h2s-sched-band .h2s-mark{font-size:30px}
}

/* --- Year buttons on an apply.html destination card — 13 August 2026 --------
   The cards carried three year buttons in a fixed 1fr 1fr 1fr grid. Adding
   2030 makes four, and a fixed four-column grid does not survive a narrow
   card: MEASURED at 768px and 390px the buttons collapsed to 64px wide and
   "2026 / 2027" wrapped onto two lines inside a button 24px tall.
   auto-fit with a 108px floor keeps all four on one row while the card is wide
   enough and drops them to two rows when it is not, with no breakpoint to keep
   in step with the card grid.
   -------------------------------------------------------------------------- */
.h2s-year-grid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}

/* --- Crest alongside the logo, header and footer — 13 August 2026 -----------
   REVISED. The previous rule made the plate "whatever the page is not", which
   put a WHITE plate under the mark in the footer. That white tile is gone.

   The plate is now ALWAYS forest, on every ground:
     · on white or any light ground  ->  forest plate, reads as a green tile
     · on the dark green footer      ->  forest plate, same color as the page,
                                         so the plate vanishes and only the
                                         gold mark shows

   That lets the mark go back to the BRIGHT gold, --h2s-gold #E9C46A, which is
   the gold in the approved artwork. MEASURED: #E9C46A on #1B4332 is 6.63:1,
   well clear of the 3:1 floor for a graphical object. The darker #B08A2A was
   only ever needed because the mark had to survive a white plate as well; with
   no white plate anywhere, that compromise is unnecessary.

   Sized well under the logo it accompanies so it badges the lockup rather than
   competing with it — 26px against a 44px logo, 22px against 36px on mobile.
   -------------------------------------------------------------------------- */
.nav-logo-crest{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-left:8px;
  background:var(--h2s-forest,#1B4332);
  border-radius:7px;padding:5px 7px;
}
.nav-logo-crest img{display:block;width:auto;height:26px}

/* 13 Aug 2026 — the footer lockup is now built like the header's: one flex row
   of logo | wordmark+sub | crest, so the crest is vertically centered on the
   TEXT, not on the logo. Before this the wordmark and sub-line were siblings
   BELOW this row, so the crest sat 54px above the wordmark's center and
   margin-left:auto flung it 336px clear of the logo to the column edge. */
.footer-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-logo-row .footer-logo-img{margin-bottom:0;flex-shrink:0}
.footer-logo-text{min-width:0;flex:0 1 auto}
/* Forest, i.e. the footer's own background, so the plate disappears and only the
   gold mark reads. margin-left sits it just after the wordmark, matching the
   header's 8px, rather than pushing it to the far edge of the brand column. */
/* 14 Aug 2026 — matched to the header mark exactly. It had been the larger of
   the two (30px mark in a 41px plate, 22px clear of the text) against the
   header's 26px in a 35px plate at 18px, which read as a badge floating off on
   its own rather than the same mark in the same place. The 12px row gap plus
   this margin make the 18px. */
.footer-brand-crest{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-left:6px;
  background:var(--h2s-forest,#1B4332);border-radius:7px;padding:5px 7px;
}
.footer-brand-crest img{display:block;width:auto;height:26px}
@media (max-width:900px){
  /* the header narrows to a 14px gap on a phone; match that too */
  .footer-logo-row{gap:8px}
  .footer-brand-crest{margin-left:6px;padding:4px 6px;border-radius:6px}
  .footer-brand-crest img{height:22px}
}

/* Mobile: the header had no 26px to spare. MEASURED at 390px with a real logo
   in place, the lockup ended at x=353 and the hamburger already sat 19px
   off-screen; adding the crest unchanged pushed it to 51px off. The sub-line
   sets the lockup width, so it is what gives way. */
@media (max-width:600px){
  .nav-logo{gap:8px}
  .nav-logo-text .brand-main{font-size:0.95rem}
  .nav-logo-text .brand-sub{font-size:0.46rem;letter-spacing:0.03em}
  .nav-logo-crest{margin-left:6px;padding:4px 6px;border-radius:6px}
  .nav-logo-crest img{height:22px}
}

/* ============================================================
   APPLICATION — map-mirrored form, 13 August 2026
   ------------------------------------------------------------
   The application sits BELOW the map and mirrors it: same forest
   ground, same gold keyline, same node shape. The map stays a map —
   exploratory, no commitment — and this fills in as it is clicked.

   Everything here styles controls that already exist in the HTML.
   With CSS or JS absent the form is still a complete, usable, named
   set of radios and selects that POSTs to Netlify.
   ============================================================ */
/* OPTION C, 14 Aug 2026 — lighter ground plus compensating lifts.
   The ground moves #1B4332 -> #21553F (relative luminance .0448 -> .0718),
   which drops panel-against-page contrast 10.19:1 -> 7.93:1 so the panel
   stops reading as a black rectangle on ivory. Lightening the ground lowers
   EVERY ratio sitting on it, so the four values that lose the most are
   lifted below to compensate. Declared as its own property rather than by
   editing --h2s-forest, which 56 other rules depend on.
   #21553F is the practical ceiling: at #27604A the sub-line (4.38:1) and
   the gold legends (4.40:1) both fall under the 4.5 floor. */
.h2s-apply{--h2s-apply-bg:#023C26;background:var(--h2s-apply-bg);border-radius:14px;padding:34px}
.h2s-apply-reminder{
  background:rgba(233,196,106,.12);border-left:3px solid var(--h2s-gold);
  border-radius:0 6px 6px 0;padding:12px 16px;margin:0 0 22px;
  color:var(--h2s-ivory);font-size:.88rem;line-height:1.65;
}
.h2s-apply-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
/* --- cohort marks row — 16 August 2026 --------------------------------------
   One mark per cohort year (his Option A). DR and CR carry four, BZ
   one, so this row has to survive being four marks wide on a phone.
   MEASURED at font-size:16px: four marks = 451px, which fits the 1248px
   header at 1440 but overflows a 278px column at 390 by 157px. The mobile
   block below scales the chip and its padding down instead of wrapping, so
   the row still reads as one horizontal set of cohorts. */
.h2s-chip-marks{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.h2s-chip-marks[hidden]{display:none}
@media (max-width:820px){
  /* The head is a flex row. A flex item will not shrink below its longest
     word, so with a 244px marks row beside it the heading's min-content
     ("Dominican") pushed the row 6px past the viewport at 390. Give the
     heading its own line on a phone — it reads better there anyway. */
  .h2s-apply-head{gap:10px;flex-wrap:wrap}
  .h2s-apply-head h3{flex:1 1 100%;min-width:0}
  .h2s-chip-marks{gap:5px}
  .h2s-chip-marks .h2s-chip-mark{padding:5px 6px;border-radius:7px}
  .h2s-chip-marks .h2s-chip{font-size:9px!important}
}
.h2s-apply-head h3{margin:0;color:var(--h2s-ivory);font-size:1.45rem}
.h2s-apply-sub{color:rgba(248,245,240,.72);font-size:.85rem;line-height:1.6;margin:0 0 26px}

.h2s-apply-step{border:0;padding:0;margin:0 0 26px}
.h2s-apply-legend{
  color:var(--h2s-gold);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;padding:0;margin-bottom:12px;
}
.h2s-apply-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}

/* The node shape is the map's, deliberately — one visual language. */
.h2s-apply-node{
  display:flex;flex-direction:column;gap:3px;cursor:pointer;
  border:1.5px solid rgba(233,196,106,.72);border-radius:10px;padding:11px 13px;
  background:rgba(248,245,240,.06);
  color:var(--h2s-ivory);font-size:.92rem;line-height:1.35;
  transition:border-color .18s,background .18s;
}
.h2s-apply-node:hover{border-color:var(--h2s-gold)}
.h2s-apply-node input{position:absolute;opacity:0;width:0;height:0}
/* THE CHOSEN ANSWER — 14 August 2026, matched to the rail.
   Was a 22% gold wash over the forest ground with the ivory text left as it
   was, which read as "slightly warmer", not "this is your answer". It now
   paints exactly what `.h2s-mchip.is-chosen` and `.h2s-node.is-chosen` paint
   on the map and the pinned rail: full gold ground, forest ink, 2px gold
   border, the same lifted shadow. One chosen state, three surfaces.
   Contrast on the gold ground: name 6.63:1, hint 5.80:1. */
.h2s-apply-node:has(input:checked){
  background:var(--h2s-gold,#E9C46A);
  border-color:var(--h2s-gold,#E9C46A);border-width:2px;
  color:var(--h2s-forest,#1B4332);
  box-shadow:0 4px 14px rgba(233,196,106,.34);
  /* border-width 1.5 -> 2 would shift the box by 0.5px on each side and
     nudge every sibling in the grid; padding absorbs it. */
  padding:10px 12.5px;
}
.h2s-apply-node:has(input:checked) .h2s-apply-node__name{color:var(--h2s-forest,#1B4332);font-weight:700}
.h2s-apply-node:has(input:checked) .h2s-apply-node__hint{color:#2F4A3C}
.h2s-apply-node:has(input:checked):hover{border-color:var(--h2s-gold,#E9C46A)}
.h2s-apply-node:has(input:focus-visible){outline:2px solid var(--h2s-gold);outline-offset:2px}
.h2s-apply-node__hint{color:rgba(248,245,240,.82);font-size:.74rem}

/* The chosen state painted back onto the map itself.
   14 Aug 2026: was a 2px gold RING only, which read as "outlined", not
   "chosen" — and it never reached the pinned rail, whose chips carried no
   node attributes until miniChipHTML() started emitting them. Now a FULL
   gold fill with forest ink on both surfaces: 6.63:1, and it holds until
   the answer changes. YOU-ARE-HERE (the page you are on) stays a separate,
   quieter marker so the two never mean the same thing. */
.h2s-journey .h2s-node.is-chosen{
  background:var(--h2s-gold,#E9C46A)!important;
  border-color:var(--h2s-gold,#E9C46A);
  box-shadow:inset 0 0 0 2px var(--h2s-gold,#E9C46A),0 4px 14px rgba(233,196,106,.30);
}
.h2s-journey .h2s-node.is-chosen .h2s-name,
.h2s-journey .h2s-node.is-chosen .h2s-chip-days{color:var(--h2s-forest,#1B4332)!important;font-weight:700}
.h2s-journey .h2s-node.is-chosen .h2s-hint{color:#2F4A3C!important}

.h2s-journey .h2s-mchip.is-chosen{
  background:var(--h2s-gold,#E9C46A)!important;
  border-color:var(--h2s-gold,#E9C46A);border-width:2px;
  color:var(--h2s-forest,#1B4332)!important;font-weight:700;
  box-shadow:0 4px 14px rgba(233,196,106,.34);
}
.h2s-journey .h2s-mchip.is-chosen .t{color:var(--h2s-forest,#1B4332)!important}
/* A chip can be both the page you are on AND your answer. Gold fill wins,
   and the YOU-ARE-HERE badge flips to forest-on-ivory so it stays legible. */
.h2s-journey .h2s-mchip.is-chosen .h2s-mhere{
  background:var(--h2s-forest,#1B4332);color:var(--h2s-gold,#E9C46A);
}

/* THE CUE ON THE GOLD PILL — 14 August 2026.
   The gold fill tells you which country you picked; it did not tell you the
   pill is still a link. Rendered only on step `place`, on both node
   surfaces: the pinned rail chip and the full map node (desktop tree and
   the mobile accordion share .h2s-node). Forest ink on the gold ground it
   sits on, the same 6.63:1 as the label above it. */
.h2s-chosen-cue{
  display:block;
  font-size:.5rem;font-weight:800;letter-spacing:.07em;line-height:1.35;
  text-transform:uppercase;
  color:var(--h2s-forest,#1B4332);
}
/* Rail chip: the chip is a nowrap flex row, so the cue takes its own line
   rather than stretching the strip sideways. */
.h2s-journey .h2s-mchip.is-chosen{flex-wrap:wrap}
.h2s-journey .h2s-mchip.is-chosen .h2s-chosen-cue{
  flex:0 0 100%;
  max-width:150px;white-space:normal;
  margin-top:2px;padding-top:3px;
  border-top:1px solid rgba(27,67,50,.28);
}
/* Full map node: fixed 136px box, so the cue wraps inside it. */
.h2s-journey .h2s-node.is-chosen .h2s-chosen-cue{
  margin-top:6px;padding-top:5px;
  border-top:1px solid rgba(27,67,50,.28);
  width:100%;text-align:center;
}

/* THE NAVIGATION HINT — 14 August 2026.
   One string, two grounds. Under the rail it sits on the cream strip, so it
   is a white pill with forest ink; inside the application panel it sits on
   the #21553F ground, so it takes the same 82% ivory the other small print
   there uses (5.94:1). */
.h2s-nav-hint{
  margin:8px 0 0;padding:9px 14px;border-radius:999px;
  font-size:.72rem;line-height:1.55;
  background:#fff;border:1px solid rgba(45,106,79,.30);
  color:var(--h2s-ink);
}
.h2s-nav-hint strong{color:var(--h2s-forest,#1B4332)}
.h2s-mini > .h2s-nav-hint{margin:8px 2px 2px}
.h2s-apply .h2s-nav-hint{
  margin:0 0 14px;padding:11px 16px;border-radius:14px;
  /* NO translucent fill here. An 8% ivory wash lifts the ground from #21553F
     to rgb(50,98,77), which pulled the gold label down to 4.20:1 — under the
     4.5 floor at this size. On the panel's own ground the same two colors
     measure 5.94 (body) and 5.16 (label). */
  background:transparent;border:1px solid rgba(233,196,106,.45);
  color:rgba(248,245,240,.82);font-size:.78rem;
}
.h2s-apply .h2s-nav-hint strong{color:var(--h2s-gold,#E9C46A)}

/* THE FOLDED APPLICATION COPY — 14 August 2026.
   Two fully legible lines plus the site's usual 0.6-line faded sliver, so
   the peek box is 2.6 line-heights tall and the mask only eats the sliver.
   Sized in `em` rather than measured in JS: the foot panel is a CLONE of
   the top one, and an em value travels with a clone where a computed pixel
   value would have to be recalculated. line-height here is 1.55.       */
.h2s-nav-hint--fold{margin:0 0 14px}
.h2s-nav-hint--fold .h2s-fold-body{
  --h2s-peek:4.03em;      /* 2.6 x 1.55em */
  --h2s-fadeh:0.93em;     /* 0.6 x 1.55em */
}
/* The standard fold button is sized for body copy at .78rem with 9px/18px
   padding; inside a hint pill that reads as a second, competing control.
   Same shape, same colors, same states — one step down in scale. */
.h2s-nav-hint--fold .h2s-fold-btn{
  margin-top:9px;padding:5px 13px;font-size:.68rem;border-width:1px;gap:7px;
}
@media (max-width:820px){
  .h2s-nav-hint{border-radius:14px}
}

/* THE SPANISH WEEK AS AN ADD-ON — 14 August 2026.
   It is a checkbox now, not one of the length radios, so it can sit checked
   alongside "21 days" or "Fully custom immersion". Until a length is chosen
   it is disabled: dimmed, not removed, so the visitor can see the add-on
   exists and what unlocks it. */
.h2s-apply-node.is-locked{opacity:.62}
.h2s-apply-node:has(input:disabled){cursor:not-allowed}
.h2s-apply-node.is-locked .h2s-apply-node__hint{font-style:italic}

.h2s-apply-switch{
  margin:12px 0 0;padding:11px 14px;border-radius:8px;
  background:rgba(248,245,240,.08);color:var(--h2s-ivory);font-size:.85rem;line-height:1.6;
}
.h2s-apply-switch__go{color:var(--h2s-gold);font-weight:700;text-decoration:underline}
.h2s-apply-switch__note{color:rgba(248,245,240,.82)}
.h2s-apply-note{color:rgba(248,245,240,.82);font-size:.78rem;line-height:1.6;margin:10px 0 0}

.h2s-apply-form .form-field[hidden]{display:none}
/* A custom immersion has no published dates — the list is disabled and reads
   as unavailable rather than merely unfilled. 14 Aug 2026. */
.h2s-apply-form .form-field.is-disabled > label{opacity:.55}
.h2s-apply-form select:disabled{
  opacity:.5;cursor:not-allowed;
  background:rgba(248,245,240,.45);color:#3B4A42;
}
.h2s-apply-custom{
  margin:8px 0 0;padding:10px 13px;border-radius:10px;
  border:1px solid rgba(233,196,106,.45);
  color:rgba(248,245,240,.82);font-size:.78rem;line-height:1.6;
}
/* The step-4 copy exists so the brief panel under the map says it too. The
   foot copy already carries it beside the date field, so it is shown in the
   brief panel only rather than twice in the full one. 14 Aug 2026. */
.h2s-apply:not(.h2s-apply-brief) .h2s-apply-custom.is-step{display:none}
.h2s-apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.h2s-apply-form .form-field{margin-bottom:14px}
.h2s-apply-form label{color:var(--h2s-ivory);font-size:.85rem}
.h2s-apply-form input[type=text],.h2s-apply-form input[type=email],
.h2s-apply-form input[type=tel],.h2s-apply-form select,.h2s-apply-form textarea{
  width:100%;background:rgba(248,245,240,.96);border:1px solid rgba(233,196,106,.4);
  border-radius:7px;padding:10px 12px;font:inherit;font-size:.92rem;color:#1B4332;
}
.h2s-apply-check{display:flex;gap:9px;align-items:flex-start;color:var(--h2s-ivory);font-size:.85rem;line-height:1.5}
/* MEASURED TRAP, 26 August 2026: `.h2s-apply-check{display:flex}` beats the UA
   stylesheet's `[hidden]{display:none}`, so setting `hidden` on the CE label in
   syncApplyCE() changed nothing — it stayed visible on all 8 pages tested,
   student pages included, while the uncheck-on-hide half worked correctly.
   This is the rule that makes the attribute mean what it says. */
.h2s-apply-check[hidden]{display:none!important}
/* Netlify honeypot: hidden from people, present for bots. Not display:none —
   some bots skip those — and not a name a crawler would index. */
.h2s-apply-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.h2s-apply-terms{
  border:1px solid rgba(233,196,106,.35);border-radius:10px;padding:16px 18px;margin:8px 0 22px;
  color:rgba(248,245,240,.86);font-size:.83rem;line-height:1.7;
}
.h2s-apply-terms p{margin:0 0 10px}
.h2s-apply-terms p:last-child{margin-bottom:0}
.h2s-apply-terms strong{color:var(--h2s-gold)}
/* READABILITY FIX 13 Aug 2026. `p { color: var(--text-muted) }` at styles.css:52
   is an element rule, so it beat the ivory `color` set on these two containers —
   every <p> in the terms and pricing blocks rendered rgb(90,107,98) on forest,
   a contrast of 1.96:1 against the 4.5:1 WCAG floor. It also reset the .83rem
   down to the 1rem base. Both restated on the <p> itself so they actually win. */
.h2s-apply-terms p,
.h2s-apply-pricing p{color:var(--h2s-ivory,#F8F5F0);font-size:.9rem;line-height:1.75}
/* The primary action. `.btn-primary` paints `--green-deep`, the SAME forest as
   the panel it sits in — a 1.0:1 button, i.e. no button at all, just white text.
   Gold ground with forest ink instead, and sized as the panel's loudest thing. */
.h2s-apply-submit{
  width:100%;padding:20px 24px;
  background:var(--h2s-gold,#E9C46A);color:var(--h2s-forest,#1B4332);
  font-family:'Fraunces',serif;font-size:1.35rem;font-weight:700;letter-spacing:.01em;
  border:2px solid var(--h2s-gold,#E9C46A);box-shadow:0 4px 18px rgba(233,196,106,.28);
}
.h2s-apply-submit:hover,.h2s-apply-submit:focus-visible{
  background:#F2D287;border-color:#F2D287;color:var(--h2s-forest,#1B4332);
}
.h2s-apply-alt{color:rgba(248,245,240,.82);font-size:.78rem;text-align:center;margin:14px 0 0}
.h2s-apply-alt a{color:var(--h2s-gold)}

@media (max-width:640px){
  .h2s-apply{padding:22px 18px;border-radius:12px}
  .h2s-apply-grid{grid-template-columns:1fr}
  .h2s-apply-nodes{grid-template-columns:1fr 1fr}
}

/* Pricing note, restyled to sit inside the application panel — 13 Aug 2026.
   Same words as the old ivory box; only the ground and the link color change
   so it stops looking like a different component bolted underneath. */
.h2s-apply-pricing{
  border-top:1px solid rgba(233,196,106,.3);margin-top:22px;padding-top:18px;
  color:rgba(248,245,240,.8);font-size:.83rem;line-height:1.7;
}
.h2s-apply-pricing p{margin:0 0 8px}
.h2s-apply-pricing strong{color:var(--h2s-gold)}
.h2s-apply-pricing__link{color:var(--h2s-gold);font-weight:700;text-decoration:underline}

/* Modal rungs became links on 13 Aug 2026 so the two "costs covered" paths can
   go to different places. Visual appearance is unchanged from the div version. */
a.h2s-rung.is-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.h2s-rung.is-link:hover .h2s-rung-top b{text-decoration:underline}

/* Country-specific detail on how-the-21-days-work.html — 13 August 2026.
   One reveal per country instead of one archive holding all four. The pills are
   plain anchors to each <details>, so they work with JavaScript off; the
   shared name= makes the group exclusive natively. */
.h2s-country-detail{max-width:900px;margin:0 auto}
.h2s-country-lead{font-size:.95rem;color:var(--h2s-forest);margin:0 0 14px}
/* centred 23 Aug 2026 — was left-aligned with 4 pills; the retired
   fourth destination left 3 pills and a measured 539px gap on the right. */
.h2s-country-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
.h2s-country-pill{
  border:1.5px solid var(--h2s-gold);border-radius:999px;padding:7px 16px;
  color:var(--h2s-forest);font-size:.86rem;font-weight:600;text-decoration:none;
}
.h2s-country-pill:hover{background:var(--h2s-gold)}
.h2s-country-box{border:1px solid rgba(27,67,50,.18);border-radius:10px;margin-bottom:10px;background:#fff}
.h2s-country-box>summary{
  cursor:pointer;padding:13px 16px;font-weight:600;color:var(--h2s-forest);font-size:.95rem;
}
.h2s-country-box[open]>summary{border-bottom:1px solid rgba(27,67,50,.14)}
.h2s-country-body{padding:14px 18px 18px}
.h2s-country-body ul{margin:0;padding-left:20px}
.h2s-country-body li{margin-bottom:10px;line-height:1.65}
/* A linked <details> must open when its anchor is followed, JS or not. */
.h2s-country-box:target{border-color:var(--h2s-gold)}

/* Pointer from an apply page to the one country-agnostic walkthrough. */
.h2s-see-example{max-width:880px;margin:0 auto 26px;padding:12px 16px;
  background:var(--h2s-ivory,#F8F5F0);border-left:3px solid var(--h2s-gold);border-radius:0 6px 6px 0}
.h2s-see-example p{margin:0;font-size:.88rem;line-height:1.65;color:var(--h2s-forest)}
.h2s-see-example a{color:var(--h2s-mid,#2D6A4F);font-weight:700;text-decoration:underline}

/* 13 Aug 2026 — the mobile map's place rail (.h2s-msec-place .h2s-mgrid) is a
   horizontal scroller, but on a page carrying TWO maps the second instance
   measured 398px inside a 390px viewport, giving the page 91px of overflow.
   MEASURED: how-the-21-days-work.html, 390px, before 91px / after 0px.
   The scroller must not be allowed to size itself from its content. */
@media (max-width:820px){
  .h2s-msec-place .h2s-mgrid{max-width:100%;min-width:0}
  .h2s-mgrid{max-width:100%;min-width:0}
  .h2s-journey,.h2s-j-inner{max-width:100%;min-width:0;overflow-x:clip}
}

/* apply.html hero notice — 13 August 2026.
   His ruling: "Choose Your Destination & Your Year" comes out, because the map
   and the interactive panel already prompt the same choice. The availability
   notice takes the H1 slot. At the inherited hero H1 size (51.2px / 32px) that
   61-word sentence measured 9 lines and 507px at 1440, and 20 lines and 704px
   at 390 — a phone-height wall. Scoped down here so it reads as a statement
   rather than a headline. Only this one element; every other h1 is untouched. */
.page-hero h1.h2s-hero-notice{
  font-size:1.6rem;line-height:1.5;font-weight:600;max-width:900px;
  margin-bottom:14px;
}
@media (max-width:900px){
  .page-hero h1.h2s-hero-notice{font-size:1.15rem;line-height:1.55}
}

/* ============================================================
   .schedule-grid / .path-frame mobile collapse — 13 August 2026
   ------------------------------------------------------------
   THE 91px OVERFLOW ON how-the-21-days-work.html, SOLVED — and the
   cause was not a missing rule, it was a rule left behind.

   costa-rica.html and dominican-republic.html each carry
   an inline <style> block holding exactly this @media (max-width:760px)
   fix. When the step ① restructure moved the Two Paths markup onto
   how-the-21-days-work.html, the markup traveled and the <style> block
   did not. That is why one page overflowed and the three originals never
   did, and why the rules below are copied VERBATIM from theirs rather
   than invented — the four pages now render identically on a phone.

   The underlying bug is the classic `min-width:auto` grid blowout.
   `.schedule-grid` declares `grid-template-columns:1fr 1fr` INLINE, and
   `1fr` means `minmax(auto, 1fr)`, whose `auto` floors each item at its
   min-content width. Nested padding (outer frame 36px a side, path-frame
   32px a side) left the grid 214px at 390px, but the long day lines held
   the columns at 186.188px and 186.578px plus a 20px gap = 393px in a
   214px box. `.cohort-grid` did the same at three columns. `!important`
   is required, not lazy: it has to beat an inline style attribute.

   Breakpoint kept at their 760px, not my 640px, so all four match.
   ============================================================ */
@media (max-width:760px){
  .schedule-grid{grid-template-columns:1fr !important}
  .cohort-grid{grid-template-columns:1fr !important}
  .path-frame{padding:28px 18px 22px !important}
  .path-frame-label{left:22px !important;padding:0 10px !important}
  .path-frame-label span{font-size:1.7rem !important}
  .two-paths-outer-frame{padding:28px 16px 22px !important}
  .schedule-grid > *,.cohort-grid > *{min-width:0}
}

/* The application panel injected on the 42 non-apply pages — 13 Aug 2026.
   Same panel, same styles; this only gives it the section rhythm the
   static pages get from their own <section class="section"> wrapper. */
.h2s-apply-everywhere{padding-top:8px}
.h2s-apply-reset{text-align:center;margin:10px 0 0}
.h2s-apply-reset button{
  background:none;border:0;padding:4px 8px;cursor:pointer;
  color:rgba(248,245,240,.72);font-size:.78rem;text-decoration:underline;
  font-family:inherit;
}
.h2s-apply-reset button:hover{color:var(--h2s-gold,#E9C46A)}

/* ============================================================
   APPLICATION — BRIEF TOP PANEL + ANSWERED-STEP FEEDBACK
   13 August 2026, session j

   The application now appears twice on every page: once directly under
   the map and once at the foot. At full length it is 2,732px tall at
   1440px and 4,003px at 390px, so two full copies buried every page's
   own content under roughly 5,500-8,000px of form. The TOP copy is
   therefore opened brief — the four map answers and a control that takes
   you to the full application at the foot, which is unchanged.
   Everything hidden here is still in the DOM and still mirrored, so the
   two copies never disagree.
   ============================================================ */
.h2s-apply-brief .h2s-apply-reminder,
.h2s-apply-brief .h2s-apply-sub,
.h2s-apply-brief .h2s-apply-form > fieldset,
.h2s-apply-brief .h2s-apply-terms,
.h2s-apply-brief .h2s-apply-submit,
.h2s-apply-brief .h2s-apply-alt,
.h2s-apply-brief .h2s-apply-reset,
.h2s-apply-brief .h2s-apply-pricing{display:none}
.h2s-apply-brief .h2s-apply-mirror{margin-bottom:0}

/* The quiet "this is not that country's page" line — see paintElsewhere() in
   h2s-apply.js. Deliberately the softest thing in the panel: a hairline rule,
   .78rem, 82% ivory (5.94:1 on the panel ground, over the 4.5 floor even at
   this size). It is NOT hidden by .h2s-apply-brief — the mismatch is most
   visible in the top copy, directly under the map, which is exactly where the
   visitor just clicked a different country. */
.h2s-apply-elsewhere{
  margin:20px 0 0;padding-top:14px;
  border-top:1px solid rgba(233,196,106,.28);
  color:rgba(248,245,240,.82);font-size:.78rem;line-height:1.65;
}
.h2s-apply-elsewhere strong{color:var(--h2s-gold,#E9C46A);font-weight:700}
.h2s-apply-elsewhere__go{color:var(--h2s-gold,#E9C46A);font-weight:700;text-decoration:underline}
.h2s-apply-elsewhere__note{color:rgba(248,245,240,.74)}
.h2s-apply-elsewhere[hidden]{display:none}

.h2s-apply-continue{margin:22px 0 0;text-align:center}
.h2s-apply-continue a{
  display:inline-block;background:var(--h2s-gold);color:var(--h2s-forest,#1B4332);
  font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;
  padding:13px 30px;border-radius:50px;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.h2s-apply-continue a:hover,.h2s-apply-continue a:focus-visible{
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(233,196,106,.35)}
.h2s-apply-continue small{
  display:block;margin-top:9px;color:rgba(248,245,240,.82);font-size:.76rem}

/* The pill cloned out of the collapsed map keeps the map's own spacing. */
.h2s-apply-finish{margin:26px auto 0;max-width:1180px;padding:0 20px}

/* ---- answered-step feedback ----
   A map click lights the step it answered. If that step is already on
   screen the page does not move; if it is not, it is scrolled to first.
   `.h2s-apply-lit` is the flash — see reveal() in h2s-apply.js. */
.h2s-apply-step{transition:background .2s,border-color .2s,box-shadow .2s}
.h2s-apply-step.h2s-apply-lit{
  background:rgba(233,196,106,.16);
  border-color:var(--h2s-gold);
  box-shadow:0 0 0 2px var(--h2s-gold)}
@media (prefers-reduced-motion:reduce){
  .h2s-apply-step{transition:none}
}


/* ---------- BUILD STAMP — 15 August 2026 ----------
   Four rounds were lost tonight to "which build am I looking at?": the old
   test site was serving a pre-15-August deploy and nothing on the page said
   so. The stamp is deliberately visible (a screenshot has to carry it) but
   quiet — one step smaller than the copyright line it sits in, at 45% ivory,
   and it never starts a new line on its own. Update the string in build.py
   AND in the 51 pages every time a zip goes out. */
.footer-bottom .h2s-build,
footer .h2s-build {
  margin-left: 10px;
  font-size: 0.72em;
  letter-spacing: .04em;
  opacity: .45;
  white-space: nowrap;
}

/* --- "Reset Journey" nav pill — 16 August 2026 -------------------------------
   His ask: a pill in the tier-2 row, between ④ Make It Yours and Faculty, that
   throws away every rail and application choice and returns to a blank home
   page. It is a DESTRUCTIVE control sitting in a row of navigation, so it is
   drawn quieter than its neighbours at rest — no fill, gold hairline, muted
   ink — and only commits to gold on hover/focus. That reads as "available, not
   inviting", which is what a reset should look like.
   The row is measured after this: tier-2 must still cluster to ONE row at
   1101px and above, or the pill has to move. */
.nav-links .h2s-reset-li > a{
  border:1px solid rgba(233,196,106,.55);
  color:var(--text-muted,#5B6B62);
  display:inline-flex;align-items:center;gap:5px;
}
.nav-links .h2s-reset-li > a:hover,
.nav-links .h2s-reset-li > a:focus-visible{
  background:var(--h2s-gold,#E9C46A);
  border-color:var(--h2s-gold,#E9C46A);
  color:var(--h2s-forest,#1B4332);
}
.h2s-reset-glyph{font-size:1.05em;line-height:1}

/* The pill costs 129px and the tier-2 row only had 29px of headroom at 1101,
   so it overshot by 104px and wrapped to two rows on all 51 pages — against
   his standing "nav on one row" bar. Reclaimed in the one band that needs it
   (the row is a single line at 1280+, and collapses to the mobile menu at
   1024 and below) by tightening the gap and the pill padding. */
/* The winning rule for a tier-2 pill is the three-`:not()` selector at
   h2s-system.css:694 (`padding:7px 14px!important`), NOT the plain
   `.nav-links > li > a` at 525 — an override has to match that selector or it
   silently loses. Reclaiming 12px per item across 9 items plus 2px per gap
   gives 124px, against the 108px the new pill overshoots by at 1101. */
@media (min-width:1101px) and (max-width:1279px){
  .nav-inner > .nav-links{column-gap:4px!important}
  .nav-links > li > a:not(.nav-home):not(.nav-donate):not(.btn-apply-nav){
    padding:7px 7px!important;font-size:.78rem!important;
  }
}

/* ============================================================
   NINTH TIER-2 PILL — 23 August 2026. Adding "Institutions"
   took the tier-2 row from eight items to nine and it wrapped to
   a THIRD row on every page at every desktop width.

   MEASURED at 1440 before the fix: the nine pills plus their gaps
   totalled 1,487px against a 1,216px `.nav-links`, so 271px over.
   "Additional Content" (140px) was the item pushed down.

   The winning selector is the three-`:not()` rule at
   h2s-system.css:694, NOT the plain `.nav-links > li > a` at 525 —
   an override on the plain selector loses silently. Measured
   candidates: padding 8px 7px reached 1,347px (fixes 1440, still
   3 rows at 1101); 8px 6px reached 1,327px (same); 8px 6px with
   font-size .75rem reaches 1,280px, which is the first value that
   gives 2 rows at 1101, 1280 AND 1440. That is the value used.
   ============================================================ */
@media (min-width:1101px){
  .nav-inner > .nav-links{column-gap:3px!important}
  .nav-links > li > a:not(.nav-home):not(.nav-donate):not(.btn-apply-nav){
    padding:8px 5px!important;font-size:.75rem!important;
  }
}

/* ============================================================
   FOUR-UP GRID — REMOVED 23 August 2026.
   `.grid-3.h2s-grid-4up` forced repeat(4,1fr) at min-width:901px so a
   fourth destination card would not drop to its own row. That fourth
   destination is retired; both rows that carried the class now hold 3
   cards, which left
   311px of dead space on the right at 1440 (measured). The override and
   the class are both removed — plain `.grid-3` is correct now.
   ============================================================ */

/* ── FAQ answers: raise the open cap ──────────────────────────────────────
   styles.css:650 caps .faq-answer.open at max-height:500px, which clipped
   the longer country FAQ answers on a phone. Raised to 1600px on 17 Aug.

   RAISED AGAIN 23 Aug 2026. The two manual answers gained the cohort
   social-platform section and its two bullet lists. Measured at 390px with
   the fold expanded, the post-acceptance answer is now 1,779px against the
   1,600px cap — 179px of it was cut off, ending mid-list. 2600px clears the
   tallest measured answer (1,779px at 390) by 821px, which leaves room for
   the next round of copy without another silent clip. */
.faq-answer.open { max-height: 2600px; }

/* ── Booking panel (cal.com, click-to-load) ───────────────────────────────
   Built 18 Aug 2026. One 15-minute conversation for the whole site; the URL
   lives in H2S_BOOK_URL in h2s-interactive.js. The panel is rendered by JS
   into any [data-h2s-book] host, so the styling is here rather than inline. */
.h2s-book { display: block; }
.h2s-book__open {
  display: block; width: 100%; box-sizing: border-box;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--green-deep); background: var(--gold);
  border: 2px solid var(--gold-dark); border-radius: 50px;
  padding: 14px 22px; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.h2s-book__open:hover { background: var(--gold-dark); transform: translateY(-1px); }
.h2s-book__open:disabled { opacity: .7; cursor: default; transform: none; }
.h2s-book__note {
  font-size: .82rem; line-height: 1.6; color: var(--text-muted);
  margin: 12px 0 0; text-align: center;
}
.h2s-book__tab { color: var(--green-deep); font-weight: 700; white-space: nowrap; }
.h2s-book__frame {
  margin-top: 16px; width: 100%; height: 620px; overflow: auto;
  background: var(--ivory); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
@media (max-width: 900px) { .h2s-book__frame { height: 560px; } }


/* ── News photo grids (news.html) — added 2026-08-18 ── */
.h2s-newsgrid{display:grid;gap:14px;margin:18px 0 6px;grid-template-columns:repeat(4,1fr)}
.h2s-newsgrid-2{display:grid;gap:14px;margin:18px 0 6px;grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.h2s-newsgrid{grid-template-columns:repeat(2,1fr)}}

/* ==================================================================
   PROOF BAND — 23 August 2026. Built to match his LinkedIn banner:
   forest ground, wireframe globe at low opacity, gold line icons,
   gold caps over an ivory label, hairline gold dividers between the
   four stats. Existing brand tokens only; no new colour introduced.
   ================================================================== */
.h2s-proof{position:relative;overflow:hidden;background:#023C26;
  padding:38px 0 34px;align-self:stretch;width:100%;box-sizing:border-box;}
.h2s-proof__globe{position:absolute;top:50%;left:-150px;width:440px;height:440px;
  transform:translateY(-50%);pointer-events:none;opacity:.18;color:#2DD48C;}
.h2s-proof__inner{position:relative;max-width:1180px;margin:0 auto;padding:0 32px;}
.h2s-proof__eyebrow{text-align:center;font:600 11.5px/1.5 'DM Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(238,233,225,.82);
  margin-bottom:26px;}
.h2s-proof__eyebrow em{font-style:normal;font-weight:800;color:var(--gold);}
.h2s-proof__row{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;}
.h2s-proof__item{text-align:center;padding:0 22px;min-width:0;
  border-left:1px solid rgba(233,196,106,.32);}
.h2s-proof__item:first-child{border-left:0;}
.h2s-proof__icon{width:42px;height:42px;color:var(--gold);display:block;margin:0 auto 14px;}
.h2s-proof__n{font:800 17px/1.25 'DM Sans',sans-serif;letter-spacing:.03em;
  text-transform:uppercase;color:var(--gold);}
.h2s-proof__l{font:600 14.5px/1.4 'DM Sans',sans-serif;color:var(--h2s-ivory);margin-top:6px;}
.h2s-proof__note{text-align:center;max-width:860px;margin:30px auto 0;
  font:400 13.5px/1.7 'DM Sans',sans-serif;color:rgba(238,233,225,.78);}
.h2s-proof__note a{font-weight:700;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(233,196,106,.45);padding-bottom:1px;white-space:nowrap;}
.h2s-proof__note a:hover{color:var(--h2s-ivory);border-bottom-color:var(--h2s-ivory);}
/* ---- slim variant: strategic placements, mid-page ---- */
.h2s-proof--slim{padding:26px 0 24px;border-top:1px solid rgba(233,196,106,.22);}
.h2s-proof--slim .h2s-proof__globe{left:-190px;width:360px;height:360px;opacity:.13;}
.h2s-proof--slim .h2s-proof__eyebrow{font-size:10.5px;letter-spacing:.13em;margin-bottom:18px;}
.h2s-proof--slim .h2s-proof__icon{width:30px;height:30px;margin-bottom:10px;}
.h2s-proof--slim .h2s-proof__n{font-size:14.5px;}
.h2s-proof--slim .h2s-proof__l{font-size:12.5px;margin-top:4px;}

.h2s-proof--three .h2s-proof__row{grid-template-columns:repeat(3,1fr);}
.h2s-proof--three .h2s-proof__eyebrow{text-transform:none;letter-spacing:.01em;
  font-size:13.5px;font-weight:400;font-style:italic;color:rgba(238,233,225,.8);
  max-width:760px;margin:0 auto 20px;}

@media (max-width:820px){
  .h2s-proof{padding:30px 0 28px;}
  .h2s-proof__inner{padding:0 20px;}
  .h2s-proof__globe{display:none;}
  .h2s-proof__row{grid-template-columns:repeat(2,1fr);gap:26px 0;}
  .h2s-proof__item{padding:0 12px;}
  .h2s-proof__item:nth-child(odd){border-left:0;}
  .h2s-proof__icon{width:36px;height:36px;margin-bottom:11px;}
  .h2s-proof__n{font-size:15px;}
  .h2s-proof__l{font-size:13px;}
  .h2s-proof__note{font-size:12.5px;margin-top:24px;}
  .h2s-proof--slim{padding:22px 0 20px;}
  .h2s-proof--slim .h2s-proof__icon{width:26px;height:26px;margin-bottom:8px;}
  .h2s-proof--slim .h2s-proof__n{font-size:13px;}
  .h2s-proof--slim .h2s-proof__l{font-size:11.5px;}
  .h2s-proof--three .h2s-proof__row{grid-template-columns:1fr;gap:22px 0;}
  .h2s-proof--three .h2s-proof__item{border-left:0;}
  .h2s-proof--three .h2s-proof__eyebrow{font-size:12.5px;margin-bottom:16px;}
}


/* ==================================================================
   PROOF SQUARE — 23 August 2026. A SINGLE proof point, placed once on
   a page, inside the body copy. Forest tile carries the stat; the
   sentence beside it carries the supporting fact in words. No page
   gets more than one, and no point is used as a square twice.
   ================================================================== */
.h2s-pf{display:flex;align-items:center;gap:24px;margin:28px auto;max-width:940px;padding:20px 24px;
  background:var(--ivory);border:1px solid var(--border);
  border-left:4px solid var(--gold);border-radius:var(--radius-md);}
.h2s-pf__tile{flex:0 0 152px;height:152px;background:var(--green-deep);
  border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:12px 10px;box-sizing:border-box;}
.h2s-pf__icon{width:30px;height:30px;color:var(--gold);margin-bottom:9px;}
.h2s-pf__n{font:800 13.5px/1.25 'DM Sans',sans-serif;letter-spacing:.02em;
  text-transform:uppercase;color:var(--gold);hyphens:none;}
.h2s-pf__l{font:600 10.5px/1.35 'DM Sans',sans-serif;color:#FFFDF8;margin-top:5px;}
.h2s-pf__say{flex:1;min-width:0;margin:0;
  font:400 15px/1.72 'DM Sans',sans-serif;color:var(--text-dark);}
.section-ivory .h2s-pf,.section-green .h2s-pf{background:var(--white);}
@media (max-width:700px){
  .h2s-pf{flex-direction:column;align-items:stretch;gap:16px;padding:18px;margin:22px 18px;}
  .h2s-pf__tile{flex:none;width:100%;height:auto;padding:18px 12px;
    flex-direction:row;gap:12px;justify-content:flex-start;text-align:left;}
  .h2s-pf__icon{margin-bottom:0;flex:0 0 30px;}
  .h2s-pf__say{font-size:14px;}
}

/* ==================================================================
   BANNER FOOTER BAND — 23 August 2026. His supplied Help2Serve.Care
   banner, unmodified, full-bleed above the footer on every page. The
   source is 1600x540 (replaced 25 August 2026; the previous artwork was
   2048x768 and 2.667:1 — this one is 2.963:1); width:100% + height:auto
   keeps that aspect at every breakpoint so no part of the artwork is
   ever cropped.
   `max-width` is deliberately LEFT at 2048px rather than dropped to the
   new file's native 1600px. At 1600 the banner would stop growing while
   the page kept going, leaving `--green-deep` (#1B4332) bars either side
   of artwork whose own ground is #023C26 — a visible mismatch on any
   viewport above 1600. Above 1600 the file upscales instead; 2048/1600
   is 1.28x.
   ================================================================== */
.h2s-bannerfoot{display:block;align-self:stretch;width:100%;line-height:0;
  background:var(--green-deep);}
.h2s-bannerfoot img{display:block;width:100%;height:auto;max-width:2048px;
  margin:0 auto;}

/* ==================================================================
   HIGHLIGHT PULL-QUOTE — 23 August 2026. His record of service, in the
   organization's voice, unattributed. One per page, placed where the
   claim is load-bearing for that page's argument. Deliberately NOT a
   stat band: this is a sentence with weight, set large, on ivory, with
   a gold rule. Existing brand tokens only.
   ================================================================== */
.h2s-hq{position:relative;max-width:920px;margin:44px auto;padding:0 26px 0 34px;
  border-left:3px solid var(--gold);text-align:left;}
.h2s-hq p{font-family:'Fraunces',serif;font-weight:700;font-size:24px;line-height:1.38;
  color:var(--green-deep);margin:0;}
.h2s-hq p em{font-style:normal;color:var(--gold-deep,#7E602A);}
.h2s-hq__tag{display:block;margin-top:14px;font:700 10.5px/1.4 'DM Sans',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);}
.h2s-hq--dark{border-left-color:var(--gold);}
.h2s-hq--dark p{color:#FFFDF8;}
.h2s-hq--dark p em{color:var(--gold);}
.h2s-hq--dark .h2s-hq__tag{color:rgba(238,233,225,.7);}
@media (max-width:820px){
  .h2s-hq{margin:32px auto;padding:0 4px 0 20px;}
  .h2s-hq p{font-size:19px;}
}

/* ==================================================================
   RISK-REVIEW PACKET — document control, pending fields, print rules.
   23 August 2026. Everything inside an H2S-RISK marker pair is written
   by _internal/build-risk-packet.py from _internal/risk-packet.json.
   Do not hand-edit those regions; edit the JSON and re-run the build.
   ================================================================== */
.h2s-rr-version{background:var(--ivory);border:1px solid var(--border);
  border-left:4px solid var(--green-deep);border-radius:var(--radius-md);
  padding:18px 20px;margin:18px 0 26px;}
.h2s-rr-version__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px 26px;}
.h2s-rr-version__grid span{display:block;font:700 9.5px/1.3 'DM Sans',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);}
.h2s-rr-version__grid strong{display:block;margin-top:3px;
  font:600 13.5px/1.5 'DM Sans',sans-serif;color:var(--green-deep);}
.h2s-rr-version__canon{margin:16px 0 0;font:400 12.5px/1.65 'DM Sans',sans-serif;
  color:var(--text-muted);border-top:1px solid var(--border);padding-top:12px;}
.h2s-rr-version__canon a{color:var(--green-mid);font-weight:700;word-break:break-all;}

.h2s-rr-field{border-left:4px solid var(--gold);background:var(--h2s-gold-wash);
  padding:12px 16px;margin:14px 0;font-size:0.9rem;line-height:1.65;}
.h2s-rr-field.is-filled{border-left-color:var(--green-mid);background:var(--ivory);}
.h2s-rr-pending{display:inline-block;margin-left:4px;font-weight:700;
  color:#7E602A;white-space:normal;}

.h2s-rr-outstanding{background:var(--ivory);border:1px dashed var(--border);
  border-radius:var(--radius-md);padding:18px 20px;margin:0 0 26px;}
.h2s-rr-outstanding h3{font-size:1rem;margin:0 0 10px;color:var(--green-deep);}
.h2s-rr-outstanding ul{margin:0 0 12px;padding-left:20px;
  font:400 13.5px/1.7 'DM Sans',sans-serif;color:var(--text-dark);}
.h2s-rr-outstanding > p{margin:0;font:700 12.5px/1.6 'DM Sans',sans-serif;
  color:#7E602A;}
@media (max-width:760px){
  .h2s-rr-version__grid{grid-template-columns:1fr 1fr;gap:12px 18px;}
}
@media (max-width:460px){
  .h2s-rr-version__grid{grid-template-columns:1fr;}
}

/* PRINT — a filed copy must carry the version and the canonical URL, and
   must not carry navigation, banners or the floating flag. Link targets
   are expanded so a printed citation is followable. */
@media print{
  .site-nav,.announcement-bar,.h2s-newsflag,.h2s-top,.h2s-proof,
  .h2s-bannerfoot,.site-footer,.h2s-consent,.h2s-journey{display:none !important;}
  .h2s-rr-version{break-inside:avoid;border-left-width:3px;}
  .h2s-rr-field,.h2s-rr-outstanding{break-inside:avoid;}
  .h2s-rr-version__canon a::after{content:"";}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;
    word-break:break-all;}
  body{background:#fff;}
}

/* ==================================================================
   FLOATING NEWS FLAG — 23 August 2026, his call. Index page only.

   POSITION. Bottom-LEFT. `.h2s-top` (back to top) is pinned
   right:18px bottom:18px at 46x46 with z-index 8000, so the two
   cannot touch at any width. This sits one z-level below it so the
   back-to-top always wins a stacking contest.

   TRANSPARENCY. rgba forest at .82 with a blur behind it, so the
   page reads through without the text losing contrast — the blur is
   what keeps it legible over the busy photographic hero. Browsers
   without backdrop-filter fall back to the same rgba, which is
   still opaque enough to read.

   REVEAL. Hidden until h2s-interactive.js adds .is-visible on the
   same 700px scroll threshold the back-to-top uses, so nothing
   floats over the hero on first paint.
   ================================================================== */
.h2s-newsflag{
  position:fixed;left:18px;bottom:6px;z-index:7900;
  display:flex;align-items:center;gap:12px;
  max-width:min(340px,calc(100vw - 96px));
  padding:11px 16px 11px 14px;border-radius:999px;
  background:rgba(27,67,50,.82);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
          backdrop-filter:blur(8px) saturate(1.1);
  border:1px solid rgba(233,196,106,.55);
  box-shadow:0 8px 24px rgba(27,67,50,.28);
  text-decoration:none;color:#F5F1EA;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,transform .3s,background .2s,border-color .2s;
}
.h2s-newsflag.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.h2s-newsflag:hover,.h2s-newsflag:focus-visible{
  background:rgba(27,67,50,.94);border-color:var(--h2s-gold);
}
.h2s-newsflag:focus-visible{outline:3px solid var(--h2s-gold);outline-offset:3px}
.h2s-newsflag__dot{
  flex:0 0 9px;width:9px;height:9px;border-radius:50%;
  background:var(--h2s-gold);box-shadow:0 0 0 4px rgba(233,196,106,.22);
}
.h2s-newsflag__text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.h2s-newsflag__eyebrow{
  font:700 .58rem/1 'DM Sans',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--h2s-gold);
}
.h2s-newsflag__head{
  font:600 .84rem/1.3 'DM Sans',sans-serif;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.h2s-newsflag__arrow{
  font-size:.95rem;color:var(--h2s-gold);flex:0 0 auto;
  transition:transform .2s;
}
.h2s-newsflag:hover .h2s-newsflag__arrow{transform:translateX(3px)}

/* Phones: the back-to-top sits bottom-right at 46px + 18px = 64px of
   reserved width, so cap the flag well clear of it and drop the
   headline, keeping the label and the arrow. */
@media (max-width:560px){
  .h2s-newsflag{
    left:12px;bottom:12px;padding:9px 13px 9px 11px;gap:9px;
    max-width:calc(100vw - 100px);
  }
  .h2s-newsflag__head{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .h2s-newsflag{transition:opacity .3s}
  .h2s-newsflag:hover .h2s-newsflag__arrow{transform:none}
}
.h2s-newsflag__x{
  flex:0 0 auto;margin-left:2px;width:20px;height:20px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(245,241,234,.14);color:#F5F1EA;
  font:400 15px/1 'DM Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.h2s-newsflag__x:hover{background:rgba(245,241,234,.3)}
.h2s-newsflag__x:focus-visible{outline:2px solid var(--h2s-gold);outline-offset:2px}

/* --- the proof band starts where the photograph ends — 24 August 2026 -----
   ASKED FOR: the band must begin below the bottom edge of the hero
   photograph, not on top of it.
   MEASURED, before: the band's top sat 481.7px above the photograph's
   bottom edge at 1440, 391.2px at 1280, 316.6px at 1101, 244.5px at 901,
   115.3px at 900, 142.4px at 768 and 81.2px at 390 — so the band covered
   the middle of the picture and 187px of it re-emerged underneath as the
   strip of grass in his screenshot.
   The band is a flow sibling that follows `.hero-content`, so the only
   thing setting its top is the height of the headline block. Giving that
   block a floor equal to the photograph's own height puts the band's top
   edge exactly on the picture's bottom edge, without moving the headline,
   without touching the photograph, and without a magic offset that would
   drift when the headline rewraps.
   >=901px: the top layer is `100% auto`, so its height is the hero's width
   divided by the file's aspect ratio (coverpagegreenlanscape_hiking.webp is
   1224x692 = 1.76879) -> 56.536% of the width. The hero is full-bleed, so
   vw and the hero's width are the same number.
   <=900px: the top layer is the fixed 460px `::before` band declared above,
   and the hero carries 80px of padding-top that the band ignores, so the
   floor is 460 - 80.
   Scoped with :has(.hero-content-lower) like every other homepage-hero rule
   here, so engage.html's hero is untouched. `:not(.hero-content-lower)`
   because the introduction block lower down carries `.hero-content` too.
   ------------------------------------------------------------------------ */
/* RESTORED 24 Aug 2026, second time. He showed me the render and said this
   is the one. The headline block gets a floor equal to the photograph's own
   height, so the WHOLE picture is on screen with the headline over its top
   and the band beginning exactly at its bottom edge.
   >=901px: hero width / 1.76879 (coverpagegreenlanscape_hiking.webp is
   1224x692) = 56.536vw.  <=900px: the fixed 460px `::before` band minus the
   hero's 80px padding-top = 380px.
   Pair this with `.hero > .h2s-journey{margin-top:0}` below — without that,
   30px of bare hero green sits under the band. Both are needed; neither
   works alone. */
/* 27 Aug 2026 — the 8.5px green seam under the photograph.
   HIS REPORT: a thin green line between the bottom of the hero photograph
   and the top of the proof band.
   MEASURED: with a classic space-taking scrollbar (15px) the strip is
   8.48px at 1440, 8.48 at 1280, 8.48 at 1210, 8.47 at 1101 and 8.47 at 950
   — constant, because it is 56.536% of the scrollbar width and nothing
   else. `vw` counts the scrollbar; the photograph's rendered height comes
   from the hero ELEMENT's width, which does not. 0.56536 x 15 = 8.48.
   With overlay scrollbars (0px) the seam is 0.00px, which is why it never
   showed in the headless checks.
   FIX: resolve the floor against the hero's own width instead of the
   viewport's. `cqw` is the container's content box, so the scrollbar is
   out of the arithmetic at every width and for every scrollbar style.
   The `vw` line stays first as the fallback for engines without container
   query units — they keep exactly today's behaviour, seam and all, rather
   than losing the floor and collapsing the hero. */
@media (min-width:901px){
  .hero:has(.hero-content-lower){container-type:inline-size;}
  .hero:has(.hero-content-lower) > .hero-content:not(.hero-content-lower){
    min-height:56.536vw;
    min-height:56.536cqw;
  }
}
@media (max-width:900px){
  .hero:has(.hero-content-lower) > .hero-content:not(.hero-content-lower){
    min-height:380px;
  }
}

/* --- the banner as the application panel's header — 24 August 2026 --------
   ASKED FOR: smaller, side edges flush with the application/inquiry panel's
   side edges, and no white space between the banner and the top of the form.
   h2s-apply.js re-parents `.h2s-bannerfoot` to sit immediately above
   `.h2s-apply` inside the panel's own 880px column, so its width is the
   panel's width by construction rather than by a hard-coded number.
   MEASURED at 1440, before 1440 x 540 full-bleed. After, by panel family:
   40 pages 1216 x 456 (-15.6% linear, -28.8% area), 6 pages 800 x 300
   (-44.4% / -69.1%), 2 pages 880 x 330 (-38.9% / -62.7%). At 390 every page
   is 358 x 134 against 390 x 146 (-8.2% / -15.7%) — the phone column is
   nearly full-bleed already. Gap between the banner's bottom edge and the
   panel's top edge: 0.00px, and left/right edge mismatch 0.00px, on all 48
   pages at 1440 and 1101.
   JUDGEMENT CALL, flagged: the two are given one shared corner radius —
   banner rounded at the top, panel rounded only at the bottom — because a
   14px rounded panel corner sitting under a square banner edge leaves a
   visible notch of page background. Nothing else about either is changed.
   Pages with no application panel keep the banner full-bleed above the
   footer, untouched.
   ------------------------------------------------------------------------ */
.h2s-bannerfoot--applyhead{background:transparent;border-radius:14px 14px 0 0;
  overflow:hidden;margin:0;}
.h2s-bannerfoot--applyhead img{max-width:none;}
.h2s-bannerfoot--applyhead + .h2s-apply{border-radius:0 0 14px 14px;}
@media(max-width:700px){
  .h2s-bannerfoot--applyhead{border-radius:12px 12px 0 0;}
  .h2s-bannerfoot--applyhead + .h2s-apply{border-radius:0 0 12px 12px;}
}

/* --- one green for the banner artwork, the proof bands and the application
   panel — 24 August 2026 ---------------------------------------------------
   HIS REPORT: the banner sits directly on top of the application panel with a
   0px gap, so if the two greens differ you see a seam. They differed.
   MEASURED, sampling h2s-banner-footer.webp itself: the flat ground of his
   artwork is 68.5% of the file and averages #014126. Against it the
   application panel was #21553F (deltaE 10.1) and the proof bands were
   #1B4332 (deltaE 8.8); the panel and the bands also disagreed with each
   other by 8.4. Three greens where there should be one.
   Both CSS greens are now the artwork's own #014126, sampled from the file
   rather than eyeballed, so the seam is deltaE 0.0.
   JUDGEMENT CALL, flagged at the time: the artwork is the fixed reference
   because it is a raster he supplied and is used with no crop and no
   recolour. Contrast improves in every pair — ivory on the panel 8.48 -> 11.73,
   gold on the panel 5.16 -> 7.14 — so nothing drops toward the AA floor.
   `--green-deep` itself is NOT touched; it still paints the rest of the site.
   The change is scoped to `.h2s-apply` (its own --h2s-apply-bg token) and to
   `.h2s-proof` (which the slim variants inherit).

   RESOLVED 25 August 2026 — the artwork above was replaced by
   h2s-banner-footer-globe-3200.webp. Re-measured on the SAME flat-ground sample
   region, the new artwork's ground averages #023C26, not #014126, which put
   the banner-to-panel join at deltaE76 3.90 — a visible step where it had
   been 0.0. On his instruction BOTH CSS greens were re-sampled together to
   #023C26; `.h2s-apply` and `.h2s-proof` stay unified, as they have been
   since 24 August. `--green-deep` is still NOT touched.
   ------------------------------------------------------------------------ */

/* --- the application header banner, 25% shorter — 24 August 2026 ----------
   ASKED FOR: about 25% smaller, side edges still exactly equal to the
   application panel's side edges, and no white space above the panel.
   THE CONSTRAINT, said plainly: those two cannot both be met by scaling.
   The banner's width IS the panel's width, so shrinking it 25% overall would
   pull its left and right edges 12.5% inside the panel's — the opposite of
   what he asked for. The only geometry that keeps the edges equal AND takes
   25% off is to keep the full width and show 25% less height, i.e. crop the
   artwork top and bottom rather than scale it.
   MEASURED against the file first, so nothing he typeset is lost: in
   h2s-banner-footer.webp (2048x768) — the RETIRED artwork; superseded
   25 August 2026 by h2s-banner-footer-globe-3200.webp (3200x1080), whose printed
   content spans 0.0% to 83.0% of the height, so a centred 25% crop WOULD
   cut its top line. The live rule below is full-aspect, no crop, so this
   does not bite — but do not reinstate a centred crop without re-measuring.
   The printed content — eyebrow line down
   to the stat labels — spans 20.8% to 84.6% of the height. A centred 25%
   crop removes 12.5% from each end, i.e. everything above 12.5% and below
   87.5%, so it clears the top of the eyebrow by 8.3% (64px in the file) and
   the bottom of the labels by 2.9% (22px). Nothing is cut, nothing is
   rescaled, and the type stays at the same size it is now.
   MEASURED, rendered at 1440 by panel family:
     40 pages 1216 x 456 -> 1216 x 342
      6 pages  800 x 300 ->  800 x 225
      2 pages  880 x 330 ->  880 x 247.5
   Against the original full-bleed 1440 x 540 that is -46.5% of area.
   At 390 every page goes 358 x 134 -> 358 x 100.7.
   JUDGEMENT CALL, flagged: this is a display crop, which is a departure from
   "used exactly as supplied". It is the only way to honour both halves of
   the instruction; the file itself is untouched and the crop is one line to
   undo.
   ------------------------------------------------------------------------ */
.h2s-bannerfoot--applyhead img{
  /* --- FULL WIDTH — 26 August 2026, HIS INSTRUCTION "ensure placement is
     aligned" ---------------------------------------------------------------
     SUPERSEDES the 80% inset chosen on 25 August (option B, when he asked for
     a smaller header). That inset was measured against the application panel
     it sits on: 122px inside on EACH side at 1440 and 1920, 104px at 1101,
     76px at 820, 36px at 390 — which is the misalignment he reported.
     Back to 100% restores his 24 August rule that the banner's side edges
     match the panel's exactly. THE COST, STATED: at 1440 the header returns
     from 973x328 to 1216x410 — +25% on each axis, +56% of area. That is the
     size he asked to shrink, and the two cannot both be true.
     `margin:0 auto` centres it; `display:block` kills the inline-image
     baseline gap that would otherwise open under it. -------------------- */
  width:100%;
  margin:0 auto;
  display:block;
  aspect-ratio:1600 / 540 !important;   /* no crop — the artwork as supplied */
  height:auto;
  /* !important is load-bearing: the inline mobile fixImages() script in every
     page walks every div holding an img at <=600px and writes
     img.style.objectFit='unset'. `unset` on object-fit resolves to `fill`,
     not `cover`, which stretched this 2.667:1 artwork into a 3.556:1 box —
     a 25.0% vertical squash on 33 of 48 pages at 390. Inline style beats a
     non-important rule, so cover has to be declared important to survive. */
  object-fit:cover !important;
  object-position:center center;
}

/* --- the proof band's type moves to the ivory token — 24 August 2026 -------
   The banner artwork's body type was recoloured to #F8F5F0 (the site token),
   so its CSS twin follows. `.h2s-proof__l` and the note link's hover state
   were #FFFDF8 — 255/253/248 against 248/245/240, deltaE 2.6. Both now read
   `var(--h2s-ivory)`, which IS #F8F5F0, so they can never drift again.
   Contrast on the band's #014126 ground: 11.73 -> 11.16. AA floor is 4.5.
   The eyebrow and note body stay rgba(238,233,225,.8x) — those are
   deliberately dimmed secondary text, not banner type.
   ------------------------------------------------------------------------ */

/* --- nothing shows below the proof band — 24 August 2026 ------------------
   HIS REPORT, and I had the diagnosis wrong the first time. He asked for the
   band to start below the bottom edge of the hero photograph. I read that as
   "move the band down" and gave the headline block a floor equal to the
   photograph's full height. That did put the band under the picture, but it
   also grew the picture from 332px to 814px at 1440 — 4.0x the area he had
   on screen — and left a 30px strip of bare hero green under the band.
   Reverted above.
   THE ACTUAL FAULT, MEASURED. The band sat at 497-792 and the ivory journey
   panel began at 822, so a 30px gap sat between them. The photo layer runs
   to 979, so that gap was filled by the BOTTOM of the photograph — the strip
   of grass reappearing underneath the band. That strip is the whole
   complaint: it makes the band look like it is lying on top of the picture
   instead of sitting below it. The 30px is `.hero > .h2s-journey`'s own
   margin-top (22px below 900px), nothing else.
   FIX: close the gap. The ivory panel now butts directly against the band,
   so the last thing visible of the photograph is its edge at the band's top
   line, and nothing of it appears below. The photograph itself is not
   moved, resized, recropped or masked — it renders exactly as it did in
   2026-08-23c.
   MEASURED after, at 1440: photo 165-497, band 497-792, ivory from 792.
   Photo pixels visible below the band: 0. Bare hero green visible below the
   band: 0.
   ------------------------------------------------------------------------ */
.hero > .h2s-journey{margin-top:0}
@media(max-width:900px){
  .hero > .h2s-journey{margin-top:0}
}


/* ==================================================================
   SITE SEARCH  ·  25 August 2026
   Footer "Search this site" button -> full-screen panel -> section-level
   results that deep-link into the page and highlight the query on arrival.
   Behaviour lives in h2s-search.js; the index is h2s-search-index.js,
   regenerated by _internal/build-search-index.py on every gate run.
   ================================================================== */
.h2s-search-trigger{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:var(--radius-pill);
  padding:8px 16px;font-size:.84rem;font-weight:600;
  font-family:inherit;cursor:pointer;line-height:1;
  transition:background .18s,border-color .18s;
}
.h2s-search-trigger:hover,
.h2s-search-trigger:focus-visible{
  background:rgba(233,196,106,.18);border-color:var(--gold);color:var(--gold);
}
.h2s-search-trigger svg{width:14px;height:14px;flex:0 0 14px}

.h2s-search-panel{display:none}
.h2s-search-panel.is-open{
  display:block;position:fixed;inset:0;z-index:9000;
}
.h2s-search-backdrop{
  position:absolute;inset:0;background:rgba(10,32,22,.62);
  backdrop-filter:blur(3px);
}
.h2s-search-box{
  position:relative;margin:0 auto;max-width:760px;
  height:100%;display:flex;flex-direction:column;
  background:var(--white,#fff);box-shadow:0 24px 60px rgba(10,32,22,.34);
}
.h2s-search-bar{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:16px 18px;border-bottom:1px solid var(--border);
  background:var(--ivory);
}
.h2s-search-input{
  flex:1 1 auto;min-width:0;font-family:inherit;font-size:1.02rem;
  padding:12px 16px;border:1.5px solid var(--border);
  border-radius:var(--radius-pill);background:#fff;color:var(--text-dark);
}
.h2s-search-input:focus{outline:none;border-color:var(--green-mid);}
.h2s-search-close{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--green-deep);
  font-size:1.5rem;line-height:1;cursor:pointer;
}
.h2s-search-close:hover{background:var(--ivory);}
.h2s-search-results{
  flex:1 1 auto;overflow-y:auto;padding:8px 18px 40px;
  -webkit-overflow-scrolling:touch;
}
.h2s-search-msg,.h2s-search-count{
  font-size:.86rem;color:var(--text-muted);margin:16px 2px;
}
.h2s-search-page{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dark);margin:22px 2px 8px;
}
.h2s-search-hit{
  display:block;padding:12px 14px;margin-bottom:6px;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:#fff;text-decoration:none;color:inherit;
}
.h2s-search-hit:hover,.h2s-search-hit:focus-visible{
  border-color:var(--green-mid);background:var(--ivory);
}
.h2s-search-hit-h{
  display:block;font-weight:700;color:var(--green-deep);
  font-size:.95rem;margin-bottom:4px;
}
.h2s-search-hit-x{
  display:block;font-size:.84rem;line-height:1.6;color:var(--text-muted);
}
.h2s-search-results mark{
  background:var(--h2s-gold-wash);color:inherit;padding:0 1px;border-radius:2px;
}
mark.h2s-search-found{
  background:var(--h2s-gold-wash);color:inherit;
  box-shadow:0 0 0 1px var(--h2s-gold-line);border-radius:2px;
}
@media(max-width:700px){
  .h2s-search-box{max-width:none}
  .h2s-search-bar{padding:12px 12px}
  .h2s-search-results{padding:8px 12px 40px}
}


/* ==================================================================
   RISK-ADDENDUM "LAST UPDATE" PILL  ·  25 August 2026
   The three Risk Addendum links in the "For institutions" dropdown carry
   data-h2s-updated="M/D/YYYY", written by prepublish.py from the build
   stamp on every gate run. The pill is drawn from the attribute rather
   than from literal text in the markup, so 144 nav links stay one styling
   decision. Same pattern as .h2s-dd-pdf::after above.
   ================================================================== */
.nav-links .h2s-dd-library a[data-h2s-updated]::after{
  content:"Last Update: " attr(data-h2s-updated);
  display:block;margin-top:4px;width:fit-content;
  background:var(--h2s-gold-wash);border:1px solid var(--h2s-gold-line);
  color:var(--gold-dark,#B8860B);
  font-size:.62rem;font-weight:800;letter-spacing:.06em;
  padding:2px 8px;border-radius:var(--radius-pill);
  white-space:nowrap;
}
/* the document-control grid gains a seventh cell; it already wraps */
.h2s-rr-version__grid > div > span{white-space:nowrap}