/* =========================================================================
   IHAP — Forest / Lime / Cream / Charcoal
   Source of truth: assets/IHAP Design System Guide/IHAP_Brand Design_System_RD.pdf
   Ratio discipline: Forest 60% · Lime 25% · Cream 12% · Charcoal 3%.
   Lime is the DECISION, never chrome. No gradients as UI.
   ========================================================================= */

:root{
  /* ---- Brand book §12 (source of truth) ------------------------------ */
  --forest:#0F2D1E;     --forest-2:#164028;    --forest-3:#0A2015;
  --lime:#C6F05A;       --lime-2:#D6F681;      --lime-3:#A9D33F;
  --cream:#FBFBF7;      --cream-2:#FFFFFF;
  --charcoal:#111618;                          /* body copy only, never a bg */
  --white:#FFFFFF;

  /* ---- Supporting tints (brand book swatch row) ---------------------- */
  --lime-wash:#EFF7DB;                         /* very pale lime, tinted sections */
  --ink:var(--forest);  --ink-soft:#4E6659;

  --line:rgba(15,45,30,.12);
  --shadow-soft:0 20px 45px -22px rgba(15,45,30,.35);
  --shadow-chunk:0 5px 0 var(--forest);
  --gutter:clamp(20px,5vw,48px);
  --maxw:1200px;
  --r-card:28px; --r-input:16px;
  --r-tile:22.4%;                              /* icon tile, brand book §11 */
  --track:.36em;                               /* Sora statement tracking (+360) */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--forest);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.02;letter-spacing:-.02em;font-weight:800;color:var(--forest)}

/* Lime "highlighter" — wrap phrases in <mark> to stress key copy.
   Uses linear-gradient so only the lower ~45% is filled, mimicking a real highlighter. */
mark{
  background:linear-gradient(180deg, transparent 0%, transparent 55%, var(--lime) 55%, var(--lime) 96%, transparent 96%);
  color:var(--forest);font-weight:800;
  padding:0 .12em;border-radius:2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* =========================================================================
   LOGO — Route C hybrid: mark + statement (brand book §08, marked PRIMARY)
   The mark is live text, not an image: crisp at every size, themeable, and
   it inherits the same Bricolage the headlines use.
   NEVER recoloured, outlined, or italicised — which is exactly why Pyckle's
   -webkit-text-stroke treatment is gone.
   ========================================================================= */
.wordmark,
.lockup__mark{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--forest);
  display:inline-flex;align-items:flex-end;
  white-space:nowrap;
}
.wordmark--on-dark,.lockup--on-dark .lockup__mark{color:var(--cream)}

/* The full stop — a rounded square, not a circle. "A plan is a decision:
   a period, not a question mark." Optically seated on the baseline: the
   flex line box bottoms out below it, so nudge back up by the descender. */
.fullstop{
  display:inline-block;
  width:.235em;height:.235em;
  background:var(--lime);
  border-radius:28%;
  margin-left:.07em;margin-bottom:.145em;
  flex:none;
}
.fullstop--hero{width:.16em;height:.16em;margin-left:.05em;margin-bottom:.1em}

.wordmark--sm{font-size:1.65rem}
.wordmark--md{font-size:2rem}
.wordmark--lg{font-size:3.2rem}
.wordmark--xxl{font-size:clamp(4rem,12vw,9rem)}

/* =========================================================================
   The full lockup is CENTRED on a common axis — mark over rule over
   statement — exactly as the master lockup is drawn. Left-aligning it made
   the rule span the (wider) statement and left the mark looking inset.
   ========================================================================= */
.lockup{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.lockup__rule{
  display:block;width:100%;height:1px;
  background:currentColor;color:var(--forest);opacity:.9;
  margin:.5em 0 .45em;
}
.lockup--on-dark .lockup__rule{color:var(--cream);opacity:.6}
.lockup__statement{
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track);
  /* Tracking adds a trailing space after the last glyph; pull it back so the
     statement stays optically centred under the mark. */
  text-indent:var(--track);
  color:var(--forest);
  white-space:nowrap;
}
.lockup--on-dark .lockup__statement{color:var(--cream)}

/* Sizes are chosen so the statement never drops below ~9px — under that the
   tracked-out Sora turns to mush, which is what made the old nav mark look
   cheap. Below this size use the mark on its own (brand minimum: mark 24px,
   full lockup 96px wide). */
/* Nav lockup. The master artwork sets the mark about 1.5x the statement's
   width, but reproducing that ratio inside a 76px nav would drive the
   statement under 7px, where tracked-out Sora turns to mush. So the tracking
   is eased back (the only deviation from the +360 spec) until mark and
   statement measure the same width and the rule spans both cleanly. */
.lockup--nav .lockup__mark{font-size:1.75rem}
.lockup--nav .lockup__statement{font-size:.5rem;letter-spacing:.065em;text-indent:.065em}
.lockup--nav .lockup__rule{margin:.34em 0 .3em;height:1px}
@media (max-width:900px){
  .lockup--nav .lockup__mark{font-size:1.5rem}
  .lockup--nav .lockup__statement{font-size:.44rem;letter-spacing:.05em;text-indent:.05em}
}
.lockup--md .lockup__mark{font-size:2.4rem}
.lockup--md .lockup__statement{font-size:.6rem}
.lockup--lg .lockup__mark{font-size:3.4rem}
.lockup--lg .lockup__statement{font-size:.85rem}

/* =========================================================================
   PILL SYSTEM — the signature graphic element (brand book §14)
   Solid = active · Outline = available · Dashed = roadmap.
   This site ships TENANT only; do not add pills for unsold products.
   ========================================================================= */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track);
  font-size:.72rem;line-height:1;
  padding:.72rem 1.15rem .72rem calc(1.15rem + var(--track));
  border-radius:999px;
  border:1.5px solid var(--forest);
  color:var(--forest);background:transparent;    /* default = OUTLINE state */
  white-space:nowrap;
}
.pill--solid{background:var(--forest);color:var(--lime);border-color:var(--forest)}
.pill--lime{background:var(--lime);color:var(--forest);border-color:var(--lime)}
.pill--dashed{border-style:dashed;color:var(--ink-soft);border-color:var(--ink-soft)}
.pill--on-dark{border-color:var(--lime);color:var(--lime)}
.pill--xs{font-size:.6rem;padding:.35rem .7rem .35rem calc(.7rem + var(--track))}
.pill--lg{font-size:.82rem;padding:.85rem 1.4rem .85rem calc(1.4rem + var(--track))}
/* Long-form eyebrow pill: ease the tracking back so a full sentence still
   reads as one confident line rather than a stretched banner. */
