/* =====================================================================
   SEQUENCE — brand layer (loaded on every page, after page styles)
   Tokens keep the names the legacy pages already use, so every page
   inherits the new palette without touching its own CSS or scripts.
   ===================================================================== */
:root{
  /* brand */
  --forest:#0b2a1f;        /* hero / dark panels — from the S. mark ground */
  --forest-2:#103828;      /* raised dark surface */
  --pine:#0e6b52;          /* links + primary on light */
  --mint:#5db386;          /* the dot */
  --mint-soft:#9bdcbc;     /* text accent on dark */
  --loud:#F5B83D;          /* marigold: the one loud colour, main actions only */
  --loud-hover:#FFC85C;
  --ivory:#f4f1e8;

  /* legacy token names, re-pointed */
  --ink:#0f1d17;--ink-soft:#3a4a43;--muted:#66756e;
  --paper:#f4f1e8;--card:#fbf9f3;--line:#d9d4c6;--line-soft:#e7e2d6;
  --accent:#0e6b52;--accent-soft:#e1ede6;--accent-deep:#0b2a1f;--gold:#957628;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow-s:0 1px 2px rgba(11,42,31,.05);
  --shadow:0 1px 2px rgba(11,42,31,.04),0 18px 48px -12px rgba(11,42,31,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:18px;
  --shell:1200px;
  --gutter:clamp(20px,5vw,56px);
  --header-h:78px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eef1ea;--ink-soft:#c3cdc7;--muted:#8c9a92;
  --paper:#0d1512;--card:#141e19;--line:#28342e;--line-soft:#1f2a24;
  --accent:#5db386;--accent-soft:#16251e;--accent-deep:#071c14;--gold:#c8a84e;
  --forest:#08201a;--forest-2:#0e2e22;--ivory:#eef1ea;
  --shadow-s:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 2px rgba(0,0,0,.3),0 18px 48px -12px rgba(0,0,0,.55);}}
:root[data-theme="dark"]{
  --ink:#eef1ea;--ink-soft:#c3cdc7;--muted:#8c9a92;
  --paper:#0d1512;--card:#141e19;--line:#28342e;--line-soft:#1f2a24;
  --accent:#5db386;--accent-soft:#16251e;--accent-deep:#071c14;--gold:#c8a84e;
  --forest:#08201a;--forest-2:#0e2e22;--ivory:#eef1ea;
  --shadow-s:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 2px rgba(0,0,0,.3),0 18px 48px -12px rgba(0,0,0,.55);}

html{scroll-padding-top:calc(var(--header-h) + 12px);}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--mint);color:var(--forest);}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px;}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--forest);color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;transition:top .2s;}
.skip:focus{top:12px;}

/* ---------- Logo: the Sequence. wordmark with the mint dot ---------- */
.logo{display:inline-flex;align-items:baseline;font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,2.4vw,33px);letter-spacing:-.025em;line-height:1;color:var(--ink);text-decoration:none;
  font-variation-settings:"opsz" 72;}
.logo .logo-dot{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--mint);
  margin-left:.07em;transform:translateY(.01em);font-size:inherit;overflow:hidden;text-indent:2em;}

/* ---------- Site header (shared) ---------- */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  transition:transform .45s var(--ease),background-color .35s ease,border-color .35s ease,color .35s ease;}
.site-header.is-hidden{transform:translateY(-100%);}
.sh-inner{max-width:var(--shell);margin:0 auto;height:100%;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.sh-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);}
.sh-nav a{font-size:15px;font-weight:500;color:var(--ink-soft);text-decoration:none;position:relative;
  white-space:nowrap;transition:color .2s;}
