/*
Theme Name: The Banyan Tree
Theme URI: https://banyantreegkclasses.com
Author: Built with Claude Code
Description: Theme for The Banyan Tree GK classes. Palette and typography follow the Banyan Tree brand guideline (Deep Forest, Warm Cream, Terracotta, Sand, Soft Sage, Leaf Green; Hanken Grotesk headlines with Montserrat body). Modular section blocks reused across every page.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: banyan-tree
Tags: education, children, one-column, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. DESIGN TOKENS — The Banyan Tree
   Straight from the brand guideline (01 / COLOUR):
     Deep Forest  #17351F  primary text, structure, dark fields
     Warm Cream   #FAF5E9  primary background, open space
     Terracotta   #A34F30  emphasis, key rules, calls to action
     Sand         #EFE3CB  quiet panels, grouped information
     Soft Sage    #E7EFE1  soft supporting surfaces
     Leaf Green   #93C01F  small accents ONLY; never body copy on cream
   Rule: let cream lead, forest for clarity, terracotta for emphasis,
   leaf green sparingly.
   ============================================================ */
:root{
  /* Brand colours, named as the guideline names them. */
  --forest:#17351F;
  --cream:#FAF5E9;
  --terracotta:#A34F30;
  --sand:#EFE3CB;
  --soft-sage:#E7EFE1;
  --leaf:#93C01F;

  /* Working tokens derived from the six above. */
  --ink:var(--forest);
  --ink-soft:#2C4F35;          /* forest lightened, still 8:1 on cream */
  --muted:#5B6F5F;             /* 5.0:1 on cream, passes AA body text */
  --line:#E3D5B7;              /* sand, one step down, for hairlines */
  --line-soft:var(--sand);
  --cream-deep:var(--sand);
  --white:#FFFFFF;

  --terracotta-dark:#8A4228;   /* hover / pressed */
  --terracotta-wash:#F5E6DF;

  /* Legacy aliases kept so existing blocks keep working, remapped to brand. */
  --sage:var(--forest);
  --sage-dark:var(--forest);
  --sage-wash:var(--soft-sage);
  --gold:var(--leaf);
  --gold-wash:#EDF4DC;

  /* Motion. Fast enough to feel instant, slow enough to be seen.
     ease-out for anything arriving; ease-press only for the press down. */
  --t-fast:120ms;
  --t-base:180ms;
  --t-slow:260ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-press:cubic-bezier(.4,0,1,1);

  /* Typography — brand guideline OPTION 01 (the stated default):
     headlines Hanken Grotesk, body Montserrat. Do not mix pairings. */
  --font-display:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;

  --step--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.12rem + .38vw,1.45rem);
  --step-2:clamp(1.45rem,1.3rem + .72vw,2rem);
  --step-3:clamp(1.8rem,1.5rem + 1.4vw,2.85rem);
  --step-4:clamp(2.2rem,1.7rem + 2.4vw,4rem);
  --step-5:clamp(2.6rem,1.8rem + 3.6vw,5.2rem);

  --gutter:clamp(1.15rem,4vw,2.5rem);
  --wrap:1180px;
  --wrap-narrow:760px;
  --section-y:clamp(3.5rem,8vw,7rem);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(23,53,31,.06),0 4px 12px rgba(23,53,31,.05);
  --shadow-md:0 2px 6px rgba(23,53,31,.06),0 18px 40px -12px rgba(23,53,31,.16);
  --shadow-lg:0 30px 70px -24px rgba(23,53,31,.3);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--sage-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--terracotta-dark)}