.pill--wide{
  --track:.2em;
  font-size:clamp(.62rem, min(.72vw, 1.25vh), .92rem);
  padding:.62em 1.6em .62em calc(1.6em + .2em);
  white-space:normal;text-align:center;max-width:100%;
}
@media (max-width:560px){
  .pill--wide{font-size:.6rem;line-height:1.5;border-radius:20px}
}
/* Interactive pills must clear the 44px touch target. */
a.pill,button.pill{min-height:44px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
a.pill:hover,button.pill:hover{transform:translateY(-2px)}

a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,140px)}

/* A whole section sitting on a photograph. The wash carries almost all of the
   contrast work so the cards on top stay AA — the picture is atmosphere, not
   a competing subject. */
.section-photo{position:relative;overflow:hidden;background:var(--cream-2);isolation:isolate}
.section-photo__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.section-photo__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 38%;max-width:none}
.section-photo__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,.9) 100%);
}
.section-photo > .container{position:relative;z-index:2}
@media (max-width:900px){
  .section-photo__wash{background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 100%)}
}

/* ---- Type helpers -------------------------------------------------------- */
.h-hero{font-size:clamp(2.6rem,7.2vw,5.5rem)}
.h-sec{font-size:clamp(2.35rem,5.4vw,4.3rem);line-height:.98;letter-spacing:-.03em}
/* Section eyebrow — Sora 600, tracked out, quiet. It labels the chapter; it
   does not compete with the headline, and it never spends the lime accent. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;font-size:.72rem;line-height:1;
  text-transform:uppercase;letter-spacing:var(--track);
  color:var(--ink-soft);
}
.eyebrow svg{width:16px;height:16px;flex:none}
.eyebrow + .h-sec,.eyebrow + h2{margin-top:1.1rem}
.eyebrow--on-dark{color:rgba(251,251,247,.72)}
.lead{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink-soft);max-width:56ch}

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  --bg:var(--forest);--fg:var(--lime);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:inherit;font-weight:700;font-size:1.02rem;
  padding:.95rem 1.6rem;min-height:52px;border:2px solid var(--forest);
  background:var(--bg);color:var(--fg);border-radius:999px;cursor:pointer;
  box-shadow:var(--shadow-chunk);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--forest)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 var(--forest)}
.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.btn--lime{--bg:var(--lime);--fg:var(--forest)}
.btn--ink,.btn--charcoal{--bg:var(--charcoal);--fg:var(--lime);border-color:var(--charcoal)}
.btn--ghost{--bg:transparent;--fg:var(--forest);box-shadow:none}
.btn--ghost:hover{background:rgba(15,45,30,.06);transform:translateY(-2px);box-shadow:none}
.btn--lg{font-size:1.1rem;padding:1.1rem 2rem;min-height:60px}
.btn--sm{font-size:.9rem;padding:.6rem 1.2rem;min-height:0}
.btn--block{width:100%}

/* ---- Layered "chunky" navigation ---------------------------------------- */
.nav{position:sticky;top:0;z-index:60}
.nav__inner{
  margin:14px auto 0;max-width:var(--maxw);
  display:flex;align-items:center;gap:1rem;
  padding:.5rem .8rem .5rem 1.9rem;
  background:var(--white);border:2px solid var(--forest);
  border-radius:999px;box-shadow:0 4px 0 var(--forest);
  transition:box-shadow .25s,transform .25s;
}
.nav__brand{flex:none;display:flex;align-items:center;min-height:44px;margin-right:1rem}
.nav.is-stuck .nav__inner{box-shadow:0 6px 22px -8px rgba(15,45,30,.4)}
.nav__links{display:flex;gap:.35rem;margin-inline:auto}
.nav__links a{padding:.55rem .9rem;border-radius:999px;font-weight:600;color:var(--ink-soft);transition:.15s}
.nav__links a:hover{color:var(--forest);background:rgba(15,45,30,.06)}
.nav__burger{display:none;width:48px;height:48px;border-radius:999px;border:2px solid var(--forest);background:var(--white);align-items:center;justify-content:center;cursor:pointer}

/* Nav CTA — a hair bigger + tighter so "See my Price" carries the primary weight */
.nav .btn--nav{font-size:1.05rem;padding:.85rem 1.4rem;min-height:0;letter-spacing:.01em}

/* Mobile menu overlay */
.menu{position:fixed;inset:0;z-index:70;background:var(--forest);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:var(--gutter);
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu.open{transform:translateY(0);visibility:visible}
.menu a{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2rem,9vw,3.2rem);padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.12);color:var(--white)}
.menu a:hover{color:var(--lime)}
.menu__brand{position:absolute;top:22px;left:22px;display:inline-flex}
.menu a.text-lime{color:var(--lime)}                             /* respect primary-CTA styling */
.menu__close{position:absolute;top:20px;right:20px;width:52px;height:52px;border-radius:999px;border:2px solid var(--white);background:transparent;color:var(--white);cursor:pointer}

/* ---- Announcement bar ---------------------------------------------------- */
.announce{
  background:var(--forest);color:var(--cream);
  text-align:center;font-size:.9rem;font-weight:600;
  padding:.55rem 1rem;
}
.announce .pill{border-color:var(--lime);color:var(--forest);background:var(--lime)}
/* Keep it to one line on mobile — drop the "covered in 60s" suffix. */
@media (max-width:640px){
  [data-c="announcement.suffix"]{display:none}
}

/* ---- Hero trust markers -------------------------------------------------- */
.trust-row{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  list-style:none;margin:0;padding:0;
}
.trust-row li{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;font-size:.72rem;line-height:1;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--forest);
}
.trust-row svg{color:var(--forest);flex:none}

/* ---- Cards --------------------------------------------------------------- */
.card{background:var(--white);border:2px solid var(--forest);border-radius:var(--r-card);box-shadow:var(--shadow-chunk)}
/* Lime card — the one step that carries the accent (step 03, "get covered"). */
.card--lime{background:var(--lime);color:var(--forest)}
.card--lime .step-num{color:var(--forest);opacity:.55}
.card--lime h3{color:var(--forest)}
.card--lime p{color:var(--forest);opacity:.85}
.card-soft{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-soft)}