.sh-nav a:not(.sh-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.sh-nav a:not(.sh-cta):hover{color:var(--ink);}
.sh-nav a:not(.sh-cta):hover::after,.sh-nav a[aria-current="page"]::after{transform:scaleX(1);}
.sh-nav a[aria-current="page"]{color:var(--ink);}
.sh-cta{background:var(--ink);color:var(--paper)!important;padding:10px 18px;border-radius:999px;
  font-weight:600!important;font-size:13.5px!important;transition:background-color .25s,transform .25s var(--ease)!important;}
.sh-cta:hover{background:var(--pine);transform:translateY(-1px);}
.sh-burger{display:none;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;
  border-radius:12px;align-items:center;justify-content:center;}
.sh-burger span{display:block;width:20px;height:1.5px;background:currentColor;position:relative;transition:transform .3s var(--ease),opacity .2s;}
.sh-burger span::before,.sh-burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease);}
.sh-burger span::before{top:-6px;} .sh-burger span::after{top:6px;}
.sh-burger[aria-expanded="true"] span{background:transparent;}
.sh-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.sh-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* Header sitting on a dark hero (home) */
.site-header.on-dark{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
.site-header.on-dark .logo,.site-header.on-dark .sh-burger{color:#f4f1e8;}
.site-header.on-dark .sh-nav a{color:rgba(244,241,232,.78);}
.site-header.on-dark .sh-nav a:not(.sh-cta):hover{color:#fff;}
.site-header.on-dark .sh-cta{background:#f4f1e8;color:#0b2a1f!important;}
.site-header.on-dark .sh-cta:hover{background:var(--mint);}

@media (max-width:980px){
  .sh-burger{display:inline-flex;}
  .sh-nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 22px;
    box-shadow:0 30px 60px -30px rgba(11,42,31,.35);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .35s var(--ease),visibility 0s .35s;}
  .sh-nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .35s var(--ease);}
  .sh-nav a{padding:14px 2px;font-size:17px;border-bottom:1px solid var(--line-soft);color:var(--ink)!important;}
  .sh-nav a::after{display:none;}
  .sh-nav .sh-cta{margin-top:16px;text-align:center;border-bottom:0;padding:14px;font-size:15px!important;
    background:var(--ink)!important;color:var(--paper)!important;}
  .site-header.nav-open{background:var(--paper)!important;border-bottom-color:var(--line)!important;}
  .site-header.nav-open .logo,.site-header.nav-open .sh-burger{color:var(--ink)!important;}
}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);
  font-weight:600;font-size:15px;line-height:1;padding:16px 26px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease);
  min-height:48px;}
.button .arr{display:inline-block;transition:transform .35s var(--ease);}
.button:hover .arr{transform:translateX(4px);}
.button:hover{transform:translateY(-2px);}
.button.solid{background:var(--ink);color:var(--paper);}
.button.solid:hover{background:var(--pine);box-shadow:0 14px 30px -14px rgba(14,107,82,.6);}
.button.line{border-color:var(--line);color:var(--ink);background:transparent;}
.button.line:hover{border-color:var(--ink);}
.button.mint{background:var(--mint);color:#0b2a1f;}
.button.mint:hover{background:#7cc8a0;box-shadow:0 14px 34px -14px rgba(93,179,134,.7);}
.button.loud{background:var(--loud);color:#0f1d17;}
.button.loud:hover{background:var(--loud-hover);box-shadow:0 16px 36px -14px rgba(245,184,61,.75);}
.button.ghost-light{border-color:rgba(244,241,232,.3);color:#f4f1e8;background:transparent;}
.button.ghost-light:hover{border-color:#f4f1e8;}

/* ---------- Cookie notice (shared look) ---------- */
#cookieNotice{background:var(--forest)!important;border:1px solid rgba(255,255,255,.08);
  border-radius:16px!important;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)!important;}
#cookieNotice button{border-radius:999px!important;background:var(--mint)!important;color:#0b2a1f!important;}

/* ---------- Motion safety ----------
   Hidden start states only apply once site.js has confirmed motion is running. */
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none;}
}

/* ---------- Navigation aids (all pages) ---------- */
.sh-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;pointer-events:none;}
.site-header.on-dark .sh-progress{opacity:0;}
.sh-nav a.is-active{color:var(--ink);}
.sh-nav a.is-active::after{transform:scaleX(1);}
.site-header.on-dark .sh-nav a.is-active{color:#fff;}
.to-top{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:70;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(11,42,31,.5);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .35s,transform .45s var(--ease),visibility 0s .45s,background-color .25s,bottom .35s var(--ease);}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s var(--ease),background-color .25s,bottom .35s var(--ease);}
.to-top:hover{background:var(--pine);}
.to-top svg{transition:transform .35s var(--ease);}
.to-top:hover svg{transform:translateY(-3px);}
.to-top.lift{bottom:120px;}

/* ---------- Word-by-word heading reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0;}
.w > span{display:inline-block;}
.js-motion .split-view .w > span{transform:translateY(110%);}
.motion-off .split-view .w > span{transform:none!important;}