/* DM Sans carries the display role, so headings need more weight and tighter
   tracking than a serif would to hold the same hierarchy. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 .5em;text-wrap:balance}
h3{letter-spacing:-.015em}
h4{letter-spacing:-.01em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{padding-left:1.15em}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip-link:focus{left:.5rem;top:.5rem}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.wrap-narrow{width:min(var(--wrap-narrow),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--cream{background:var(--cream-deep)}
.section--white{background:var(--white)}
.section--ink{background:var(--ink);color:#E9EFE7}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--sage{background:var(--sage);color:#E9EFE7}
.section--sage h2,.section--sage h3{color:#fff}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.stack>*+*{margin-top:1rem}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ============================================================
   4. SECTION FURNITURE
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta-dark);
  margin:0 0 1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.section--ink .eyebrow,.section--sage .eyebrow{color:var(--gold)}
.center .eyebrow::before{display:none}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-soft);max-width:62ch;font-weight:400}
.section--ink .lede,.section--sage .lede{color:#C6D3C4}
.section-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head.center{margin-inline:auto}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-weight:var(--btn-weight,600);font-size:.97rem;line-height:1;
  padding:1.05rem 1.85rem;border-radius:var(--btn-radius,100px);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--terracotta);color:#fff;box-shadow:0 10px 24px -10px rgba(163,79,48,.85)}
.btn--primary:hover{background:var(--terracotta-dark);color:#fff;box-shadow:0 16px 30px -12px rgba(163,79,48,.95)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-soft);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--white)}
.section--ink .btn--ghost,.section--sage .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.section--ink .btn--ghost:hover,.section--sage .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{color:var(--terracotta-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.center .btn-row{justify-content:center}
.arrow-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none;font-size:.95rem}
.arrow-link span{transition:transform .18s ease}
.arrow-link:hover span{transform:translateX(4px)}

/* ============================================================
   6. TOP BAR + HEADER
   ============================================================ */