/* Colorful benefit blocks (recolored to brand board) */
.bento{position:relative;border-radius:var(--r-card);border:2px solid var(--forest);padding:1.6rem;overflow:hidden;box-shadow:0 4px 0 var(--forest);min-height:200px;display:flex;flex-direction:column}
.bento h3{font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.15rem;letter-spacing:0;line-height:1.2;color:inherit}
.bento p{color:inherit;opacity:.9;font-size:.95rem}
/* Final CTA sits in a .bento but needs cream body copy, not the bento's lime. */
.bento .cta-sub{color:var(--cream);opacity:.85;font-size:1.125rem}
.bento .big{margin-top:auto;font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1;color:inherit}
.bento .tag{align-self:flex-start;font-weight:700;font-size:.72rem;padding:.3rem .6rem;border-radius:999px;border:1.5px solid currentColor;margin-bottom:.9rem}
.b--forest{background:var(--forest);color:var(--lime)}
.b--lime{background:var(--lime);color:var(--forest)}
.b--wash{background:var(--lime-wash);color:var(--forest)}
.b--wash-2{background:#E7F3D6;color:var(--forest)}   /* second pale lime tint */
.b--cream{background:var(--white);color:var(--forest)}
.b--charcoal{background:var(--charcoal);color:var(--lime)}

/* ---- Stat numbers -------------------------------------------------------- */
.stat .num{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;letter-spacing:-.03em}

/* ---- Pricing band: dark forest section, pricing card is the marquee ---- */
.pricing-band{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:900px){
  .pricing-band{grid-template-columns:3fr 2fr;gap:clamp(2rem,5vw,4rem)}
}
/* 3 stats in a row on desktop; 2+1 (falls to 2-col grid) on narrow screens */
.pricing-band__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:640px){
  .pricing-band__stats{grid-template-columns:1fr 1fr}
}

/* Student Rate card — dark forest sub-card. Two variants:
   default (used elsewhere) and --marquee (the section's visual anchor). */
.rate-card{
  background:var(--forest);color:var(--white);
  border:2px solid var(--forest);border-radius:24px;
  padding:1.6rem 1.5rem;
  box-shadow:0 6px 0 rgba(15,45,30,.18);
  max-width:420px;
}
.rate-card--marquee{
  max-width:none;   /* fills its column so it reads as the section anchor */
  padding:2rem 1.8rem;
  background:var(--forest-2);          /* flat: no gradients as UI */
  border-color:rgba(198,240,90,.35);
  box-shadow:0 10px 0 rgba(0,0,0,.28), 0 24px 60px -22px rgba(0,0,0,.55);
}
.rate-card--marquee .rate-card__price{font-size:clamp(3rem,6.2vw,4rem)}
.rate-card__tag{
  display:inline-block;background:var(--lime);color:var(--forest);
  font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px;
}
.rate-card__price{
  font-family:"Bricolage Grotesque";font-weight:800;
  font-size:clamp(2.6rem,5.6vw,3.4rem);line-height:1;
  color:var(--lime);letter-spacing:-.02em;
  margin-top:.9rem;
}
.rate-card__price-suffix{font-size:.34em;color:rgba(255,255,255,.7);margin-left:.15em;letter-spacing:0;font-weight:700}
.rate-card__list{list-style:none;padding:0;margin:1.1rem 0 0;font-size:.98rem}
.rate-card__list li{padding:.55rem 0;border-top:1px solid rgba(198,240,90,.18);color:rgba(255,255,255,.88)}
.rate-card__list li:first-child{border-top:none}
.rate-card__hilite{color:var(--lime)!important}
.rate-card .btn{margin-top:1.2rem}

@media (max-width:900px){
  .rate-card--marquee{max-width:none;padding:1.6rem 1.4rem}
}

/* ---- Feature icon chip --------------------------------------------------- */
.ichip{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;border:2px solid var(--forest);background:var(--lime-wash);flex:none;color:var(--forest)}
.ichip svg{width:28px;height:28px}

