/* ============================================================
   So Sure® – Design Tokens + Shared Base
   ------------------------------------------------------------
   Defined ONCE. Imported into every page.
   Tokens come straight from CLAUDE.md §4 (the brand book law).
   Never redefine a token in a page-scoped <style> block.
   ============================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* --- Primary palette (the only colours that may dominate) --- */
  --forest:#03773d;        /* Pantone 7732C – primary, brand soul */
  --green:#43b049;         /* Pantone 360C  – primary green */
  --navy:#253d98;          /* Pantone 661C  – primary, grounding dark */
  --deep-forest:#004515;   /* Pantone 349C  – darkest grounds */

  /* --- Complementary palette – ACCENTS ONLY, never a flood --- */
  --leaf-light:#6fbf68;    /* Pantone 7489C/356C */
  --lime:#7ec242;          /* Pantone 368C */
  --sky:#45c3f1;           /* Pantone 298C – sparingly */
  --grey:#e1e1e1;          /* Cool Gray 1C */

  /* --- Derived tints / shades (fine to use for surfaces) --- */
  --forest-90:#0c814a;
  --forest-tint-20:#cde4dc;
  --forest-tint-10:#e2efe8;
  --forest-tint-05:#f0f8f4;
  --navy-tint-20:#d5e1f0;
  --navy-tint-05:#f0f4fb;

  /* --- Support / UI neutrals (derived, fine to use) --- */
  --mist:#f4f7f3;          /* warm off-white background */
  --paper:#ffffff;
  --ink:#0f2417;           /* body text */
  --ink-soft:#3a4a40;
  --ink-faint:#6a7c70;
  --line:#dde6df;
  --line-soft:#eaf0ec;

  /* --- Typography --- */
  --display:"Sansita", Georgia, serif;          /* headings */
  --body:"Carlito", system-ui, -apple-system, sans-serif; /* body */

  /* Fluid type scale. Body base >= 17px (audience is 45+). */
  --text-xs:0.8125rem;                                  /* 13px */
  --text-s:0.9375rem;                                   /* 15px */
  --text-base:clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); /* 17 → 19px */
  --text-lg:clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);      /* 19 → 22px */
  --text-xl:clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  --text-2xl:clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --text-3xl:clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);
  --text-hero:clamp(2.7rem, 1.5rem + 5.4vw, 5.6rem);

  --leading-tight:1.08;
  --leading-snug:1.25;
  --leading-body:1.65;
  --tracking-wide:0.14em;

  /* --- Spacing – 8px base scale (CLAUDE.md §4) --- */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem;  --s-6:3rem;   --s-7:4.5rem; --s-8:7rem;

  /* Aliases used by section-architecture skill */
  --space-xs:var(--s-1);
  --space-s:var(--s-2);
  --space-m:var(--s-3);
  --space-l:var(--s-5);
  --space-xl:var(--s-6);

  /* Section block spacing (fluid) */
  --section-space-s:clamp(3rem, 2rem + 4vw, 5rem);
  --section-space-m:clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --section-space-l:clamp(5rem, 3rem + 7vw, 9.5rem);

  /* --- Layout --- */
  --container-width:1240px;
  --container-narrow:880px;
  --gutter:clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* --- Radius – soft, not sharp --- */
  --r-card:18px;
  --r-m:14px;
  --r-s:10px;
  --r-pill:100px;

  /* --- Shadows (soft green-tinted) --- */
  --shadow-s:0 2px 10px rgba(3,119,61,.06);
  --shadow-m:0 14px 40px rgba(3,119,61,.10);
  --shadow-green:0 12px 34px rgba(3,119,61,.20);
  --shadow-lift:0 22px 60px rgba(3,119,61,.14);

  /* --- Motion --- */
  --dur-fast:160ms;
  --dur-normal:320ms;
  --dur-slow:640ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img, picture, svg, video { display:block; max-width:100%; height:auto; }

h1, h2, h3, h4 {
  font-family:var(--display);
  font-weight:700;
  line-height:var(--leading-tight);
  letter-spacing:-0.01em;
  color:var(--ink);
  text-wrap:balance;
}

p { text-wrap:pretty; }

a { color:inherit; text-decoration:none; }

ul, ol { list-style:none; padding:0; }

button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }

::selection { background:var(--forest-tint-20); color:var(--forest); }