.topbar{background:var(--ink);color:#DCE7DC;font-size:.86rem;text-align:center;padding:.7rem 1rem}
.topbar a{color:var(--gold);font-weight:600;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,245,233,.92);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:76px;width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand__mark{width:42px;height:42px;flex:none;border-radius:12px;background:var(--ink);color:var(--gold);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.brand__name{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.12rem;line-height:1.1}
.brand__role{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:.18rem}
.nav{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav a{font-size:.94rem;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding:.55rem .8rem;border-radius:8px;transition:background .15s,color .15s;display:block}
.nav a:hover,.nav .current-menu-item>a{background:var(--cream-deep);color:var(--ink)}
.nav li{position:relative}
.nav .sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;margin:0;padding:.5rem;
  list-style:none;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav .sub-menu a{padding:.6rem .75rem}
.header-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;
  padding:.6rem .7rem;cursor:pointer;color:var(--ink);font-size:1rem}
@media(max-width:1100px){
  .nav,.header-cta .btn{display:none}
  .nav-toggle{display:block}
  .site-header.is-open .nav{display:flex;position:absolute;inset:100% 0 auto;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;padding:.75rem var(--gutter) 1.5rem;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
  .site-header.is-open .nav a{padding:.85rem .5rem;border-bottom:1px solid var(--line-soft)}
  .site-header.is-open .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding-left:.75rem}
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 55%;height:70%;
  background:radial-gradient(closest-side,rgba(232,180,74,.22),transparent 70%);pointer-events:none}
.hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);position:relative;z-index:1}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero h1{font-size:var(--step-5);margin-bottom:.4em}
.hero h1 em{font-style:italic;color:var(--terracotta)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.hero__stat strong{display:block;font-family:var(--font-display);font-size:var(--step-2);line-height:1;color:var(--ink)}
.hero__stat span{font-size:.82rem;color:var(--muted);letter-spacing:.03em}
.hero__collage{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hero__collage .ph{aspect-ratio:3/4;border-radius:var(--r-lg)}
.hero__collage .ph:first-child{margin-top:2.5rem}

/* Placeholder art — swap for real photography */
.ph{background:linear-gradient(145deg,var(--sand),#E2D3AF);border:1px solid var(--line);
  border-radius:var(--r-md);display:grid;place-items:center;color:var(--muted);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-align:center;padding:1rem}
.ph--ink{background:linear-gradient(145deg,#24492E,#17351F);border-color:#2C4F35;color:#9DB3A2}
.ph--sage{background:linear-gradient(145deg,#2C4F35,#17351F);border-color:#17351F;color:#BFD2C1}
.ph--16x9{aspect-ratio:16/9}
.ph--1x1{aspect-ratio:1}
.ph--4x3{aspect-ratio:4/3}
.ph--3x2{aspect-ratio:3/2}
.ph--3x4{aspect-ratio:3/4}

/* ============================================================
   8. SIGNUP / FORMS
   ============================================================ */
.signup{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm);max-width:520px}
.center .signup{margin-inline:auto}
.section--ink .signup,.section--sage .signup{border-color:transparent}
.signup__title{font-family:var(--font-display);font-size:var(--step-1);margin:0 0 .35rem;color:var(--ink)}
.signup__note{font-size:.85rem;color:var(--muted);margin:0 0 1.1rem}
.signup__fields{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}
@media(max-width:520px){.signup__fields{grid-template-columns:1fr}}
.signup input[type=text],.signup input[type=email],.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:.95rem;padding:.85rem 1rem;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:10px;transition:border-color .15s,background .15s}
.signup input:focus,.field input:focus,.field textarea:focus{border-color:var(--sage);background:#fff;outline:none}
.signup .btn{width:100%;margin-top:.7rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted);margin-top:.9rem}
.consent input{margin-top:.25rem;accent-color:var(--sage)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--shadow-sm)}

/* ============================================================
   9. CARDS
   ============================================================ */
.card{background:#fff;border:var(--border-w,1px) solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.5vw,2rem);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.6rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line)}
.card h3{margin-bottom:.15rem}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:0}
.card .arrow-link{margin-top:auto;padding-top:1rem}
.card__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--terracotta-wash);color:var(--terracotta-dark);margin-bottom:.6rem}
.card__icon--sage{background:var(--sage-wash);color:var(--sage-dark)}
.card__icon--gold{background:var(--gold-wash);color:#4A6B12}
.card__num{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--line);font-weight:700;letter-spacing:-.04em}

/* Feature banner (image + copy) */
.banner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.banner--flip .banner__media{order:2}
@media(max-width:860px){.banner{grid-template-columns:1fr}.banner--flip .banner__media{order:0}}
.banner__body h2{margin-bottom:.45em}

/* Stat strip */
.stat{padding:1.6rem 0}
.stat strong{display:block;font-family:var(--font-display);font-size:var(--step-3);line-height:1;color:var(--terracotta)}
.section--ink .stat strong{color:var(--gold)}
.stat span{font-size:.92rem;color:var(--muted)}
.section--ink .stat span{color:#A8BCD1}

/* ============================================================
   10. CURRICULUM / MODULES
   ============================================================ */
.pillar{margin-bottom:clamp(2rem,4vw,3rem)}
.pillar__label{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.25rem;
  padding-bottom:.75rem;border-bottom:2px solid var(--line);flex-wrap:wrap}
.pillar__label b{font-family:var(--font-display);font-size:var(--step-2);font-weight:700;letter-spacing:-.03em}
.pillar__label i{font-style:normal;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terracotta-dark)}
.module{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.1rem 0;
  border-bottom:1px solid var(--line-soft);align-items:start}
.module__week{font-family:var(--font-display);font-weight:600;color:#fff;
  background:var(--sage);width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  text-align:center;line-height:1.15;flex:none;font-size:.78rem}
.module h4{margin:0 0 .3rem;font-family:var(--font-display);font-size:var(--step-1);font-weight:700}
.module p{margin:0;color:var(--muted);font-size:.94rem}

/* ============================================================
   11. TESTIMONIALS
   ============================================================ */
.quote{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.5vw,2rem);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.quote__stars{margin-bottom:.85rem}
.quote blockquote{margin:0 0 1.25rem;font-family:var(--font-display);font-size:var(--step-1);letter-spacing:-.02em;
  line-height:1.45;color:var(--ink);font-weight:600}
.quote__who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.quote__avatar{width:46px;height:46px;border-radius:50%;flex:none;background:var(--sage-wash);
  color:var(--sage-dark);display:grid;place-items:center;font-weight:700;font-size:.95rem}
.quote__who b{display:block;font-size:.92rem}
.quote__who span{font-size:.82rem;color:var(--muted)}

/* Result tiles */
.result{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:1.35rem}
.result b{display:block;font-family:var(--font-display);font-size:var(--step-2);color:var(--sage-dark);line-height:1}
.result span{font-size:.88rem;color:var(--muted)}

/* ============================================================
   12. PRICING
   ============================================================ */
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.75rem,3vw,2.5rem);box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.price-card--featured{border:2px solid var(--terracotta);position:relative}
.price-card__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--terracotta);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.4rem 1rem;border-radius:100px;white-space:nowrap}
.price-card__amount{font-family:var(--font-display);font-size:var(--step-4);line-height:1;margin:.5rem 0}
.price-card__amount small{font-family:var(--font-body);font-size:.9rem;color:var(--muted);font-weight:500}
.checklist{list-style:none;padding:0;margin:1.25rem 0}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:.94rem;color:var(--ink-soft)}
.checklist li::before{content:"";position:absolute;left:0;top:.15rem;width:20px;height:20px;border-radius:50%;
  background:var(--sage-wash)}