/* ---- Toggle switch (add-ons) -------------------------------------------- */
.addon{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border:2px solid var(--forest);border-radius:20px;background:var(--white);cursor:pointer;transition:.18s;box-shadow:0 3px 0 var(--forest);text-align:left;color:var(--forest)}
.addon:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--forest)}
.addon.on{background:var(--lime-wash)}
.switch{position:relative;width:52px;height:30px;border-radius:999px;background:#d8d3c4;border:2px solid var(--forest);flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:1px;left:1px;width:24px;height:24px;border-radius:999px;background:var(--white);border:2px solid var(--forest);transition:transform .2s cubic-bezier(.5,1.6,.4,1)}
.addon.on .switch{background:var(--lime)}
.addon.on .switch::after{transform:translateX(22px)}
.addon .price{margin-left:auto;font-weight:800;white-space:nowrap;color:var(--forest)}

/* ---- Plan cards ---------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.plan{position:relative;text-align:left;background:var(--white);border:2px solid var(--forest);border-radius:22px;padding:1.15rem 1.15rem 1rem;cursor:pointer;box-shadow:0 3px 0 var(--forest);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s;display:flex;flex-direction:column;gap:.7rem;font:inherit;color:var(--forest)}
.plan:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--forest)}
.plan.sel{background:var(--lime-wash);box-shadow:0 5px 0 var(--forest-3);border-color:var(--forest-3)}
.plan.popular{border-color:var(--forest-3)}
.plan__flag{position:absolute;top:-11px;left:14px;font-size:.7rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;background:var(--lime);color:var(--forest);border:2px solid var(--forest);border-radius:999px;padding:.15rem .55rem}
.plan__head{display:flex;flex-direction:column;gap:.15rem}
.plan__name{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.35rem;line-height:1}
.plan__tag{color:var(--ink-soft);font-size:.85rem}
.plan__price{display:flex;align-items:baseline;gap:.2rem}
.plan__mo{font-family:"Bricolage Grotesque";font-weight:800;font-size:2.1rem;letter-spacing:-.02em;line-height:1}
.plan__unit{color:var(--ink-soft);font-weight:600;font-size:.9rem}
.plan__contents{font-size:.95rem;background:rgba(15,45,30,.05);border-radius:10px;padding:.45rem .6rem;display:inline-block;align-self:flex-start}
.plan__inc{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.35rem;font-size:.85rem;color:var(--ink-soft)}
.plan__inc li{display:flex;gap:.45rem;align-items:flex-start;line-height:1.35}
.plan__pick{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem .8rem;border-radius:999px;border:2px solid var(--forest);background:var(--white);font-weight:700;font-size:.85rem;color:var(--forest)}
.plan.sel .plan__pick{background:var(--forest);color:var(--lime);border-color:var(--forest-3)}
.plan:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* ---- Range slider (kept for editor) ------------------------------------- */
.range{width:100%;-webkit-appearance:none;appearance:none;height:12px;border-radius:999px;border:2px solid var(--forest);background:linear-gradient(var(--forest),var(--forest)) no-repeat;background-size:var(--fill,40%) 100%;cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:999px;background:var(--lime);border:2px solid var(--forest);box-shadow:0 3px 0 var(--forest);cursor:grab;margin-top:-1px}
.range::-moz-range-thumb{width:26px;height:26px;border-radius:999px;background:var(--lime);border:2px solid var(--forest);cursor:grab}
.range:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* Segmented control */
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg button{flex:1;min-width:84px;min-height:48px;padding:.6rem .8rem;border:2px solid var(--forest);border-radius:14px;background:var(--white);font-weight:700;cursor:pointer;transition:.15s;color:var(--forest)}
.seg button:hover{background:rgba(15,45,30,.05)}
.seg button.sel{background:var(--forest);color:var(--lime);box-shadow:0 3px 0 var(--forest-3)}
.seg button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* Inputs */
.field label{display:block;font-weight:700;margin-bottom:.4rem;color:var(--forest)}
.field input,.field select{width:100%;min-height:52px;padding:.8rem 1rem;border:2px solid var(--forest);border-radius:var(--r-input);background:var(--white);font:inherit;color:var(--forest)}
.field input:focus,.field select:focus{outline:3px solid var(--lime);outline-offset:1px}
.field .err{color:#c0392b;font-weight:600;font-size:.85rem;margin-top:.35rem;display:none}
.field.invalid input,.field.invalid select{border-color:#c0392b}
.field.invalid .err{display:block}

/* =========================================================================
   Step 2 — calculator + live plan card
   ========================================================================= */
.calc-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:900px){ .calc-grid{grid-template-columns:1.4fr 1fr;gap:2.25rem;align-items:stretch} }

/* Calculator card (LEFT) */
.calc-card{background:var(--white);border:2px solid var(--forest);border-radius:var(--r-card);padding:clamp(1.1rem,2.4vw,1.6rem);box-shadow:0 4px 0 var(--forest)}
.calc-head{text-align:center;margin-bottom:1.2rem}
.calc-eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.calc-title{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.4rem,3vw,1.9rem);margin-top:.35rem;line-height:1.05;color:var(--forest)}
.calc-lead{color:var(--ink-soft);font-size:.85rem;margin:.55rem auto 0;line-height:1.45;max-width:38ch}

/* Billing toggle */
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1rem 0 1.2rem;flex-wrap:wrap}
.bt-label{font-weight:600;color:var(--ink-soft);font-size:.9rem;user-select:none}
.bt-label b{color:var(--forest);font-weight:800}
.bt-switch{position:relative;width:52px;height:30px;border-radius:999px;background:#d8d3c4;border:2px solid var(--forest);cursor:pointer;padding:0;transition:background .2s;flex:none}
.bt-switch[aria-pressed="true"]{background:var(--lime)}
.bt-knob{position:absolute;top:1px;left:1px;width:24px;height:24px;border-radius:999px;background:var(--white);border:2px solid var(--forest);transition:transform .2s cubic-bezier(.5,1.6,.4,1)}
.bt-switch[aria-pressed="true"] .bt-knob{transform:translateX(22px)}
.bt-switch:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* Price display */
.calc-price{text-align:center;margin:.6rem 0 1.4rem;padding:1rem 0;border-block:1.5px dashed var(--line)}
.calc-price-label{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.calc-price-value{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2.4rem,6.5vw,3.4rem);line-height:1;margin-top:.15rem;color:var(--forest);letter-spacing:-.02em}
.calc-price-suffix{font-size:.4em;font-weight:700;color:var(--ink-soft);letter-spacing:0;margin-left:.12em}
.calc-price-note{font-size:.85rem;color:var(--ink-soft);margin-top:.35rem}

/* Fields */
.calc-field{margin-bottom:1rem}
.calc-label{display:block;text-align:center;font-weight:700;font-size:.95rem;margin-bottom:.55rem;color:var(--forest)}
.calc-field .seg > button{padding:.75rem 1rem;font-size:.95rem}
.calc-field .seg--fixed > button{cursor:default;pointer-events:none;flex:1;background:var(--lime-wash);color:var(--forest)}

/* Includes list (dynamic Personal Property) */
.calc-includes{border-top:1.5px solid var(--line);margin-top:1.3rem;padding-top:1.1rem}
.calc-includes-title{font-weight:800;font-size:.9rem;margin-bottom:.75rem;color:var(--forest)}
.calc-includes-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
.calc-includes-grid li{display:flex;gap:.5rem;align-items:flex-start;font-size:.88rem;color:var(--forest);line-height:1.35}
.calc-includes-grid li svg{color:var(--forest);flex:none;margin-top:.2rem;width:16px;height:16px}
.calc-includes-grid li b{font-weight:800}
.calc-includes-grid li[data-dynamic]{background:var(--lime-wash);border-radius:8px;padding:.2rem .4rem .2rem .5rem;margin-left:-.5rem;transition:background .4s}
/* Coverage that this plan doesn't carry. Struck through and greyed rather than
   removed, so the gap between plans reads while you're still choosing. */
.calc-includes-grid li.is-excluded,
.summary-includes li.is-excluded{color:var(--ink-soft);opacity:.65}
.calc-includes-grid li.is-excluded span,
.summary-includes li.is-excluded span{text-decoration:line-through;text-decoration-thickness:1.5px}
.calc-includes-grid li.is-excluded svg,
.summary-includes li.is-excluded svg{color:var(--ink-soft);text-decoration:none}
.calc-includes-grid li.is-excluded .sr-only,
.summary-includes li.is-excluded .sr-only{text-decoration:none}

/* =========================================================================
   PLAN CARD (RIGHT) — the IHAP wallet pass, per brand book §21 "Two objects.
   One brand." Replaces Pyckle's animated pickle jar. Forest ground, lime as
   the single decision colour, coverage meter animates with the contents pick.
   ========================================================================= */
.plan-card{
  background:var(--forest);color:var(--cream);
  border:2px solid var(--forest);border-radius:var(--r-card);
  padding:clamp(1.6rem,2.8vw,2.1rem);
  box-shadow:0 4px 0 var(--forest);
  display:flex;flex-direction:column;
  /* Distribute rather than stack: the card stretches to match the calculator
     beside it, and space-between keeps it from pooling dead space at the foot. */
  justify-content:space-between;
  position:relative;overflow:hidden;
}

.plan-card__head{display:flex;align-items:flex-end;margin-bottom:clamp(1.6rem,3.4vw,2.2rem)}

/* P + TENANT lock-up. The pill is positioned off the glyph itself so the pair
   scales as one object: it sits at the base of the P, immediately right of the
   descender, with its foot just above the descender's. Percentages are read
   straight off the SVG's 410x555 viewBox. */
.pmark{position:relative;display:inline-block;line-height:0}
/* Sized so the TENANT pill lands ~flush with the bowl's right edge, which is
   the proportion the master artwork sets. A smaller P would need a smaller
   pill than the type can carry legibly. */
.pmark__glyph{width:auto;height:clamp(128px,13.5vw,168px);display:block}
.pmark__tag{
  position:absolute;
  left:46%;                 /* clears the descender, which ends at 41% */
  bottom:3%;
  line-height:1;
  /* This pill is part of a drawn lockup rather than a UI control, so the
     tracking is pulled in to land its right edge flush with the bowl. */
  --track:.14em;
  font-size:.6rem;
  padding:.42rem .58rem .42rem calc(.58rem + .14em);
}
.plan-card__brand{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--cream);display:inline-flex;align-items:flex-end;line-height:1}

