/* ==========================================================================
   Fernwrap — base: tokens, reset, primitives, page chrome
   Geometry follows the measured style spec (§8 drop-in tokens).
   CTA accent swapped #FF379C -> #2F7D5C per build note 1.
   ========================================================================== */

:root{
  /* colour */
  --paper:#F7F5F1;--sand:#F5F0E8;--pebble:#F2F2F2;--white:#FFFFFF;
  --core-lightest:#F7F7F7;
  --ink:#000000;--ui-ink:#333333;--brand-ink:#2C1847;--deep-ink:#221533;
  --brand:#2F7D5C;--brand-hover:#276A4E;--green:#22B38C;
  --eco-dark-green:#3C8D66;--eco-light-green:#EAF5E8;
  --border:#E5E7EB;--muted:#A29FA8;--error:#DD2727;--shell:#E8E8E8;
  --hero-stage:rgb(240,240,232);

  /* type */
  --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-h1:50px;--fs-h2:48px;--fs-h3:32px;--fs-h4:26px;--fs-card:18px;
  --fs-body:16px;--fs-meta:14px;--fs-btn:14px;--fs-micro:10px;--track:-0.24px;

  /* space */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --s7:32px;--s8:40px;--s9:48px;--s10:64px;--s11:80px;--s12:120px;

  /* motion */
  --t-fast:120ms;--t-base:300ms;--t-slow:800ms;--ease:cubic-bezier(.4,0,.2,1);

  /* shape */
  --r-pill:9999px;--r-rect:6px;--r-card:20px;--r-card-asym:36px 36px 12px 12px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.5;
  letter-spacing:var(--track);
  color:var(--ui-ink);
  background:var(--shell);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
::selection{background:var(--eco-light-green);color:var(--brand-ink)}

.u-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.u-skip{
  position:absolute;left:var(--s4);top:-60px;z-index:100;
  background:var(--brand-ink);color:#fff;padding:var(--s3) var(--s5);
  border-radius:var(--r-pill);font-size:var(--fs-btn);font-weight:600;
  transition:top var(--t-base) var(--ease);
}
.u-skip:focus{top:var(--s4)}

/* ---------- layout ---------- */
.shell{width:100%;max-width:1920px;margin-inline:auto;background:var(--white)}
.wrap{width:100%;padding-inline:var(--s6)}
.section{padding-block:var(--s11)}
.section--tight{padding-block:var(--s10)}
.section--pebble{background:var(--pebble)}
.section--sand{background:var(--sand)}

.h1{font-size:var(--fs-h1);line-height:1.2;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.h2{font-size:var(--fs-h2);line-height:1.375;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.h3{font-size:var(--fs-h3);line-height:1.375;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.eyebrow{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:var(--track);
  color:var(--eco-dark-green);margin-bottom:var(--s3);
}
.eyebrow--light{color:rgba(255,255,255,.86)}
.lede{font-size:var(--fs-body);line-height:1.5;color:var(--ui-ink)}
.muted{color:var(--muted)}
.meta{font-size:var(--fs-meta);line-height:1.286;color:var(--ui-ink)}
.meta-strong{font-size:var(--fs-meta);font-weight:600;color:var(--deep-ink)}
.text-link{font-weight:600;color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.text-link:hover{color:var(--brand)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border-radius:var(--r-pill);font-size:var(--fs-btn);font-weight:600;
  letter-spacing:normal;text-align:center;
  transition:color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
  border:2px solid var(--brand);
}
.btn--primary{background:var(--brand);color:#fff;padding:var(--s3) var(--s7);min-height:48px}
.btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn--lg{min-height:56px;padding:var(--s4) var(--s10);width:100%}
.btn--block{width:100%}
.btn--outline{
  background:transparent;color:var(--brand-ink);border:2px solid var(--brand-ink);
  padding:var(--s2) var(--s4);min-height:34px;font-size:12px;
}
.btn--outline:hover{background:var(--brand-ink);color:#fff}
.btn--outline-lg{min-height:48px;padding:var(--s3) var(--s7);font-size:var(--fs-btn)}
.btn--on-dark{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--on-dark:hover{background:#fff;color:var(--brand-ink);border-color:#fff}

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);
  border-radius:var(--r-pill);background:var(--eco-dark-green);color:#fff;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:normal;white-space:nowrap;
}
.chip--soft{background:var(--eco-light-green);color:var(--eco-dark-green)}

/* ==========================================================================
   Page chrome
   ========================================================================== */

/* announce bar — §4.1 */
.announce{
  height:50px;display:flex;align-items:center;justify-content:center;
  background:var(--white);text-align:center;
  font-size:12px;line-height:16px;letter-spacing:var(--track);color:var(--ui-ink);
}
.announce__suffix{font-weight:600;color:var(--brand-ink);text-decoration:underline}
.announce__long{display:inline}
.announce__short{display:none}

/* nav — §4.2 */
.nav{
  position:relative;z-index:40;min-height:64px;display:flex;align-items:center;
  background:var(--white);border-bottom:1px solid var(--pebble);
}
.nav__inner{display:flex;align-items:center;gap:var(--s6);width:100%;min-height:64px}
.wordmark{
  font-size:20px;line-height:24px;font-weight:600;letter-spacing:var(--track);
  color:var(--brand-ink);white-space:nowrap;
}
.nav__links{display:none;align-items:center;gap:var(--s1)}
.nav__link{
  padding:10px var(--s5);border-radius:var(--r-rect);font-size:16px;line-height:24px;
  font-weight:600;letter-spacing:normal;color:var(--ui-ink);
  transition:color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.nav__link:hover{background:var(--sand);color:var(--brand-ink)}
.nav__link[aria-current="page"]{color:var(--brand-ink)}
.nav__spacer{flex:1}
.nav__utils{display:none;align-items:center;gap:var(--s3)}
.nav__toggle{
  margin-left:auto;width:30px;height:30px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-rect);
}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--brand-ink);position:relative;transition:background-color var(--t-base) var(--ease)}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--brand-ink);
  transition:transform var(--t-base) var(--ease),top var(--t-base) var(--ease);
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{
  display:block;position:fixed;inset:0;z-index:60;
  background:var(--white);overflow-y:auto;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--t-base) var(--ease),visibility var(--t-base) var(--ease);
}
.drawer[data-open="true"]{transform:translateX(0);visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--pebble)}
.drawer__close{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--brand-ink)}
.drawer__list{padding:var(--s6)}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:52px;border-bottom:1px solid var(--pebble);
  font-size:20px;font-weight:600;letter-spacing:normal;color:var(--brand-ink);
}
.drawer__link::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.drawer__pills{display:grid;gap:var(--s3);padding:var(--s6)}
.drawer__pills .btn{width:100%}