.checklist li::after{content:"";position:absolute;left:6px;top:.42rem;width:5px;height:9px;
  border:solid var(--sage-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
.section--ink .checklist li{color:#C9D6E4}
.price-card .btn{margin-top:auto}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:.35rem 0}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--font-display);font-size:var(--step-1);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-body);font-size:1.6rem;font-weight:300;color:var(--terracotta);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:.9rem;margin:0;max-width:70ch}

/* ============================================================
   14. POSTS
   ============================================================ */
.post-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-card__media{aspect-ratio:16/10;border-radius:0;border-left:0;border-right:0;border-top:0}
.post-card__body{padding:1.35rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card h3{font-size:var(--step-1);margin:0}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card h3 a:hover{color:var(--terracotta-dark)}
.post-card p{font-size:.92rem;color:var(--muted);margin:0}
.tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sage-dark);background:var(--sage-wash);padding:.32rem .7rem;border-radius:100px;align-self:flex-start;
  text-decoration:none}
.post-card__meta{margin-top:auto;padding-top:.9rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line-soft)}

/* Single post / static page body */
.entry{padding-block:clamp(2.5rem,6vw,4.5rem)}
.entry__header{margin-bottom:2.5rem}
.entry__content{font-size:1.07rem;line-height:1.78}
.entry__content h2{margin-top:2.2em}
.entry__content h3{margin-top:1.8em}
.entry__content blockquote{margin:2rem 0;padding:1.25rem 1.75rem;border-left:4px solid var(--terracotta);
  background:var(--cream-deep);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--font-display);font-size:var(--step-1)}