.plan-card__eyebrow{font-family:"Sora";font-weight:600;font-size:.62rem;text-transform:uppercase;letter-spacing:var(--track);color:rgba(251,251,247,.55)}
.plan-card__name{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2.1rem,4.8vw,2.9rem);line-height:1;color:var(--lime);letter-spacing:-.025em;margin-top:.25rem}
.plan-card__tag{color:rgba(251,251,247,.7);font-size:.92rem;margin-top:.3rem}

/* Coverage meter — the moving part. Width is set by renderPlanCard(). */
.plan-card__meter{margin-top:clamp(1.8rem,4vw,2.6rem)}
.plan-card__meter-label{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.plan-card__meter-label .lbl{font-family:"Sora";font-weight:600;font-size:.62rem;text-transform:uppercase;letter-spacing:var(--track);color:rgba(251,251,247,.55)}
.plan-card__meter-label .val{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.7rem;color:var(--lime);line-height:1}
.plan-card__track{
  height:8px;border-radius:999px;margin-top:.65rem;
  background:rgba(251,251,247,.14);overflow:hidden;
}
.plan-card__fill{
  height:100%;width:38.7%;border-radius:999px;background:var(--lime);
  transition:width .55s cubic-bezier(.4,1.4,.5,1);
}
@media (prefers-reduced-motion:reduce){ .plan-card__fill{transition:none} }

.plan-card__prices{
  background:rgba(251,251,247,.06);
  border:1.5px solid rgba(198,240,90,.35);border-radius:16px;
  padding:1rem 1.15rem;margin-top:clamp(1.8rem,4vw,2.4rem);
}
.plan-card__row{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem 0;font-size:.9rem;gap:.6rem;flex-wrap:wrap}
.plan-card__row + .plan-card__row{border-top:1px dashed rgba(198,240,90,.2)}
.plan-card__row span:first-child{color:rgba(251,251,247,.7);font-weight:600;transition:color .2s}
.plan-card__row .strong{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.05rem;color:var(--lime);transition:color .2s,text-decoration-color .2s,opacity .2s}
.plan-card__row .muted{color:rgba(251,251,247,.55);font-weight:600;font-size:.82rem;margin-left:.35rem;transition:color .2s,opacity .2s}
.plan-card__row b{color:var(--lime);font-weight:800}

/* The unselected billing row reads as "what you'd pay otherwise": whole label
   greyed (including the "(10% off)" bold) and the figures struck through. */
.plan-card__row.strike .strong,
.plan-card__row.strike .muted{text-decoration:line-through;text-decoration-color:rgba(251,251,247,.5);text-decoration-thickness:2px;opacity:.5}
.plan-card__row.strike span:first-child,
.plan-card__row.strike span:first-child b{color:rgba(251,251,247,.4)}
.plan-card__row.selected{padding-block:.55rem}
.plan-card__row.selected span:first-child{color:var(--lime)}
.plan-card__row.selected .strong{font-size:1.2rem;color:var(--lime)}
.plan-card__row.selected .muted{color:rgba(198,240,90,.85)}

.plan-card__foot{
  margin-top:1.25rem;
  font-family:"Sora";font-weight:600;font-size:.58rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:rgba(251,251,247,.4);
}

/* =========================================================================
   Step 3 — Estimate summary + external Start My Coverage
   ========================================================================= */
.summary-card{background:var(--white);border:2px solid var(--forest);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:0 4px 0 var(--forest);text-align:center}
.summary-plan-name{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2.2rem,5vw,3rem);margin-top:.6rem;color:var(--forest);letter-spacing:-.02em;line-height:1}
.summary-plan-tag{color:var(--ink-soft);margin-top:.4rem;font-size:1rem}
.summary-price{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.4rem;padding:1.25rem;background:var(--lime-wash);border-radius:18px;border:1.5px solid var(--forest);text-align:center}
.summary-price .label{font-size:.7rem;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}
.summary-price .value{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.4rem,3vw,2rem);margin-top:.3rem;color:var(--forest)}
.summary-price .sub{font-size:.78rem;color:var(--ink-soft);margin-top:.2rem}
.summary-price .saveflag{display:inline-block;margin-top:.35rem;font-size:.7rem;font-weight:800;padding:.15rem .5rem;border-radius:999px;background:var(--lime);color:var(--forest);border:1.5px solid var(--forest)}
.summary-includes{margin-top:1.6rem;text-align:left}
.summary-inc-title{font-weight:800;color:var(--forest);margin-bottom:.75rem}
.summary-includes ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
.summary-includes li{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:var(--forest);line-height:1.4}
.summary-includes li svg{color:var(--forest);flex:none;margin-top:.2rem;width:16px;height:16px}
.summary-includes li b{font-weight:800}

@media (max-width:640px){
  .summary-price,.summary-includes ul,.calc-includes-grid{grid-template-columns:1fr}
}

/* ---- Quote stepper ------------------------------------------------------- */
/* Scroll offset so scrollIntoView on the card leaves clearance for the sticky
   nav (nav is ~76px including its 14px top margin + shadow; 24px breathing). */
#quote{scroll-margin-top:100px}
.steps{position:relative;overflow:hidden}
.step{display:none}
.step.active{display:block}
.progress{height:10px;border-radius:999px;background:rgba(15,45,30,.12);overflow:hidden;border:2px solid var(--forest)}
.progress > i{display:block;height:100%;background:var(--lime);width:25%;transition:width .4s cubic-bezier(.3,.9,.3,1)}