/* Visible keyboard focus on every interactive element */
:focus-visible {
  outline:3px solid var(--navy);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link {
  position:absolute; left:var(--s-3); top:-100px; z-index:200;
  background:var(--forest); color:#fff; padding:.75rem 1.25rem;
  border-radius:var(--r-pill); font-weight:700; font-size:var(--text-s);
  transition:top var(--dur-fast) ease;
}
.skip-link:focus { top:var(--s-3); }

/* Screen-reader-only helper */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ----------------------------------------------------------------
   3. LAYOUT PRIMITIVES (section-architecture skill)
   ---------------------------------------------------------------- */
.section { padding-block:var(--section-space-m); padding-inline:var(--gutter); }
.section--s { padding-block:var(--section-space-s); }
.section--l { padding-block:var(--section-space-l); }
.section--flush-top { padding-top:0; }

.container {
  width:100%;
  max-width:var(--container-width);
  margin-inline:auto;
}
.container--narrow { max-width:var(--container-narrow); }

/* ----------------------------------------------------------------
   4. SHARED TYPE HELPERS
   ---------------------------------------------------------------- */
.eyebrow {
  display:inline-flex; align-items:center;
  font-family:var(--body);
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--forest); line-height:1;
}

.lede {
  font-size:var(--text-lg);
  color:var(--ink-soft);
  line-height:1.55;
  max-width:60ch;
}

.section-title { font-size:var(--text-3xl); }
.section-head { display:flex; flex-direction:column; gap:var(--s-3); max-width:62ch; }
.section-head--center { margin-inline:auto; text-align:center; align-items:center; }

/* ----------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-weight:700; font-size:var(--text-base);
  padding:.95rem 1.85rem; border-radius:var(--r-pill);
  min-height:48px; /* large tap target */
  transition:transform var(--dur-fast) var(--ease-out-soft),
             box-shadow var(--dur-normal) var(--ease-out-soft),
             background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  will-change:transform;
}
.btn svg { width:1.05em; height:1.05em; }

.btn--primary { background:var(--forest); color:#fff; box-shadow:var(--shadow-green); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(3,119,61,.28); background:var(--deep-forest); }

.btn--ghost { background:transparent; color:var(--forest); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--green); color:var(--deep-forest); }

.btn--on-dark { background:#fff; color:var(--deep-forest); }
.btn--on-dark:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.18); }

.link-cta {
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; color:var(--forest);
  transition:gap var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) ease;
}
.link-cta::after { content:"→"; transition:transform var(--dur-fast) var(--ease-out-soft); }
.link-cta:hover { color:var(--deep-forest); }
.link-cta:hover::after { transform:translateX(4px); }

/* ----------------------------------------------------------------
   HAND-DRAWN UNDERLINE (RoughNotation, loaded locally from js/lib).
   RoughNotation inserts its <svg> as a sibling right after the
   annotated element, positioned absolute/top:0/left:0 and drawn
   relative to its nearest positioned ancestor. Our headings sit
   inside [data-reveal] containers whose transform toggles on/off,
   which would change that ancestor and make the underline drift.
   Fix: give the heading itself a stable containing block, so the
   svg and the text share one positioned box and move together.
   (The span can't anchor it — the svg is its sibling, not its child.)
   ---------------------------------------------------------------- */
:where(h1, h2, h3, h4):has([data-annotate]) { position:relative; }
[data-annotate] { display:inline-block; }