.entry__content img{border-radius:var(--r-md);margin:1.75rem 0}
.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.pagination .page-numbers{padding:.6rem 1rem;border:1px solid var(--line);border-radius:10px;
  text-decoration:none;color:var(--ink-soft);background:#fff}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================
   15. TRUST STRIP
   ============================================================ */
.trust{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);align-items:center;justify-content:center;
  opacity:.65;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--ink)}

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#C3D2C4;padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1.4fr repeat(3,1fr)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:.76rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin:0 0 1.1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.6rem}
.site-footer a{color:#C3D2C4;text-decoration:none;font-size:.93rem}
.site-footer a:hover{color:var(--gold)}
.site-footer .brand{color:#fff}
.site-footer .brand__mark{background:var(--gold);color:var(--ink)}
.site-footer .brand__role{color:#9DB3A2}
.footer-blurb{font-size:.92rem;color:#9DB3A2;max-width:34ch;margin-top:1rem}
.socials{display:flex;gap:.6rem;margin-top:1.25rem}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:.75rem;font-weight:700}
.socials a:hover{background:var(--gold);color:var(--ink)}
.footer-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.84rem;color:#94AA99}

/* ============================================================
   17. MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   18. BOOKING FORM (Banyan Razorpay plugin)
   ============================================================ */
.btpay__packages{border:0;padding:0;margin:0 0 1.5rem;display:grid;gap:.7rem}
.btpay__packages legend{font-size:.85rem;font-weight:600;margin-bottom:.6rem;padding:0}
.btpay__package{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;cursor:pointer;
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-md);transition:border-color .15s,background .15s}
.btpay__package:hover{border-color:var(--sage)}
.btpay__package:has(input:checked){border-color:var(--terracotta);background:var(--terracotta-wash)}
.btpay__package input{margin-top:.3rem;accent-color:var(--terracotta);flex:none}
.btpay__package.is-disabled{opacity:.5;cursor:not-allowed}
.btpay__package-body{display:block;flex:1}
.btpay__package-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.btpay__package-head b{font-weight:600}
.btpay__package-head em{font-style:normal;font-weight:700;color:var(--terracotta-dark);white-space:nowrap}
.btpay__package-desc{display:block;font-size:.86rem;color:var(--muted);margin-top:.2rem;line-height:1.5}
.btpay__secure{font-size:.8rem;color:var(--muted);text-align:center;margin:.9rem 0 0}
.btpay__message{margin-top:1rem;padding:.85rem 1rem;border-radius:10px;font-size:.9rem}
.btpay__message--error{background:var(--terracotta-wash);color:var(--terracotta-dark)}
.btpay__message--warn{background:var(--gold-wash);color:#8A6414}
.btpay__notice{padding:.85rem 1rem;border-radius:10px;font-size:.88rem;margin:0 0 1.25rem}
.btpay__notice--warn{background:var(--gold-wash);color:#8A6414}
.btpay__done{text-align:center}
.btpay__submit:disabled{opacity:.65;cursor:wait;transform:none}

/* ============================================================
   19. ICONS
   Inline SVGs from inc/icons.php. Stroked on currentColor so they
   pick up whatever colour the parent already sets.
   ============================================================ */
.icon{
  width:1.5rem;height:1.5rem;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}
.icon--filled{fill:currentColor;stroke:none}

/* Card badges: the 52px tinted square holds a 24px icon. */
.card__icon .icon{width:1.5rem;height:1.5rem}

/* Arrow links: smaller, and it is the arrow that slides on hover. */
.arrow-link .icon{width:1.15rem;height:1.15rem;transition:transform .18s ease}
.arrow-link:hover .icon{transform:translateX(4px)}

/* Rating rows. */
.stars{display:inline-flex;gap:.15rem;color:var(--gold)}
.stars .icon{width:1rem;height:1rem}

/* Header toggle and footer socials. */
.nav-toggle .icon{width:1.35rem;height:1.35rem}
.socials .icon{width:1.15rem;height:1.15rem}
.socials a{color:#C3D2C4}
.socials a:hover{color:var(--ink)}

/* ============================================================
   20. LEAD FORMS (Banyan Leads plugin)
   ============================================================ */
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.bt-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.bt-message{margin-top:1rem;padding:.85rem 1rem;border-radius:10px;font-size:.9rem;
  background:var(--sage-wash);color:var(--sage-dark)}
.bt-message--error{background:var(--terracotta-wash);color:var(--terracotta-dark)}
.bt-submit:disabled{opacity:.65;cursor:wait;transform:none}
.bt-done{text-align:center}
.signup.bt-form .bt-message{margin-top:.85rem}
.bt-pill{display:inline-block;font-size:.75rem;font-weight:600;padding:.2rem .55rem;
  border-radius:100px;background:var(--soft-sage);color:var(--forest)}

/* ============================================================
   21. THE BANYAN TREE — home page sections
   ============================================================ */
/* Hero standfirst: the line that does the persuading, so it sits
   between the H1 and the body copy in weight. */
.hero__stand{
  font-family:var(--font-display);font-size:var(--step-2);line-height:1.28;
  font-weight:600;color:var(--terracotta);max-width:24ch;margin:0 0 1rem;
  letter-spacing:-.01em;
}
.hero h1{font-size:var(--step-3);max-width:16ch;line-height:1.12}

/* The fork: two doors, equal weight. */
.card--fork{padding:clamp(1.75rem,3vw,2.5rem)}
.card--fork h2{margin:.35rem 0 .5rem}

/* Facts on the forest field. */
.fact{display:flex;flex-direction:column;gap:.5rem}
.fact__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(147,192,31,.16);color:var(--leaf);margin-bottom:.4rem}
.fact h3{margin:0;font-size:var(--step-1)}
.fact p{margin:0;color:#C6D3C4;font-size:.95rem}

/* Brand logo lockup. */
.brand__logo{width:auto;height:52px;flex:none;object-fit:contain}
.site-footer .brand__logo{height:56px}
.brand__tm{font-size:.5em;vertical-align:super;font-weight:600}

/* Editor-only warnings, never shown to visitors. */
.editor-note{
  background:var(--gold-wash);border:1px dashed var(--leaf);color:#3E5A0F;
  padding:.85rem 1.1rem;border-radius:10px;font-size:.88rem;margin:0 0 1.75rem;
}

/* Quote block without the star rating, which does not suit this brand. */
.quote blockquote{font-family:var(--font-display);font-weight:600}

/* ============================================================
   22. BUTTON REFINEMENTS
   ============================================================ */
/* CTA labels are short and must never wrap mid-phrase. */
.btn{white-space:nowrap}

/* Icons inside buttons sit smaller than standalone icons, and optically
   align with the cap height of the label rather than its line box. */
.btn .icon{width:1.15rem;height:1.15rem;margin-top:-1px}

/* Compact variant for the sticky header, where the full-size pill is too
   tall for a 76px bar. */
.btn--sm{padding:.72rem 1.25rem;font-size:.9rem}
.btn--sm .icon{width:1.05rem;height:1.05rem}

/* The header pair should not crowd the nav on mid-width screens. */
.header-cta{flex:none}
@media(max-width:1240px) and (min-width:1101px){
  .header-cta .btn{padding:.68rem 1rem;font-size:.86rem}
}

/* ============================================================
   23. PHOTOGRAPHY
   Stock from six sources is graded to a common warm base before it
   reaches the theme; the frame here does the rest of the work of
   making it read as one commissioned set.
   ============================================================ */
.figure{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sand);border:1px solid var(--line);
  box-shadow:0 24px 48px -28px rgba(23,53,31,.45);
}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.figure--4x3{aspect-ratio:4/3}
.figure--16x9{aspect-ratio:16/9}
.figure--3x2{aspect-ratio:3/2}
.figure--1x1{aspect-ratio:1}

/* A forest wash pins every photograph to the same ground, so a green
   playground and a sepia globe stop competing. */
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,53,31,.04) 0%,rgba(23,53,31,.22) 100%);
}

/* The signature: a real question from the curriculum, sitting on the
   photograph like a card left on a desk. Used once, on the hero. */
.figure__q{
  position:absolute;left:0;bottom:0;z-index:2;max-width:min(84%,22ch);
  margin:clamp(1rem,2.5vw,1.75rem);padding:1rem 1.25rem;
  background:var(--cream);border-radius:var(--r-md);
  border-left:4px solid var(--terracotta);
  font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  line-height:1.2;letter-spacing:-.015em;color:var(--forest);
  box-shadow:0 10px 28px -12px rgba(23,53,31,.5);
}


/* Page header photograph. */
.page-hero{margin-top:clamp(1.5rem,3vw,2.5rem)}



/* ============================================================
   25. HEADER NAV FITTING
   Seven labels plus the logo lockup and the CTA overrun the 1180px
   container, and flex was resolving that by breaking labels mid-phrase
   ("Beyond / Why"). Labels never wrap; the row is tightened to fit, and
   the burger takes over earlier rather than letting it get cramped.
   ============================================================ */
.header-inner{flex-wrap:nowrap}
.brand{flex:0 0 auto}
.nav{flex:1 1 auto;justify-content:flex-end;flex-wrap:nowrap;gap:.1rem;min-width:0}
.nav a{white-space:nowrap;font-size:.88rem;padding:.5rem .58rem}
.nav .sub-menu a{white-space:normal}
.header-cta{flex:0 0 auto}

/* Wider than the container: give the labels a little more air back. */
@media(min-width:1320px){
  .nav{gap:.2rem}
  .nav a{font-size:.92rem;padding:.55rem .7rem}
}

/* Measured: seven labels, the lockup and the CTA need ~1205px. The body
   column stays at 1180 for readable line lengths, but a header bar has no
   such constraint, so it gets its own wider track rather than forcing the
   type smaller. */
.header-inner{
  width:min(1280px,100% - var(--gutter)*2);
  gap:1.25rem;
}
.nav a{padding:.55rem .6rem}

/* ============================================================
   26. TESTIMONIALS — card + auto-advancing carousel
   The parents' own words are the only thing worth looking at here, so the
   card is quiet: cream paper on sand, one leaf from the logo instead of a
   decorative quotation mark, and the attribution set well below the quote
   so it never competes with it.
   ============================================================ */
.section--sand{background:var(--sand)}

.testimonial{
  position:relative;height:100%;margin:0;
  display:flex;flex-direction:column;gap:1.25rem;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 34px -26px rgba(23,53,31,.55);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.carousel__slide:hover .testimonial{
  transform:translateY(-3px);
  border-color:#D9C8A4;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 26px 44px -26px rgba(23,53,31,.6);
}

/* One leaf, lifted from the logo. Small, and the only ornament on the card. */
.testimonial__leaf{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;background:var(--gold-wash);color:#5E8A12;
}
.testimonial__leaf .icon{width:1.2rem;height:1.2rem}

.testimonial__quote{
  margin:0;flex:1;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.5;
  letter-spacing:-.012em;color:var(--forest);
  text-wrap:pretty;
}

/* Attribution sits under a hairline so the quote reads as the whole card. */
.testimonial__who{
  display:flex;align-items:center;gap:.85rem;
  padding-top:1.25rem;border-top:1px solid var(--line);
}
.testimonial__avatar{
  width:42px;height:42px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--forest);color:var(--cream);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
}
.testimonial__meta b{display:block;font-size:.95rem;color:var(--forest);font-weight:600}
.testimonial__meta span{display:block;font-size:.84rem;color:var(--muted);line-height:1.4}

/* ---- Carousel ------------------------------------------------------- */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:clamp(1rem,2vw,1.5rem);
  margin:0;padding:.25rem .25rem 1.5rem;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:3px solid var(--terracotta);outline-offset:4px;border-radius:var(--r-lg)}