/* ---- Accordion ----------------------------------------------------------- */
.acc{border-bottom:1.5px solid var(--line)}
.acc__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.35rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--forest)}
.acc__q .chev{flex:none;transition:transform .3s;color:var(--forest)}
.acc.open .chev{transform:rotate(180deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc__a p{padding:0 0 1.35rem;color:var(--ink-soft);max-width:70ch}

/* ---- Marquee ------------------------------------------------------------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:1rem;width:max-content;animation:scroll-x 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.pill-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:999px;border:2px solid var(--forest);background:var(--white);font-weight:700;white-space:nowrap;color:var(--forest)}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* Testimonial marquee — slower + wider cards, still pauses on hover */
.ts-marquee .marquee__track{animation-duration:60s;gap:1rem;align-items:stretch}
@media (max-width:640px){ .ts-marquee .marquee__track{animation-duration:45s} }

/* ---- Portrait wall — "What's your plan?" --------------------------------
   Replaces the old star-rating testimonials. Documentary photo carries the
   emotion; the plan answer is the copy. No invented review scores. */
.answer{
  flex:none;width:min(300px,78vw);
  margin:0;display:flex;flex-direction:column;
  background:var(--cream-2);
  border:2px solid var(--forest);border-radius:var(--r-card);
  box-shadow:0 4px 0 var(--forest);
  overflow:hidden;white-space:normal;
}
.answer__photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.answer__body{padding:1.1rem 1.25rem 1.35rem}
.answer__plan{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;font-size:1.25rem;line-height:1.12;
  letter-spacing:-.02em;color:var(--forest);
}
.answer__who{
  margin-top:.7rem;
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;font-size:.62rem;line-height:1;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--forest);
}
.answer__who span{color:var(--ink-soft)}
/* One card per screen carries the lime — the accent marks the answer you
   land on, it doesn't wallpaper the row. */
.answer:nth-child(3n+2){background:var(--lime)}
.answer:nth-child(3n+2) .answer__plan,
.answer:nth-child(3n+2) .answer__who{color:var(--forest)}

/* ---- HERO (photo panel right + scroll fade) ---------------------------- */
/* =========================================================================
   HERO — full-bleed documentary photograph, copy overlaid.
   The photo is the piece; the scrim exists only so the type stays AA-legible
   over it. (Photo washes are the one gradient the brand permits as UI.)
   ========================================================================= */
.hero{
  position:relative;
  --hero-offset:8.4rem;              /* announcement 43px + nav 90px */
  min-height:calc(100svh - var(--hero-offset));
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--forest);
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform}
/* Four photographs stacked in the same box, crossfaded by app.js. Each carries
   its own object-position inline so the subject always clears the copy column. */
.hero__slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  max-width:none;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
  pointer-events:none;user-select:none;
}
.hero__slide.is-on{opacity:1}
/* Parallax scale lives on the container so all four move as one. */
.hero__media{transform-origin:center center;transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
}
/* Two-axis scrim: horizontal for the copy column, vertical to seat the
   announcement bar at the top and the scroll cue at the foot. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,32,21,.93) 0%, rgba(10,32,21,.8) 30%, rgba(10,32,21,.34) 58%, rgba(10,32,21,.04) 88%),
    linear-gradient(180deg, rgba(10,32,21,.5) 0%, rgba(10,32,21,0) 24%, rgba(10,32,21,0) 66%, rgba(10,32,21,.5) 100%);
}
.hero__body{position:relative;z-index:2;width:100%;padding-block:clamp(28px,4.2vh,80px)}
/* Short laptop viewports: pull the display size down a step so the CTA, the
   trust markers and the scroll cue all stay above the fold. */
@media (min-width:901px) and (max-height:820px){
  .hero__lead-a{line-height:1.34}
  .hero__lead-b{line-height:1.44}
  .hero__lead p + p{margin-top:clamp(1.4rem,2.8vh,2rem)}
  .hero__body{padding-block:clamp(28px,3.6vh,56px)}
}
.hero__copy{max-width:min(100%, clamp(33rem, 44vw, 56rem))}

/* Display type is the whole point of the panel — let it run big. */
.hero h1{
  color:var(--cream);
  font-size:clamp(2.6rem, min(5.6vw, 9.6vh), 7rem);
  line-height:.93;
  letter-spacing:-.032em;
}
.hero__accent{color:var(--lime)}
/* Hero vertical rhythm. Every gap is vh-aware so the stack breathes on a
   tall display and closes up on a short laptop without a media query. */
.hero__copy > h1{margin-top:clamp(1rem,2.1vh,1.7rem)}
.hero__copy > .hero__lead{margin-top:clamp(1.5rem,3vh,2.5rem)}
.hero__copy > .hero__actions{margin-top:clamp(1.6rem,3.2vh,2.6rem)}
.hero__copy > .trust-row{margin-top:clamp(1.3rem,2.6vh,2.1rem)}

.hero__lead{
  font-size:clamp(1.12rem, min(1.5vw, 2.5vh), 1.7rem);
  max-width:30em;              /* em, so the measure scales with the type */
}
.hero__lead p{margin:0}
/* The group gap lives on the adjacent-sibling selector, not on .hero__lead-b:
   `.hero__lead p` (0,1,1) out-specifies a lone class and was silently zeroing
   the margin, which is why the two groups read as one block. */
.hero__lead p + p{margin-top:clamp(2rem,4vh,3rem)}
.hero__lead-a{
  color:var(--cream);
  font-weight:600;
  font-size:1em;
  line-height:1.38;
  letter-spacing:-.005em;
}
/* One phrase carries the accent inside the lead. <em> is repurposed as the
   hook — reset the italic, it's a colour role not an emphasis role. */
.hero__lead-a em{color:var(--lime);font-style:normal;font-weight:700}
/* Group B is a step down in size and weight and sits behind a gap roughly
   double the intra-group leading — that contrast is what makes the lead read
   as two statements instead of one four-line wall. */
.hero__lead-b{
  color:rgba(251,251,247,.88);
  font-weight:400;
  font-size:.76em;
  line-height:1.5;
}
.hero__lead-b b{font-weight:700;color:var(--cream)}
/* Hold the closing phrase together so line 3 breaks at the sentence rather
   than splitting "Student / exclusive". Only where the column can take it —
   on narrow screens an unbreakable 41-char run would force overflow. */
