/* ============================================================
   Sorrel Sanctuary, concept preview
   Calm-clinical, nature-based design system (self-contained)
   ============================================================ */

:root{
  /* Greens */
  --forest:#22392e;      /* deepest, headers, footer */
  --pine:#2f4a3c;        /* primary green */
  --moss:#3f6350;        /* mid green */
  --sage:#7d9a89;        /* muted accent */
  --sage-tint:#e7ede8;   /* pale green surface */
  --sage-line:#c9d6cd;   /* hairlines */

  /* Neutrals (clinical stone) */
  --paper:#f7f8f5;       /* page bg */
  --card:#ffffff;
  --stone:#eef0ea;
  --ink:#1c2621;         /* body text */
  --muted:#5a6862;       /* secondary text */
  --faint:#8a968f;

  /* Accent */
  --clay:#b4835a;        /* warm signal, used sparingly */

  --maxw:1260px;

  /* Spacing, 8px grid (4px half-step) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px;
  --space-9:64px; --space-10:96px; --space-11:128px;

  /* Corner radius, exactly four */
  --radius-0:0px; --radius-sm:4px; --radius-md:6px; --radius-pill:999px;
  --radius:var(--radius-md);

  /* Type scale, modular 1.25, base 17px */
  --text-xs:13px; --text-sm:15px; --text-base:17px; --text-md:20px;
  --text-lg:24px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px;

  /* Elevation, two tokens only */
  --shadow-0:none;
  --shadow-1:0 10px 26px rgba(34,57,46,.10);
  --focus-ring:0 0 0 3px rgba(125,154,137,.55);

  --gap:clamp(1.5rem,3.4vw,2.75rem);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.62;font-size:20.5px;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--forest);margin:0 0 .5em}
h1{font-size:clamp(2rem,4.5vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3vw,2.3rem)}
h3{font-size:1.35rem}
p{margin:0 0 1.2rem}
a{color:var(--moss);text-decoration:none}
a:hover{color:var(--pine);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--pine);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
img{max-width:100%;display:block}
.small{font-size:.95em}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
section{padding:clamp(4rem,8vw,7.5rem) 0}
.section-tint{background:var(--sage-tint)}
.section-stone{background:var(--stone)}
.section-forest{color:#dfe7e1;position:relative;
  background:radial-gradient(52% 68% at 85% 12%,rgba(125,154,137,.16),transparent 60%),
             radial-gradient(44% 56% at 6% 96%,rgba(255,255,255,.05),transparent 60%),
             var(--forest)}