.carousel__slide{
  flex:0 0 clamp(280px,88%,420px);
  scroll-snap-align:center;display:flex;
}
@media(min-width:760px){ .carousel__slide{flex-basis:calc(50% - .75rem);scroll-snap-align:start} }
@media(min-width:1080px){ .carousel__slide{flex-basis:calc(33.333% - 1rem)} }

.carousel__controls{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:.5rem;
}
.carousel__dots{display:flex;gap:.45rem;align-items:center}
.carousel__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:#C9B58C;cursor:pointer;
  transition:width .25s ease,background .25s ease;
}
.carousel__dot[aria-selected="true"]{width:26px;border-radius:100px;background:var(--terracotta)}
.carousel__arrows{display:flex;gap:.5rem}
.carousel__arrow{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1.5px solid var(--line);
  background:var(--cream);color:var(--forest);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.carousel__arrow:hover{background:var(--forest);border-color:var(--forest);color:var(--cream);transform:translateY(-2px)}
.carousel__arrow .icon{width:1.15rem;height:1.15rem}

@media(prefers-reduced-motion:reduce){
  .carousel__track{scroll-behavior:auto}
}

/* ============================================================
   27. MICRO-INTERACTIONS
   Implements the motion spec. Three gaps the audit found: no press
   states anywhere, plain `ease` everywhere instead of a real ease-out,
   and no field-level validation states.
   ============================================================ */

/* ---- Press feedback. Nothing on the site confirmed a click. ---- */
.btn:active{transform:translateY(0) scale(.98);transition-duration:var(--t-fast);transition-timing-function:var(--ease-press)}
.btn--primary:active{box-shadow:0 4px 10px -8px rgba(163,79,48,1)}
.carousel__arrow:active,.nav-toggle:active{transform:scale(.94);transition-duration:var(--t-fast);transition-timing-function:var(--ease-press)}
.card:active,.testimonial:active{transform:translateY(-1px);transition-duration:var(--t-fast)}
.carousel__dot:active{transform:scale(.9)}

/* Disabled buttons never move. */
.btn:disabled,.btn[aria-disabled="true"]{transform:none!important;box-shadow:none;opacity:.55;cursor:not-allowed}

/* ---- Real easing, replacing plain `ease`. ---- */
.btn{transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),
     border-color var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
     transform var(--t-base) var(--ease-out)}