@media (min-width:901px){ .hero__lead .nb{white-space:nowrap} }
/* Hero buttons scale with the panel; elsewhere .btn--lg keeps its fixed size. */
.hero .btn--lg{
  font-size:clamp(1rem, min(1.12vw, 1.95vh), 1.3rem);
  padding:clamp(.9rem,1.5vh,1.3rem) clamp(1.5rem,2vw,2.5rem);
  min-height:clamp(54px,6.2vh,74px);
}
.hero .trust-row li{font-size:clamp(.68rem, min(.78vw, 1.35vh), .95rem)}
.hero .btn--ghost{--fg:var(--cream);border-color:rgba(251,251,247,.55)}
.hero .btn--ghost:hover{background:rgba(251,251,247,.1);border-color:var(--cream)}
.hero .trust-row li{color:rgba(251,251,247,.9)}
.hero .trust-row svg{color:var(--lime)}

/* Scroll cue — the hero's "action". Fades out as the user takes the hint. */
.hero__scroll{
  position:absolute;left:50%;bottom:clamp(20px,3.5vh,38px);
  z-index:3;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;font-size:.58rem;line-height:1;
  text-transform:uppercase;letter-spacing:.28em;
  color:rgba(251,251,247,.68);
  padding:.5rem .75rem;
  transition:color .2s;
}
.hero__scroll:hover{color:var(--cream)}
.hero__scroll:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:8px}
.hero__scroll svg{width:18px;height:18px;animation:cue-bob 2.4s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}

@media (max-width:900px){
  .hero{min-height:calc(100svh - var(--hero-offset))}
  .hero__media img{object-position:64% 38%}
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(10,32,21,.72) 0%, rgba(10,32,21,.5) 34%, rgba(10,32,21,.82) 76%, rgba(10,32,21,.95) 100%);
  }
  .hero__body{padding-block:clamp(72px,11vh,112px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__scroll svg{animation:none}
}
@media (max-width:640px){
  .hero__scroll{display:none}
  .hero__lead{max-width:100%}
  .hero__body{padding-block:clamp(24px,3.2vh,72px)}
}

/* =========================================================================
   Section-hero — full-bleed photo half + wash into the copy half.
   Mirrors the main .hero so the page reads as one system. The photo always
   fills its half edge-to-edge; it never floats as a small inset panel.
   Variants: --right (photo right, text left) and --left (mirrored).
   ========================================================================= */
.section-hero{position:relative;overflow:hidden;min-height:min(78vh,760px);display:flex;align-items:center}
.section-hero__bg{
  position:absolute;top:0;bottom:0;
  width:54%;z-index:0;overflow:hidden;
  will-change:transform;
}
.section-hero__bg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  max-width:none;
  pointer-events:none;user-select:none;
}
.section-hero__wash{
  position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;
  width:56%;
}
.section-hero .container{position:relative;z-index:2}

/* Photo right — wash fades the surface colour in from the left edge of the panel */
.section-hero--right .section-hero__bg{right:0}
.section-hero--right .section-hero__wash{right:0}
.section-hero--right .section-hero__bg img{object-position:60% center}
.section-hero--right .section-hero__wash{
  background:linear-gradient(90deg, var(--cream) 0%, rgba(251,251,247,.86) 18%, rgba(251,251,247,.38) 42%, rgba(251,251,247,0) 72%);
}
.bg-cream2.section-hero--right .section-hero__wash{
  background:linear-gradient(90deg, var(--cream-2) 0%, rgba(255,255,255,.86) 18%, rgba(255,255,255,.38) 42%, rgba(255,255,255,0) 72%);
}

/* Photo left — mirrored */
.section-hero--left .section-hero__bg{left:0}
.section-hero--left .section-hero__wash{left:0}
.section-hero--left .section-hero__bg img{object-position:42% center}
.section-hero--left .section-hero__wash{
  background:linear-gradient(270deg, var(--cream) 0%, rgba(251,251,247,.86) 18%, rgba(251,251,247,.38) 42%, rgba(251,251,247,0) 72%);
}
.bg-cream2.section-hero--left .section-hero__wash{
  background:linear-gradient(270deg, var(--cream-2) 0%, rgba(255,255,255,.86) 18%, rgba(255,255,255,.38) 42%, rgba(255,255,255,0) 72%);
}

/* Mobile: photo becomes a full-width atmospheric bed behind the copy */
@media (max-width:900px){
  .section-hero{min-height:auto;padding-block:clamp(64px,12vw,96px)}
  .section-hero__bg{width:100%;opacity:.16}
  .section-hero__bg img{object-position:center center}
  .section-hero__wash{width:100%;background:linear-gradient(180deg, var(--cream) 0%, rgba(251,251,247,.9) 55%, rgba(251,251,247,.5) 100%)!important}
  .section-hero--left .max-w-xl.ml-auto{margin-inline:0}
}

/* Legacy floating cards + blobs — repalette (kept off by default) */
.floatcard{position:absolute;background:var(--white);border:2px dashed var(--forest);border-radius:18px;padding:.6rem .9rem;font-weight:700;font-size:.9rem;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:.5rem;white-space:nowrap;color:var(--forest)}
.floatcard .dot{width:10px;height:10px;border-radius:999px;flex:none}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:-1}

/* ---- Reveal (JS/GSAP toggles) ------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px)}
.is-in .reveal,.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  /* Killing the animation alone would strand every card past the first few
     inside overflow:hidden. Hand the row back to the user as a normal
     horizontal scroller so all the content stays reachable. */
  .marquee__track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .hero__bg,.hero__bg img{opacity:1!important;transform:none!important}
  .hero__bg img{transform:translateY(-50%)!important}
}

/* ---- Responsive nav ------------------------------------------------------ */
@media (max-width:820px){
  .floatcard{display:none!important}
  .blob{opacity:.35}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav .btn--nav{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .nav__logo{height:26px}   /* shrink slightly so logo + burger fit comfortably */
}

/* Footer big wordmark */
/* Oversized footer mark. Solid fill at low opacity — the mark is NEVER
   outlined (brand book §11), so no -webkit-text-stroke here. */
.footmark{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;font-size:clamp(3.5rem,16vw,10rem);
  line-height:.9;letter-spacing:-.04em;
  color:rgba(198,240,90,.14);
  display:flex;align-items:flex-end;
}
.footmark .fullstop{background:rgba(198,240,90,.4)}

/* =========================================================================
   SPLASH — full-viewport video gate, only shown on the root URL
   ========================================================================= */
.splash{
  position:fixed;inset:0;z-index:9999;
  background:var(--charcoal);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:1;visibility:visible;
  transition:opacity .7s ease, visibility .7s ease;
}
.splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.splash__wash{position:absolute;inset:0;z-index:2;background:
  radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%)}