.section-forest h1,.section-forest h2,.section-forest h3{color:#fff}
.section-forest .muted{color:#a9bab0}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- Preview banner ---------- */
.preview-bar{
  background:var(--clay);color:#fff;text-align:center;font-size:.8rem;letter-spacing:.04em;
  padding:.4rem 1rem;text-transform:uppercase;font-weight:600;
}

/* ---------- Header / nav ---------- */
header.site{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--sage-line)}
/* frosted background lives on a pseudo-element so the header doesn't become a
   containing block for the fixed full-page menu (backdrop-filter would) */
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(247,248,245,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--forest)}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
header.site .brand .mark{width:40px;height:40px;object-fit:contain;display:block}
.brand small{display:block;font-family:var(--sans);font-weight:400;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.menu{display:flex;gap:1.7rem;align-items:center;flex-wrap:wrap}
.menu a{color:var(--ink);font-size:1rem;font-weight:500}
.menu a:hover,.menu a.active{color:var(--pine);text-decoration:none}
.menu a.active{border-bottom:2px solid var(--sage)}
/* the Enquire button must keep white text despite the .menu a colour rule */
.menu a.btn,.menu a.btn:hover,.menu a.btn:focus{color:#fff;border-bottom:0}
.btn{display:inline-block;background:var(--pine);color:#fff;padding:.8rem 1.6rem;border-radius:var(--radius);font-weight:600;font-size:.92em;line-height:1.3;border:1px solid var(--pine);cursor:pointer;transition:background .18s ease,color .18s ease}
.btn:hover{background:var(--forest);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--pine)}
.btn.ghost:hover{background:var(--pine);color:#fff}
.btn.light{background:#fff;color:var(--moss);border-color:#fff}
.btn.light:hover{background:var(--sage-tint);color:var(--forest)}
.btn+.btn{margin-left:.6rem}
.btn.small{font-size:.82em;padding:.5rem 1.05rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.cta-row .btn{margin-left:0}
@media(max-width:640px){.cta-row .btn{flex:1 1 100%;text-align:center}}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--forest);cursor:pointer;line-height:1;padding:.2rem .4rem}
body.menu-open{overflow:hidden}
@media(max-width:900px){
  /* brand + toggle stay above the overlay (all share the header's stacking context) */
  .nav-toggle{display:block;position:relative;z-index:2}
  .brand{position:relative;z-index:2}
  /* full-page overlay menu */
  .menu{position:fixed;inset:0;z-index:1;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    background:var(--paper);padding:9rem clamp(1.5rem,7vw,3rem) 3rem;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  /* opaque masthead band so scrolling menu links don't slide under the brand */
  .nav:has(.menu.open)::after{content:"";position:fixed;left:0;right:0;top:0;height:7.5rem;z-index:1;
    background:var(--paper);border-bottom:1px solid var(--sage-line)}
  .menu>a{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--forest);
    padding:.7rem 0;border-bottom:1px solid var(--sage-line)}
  .menu>a.active{border-bottom:1px solid var(--sage-line);color:var(--pine)}
  .menu>a:last-of-type{border-bottom:1px solid var(--sage-line)}
  .menu a.btn{margin-top:1.6rem;width:100%;text-align:center;font-size:1.05rem;padding:1rem;border-radius:var(--radius)}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#e7efe8;
  background:radial-gradient(58% 78% at 80% 18%,rgba(125,154,137,.22),transparent 62%),
             radial-gradient(46% 60% at 8% 92%,rgba(255,255,255,.06),transparent 60%),
             var(--forest)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.hero h1{color:#fff;max-width:16ch}
.hero p.lead{font-size:1em;max-width:56ch;color:#c8d6cc}
.hero-svg{position:absolute;inset:0;z-index:1;opacity:.5}
.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:1rem}
.section-forest .eyebrow,.hero .eyebrow{color:#9fceb0}

/* ---------- Media (image slots w/ offline fallback) ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--moss),var(--forest));aspect-ratio:16/9}
.media.tall{aspect-ratio:4/5}
.media.wide{aspect-ratio:21/9}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 60%);pointer-events:none}
.media .cap{position:absolute;left:0;bottom:0;z-index:2;background:rgba(34,57,46,.74);
  color:#e7efe8;font-size:.7rem;letter-spacing:.02em;padding:.3rem .6rem;border-top-right-radius:var(--radius-sm)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--sage-line);border-radius:var(--radius);padding:1.9rem;height:100%}
.card h3{margin-top:.2rem}
.card .ico{width:40px;height:40px;margin-bottom:.9rem;color:var(--moss)}
.lane{display:block;background:var(--card);border:1px solid var(--sage-line);border-top:4px solid var(--moss);border-radius:var(--radius);padding:2rem;height:100%;transition:transform .15s,box-shadow .15s}
.lane:hover{text-decoration:none}
.lane h3{color:var(--forest)}
.lane .go{color:var(--moss);font-weight:600;font-size:.9rem}
.pill{display:inline-block;background:var(--sage-tint);color:var(--pine);font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:.25rem .6rem;border-radius:var(--radius-pill);margin:0 .3rem .3rem 0}
.pill.est{background:#dfeadf;color:#2f5a37}
.pill.emerging{background:#f0e6d8;color:#8a5a2b}

/* ---------- Proof / stat strip ---------- */
.stat{padding:1.2rem 0}
.stat .n{font-family:var(--serif);font-size:2.2rem;color:var(--forest);line-height:1}
.stat .l{font-size:.95em;color:var(--muted)}

/* ---------- Framework badges ---------- */
.frameworks{display:flex;flex-wrap:wrap;gap:.6rem}
.fw{border:1px solid var(--sage-line);background:#fff;border-radius:var(--radius);padding:.5rem .85rem;font-size:.92em;font-weight:600;color:var(--pine)}

/* ---------- Lists ---------- */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.6rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;border-left:2px solid var(--moss);border-bottom:2px solid var(--moss);transform:rotate(-45deg)}
.divider{height:1px;background:var(--sage-line);border:0;margin:0}

/* ---------- Breadcrumb / page head ---------- */
.pagehead{position:relative;overflow:hidden;background:var(--sage-tint);border-bottom:1px solid var(--sage-line);padding:clamp(3rem,6vw,5rem) 0}
.crumb{font-size:.92em;color:var(--muted);margin-bottom:.6rem}
.crumb a{color:var(--moss)}

/* ---------- Forms (demo) ---------- */
.form{background:var(--card);border:1px solid var(--sage-line);border-radius:var(--radius);padding:1.6rem}
.form label{display:block;font-size:.85rem;font-weight:600;color:var(--forest);margin:.8rem 0 .3rem}
.form input,.form select,.form textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--sage-line);border-radius:var(--radius);font:inherit;background:#fdfdfb}
.form .note{font-size:.9em;color:var(--faint);margin-top:.8rem}

/* ---------- Calendar / events ---------- */
.event{display:grid;grid-template-columns:76px 1fr auto;gap:1rem;align-items:center;background:#fff;border:1px solid var(--sage-line);border-radius:var(--radius);padding:1rem;margin-bottom:.8rem}
.event .date{background:var(--sage-tint);border-radius:var(--radius);text-align:center;padding:.5rem;color:var(--forest)}
.event .date .d{font-family:var(--serif);font-size:1.4rem;line-height:1}
.event .date .m{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.event .tag{font-size:.72rem;font-weight:600;color:var(--moss)}
@media(max-width:640px){.event{grid-template-columns:64px 1fr}.event .btn{grid-column:1/-1}}

/* ---------- Article ---------- */
.article{max-width:720px;margin:0 auto}
.article p,.article li{font-size:1.06em;line-height:1.7}
.article h2{margin-top:1.8rem}
.article .meta{color:var(--muted);font-size:.95em;margin-bottom:1.5rem}
.callout{background:var(--sage-tint);border-left:3px solid var(--moss);padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.5rem 0;font-size:.95rem}
blockquote{margin:1.5rem 0;padding-left:1.2rem;border-left:3px solid var(--sage);color:var(--pine);font-family:var(--serif);font-size:1.25rem}

/* ---------- Footer ---------- */
footer.site{position:relative;overflow:hidden;color:#b9c8bf;padding:clamp(4.5rem,8vw,7.5rem) 0 3rem;font-size:1rem;
  background:radial-gradient(46% 60% at 82% 6%,rgba(125,154,137,.18),transparent 60%),
             radial-gradient(42% 52% at 6% 100%,rgba(255,255,255,.05),transparent 60%),
             var(--forest)}
footer.site h4{color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.2rem}
footer.site a{color:#c8d6cc;display:block;margin-bottom:.7rem}
footer.site a:hover{color:#fff}
footer .foot-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(2.25rem,4vw,4rem)}
@media(max-width:860px){footer .foot-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:520px){footer .foot-grid{grid-template-columns:1fr}}
.foot-bottom{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.15);margin-top:clamp(3rem,5vw,4.5rem);padding-top:2rem;color:#8ea497;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
/* subtle topographic motif in the footer, echoing the hero */

/* ---------- Demo form result banner ---------- */
.form-result{margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--radius);font-size:.9rem;line-height:1.5}
.form-result:focus{outline:none;box-shadow:var(--focus-ring)}
.form-result.ok{background:#e6efe7;border:1px solid #bcd4c1;color:#254b30}
.form-result.warn{background:#f6ecd9;border:1px solid #e2cea0;color:#7a521f}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.req{color:var(--clay)}
[aria-invalid="true"]{border-color:var(--clay)!important;background:#fdf6ef!important}

/* ---------- Programme template blocks ---------- */
.prog{background:var(--card);border:1px solid var(--sage-line);border-radius:var(--radius);padding:2rem;height:100%}
.prog h3{display:flex;align-items:baseline;gap:.5rem}
.prog .who{font-size:.78rem;font-weight:600;color:var(--moss);text-transform:uppercase;letter-spacing:.05em}
.prog dl{margin:.8rem 0 0;font-size:.9rem}
.prog dt{font-weight:600;color:var(--forest);margin-top:.7rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.prog dd{margin:.15rem 0 0}
.anchor-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.anchor-nav a{border:1px solid var(--sage-line);background:#fff;border-radius:var(--radius-pill);padding:.35rem .8rem;font-size:.92em;font-weight:600;color:var(--pine)}
.anchor-nav a:hover{background:var(--pine);color:#fff;text-decoration:none}

/* ---------- ROI / metric callouts ---------- */
.metric{background:#fff;border:1px solid var(--sage-line);border-left:4px solid var(--moss);border-radius:var(--radius);padding:1.1rem 1.3rem}
.metric .big{font-family:var(--serif);font-size:1.9rem;color:var(--forest);line-height:1}
.metric .lbl{font-size:.85rem;color:var(--muted);margin-top:.3rem}

/* ---------- Pathway / steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:1.2rem 0 0}
.steps li{position:relative;padding:0 0 1.2rem 3rem;border-left:2px solid var(--sage-line);margin-left:1rem}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:-1rem;top:-.1rem;
  width:2rem;height:2rem;background:var(--pine);color:#fff;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;font-family:var(--serif)}
.steps li h4{margin:.1rem 0 .3rem;color:var(--forest);font-family:var(--sans);font-size:1rem}

/* ---------- Evidence tier rows ---------- */
.tier{background:#fff;border:1px solid var(--sage-line);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:1rem}
.tier h3{margin:.3rem 0 .5rem}
.tier .refs{font-size:.82rem;color:var(--muted);margin-top:.6rem}
.tier .refs a{color:var(--moss)}

/* ---------- Article extras ---------- */
.tldr{background:var(--sage-tint);border:1px solid var(--sage-line);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.5rem 0}
.tldr h2{font-size:1rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;margin:.2rem 0 .6rem;color:var(--pine)}
.tldr ul{margin:0;padding-left:1.2rem}.tldr li{margin-bottom:.4rem;font-size:.95rem}
.byline{display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--sage-line);border-bottom:1px solid var(--sage-line);padding:.9rem 0;margin:1.2rem 0}
.byline .av{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--sage-tint);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--pine);font-weight:600;flex:none}
.byline .who{font-size:.9rem}.byline .who strong{color:var(--forest)}
.reviewed{font-size:.82rem;color:var(--muted)}
.refs-list{font-size:.85rem;color:var(--muted);counter-reset:ref}
.refs-list li{margin-bottom:.5rem}
.refs-list a{color:var(--moss);word-break:break-word}
sup.cite a{color:var(--moss);font-weight:600;text-decoration:none}
sup.cite a:hover{text-decoration:underline}

/* ---------- Insights index cards ---------- */
.post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--sage-line);border-radius:var(--radius);overflow:hidden;height:100%;transition:transform .15s,box-shadow .15s}
.post:hover{text-decoration:none}
.post .body{padding:1.3rem}
.post h3{font-size:1.1rem;margin-bottom:.4rem}
.post .meta{font-size:.88em;color:var(--faint);margin-top:.6rem}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.filter-bar button{border:1px solid var(--sage-line);background:#fff;border-radius:var(--radius-pill);padding:.45rem 1rem;font:inherit;font-size:.92em;font-weight:600;color:var(--pine);cursor:pointer}
.filter-bar button[aria-pressed="true"]{background:var(--pine);color:#fff;border-color:var(--pine)}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--sage-line);border-radius:var(--radius);padding:0 1.2rem;margin-bottom:.7rem}
.faq summary{cursor:pointer;font-weight:600;color:var(--forest);padding:1rem 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--moss);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--sage-line)}
.faq details p{padding:.9rem 0;margin:0}

/* ---------- Role cards ---------- */
.role{background:#fff;border:1px solid var(--sage-line);border-radius:var(--radius);padding:1.4rem}
.role .type{font-size:.72rem;font-weight:600;color:var(--moss);text-transform:uppercase;letter-spacing:.05em}
.role h3{margin:.3rem 0 .5rem}
.related{border-top:1px solid var(--sage-line);margin-top:2.5rem;padding-top:1.5rem}

/* Line motifs are kept only on the hero (inline SVG) and the footer. */
main>section{position:relative}
main>section>.wrap{position:relative;z-index:1}

/* ---------- Mega menu ---------- */
.menu .drop{position:relative;display:inline-flex;align-items:center}
.drop-t{background:none;border:0;font:inherit;font-size:1rem;font-weight:500;color:var(--ink);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.4rem}
.drop-t::after{content:"";width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.drop.open .drop-t::after{transform:rotate(-135deg) translateY(2px)}
.drop-t:hover,.drop-t.active{color:var(--pine)}
.mega{position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%);min-width:520px;background:#fff;border:1px solid var(--sage-line);border-radius:var(--radius-md);box-shadow:0 18px 44px rgba(34,57,46,.16);padding:1.4rem;display:none;z-index:60}
.mega::before{content:"";position:absolute;top:-1.4rem;left:0;right:0;height:1.4rem}
.mega.narrow{min-width:440px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}
.mega-grid a{display:block;padding:.7rem .8rem;border-radius:var(--radius-sm);color:var(--ink)}
.mega-grid a:hover{background:var(--sage-tint);text-decoration:none}
.mega-grid a strong{display:block;color:var(--forest);font-family:var(--serif);font-weight:600;font-size:1rem;margin-bottom:.1rem}
.mega-grid a span{display:block;font-size:.86em;color:var(--muted);line-height:1.4}
.mega-all{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--moss);font-size:.9rem}
@media(min-width:901px){.drop:hover .mega,.drop:focus-within .mega,.drop.open .mega{display:block}}
@media(max-width:900px){
  /* inside the full-page menu, dropdown groups become always-open labelled sections */
  .menu .drop{display:block;width:100%;padding:1.4rem 0 .4rem;border-bottom:1px solid var(--sage-line)}
  .drop-t{pointer-events:none;width:100%;padding:0;margin-bottom:.4rem;
    font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .drop-t::after{display:none}
  .mega{display:block;position:static;transform:none;min-width:0;width:auto;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;background:transparent}
  .mega::before{display:none}
  .mega.narrow{min-width:0}
  .mega-grid{grid-template-columns:1fr;gap:0}
  .mega-grid a{padding:.5rem 0;border-radius:0}
  .mega-grid a:hover{background:transparent}
  .mega-grid a strong{font-size:1.15rem}
  .mega-grid a span{display:none}
  .mega-all{display:inline-block;margin:.5rem 0 .4rem;font-size:.95rem}
}

/* ---------- Frosted "window" cards over a shared section glow ----------
   Each light section paints ONE soft green glow field; translucent cards then
   reveal a different slice of that single field through frosted glass, so a row
   of cards reads as one cohesive surface instead of repeated stamps. */
main>section:not(.section-forest):not(.section-stone):not(.hero){
  background:
    radial-gradient(58% 62% at 24% 26%,rgba(125,154,137,.20),transparent 62%),
    radial-gradient(54% 60% at 84% 80%,rgba(63,99,80,.15),transparent 62%),
    var(--paper)}

.card,.lane,.prog,.post,.role,.metric,.tier,.form,.event{
  position:relative;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  backdrop-filter:blur(24px) saturate(1.7);
  transition:background .18s ease,-webkit-backdrop-filter .18s ease,backdrop-filter .18s ease,border-color .18s ease}
/* solid-tint helpers should not frost */
.tldr,.callout{-webkit-backdrop-filter:none;backdrop-filter:none}

/* hover on interactive cards: strengthen the green glow, no shadow */
.lane:hover,.post:hover{
  background:rgba(228,236,230,.42);
  -webkit-backdrop-filter:blur(30px) saturate(2.2);
  backdrop-filter:blur(30px) saturate(2.2);
  border-color:var(--sage)}

/* ---------- Dark glow panel (the "policy alignment" treatment, reusable) ----------
   Use .section-forest anywhere we want a dark band; cards inside become very
   translucent frosted windows onto the panel's own glow. */
.section-forest .card,.section-forest .lane,.section-forest .prog,.section-forest .tier{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.section-forest .lane{border-top:4px solid var(--sage)}
.section-forest .card h3,.section-forest .lane h3,.section-forest .prog h3,.section-forest .tier h3{color:#fff}
.section-forest .muted,.section-forest .card .muted,.section-forest .lane .muted{color:#a9bab0}
.section-forest .lane .go{color:#9fceb0}
.section-forest .h-ico{color:#9fceb0}
.section-forest .prog .who{color:#9fceb0}
.section-forest .card:hover,.section-forest .lane:hover,.section-forest .post:hover{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3)}
.section-forest .pill{background:rgba(255,255,255,.12);color:#e7efe8}
.section-forest .pill.est{background:rgba(120,180,140,.22);color:#cfe8d3}
.section-forest .pill.emerging{background:rgba(200,150,90,.22);color:#efd9bd}
.section-forest p{color:#c8d6cc}
.section-forest .stat .n{color:#fff}
.section-forest .stat .l{color:#a9bab0}
.section-forest p a,.section-forest .muted a,.section-forest .refs a{color:#9fceb0;text-decoration:underline}
.section-forest .ticks li::before{border-color:var(--sage)}

/* ---------- Softly flowing lines (offline-safe, motion-aware) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-svg{animation:flowC 46s ease-in-out infinite alternate;will-change:transform}
}
@keyframes flowB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(24px,14px,0) scale(1.03)}}
@keyframes flowC{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-18px,10px,0) scale(1.05)}}

/* ---------- Card line icons ---------- */
.h-ico{width:30px;height:30px;flex:none;color:var(--moss);stroke:currentColor;fill:none}
.card h3,.lane h3,.role h3,.prog h3,.tier h3{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.lane .h-ico{width:34px;height:34px}

/* utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.lead{font-size:1.15em;color:var(--muted);max-width:62ch}
.tag-note{display:inline-block;background:var(--stone);color:var(--muted);font-size:.72rem;padding:.2rem .55rem;border-radius:4px}