.card,.testimonial{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.arrow-link .icon{transition:transform var(--t-base) var(--ease-out)}
.carousel__arrow{transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-base) var(--ease-out)}
.carousel__dot{transition:width var(--t-slow) var(--ease-out),background var(--t-base) var(--ease-out),transform var(--t-fast) var(--ease-out)}

/* ---- Nav: a wiping rule instead of a background swap. ---- */
.nav a{position:relative;transition:color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.nav > li > a::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:2px;border-radius:2px;
  background:var(--terracotta);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);
}
.nav > li > a:hover::after{transform:scaleX(1)}
/* Current page is Leaf, so it never looks merely hovered. */
.nav > li.current-menu-item > a::after,
.nav > li.current_page_item > a::after{transform:scaleX(1);background:var(--leaf)}
.nav > li.current-menu-item > a,.nav > li.current_page_item > a{font-weight:600;color:var(--forest)}

/* ---- Form fields: focus ring, and validation states that were missing. ---- */
.signup input,.field input,.field textarea,.field select{
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.field input:focus,.field textarea:focus,.field select:focus,.signup input:focus{
  outline:none;border-color:var(--forest);background:var(--white);
  box-shadow:0 0 0 3px var(--soft-sage);
}
.field input:user-invalid,.field textarea:user-invalid,.signup input:user-invalid{
  border-color:#B3452B;box-shadow:0 0 0 3px var(--terracotta-wash);
}
.field input:user-valid,.field textarea:user-valid,.signup input:user-valid{
  border-color:#4A7A2E;box-shadow:0 0 0 3px var(--gold-wash);
}

/* ---- Submit button: loading and success. ---- */
.bt-submit .spinner,.btpay__submit .spinner{
  width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:.4rem;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:lw-spin .7s linear infinite;
}
@keyframes lw-spin{to{transform:rotate(360deg)}}
.btn.is-done{background:#2F6B3A;box-shadow:none}

@media(prefers-reduced-motion:reduce){
  .nav > li > a::after{transition:none}
  .bt-submit .spinner,.btpay__submit .spinner{animation:none;border-top-color:rgba(255,255,255,.4)}
}

/* ============================================================
   28. SCROLLBARS
   A scrollbar is an affordance, not decoration: it reports how much
   page there is and where you are in it. So the resting thumb is
   #6E8266 (3.27:1 on the sand track) rather than the prettier sand
   tone, which measured 1.70:1 and would have failed WCAG 1.4.11.
   ============================================================ */
html{
  /* Reserve the gutter so the layout never jumps by ~15px when a short
     page becomes a long one. */
  scrollbar-gutter:stable;
  /* Firefox */
  scrollbar-width:thin;
  scrollbar-color:#6E8266 var(--sand);
}

/* WebKit and Blink */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--sand)}
::-webkit-scrollbar-thumb{
  background:#6E8266;
  border-radius:100px;
  /* Transparent border plus content-box clipping insets the thumb, so it
     reads as a slim pill with breathing room rather than a full-width slab. */
  border:3px solid transparent;
  background-clip:content-box;
  transition:background-color var(--t-base) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover{background:var(--forest);background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:var(--terracotta);background-clip:content-box}
::-webkit-scrollbar-corner{background:var(--sand)}

/* On the dark forest sections and the footer, the same thumb would
   disappear, so those get a light one. */
.section--ink,.site-footer{scrollbar-color:#8FA98A #24492E}

/* Slim variant for panels that scroll inside the page: the mobile nav,
   long selects, and any wide table or code block. */
.scroll-slim,textarea,
.site-header.is-open .nav{
  scrollbar-width:thin;
  scrollbar-color:#8B9A84 transparent;
}
.scroll-slim::-webkit-scrollbar,textarea::-webkit-scrollbar,
.site-header.is-open .nav::-webkit-scrollbar{width:10px;height:10px}
.scroll-slim::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track,
.site-header.is-open .nav::-webkit-scrollbar-track{background:transparent}
.scroll-slim::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb,
.site-header.is-open .nav::-webkit-scrollbar-thumb{
  background:#8B9A84;border:2.5px solid transparent;background-clip:content-box;border-radius:100px;
}
.scroll-slim::-webkit-scrollbar-thumb:hover,textarea::-webkit-scrollbar-thumb:hover,
.site-header.is-open .nav::-webkit-scrollbar-thumb:hover{background:var(--forest);background-clip:content-box}

/* The carousel keeps its scrollbar hidden: it has dots and arrows doing
   that job, and a second indicator underneath would only repeat them.
   The track stays keyboard focusable and scrollable regardless. */

@media(prefers-reduced-motion:reduce){
  ::-webkit-scrollbar-thumb{transition:none}
}

/* A dot with no reachable scroll position is hidden, not rendered dead.
   Explicit because a flex child can otherwise beat the UA [hidden] rule. */
.carousel__dot[hidden]{display:none}

/* ============================================================
   29. HEADER ON SMALL SCREENS
   The brand lockup was flex:0 0 auto, so at 390px its strapline pushed
   the menu button past the viewport edge, where overflow-x:hidden ate
   it — leaving no way to open the nav on a phone. The lockup now yields
   space, and the toggle is never allowed to shrink.
   ============================================================ */
@media(max-width:640px){
  .brand{flex:0 1 auto;min-width:0}
  .brand__name{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:1.02rem;
  }
  /* The strapline is the first thing to go: the logo and name already
     identify the site, and the tagline repeats what the hero says. */
  .brand__role{display:none}
  .brand__logo{height:44px}
  .header-inner{min-height:66px;gap:.75rem}
  .header-cta{flex:0 0 auto}
  .nav-toggle{flex:0 0 auto}
}
@media(max-width:360px){
  .brand__logo{height:38px}
  .brand__name{font-size:.95rem}
}

/* Hero tagline: one sentence per line, wrapping within a sentence only when
   the screen genuinely cannot hold it. Replaces the 16ch measure, which was
   forcing breaks mid-phrase at every width. */
.hero h1{max-width:none}
.hero__line{display:block;text-wrap:balance}
@media(min-width:900px){ .hero h1{max-width:20ch} }