.splash__brand{position:absolute;top:24px;left:24px;z-index:3;display:flex;align-items:center;gap:.4rem;color:var(--white)}
.splash__brand .wordmark{color:var(--lime);-webkit-text-stroke-color:var(--lime)}
.splash__inner{position:relative;z-index:3;text-align:center;padding:0 24px;pointer-events:none}
.splash__line{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02;color:var(--white);font-size:clamp(2rem,6vw,4.4rem);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.splash__line span.accent{color:var(--lime)}
.splash__hint{margin-top:1.6rem;font-size:.9rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.85);animation:hint-pulse 2s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .splash__hint{animation:none;opacity:.85}
  .splash{transition:opacity .001ms}
}
/* Prevent scroll while splash is active */
body.splash-lock{overflow:hidden}

/* ---- Numbered step markers (How it works) -------------------------------- */
.step-num{
  display:inline-block;
  font-family:"Sora",system-ui,sans-serif;
  font-weight:600;font-size:2.6rem;line-height:1;
  letter-spacing:.02em;
  color:var(--forest);
}

/* Footer column headings are h3 (an h4 after the page's h2 skipped a level).
   Keep them visually the same size they were. */
.footer-head{font-size:1rem;letter-spacing:0}

/* =======================================================================
   SCHOOL ROUTING — context strip, chip, invalid-link notice, selector modal
   Palette/shape/motion per design-system/ihap/MASTER.md. One selective-lime
   accent (the current-school tick + selected option); Forest surfaces; Sora
   labels; radii from the token scale; motion honours reduced-motion.
   ======================================================================= */

/* ---- Context strip (sits between announcement bar and nav) ---- */
.schoolstrip__inner{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:0;padding-block:0;
}
.schoolstrip:has([data-school-chip]:not([hidden])) .schoolstrip__inner,
.schoolstrip:has([data-school-notice]:not([hidden])) .schoolstrip__inner{
  padding-block:.5rem;
}

/* ---- "School: NAME · Change" chip ---- */
.schoolchip{
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  justify-content:center;
  padding:.4rem .5rem .4rem .85rem;
  border:2px solid var(--forest);border-radius:999px;background:var(--cream-2);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:.9rem;color:var(--forest);max-width:100%;
}
.schoolchip__icon{color:var(--lime-3);flex:none}
.schoolchip__label{font-family:"Sora",system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--ink-soft)}
.schoolchip__name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,22rem)}
.schoolchip__change{
  appearance:none;border:2px solid var(--forest);background:var(--forest);color:var(--cream);
  font:inherit;font-weight:700;font-size:.78rem;cursor:pointer;
  min-height:32px;padding:.15rem .8rem;border-radius:999px;flex:none;
  transition:background .18s,color .18s,transform .18s;
}
.schoolchip__change:hover{background:var(--lime);color:var(--forest);border-color:var(--forest)}
.schoolchip__change:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* ---- Couldn't-match-that-link notice ---- */
.schoolnotice{
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
  font-size:.9rem;color:var(--forest);text-align:center;
}
.schoolnotice__pick{
  appearance:none;border:2px solid var(--forest);background:transparent;color:var(--forest);
  font:inherit;font-weight:700;font-size:.82rem;cursor:pointer;
  min-height:36px;padding:.25rem .9rem;border-radius:999px;
  transition:background .18s,color .18s;
}
.schoolnotice__pick:hover{background:var(--forest);color:var(--cream)}
.schoolnotice__pick:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* ---- Selector modal ---- */
body.dlg-lock{overflow:hidden}
.schooldlg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.25rem}
.schooldlg[hidden]{display:none}
.schooldlg__backdrop{
  position:absolute;inset:0;background:rgba(10,32,21,.55);
  opacity:0;transition:opacity .2s ease;
}
.schooldlg.is-open .schooldlg__backdrop{opacity:1}
.schooldlg__panel{
  position:relative;width:min(30rem,100%);max-height:calc(100dvh - 2.5rem);overflow:auto;
  background:var(--cream);border:2px solid var(--forest);border-radius:var(--r-card);
  box-shadow:0 30px 60px -20px rgba(10,32,21,.55);
  padding:2rem 1.6rem 1.6rem;
  transform:translateY(12px) scale(.98);opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
}
.schooldlg.is-open .schooldlg__panel{transform:none;opacity:1}
.schooldlg__panel:focus{outline:none}
.schooldlg__tag{margin-bottom:.9rem}
.schooldlg__close{
  position:absolute;top:.9rem;right:.9rem;width:44px;height:44px;display:grid;place-items:center;
  border:2px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);cursor:pointer;
  transition:background .18s,color .18s;
}
.schooldlg__close:hover{background:var(--forest);color:var(--cream)}
.schooldlg__close:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.schooldlg__title{font-size:clamp(1.6rem,4.5vw,2rem);line-height:1.05}
.schooldlg__body{margin-top:.6rem;color:var(--ink-soft);font-size:1rem;line-height:1.5;max-width:26rem}
.schooldlg__list{display:flex;flex-direction:column;gap:.6rem;margin-top:1.3rem}
.schooldlg__opt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  text-align:left;font:inherit;font-weight:700;color:var(--forest);
  min-height:56px;padding:.85rem 1.05rem;
  background:var(--cream-2);border:2px solid var(--forest);border-radius:18px;
  box-shadow:0 3px 0 var(--forest);cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,color .18s;
}
.schooldlg__opt:hover{background:var(--lime);transform:translateY(-2px);box-shadow:0 5px 0 var(--forest)}
.schooldlg__opt:active{transform:translateY(0);box-shadow:0 2px 0 var(--forest)}
.schooldlg__opt:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.schooldlg__opt.is-current{border-color:var(--forest);background:var(--lime-wash)}
.schooldlg__opt.is-current::after{
  content:"Current";font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--forest);
  border:1.5px solid var(--forest);border-radius:999px;padding:.15rem .5rem;margin-left:auto;
}
.schooldlg__opt-name{flex:1 1 auto;min-width:0}
.schooldlg__opt.is-current .schooldlg__opt-arrow{display:none}
.schooldlg__opt-arrow{color:var(--forest);flex:none}

@media (prefers-reduced-motion: reduce){
  .schooldlg__backdrop,.schooldlg__panel,.schooldlg__opt,
  .schoolchip__change,.schoolnotice__pick,.schooldlg__close{transition:none}
  .schooldlg__panel{transform:none}
}