/* ----------------------------------------------------------------
   6. SHARED NAV  (identical across all homepage directions)
   ---------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  padding-inline:var(--gutter);
  transition:border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease, background-color var(--dur-normal) ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color:var(--line);
  box-shadow:0 4px 24px rgba(3,119,61,.05);
}
.nav {
  max-width:var(--container-width); margin-inline:auto;
  padding-block:.85rem;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.nav__brand {
  display:inline-flex; align-items:center; line-height:0;
}
.nav__brand img { height:46px; width:auto; display:block; }
@media (max-width:480px){ .nav__brand img { height:40px; } }
.nav__links { display:flex; align-items:center; gap:var(--s-5); }
.nav__link {
  font-weight:700; font-size:var(--text-s); color:var(--ink-soft);
  padding:.4rem 0; position:relative; transition:color var(--dur-fast) ease;
}
.nav__link::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--green); border-radius:2px; transform:scaleX(0);
  transform-origin:left; transition:transform var(--dur-normal) var(--ease-out-expo);
}
.nav__link:hover, .nav__link[aria-current="page"] { color:var(--forest); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform:scaleX(1); }

.nav__actions { display:flex; align-items:center; gap:var(--s-3); }
.nav__buy { padding:.7rem 1.4rem; min-height:44px; }

.nav__toggle { display:none; width:46px; height:46px; border-radius:var(--r-s); position:relative; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; position:absolute; left:50%; width:22px; height:2px;
  background:var(--ink); border-radius:2px; margin-left:-11px;
  transition:transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.nav__toggle span { top:50%; margin-top:-1px; }
.nav__toggle span::before { top:-7px; }
.nav__toggle span::after { top:7px; }
.nav__toggle[aria-expanded="true"] span { background:transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px) {
  .nav__links {
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:var(--s-2);
    background:var(--paper); padding:5.5rem var(--s-5) var(--s-5);
    box-shadow:var(--shadow-m); transform:translateX(110%);
    transition:transform var(--dur-normal) var(--ease-out-expo);
  }
  .nav__links[data-open="true"] { transform:translateX(0); }
  .nav__link { font-size:var(--text-lg); }
  .nav__toggle { display:flex; position:relative; z-index:110; }
  .nav__buy { display:none; }
}

/* ----------------------------------------------------------------
   7. SHARED FOOTER  (identical across all homepage directions)
   ---------------------------------------------------------------- */
.site-footer {
  background:var(--deep-forest); color:#cfe4d6;
  padding-block:var(--section-space-m) var(--s-6);
  padding-inline:var(--gutter);
}
.footer__grid {
  max-width:var(--container-width); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s-6) var(--s-5);
}
.footer__logo { height:62px; width:auto; display:block; margin-bottom:var(--s-3); }
.footer__tagline { color:#a9cdb6; max-width:34ch; font-size:var(--text-s); line-height:1.6; }
.footer__col h3 { color:#fff; font-size:var(--text-s); font-family:var(--body); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--s-3); }
.footer__col ul { display:flex; flex-direction:column; gap:.7rem; }
.footer__col a { color:#bcdac6; font-size:var(--text-s); transition:color var(--dur-fast) ease; }
.footer__col a:hover { color:#fff; }
.footer__buy { display:flex; flex-direction:column; gap:.7rem; }
.footer__shop {
  display:inline-flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; padding:.8rem 1.1rem; border-radius:var(--r-pill); font-weight:700; font-size:var(--text-s);
  transition:background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
}
.footer__shop:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.footer__bottom {
  max-width:var(--container-width); margin:var(--s-7) auto 0; padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); align-items:center; justify-content:space-between;
  font-size:var(--text-xs); color:#9cbfa9;
}
.footer__legal { display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4); }
.footer__legal a:hover { color:#fff; }
.footer__disclaimer {
  margin:var(--s-6) auto 0;
  font-size:var(--text-xs); color:#80a48d; line-height:1.6;
  text-align:center; max-width:90ch;
}
@media (max-width:780px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__col--brand { grid-column:1 / -1; }
}
@media (max-width:480px) {
  .footer__grid { grid-template-columns:1fr; }
}

/* ----------------------------------------------------------------
   7b. SCROLL TO TOP
   ---------------------------------------------------------------- */
.to-top {
  position:fixed; right:clamp(1rem, 2vw, 2rem); bottom:clamp(1rem, 2vw, 2rem);
  z-index:90; width:52px; height:52px; border-radius:50%;
  background:var(--forest); color:#fff; box-shadow:var(--shadow-green);
  display:grid; place-items:center;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity var(--dur-normal) var(--ease-out-soft),
             transform var(--dur-normal) var(--ease-out-soft),
             background-color var(--dur-fast) ease;
}
.to-top svg { width:22px; height:22px; }
.to-top.is-visible { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:var(--deep-forest); transform:translateY(-3px); }
.to-top:focus-visible { opacity:1; pointer-events:auto; }

/* ----------------------------------------------------------------
   8. SCROLL REVEAL (progressive enhancement)
   JS adds [data-reveal] -> .is-in. Without JS, content is visible.
   ---------------------------------------------------------------- */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-out-expo),
             transform var(--dur-slow) var(--ease-out-expo);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity:1; transform:none; }
.no-js [data-reveal], html:not(.js) [data-reveal] { opacity:1; transform:none; }

/* ----------------------------------------------------------------
   9. REDUCED MOTION – mandatory, audience is 45+
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}