@font-face{ font-family:"Archivo"; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/archivo.woff2) format("woff2"); }
@font-face{ font-family:"Source Serif 4"; font-style:normal; font-weight:300 400; font-display:swap; src:url(../fonts/serif.woff2) format("woff2"); }
@font-face{ font-family:"Source Serif 4"; font-style:italic; font-weight:300 400; font-display:swap; src:url(../fonts/serifi.woff2) format("woff2"); }

:root{
  --bg:#f9f5f1;
  --dark:#301f00;
  --dark-2:rgba(48,31,0,.68);
  --dark-3:rgba(48,31,0,.14);
  --green:#2a4b22;
  --mint:#cef5ca;
  --grey:#676a6c;   /* darkened from #898d8f to pass WCAG AA contrast (5:1 on the cream background) */
  --white:#ffffff;
  --inverse:#f9f5f1;
  --serif:"Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Type scale, mirrored from the reference tokens and made fluid */
  --fs-display:clamp(4.5rem, 16vw, 12.75rem);
  --fs-h1:clamp(2.75rem, 6vw, 5rem);   --lh-h1:1.12;
  --fs-h2:clamp(2.4rem, 4.8vw, 4rem);  --lh-h2:1.12;
  --fs-h3:clamp(2rem, 3.4vw, 3rem);    --lh-h3:1.16;
  --fs-h4:1.625rem;                    --lh-h4:1.115;
  --fs-big:clamp(1.2rem, 1.6vw, 1.375rem);
  --fs-body:1.125rem;
  --fs-small:1rem;
  --fs-eyebrow:.875rem;
  --gutter:clamp(18px, 3.2vw, 44px);
  --r:18px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* The brand is a warm light palette in both viewer themes. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#f9f5f1; --dark:#301f00; } }
:root[data-theme="dark"]{ --bg:#f9f5f1; --dark:#301f00; }
:root[data-theme="light"]{ --bg:#f9f5f1; --dark:#301f00; }

*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top:env(safe-area-inset-top, 0px); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--dark); font-family:var(--serif); font-size:var(--fs-body); line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
::selection{ background:var(--mint); color:var(--dark); }

/* ---------- Type ---------- */
.k{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; }
.h1,.h2,.h3{ text-wrap:balance; }
.h1{ font-weight:400; font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:-.02em; margin:0; }
.h2{ font-weight:400; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:-.02em; margin:0; }
.h3{ font-weight:400; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:-.015em; margin:0; }
.h4{ font-weight:400; font-size:var(--fs-h4); line-height:var(--lh-h4); margin:0; }
.big{ font-size:var(--fs-big); line-height:1.32; }
.eyebrow{ font-family:var(--sans); font-weight:600; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.muted{ color:var(--dark-2); }

/* ---------- Pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:14px; min-height:44px; padding:0 22px; border-radius:999px; background:var(--green); color:var(--inverse); font-family:var(--sans); font-weight:500; font-size:.875rem; text-decoration:none; border:0; cursor:pointer; transition:background .3s, transform .3s; white-space:nowrap; }
.pill:hover{ background:#1f3a19; }
.pill.arrow{ padding-right:5px; }
.pill .ar{ width:34px; height:34px; border-radius:50%; background:var(--inverse); color:var(--green); display:grid; place-items:center; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.pill:hover .ar{ transform:translateX(3px); }
.pill.light{ background:var(--inverse); color:var(--dark); }
.pill.light:hover{ background:#fff; }
.pill.light .ar{ background:var(--green); color:var(--inverse); }
.pill.ghost{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1px currentColor; }
.pill.ghost:hover{ background:rgba(255,255,255,.12); }
.row-cta{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Nav ---------- */
.nav{ position:fixed; z-index:60; top:calc(10px + env(safe-area-inset-top, 0px)); left:var(--gutter); right:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 10px 8px 18px; border-radius:16px; color:var(--inverse); transition:background .45s, color .45s, box-shadow .45s, transform .45s; }
/* The frosted bar is drawn on ::before, not on .nav itself. A backdrop-filter on .nav would make it the containing
   block for the full-screen mobile menu (position:fixed) and squash the menu into the 60px bar. */
.nav::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(249,245,241,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; transition:opacity .45s; pointer-events:none; }
.nav.solid::before, body:not(.on-dark) .nav::before{ opacity:1; }
.nav.solid, body:not(.on-dark) .nav{ color:var(--dark); box-shadow:0 1px 0 var(--dark-3); }
.nav .logo{ font-family:var(--serif); font-size:1.6rem; letter-spacing:-.01em; text-decoration:none; line-height:1; padding:6px 0; }
.nav .links{ display:flex; align-items:center; gap:4px; }
.nav .links a{ font-size:.95rem; text-decoration:none; padding:10px 12px; border-radius:10px; position:relative; }
.nav .links a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.nav .links a[aria-current="page"]::after{ transform:scaleX(1); }
@media (hover:hover){ .nav .links a:hover::after{ transform:scaleX(1); } }   /* no sticky underline after a tap on phones */
.nav .links .pill{ margin-left:10px; min-height:40px; }
.nav .links .pill::after{ display:none; }
.menu-btn{ display:none; }
@media (max-width:900px){
  .nav .links{ position:fixed; inset:0; z-index:-1; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:0; padding:0 var(--gutter) calc(40px + env(safe-area-inset-bottom,0px)); background:var(--bg); color:var(--dark); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
  .nav.open .links{ opacity:1; visibility:visible; }
  .nav .links a{ font-size:clamp(2rem, 9vw, 3rem); padding:6px 0; letter-spacing:-.02em; }
  .nav .links a::after{ left:0; right:0; }
  .nav .links .pill{ font-size:1rem; margin:24px 0 0; min-height:48px; padding:0 26px; }
  .menu-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:0; background:var(--green); color:var(--inverse); font-family:var(--sans); font-weight:500; font-size:.875rem; cursor:pointer; }
  .nav.open{ background:transparent !important; box-shadow:none !important; color:var(--dark) !important; transform:none !important; }
  .nav.open::before{ opacity:0 !important; }
}

/* ---------- Page transition veil ---------- */
.veil{ position:fixed; inset:0; z-index:80; background:var(--bg); pointer-events:none; opacity:0; transition:opacity .45s ease; }
.veil.on{ opacity:1; }
.page{ display:none; }
.page.active{ display:block; }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- HOME: hero ---------- */
.stack > .st{ position:relative; }   /* panels scroll normally now (no stacked slides) */
.hero{ height:100svh; min-height:560px; position:relative; overflow:hidden; color:var(--inverse); display:grid; place-items:center; text-align:center; z-index:1; }
.hero .bg{ position:absolute; inset:-4%; background:center/cover no-repeat; transform:scale(calc(1.08 + var(--hp,0) * .08)); animation:breathe 2.4s cubic-bezier(.2,.7,.2,1) both; }
.hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 55% 40% at 50% 52%, rgba(48,31,0,.26), transparent 75%), linear-gradient(180deg, rgba(48,31,0,.28), rgba(48,31,0,.04) 40%, rgba(48,31,0,.18)); }
@keyframes breathe{ from{ transform:scale(1.2); filter:blur(8px); } }
.hero .inner{ position:relative; z-index:1; padding:0 var(--gutter); max-width:1100px; }
.hero .h1{ text-shadow:0 2px 30px rgba(48,31,0,.25); }
.hero .h1 .w{ display:inline-block; opacity:0; transform:translateY(.4em); animation:wordUp 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordUp{ to{ opacity:1; transform:none; } }
.hero .sub{ max-width:30em; margin:22px auto 0; font-size:var(--fs-big); line-height:1.35; opacity:0; animation:wordUp 1s 1s forwards; }
.hero .row-cta{ justify-content:center; margin-top:30px; opacity:0; animation:wordUp 1s 1.2s forwards; }
.hero .scroll-hint{ position:absolute; z-index:1; bottom:calc(22px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); color:var(--inverse); opacity:.8; }

/* split (sticky stacking over the hero) */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:min(86svh, 820px); background:var(--bg); z-index:2; }
.split .txt{ display:flex; flex-direction:column; justify-content:center; padding:120px var(--gutter) 80px; }
.split .txt .h2{ max-width:9.5em; }
.split .txt p{ max-width:28em; margin:22px 0 28px; }
.split .img{ position:relative; overflow:hidden; min-height:50svh; }
.split .img i{ position:absolute; inset:-8% 0; background:center/cover no-repeat; transform:translateY(calc(var(--pp,0) * -6%)) scale(1.06); }

/* green chemistry-style band */
.green{ position:relative; min-height:min(86svh, 820px); overflow:hidden; color:var(--inverse); display:grid; grid-template-columns:1fr 1fr; z-index:3; background:var(--green); }
.green .bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.green .txt{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:120px var(--gutter) 80px; }
.green .txt .h2{ max-width:7.5em; }
.green .txt p{ max-width:26em; margin:22px 0 28px; }
.labels{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(7, 1fr); align-content:center; gap:26px 8px; padding:80px var(--gutter); overflow:hidden; }
.labels span{ font-family:var(--sans); font-weight:600; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--inverse); opacity:0; transform:rotate(-24deg) translateY(6px); transition:opacity .5s, transform .6s; white-space:nowrap; }
.labels span.on{ opacity:.85; transform:rotate(-24deg); }

/* closing-the-loop gradient band */
.loop{ position:relative; z-index:4; padding:clamp(100px, 12vw, 170px) var(--gutter) 70px; text-align:center; background:linear-gradient(180deg, #e9a58f 0%, #f0c3a4 38%, #f6dcc6 72%, var(--bg) 100%); overflow:hidden; }
.loop .h2{ margin:0 auto; }
.loop > p{ margin:14px 0 0; }
.screen{ position:relative; margin:clamp(40px, 6vw, 80px) auto 0; width:min(1100px, 100%); aspect-ratio:16/9; border-radius:var(--r); background:#15110a; color:var(--inverse); overflow:hidden; transform:scale(calc(.86 + var(--sp,0) * .14)); transform-origin:50% 0; box-shadow:0 30px 80px -30px rgba(48,31,0,.5); text-align:left; }
.screen .play{ position:absolute; top:18px; right:18px; z-index:3; min-height:40px; }
.screen .title{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:30px; transition:opacity .6s; }
.screen .title .h1{ font-style:italic; font-weight:300; }
.screen .title .eyebrow{ opacity:.65; display:block; margin-bottom:14px; }
.screen.playing .title{ opacity:0; pointer-events:none; }
.convo{ position:absolute; inset:0; padding:clamp(20px, 4vw, 56px) clamp(18px, 6vw, 120px); display:flex; flex-direction:column; justify-content:flex-end; gap:12px; overflow:hidden; }
.msg{ max-width:min(560px, 86%); padding:12px 16px; border-radius:14px; font-size:clamp(.95rem, 1.4vw, 1.1rem); line-height:1.4; opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s; }
.msg.on{ opacity:1; transform:none; }
.msg small{ display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin-bottom:4px; }
.msg.me{ align-self:flex-end; background:var(--inverse); color:var(--dark); border-bottom-right-radius:4px; }
.msg.bot{ align-self:flex-start; background:#2b2419; border-bottom-left-radius:4px; }
.msg.bot b{ color:var(--mint); font-weight:400; }
@media (max-width:640px){ .screen{ aspect-ratio:3/4; } }

.marquee-wrap{ margin-top:clamp(50px, 7vw, 90px); text-align:left; }
.marquee-wrap .eyebrow{ color:var(--dark-2); }
.marquee{ overflow:hidden; margin:18px calc(-1 * var(--gutter)) 0; mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .run{ display:flex; gap:64px; width:max-content; animation:run 36s linear infinite; padding:10px 0; }
.marquee span{ font-family:var(--sans); font-weight:600; font-size:clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing:-.02em; color:rgba(48,31,0,.55); white-space:nowrap; }
.marquee span:nth-child(3n+2){ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:0; }
@keyframes run{ to{ transform:translateX(-50%); } }

/* cards */
.cards{ padding:clamp(80px, 10vw, 140px) var(--gutter); display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; background:var(--bg); position:relative; z-index:4; }
.card{ text-decoration:none; display:block; }
.card .ph{ aspect-ratio:3/4; border-radius:14px; overflow:hidden; position:relative; }
.card .ph i{ position:absolute; inset:0; background:center/cover no-repeat; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.card:hover .ph i{ transform:scale(1.06); }
.card .ph::after, .ind-item .ph::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(20,14,4,0) 45%, rgba(20,14,4,.55)); pointer-events:none; }
.card .ph b{ z-index:1; position:absolute; left:18px; bottom:16px; color:var(--inverse); font-family:var(--sans); font-weight:800; font-size:clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing:-.035em; }
.card .meta{ display:flex; gap:10px; margin:18px 0 8px; color:var(--dark-2); }
.card .h4{ max-width:16em; }
.cards-head{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } .card .ph{ aspect-ratio:4/3; } }

/* join-style twin */
.twin{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(420px, 60vw, 760px); position:relative; z-index:4; }
.twin > div{ position:relative; overflow:hidden; background:center/cover no-repeat; }
.twin .cta{ display:grid; place-items:center; text-align:center; color:var(--inverse); padding:60px var(--gutter); }
.twin .cta .h2{ margin-bottom:26px; }
.twin .quote{ display:flex; align-items:flex-end; padding:var(--gutter); color:var(--dark); }
.twin .quote p{ background:rgba(249,245,241,.88); backdrop-filter:blur(10px); padding:20px 22px; border-radius:14px; max-width:24em; margin:0; font-size:var(--fs-big); line-height:1.35; }
@media (max-width:860px){ .twin{ grid-template-columns:1fr; } .twin > div{ min-height:60svh; } }

/* footer */
.foot{ position:relative; z-index:4; background:var(--bg); padding:clamp(60px, 8vw, 110px) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px)); overflow:hidden; }
.wordmark{ pointer-events:none; font-size:calc(var(--wm, 1) * 1px); line-height:.9; letter-spacing:-.045em; margin:0 0 clamp(40px, 5vw, 70px) -.04em; white-space:nowrap; display:inline-flex; }
.wordmark span{ display:inline-block; transform:translateY(calc((1 - var(--fp,1)) * 60%)); opacity:calc(.1 + var(--fp,1)); transition:transform .1s linear; }
.foot-grid{ display:grid; grid-template-columns:auto auto 1fr; gap:14px 90px; align-items:start; }
.foot-grid nav{ display:flex; flex-direction:column; gap:10px; font-family:var(--sans); font-size:.9rem; }
.foot-grid nav a{ text-decoration:none; }
.foot-grid nav a:hover{ text-decoration:underline; }
.foot-grid .pill{ justify-self:end; }
.legal{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(50px, 7vw, 90px); padding-top:18px; border-top:1px solid var(--dark-3); font-family:var(--sans); font-size:.8rem; color:var(--grey); }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid .pill{ grid-column:1 / -1; justify-self:start; } }

@media (max-width:860px){
  .stack > .st:not(.hero){ position:relative; }
  .split, .green{ grid-template-columns:1fr; min-height:0; }
  .split .txt, .green .txt{ padding:80px var(--gutter) 60px; }
  .split .img{ min-height:62svh; order:-1; }
  .labels{ grid-template-columns:repeat(5, 1fr); padding:0 var(--gutter) 70px; }
}

/* ---------- Inner pages shared ---------- */
.band-hero{ position:relative; height:clamp(420px, 68svh, 720px); overflow:hidden; color:var(--inverse); }
.band-hero .bg{ position:absolute; inset:-6% 0; background:center/cover no-repeat; transform:translateY(calc(var(--hp,0) * 8%)); }
.band-hero .display{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:-.13em; margin:0; font-size:clamp(3.6rem, 12vw, 11rem); font-weight:400; line-height:1; letter-spacing:-.04em; white-space:nowrap; }
.band-hero .display .w{ display:inline-block; opacity:0; transform:translateY(40%); animation:wordUp 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.intro{ padding:clamp(70px, 9vw, 130px) var(--gutter); text-align:center; }
.intro p{ max-width:40em; margin:0 auto; font-size:var(--fs-big); line-height:1.4; }
.intro p .w{ color:var(--dark); opacity:.2; transition:opacity .4s; }
.intro p .w.on{ opacity:1; }
.sec{ padding:clamp(70px, 9vw, 130px) var(--gutter); }
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:end; margin-bottom:clamp(36px, 5vw, 60px); }
.sec-head p{ max-width:30em; margin:0; }
@media (max-width:860px){ .sec-head{ grid-template-columns:1fr; } }

/* numbered process list */
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--dark-3); }
.steps li{ border-bottom:1px solid var(--dark-3); }
.steps button{ width:100%; display:grid; grid-template-columns:3rem 1fr auto; align-items:center; gap:14px; padding:22px 0; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; min-height:44px; }
.steps .num{ font-size:var(--fs-h4); }
.steps .t{ font-size:clamp(1.6rem, 2.8vw, 2.4rem); text-align:right; letter-spacing:-.015em; }
.steps svg{ width:26px; height:26px; color:var(--green); }
.steps .d{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.steps .d > div{ overflow:hidden; }
.steps .d p{ margin:0 0 26px auto; max-width:34em; color:var(--dark-2); text-align:right; }
.steps li.open .d{ grid-template-rows:1fr; }

/* loop diagram */
.orbit-sec{ position:relative; overflow:hidden; background:linear-gradient(160deg, #e4a792, #efc9ae 45%, #d9d2b4 100%); color:var(--inverse); padding:clamp(80px, 10vw, 130px) var(--gutter); }
.orbit-sec .h2{ color:var(--dark); text-align:center; max-width:12em; margin:0 auto 10px; }
.orbit-sec > p{ color:var(--dark-2); text-align:center; max-width:30em; margin:0 auto; }
.orbit{ color:var(--dark); position:relative; width:min(640px, 92vw); aspect-ratio:1; margin:clamp(40px, 6vw, 70px) auto 0; }
.orbit .ring{ position:absolute; inset:18%; border:1.5px solid rgba(48,31,0,.45); border-radius:50%; }
.orbit .dot{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 7px rgba(42,75,34,.18); transform:rotate(var(--oa, 0deg)) translateY(calc(-1 * min(640px, 92vw) * .32)); }
.orbit .core{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.orbit .core strong{ font-family:var(--sans); font-weight:800; letter-spacing:.3em; font-size:.95rem; }
.orbit .core > div{ max-width:34%; }
.orbit .core small{ display:block; font-family:var(--serif); font-size:1.05rem; letter-spacing:0; font-weight:400; opacity:.85; margin-top:4px; }
.orbit .node{ position:absolute; width:120px; margin:-30px 0 0 -60px; text-align:center; font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; line-height:1.3; transition:opacity .4s, transform .4s; opacity:.55; }
.orbit .node svg{ width:30px; height:30px; display:block; margin:0 auto 6px; }
.orbit .node.on{ opacity:1; transform:scale(1.08); }
@media (max-width:560px){ .orbit .node{ width:84px; margin-left:-42px; font-size:.56rem; } .orbit .node svg{ width:24px; height:24px; } }

/* rising capability cards */
.cap{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:30px; align-items:end; }
.cap-bars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:end; height:clamp(380px, 46vw, 560px); }
.cap-bars div{ border-radius:12px; padding:16px 18px; color:var(--inverse); height:calc(var(--hgt) * var(--cp, 0)); min-height:74px; transition:height .2s linear; overflow:hidden; display:flex; flex-direction:column; }
.cap-bars div b{ font-weight:400; font-size:clamp(1.4rem, 2.4vw, 2rem); line-height:1.1; letter-spacing:-.015em; }
.cap-bars div span{ margin-top:auto; font-size:.95rem; opacity:.85; }
.cap-bars div:nth-child(1){ --hgt:44%; background:linear-gradient(180deg, #2f5c3f, #1d3a22); }
.cap-bars div:nth-child(2){ --hgt:66%; background:linear-gradient(180deg, #d98c63, #b5552f); }
.cap-bars div:nth-child(3){ --hgt:100%; background:linear-gradient(180deg, #f07a6a, #c8303a); }
@media (max-width:860px){ .cap{ grid-template-columns:1fr; } .cap-bars{ height:420px; } }

/* integrations ledger */
.ledger{ border-top:1px solid var(--dark-3); }
.ledger > div{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:24px; padding:22px 0; border-bottom:1px solid var(--dark-3); }
.ledger p{ margin:0; color:var(--dark-2); max-width:34em; }
@media (max-width:700px){ .ledger > div{ grid-template-columns:1fr; gap:6px; } }

/* green CTA band */
.cta-band{ background:var(--green); color:var(--inverse); padding:clamp(70px, 9vw, 120px) var(--gutter); display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.cta-band .h2{ max-width:12em; }

/* Industries */
.ind-wrap{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(30px, 5vw, 80px); padding:clamp(130px, 14vw, 190px) var(--gutter) clamp(70px, 9vw, 120px); }
.ind-side{ position:sticky; top:110px; align-self:start; }
.ind-side .h1{ margin-bottom:20px; }
.ind-side nav{ display:flex; flex-direction:column; margin-top:28px; border-top:1px solid var(--dark-3); }
.ind-side nav a{ text-decoration:none; padding:11px 0; border-bottom:1px solid var(--dark-3); display:flex; justify-content:space-between; color:var(--dark-2); transition:color .3s, padding .3s; }
.ind-side nav a.on{ color:var(--dark); padding-left:10px; }
.ind-side nav a.on::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green); align-self:center; }
.ind-item{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; padding-bottom:clamp(50px, 7vw, 90px); margin-bottom:clamp(50px, 7vw, 90px); border-bottom:1px solid var(--dark-3); scroll-margin-top:100px; }
.ind-item:last-child{ border-bottom:0; margin-bottom:0; }
.ind-item .ph{ border-radius:14px; background:center/cover no-repeat; min-height:340px; position:relative; }
.ind-item .ph b{ z-index:1; position:absolute; left:16px; bottom:14px; color:var(--inverse); font-family:var(--sans); font-weight:800; letter-spacing:-.03em; font-size:1.4rem; }
.ind-item .h3{ margin:8px 0 16px; }
.ind-item ul{ list-style:none; margin:0 0 20px; padding:0; }
.ind-item li{ padding:10px 0; border-top:1px solid var(--dark-3); display:flex; justify-content:space-between; gap:14px; font-size:1.02rem; }
.ind-item li span{ font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dark-2); align-self:center; white-space:nowrap; }
.ind-item .first{ background:var(--mint); padding:14px 16px; border-radius:12px; font-size:1rem; }
.ind-item .first .eyebrow{ display:block; color:var(--green); margin-bottom:4px; }
@media (max-width:980px){ .ind-wrap{ grid-template-columns:1fr; } .ind-side{ position:static; } .ind-side nav{ display:none; } .ind-item{ grid-template-columns:1fr; } .ind-item .ph{ min-height:240px; } }

/* Security */
.belief{ position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; padding:130px var(--gutter) 90px; color:var(--inverse); overflow:hidden; background:linear-gradient(165deg, #d96f69 0%, #ea9a82 45%, #f3c3a2 100%); }
.belief::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size:clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px); mask:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%); -webkit-mask:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%); transform:translateY(calc(var(--hp,0) * 60px)); }
.belief .h1{ position:relative; max-width:14em; }
.belief .h1 .w{ display:inline-block; opacity:0; transform:translateY(.35em); animation:wordUp 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.facts{ padding:clamp(70px, 9vw, 130px) var(--gutter); background:linear-gradient(180deg, #f3c3a2 0%, #f6dcc6 30%, var(--bg) 80%); }
.fact{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px; align-items:end; padding:22px 0 18px; border-bottom:1px solid var(--dark-3); }
.fact:first-child{ border-top:1px solid var(--dark-3); }
.fact p{ margin:0; max-width:30em; }
.fact p b{ font-weight:400; display:block; font-size:var(--fs-h4); margin-bottom:6px; color:var(--dark); }
.fact p span{ color:var(--dark-2); }
.fact .n{ font-size:clamp(3.2rem, 8vw, 7rem); line-height:.9; letter-spacing:-.04em; text-align:right; }
@media (max-width:640px){ .fact{ grid-template-columns:1fr; } .fact .n{ text-align:left; order:-1; } }

/* Plans */
.plans{ border-top:1px solid var(--dark-3); }
.plan{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap:30px; padding:34px 0; border-bottom:1px solid var(--dark-3); align-items:start; }
.plan ul{ list-style:none; margin:0; padding:0; }
.plan li{ padding:8px 0; border-top:1px solid var(--dark-3); }
.plan li:first-child{ border-top:0; padding-top:0; }
.plan .for{ color:var(--dark-2); margin-top:10px; }
.plan .act{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.plan.feature{ background:var(--mint); margin:0 calc(-1 * var(--gutter)); padding:34px var(--gutter); border-radius:0; }
@media (max-width:860px){ .plan{ grid-template-columns:1fr; gap:16px; } }
.faq{ border-top:1px solid var(--dark-3); }
.faq details{ border-bottom:1px solid var(--dark-3); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:20px 0; font-size:var(--fs-h4); line-height:1.2; min-height:44px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:0 0 30px; height:30px; border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 9v12M9 15h12' stroke='%23f9f5f1' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat; transition:transform .35s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--dark-2); max-width:38em; margin:0; padding-bottom:22px; }

/* Contact */
.contact{ min-height:100svh; background:linear-gradient(170deg, #d8d6d2 0%, #e6dfd8 55%, #efd9cc 100%); padding:clamp(130px, 14vw, 190px) var(--gutter) clamp(70px, 9vw, 120px); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(30px, 6vw, 100px); align-items:start; }
.contact .h2{ margin-bottom:16px; }
.contact aside p{ max-width:26em; color:var(--dark-2); }
.contact aside ol{ margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--dark-3); }
.contact aside li{ display:grid; grid-template-columns:2rem 1fr; padding:14px 0; border-bottom:1px solid var(--dark-3); font-size:1rem; }
.form{ display:grid; gap:10px; }
.form .two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field{ position:relative; }
.field input, .field select, .field textarea{ width:100%; font:inherit; font-size:1rem; color:var(--dark); background:rgba(255,255,255,.28); border:1px solid rgba(48,31,0,.35); border-radius:6px; padding:12px 14px; min-height:48px; transition:border-color .3s, background .3s; }
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(48,31,0,.55); }
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23301f00' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); background:rgba(255,255,255,.55); }
.field .err{ display:block; font-family:var(--sans); font-size:.75rem; color:#9a2a1e; min-height:1.1em; margin-top:3px; }
.field.bad input, .field.bad select, .field.bad textarea{ border-color:#9a2a1e; }
.form .submit{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; }
.form .submit small{ color:var(--dark-2); font-size:.9rem; max-width:24em; }
.sent{ display:none; background:rgba(255,255,255,.5); padding:clamp(24px, 3vw, 40px); border-radius:14px; }
.sent.show{ display:block; animation:wordUp .6s; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } .form .two{ grid-template-columns:1fr; } }


/* ---------- Hero: cursor-reactive background ---------- */
.hero .bg{ transform:translate3d(calc(var(--mx,0) * -22px), calc(var(--my,0) * -16px), 0) scale(calc(1.1 + var(--hp,0) * .08)); transition:transform .1s linear; }
.hero .flow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero .glow{ position:absolute; z-index:0; width:60vmax; height:60vmax; left:0; top:0; margin:-30vmax 0 0 -30vmax; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,236,214,.42) 0%, rgba(255,214,186,.16) 35%, rgba(255,214,186,0) 65%); transform:translate3d(var(--gx,50vw), var(--gy,50vh), 0); mix-blend-mode:soft-light; }
.hero .inner{ transform:translate3d(calc(var(--mx,0) * 8px), calc(var(--my,0) * 6px + var(--hp,0) * -9vh), 0) scale(calc(1 - var(--hp,0) * .1)); opacity:calc(1 - var(--hp,0) * 1.5); filter:blur(calc(var(--hp,0) * 5px)); will-change:transform, opacity; }
.hero{ clip-path:inset(calc(var(--hp,0) * 2.5%) calc(var(--hp,0) * 3%) round calc(var(--hp,0) * 30px)); }
.hero .scroll-hint{ opacity:calc(.8 - var(--hp,0) * 3); }
.hero .scroll-hint::after{ content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(currentColor, transparent); animation:hint 2s ease-in-out infinite; transform-origin:top; }
@keyframes hint{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }

/* ---------- Scroll hand-off between stacked slides ---------- */
/* (stacked-slide hand-off removed: the home page now scrolls as ordinary panels) */
.split .img i{ clip-path:inset(calc((1 - var(--sr,1)) * 22%) calc((1 - var(--sr,1)) * 14%) round calc((1 - var(--sr,1)) * 28px)); }
.split .txt{ transform:translateY(calc((1 - var(--sr,1)) * 60px)); }



/* ---------- Animated imagery ---------- */
canvas.scene{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease; }
canvas.scene.live{ opacity:1; }
.cta-wide{ overflow:hidden; background-size:118% auto; animation:drift 26s ease-in-out infinite alternate; }
@keyframes drift{ 0%{ background-position:30% 40%; background-size:118% auto; } 50%{ background-position:70% 60%; background-size:128% auto; } 100%{ background-position:45% 30%; background-size:120% auto; } }
@media (max-width:860px){ .cta-wide{ background-size:auto 130%; animation-name:drift-m; } @keyframes drift-m{ 0%{ background-position:30% 50%; } 100%{ background-position:70% 50%; } } }
.card .ph i{ background-size:112% auto; animation:pan 18s ease-in-out infinite alternate; }
.card:nth-child(3) .ph i{ animation-delay:-6s; } .card:nth-child(4) .ph i{ animation-delay:-12s; }
@keyframes pan{ 0%{ background-position:40% 35%; } 100%{ background-position:60% 65%; } }
.ind-item .ph{ background-size:112% auto; animation:pan 20s ease-in-out infinite alternate; }
@media (max-width:860px){ .card .ph i, .ind-item .ph{ background-size:cover; } }

/* ---------- Client dashboard feature ---------- */
.dash{ position:relative; z-index:4; background:var(--bg); padding:clamp(80px, 10vw, 140px) var(--gutter); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(30px, 5vw, 80px); align-items:center; }
.dash .h2{ max-width:9em; }
.dash p.big{ max-width:26em; margin:22px 0 28px; }
.dash-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--dark-3); }
.dash-list li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:18px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--dark-3); }
.dash-list b{ font-weight:400; font-size:var(--fs-h4); line-height:1.15; }
.dash-list span{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--dark-2); text-align:right; }
.dash-list li i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:12px; vertical-align:middle; box-shadow:0 0 0 4px rgba(42,75,34,.14); }
@media (max-width:860px){ .dash{ grid-template-columns:1fr; } }

/* ---------- Story stack (from V1) ---------- */
.story{ position:relative; background:var(--bg); z-index:4; padding:clamp(80px, 10vw, 140px) 0; }
.story .sticky{ position:static; }
.story-head{ padding:0 var(--gutter); margin-bottom:clamp(18px, 3vh, 34px); display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.story-head .h3{ max-width:12em; }
.story .track{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; padding:0 var(--gutter); }
.panel{ min-width:0; min-height:520px; padding:22px 24px 24px; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.panel .h3{ margin-top:18px; font-size:clamp(1.9rem, 2.6vw, 2.5rem); }
.panel .pfoot{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.55; margin:0; }
.panel .tag{ align-self:flex-start; font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:6px; background:rgba(255,255,255,.16); }
.panel.p-green{ background:var(--green); color:var(--inverse); }
.panel.p-dark{ background:#2b2419; color:var(--inverse); }
.panel.p-mint{ background:var(--mint); color:var(--dark); }
.panel.p-paper{ background:#fff; color:var(--dark); box-shadow:inset 0 0 0 1px var(--dark-3); }
.panel.p-mint .tag, .panel.p-paper .tag{ background:rgba(48,31,0,.07); }
.panel.p-green .pfoot{ font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:-.01em; font-size:clamp(1.5rem, 2.2vw, 2rem); line-height:1.2; }
.pbars{ display:flex; gap:6px; margin-top:16px; }
.pbars i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.pbars i::after{ content:""; position:absolute; inset:0; background:var(--mint); transform:scaleX(var(--f,0)); transform-origin:left; }
.hatch{ position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 22px, rgba(42,75,34,.12) 22px 23px); pointer-events:none; }
.panel.p-mint > *{ position:relative; }
.strata-viz{ display:flex; flex-direction:column; gap:9px; margin:auto 0 18px; }
.strata-viz div{ display:grid; gap:5px; }
.strata-viz span{ font-family:var(--sans); font-weight:600; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:rgba(249,245,241,.7); }
.strata-viz b{ display:block; height:12px; border-radius:3px; background:rgba(249,245,241,.85); transform-origin:left; transform:scaleX(var(--w)); }
.strata-viz .yours b{ background:var(--mint); }
.strata-viz .yours span{ color:var(--mint); }
.p-dark .pfoot{ color:rgba(249,245,241,.7); }
.pinbox{ list-style:none; margin:auto 0 0; padding:0; font-size:.95rem; }
.pinbox li{ display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--dark-3); }
.pinbox li s{ text-decoration:none; transition:color .4s; }
.pinbox li.done s{ text-decoration:line-through; text-decoration-thickness:1px; color:rgba(48,31,0,.64); }
.pinbox li em{ font-style:normal; font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--dark-2); align-self:center; }
.pinbox li.done em{ color:var(--green); }
.pinbox li.you em{ color:#b5552f; }
.cta-wide{ position:relative; z-index:4; min-height:clamp(380px, 52vw, 640px); display:grid; place-items:center; text-align:center; color:var(--inverse); padding:70px var(--gutter); background:center/cover no-repeat; }
.cta-wide .h2{ margin-bottom:26px; }
@media (max-width:1100px){ .story .track{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .story .track{ grid-template-columns:minmax(0, 1fr); } .panel{ min-height:440px; } }
@media (max-width:860px){ .story-head{ flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion: reduce){ .hero .inner{ opacity:1; filter:none; } .hero .glow, .hero .flow{ display:none; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv, .hero .h1 .w, .band-hero .display .w, .belief .h1 .w{ opacity:1 !important; transform:none !important; }
  .marquee .run{ animation:none; }
}

/* ================= Rebuild additions ================= */
.skip{ position:fixed; left:-999px; top:10px; z-index:99; }
.skip:focus{ left:10px; }

/* Contact form: privacy line, honeypot, send state */
.form .submit small a{ color:inherit; }
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.form-err{ margin:4px 0 0; font-family:var(--sans); font-size:.85rem; color:#9a2a1e; }
.form-err a{ color:inherit; }
.form button[disabled]{ opacity:.6; cursor:progress; }

/* Footer legal links */
.legal-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.legal-links a, .legal-links button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:none; }
.legal-links a:hover, .legal-links button:hover{ text-decoration:underline; }

/* ---------- Cookie consent ---------- */
.cc{ position:fixed; z-index:90; left:var(--gutter); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:min(460px, calc(100vw - 2 * var(--gutter))); background:var(--bg); color:var(--dark); border-radius:18px; box-shadow:0 30px 70px -20px rgba(48,31,0,.45), 0 0 0 1px var(--dark-3); transform:translateY(20px); opacity:0; visibility:hidden; transition:opacity .35s, transform .35s, visibility .35s; }
.cc.on{ opacity:1; transform:none; visibility:visible; }
.cc-in{ padding:22px 22px 18px; }
.cc-t{ font-family:var(--serif); font-weight:400; font-size:1.45rem; letter-spacing:-.01em; margin:0 0 8px; line-height:1.15; }
.cc-p{ font-size:.95rem; line-height:1.45; color:var(--dark-2); margin:0 0 14px; }
.cc-p a{ color:var(--dark); }
.cc-panel{ border-top:1px solid var(--dark-3); margin:0 0 14px; }
.cc-row{ display:grid; grid-template-columns:22px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--dark-3); cursor:pointer; }
.cc-row input{ width:18px; height:18px; margin:3px 0 0; accent-color:var(--green); }
.cc-row b{ display:block; font-family:var(--sans); font-weight:600; font-size:.88rem; }
.cc-row small{ display:block; font-size:.85rem; color:var(--dark-2); line-height:1.4; margin-top:2px; }
.cc-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cc-b{ min-height:44px; border-radius:999px; border:0; background:var(--green); color:var(--inverse); font-family:var(--sans); font-weight:500; font-size:.88rem; cursor:pointer; padding:0 16px; }
.cc-b:hover{ background:#1f3a19; }
.cc-b.cc-ghost{ background:transparent; color:var(--dark); box-shadow:inset 0 0 0 1px var(--dark-3); }
.cc-b.cc-ghost:hover{ box-shadow:inset 0 0 0 1px var(--dark); }
.cc-b[hidden]{ display:none; }
/* (phones: see the cookie banner rules under "Mobile fixes" at the end) */

/* ---------- Legal pages ---------- */
.legal-page{ padding:clamp(120px, 13vw, 170px) var(--gutter) clamp(60px, 8vw, 100px); display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(30px, 5vw, 80px); }
.legal-page aside{ position:sticky; top:110px; align-self:start; }
.legal-page aside .h1{ margin-bottom:18px; }
.legal-page aside nav{ display:flex; flex-direction:column; margin-top:26px; border-top:1px solid var(--dark-3); }
.legal-page aside nav a{ text-decoration:none; padding:10px 0; border-bottom:1px solid var(--dark-3); color:var(--dark-2); font-size:.98rem; }
.legal-page aside nav a:hover{ color:var(--dark); }
.legal-body{ max-width:44em; }
.legal-body h2{ font-weight:400; font-size:clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing:-.015em; line-height:1.15; margin:46px 0 14px; scroll-margin-top:110px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin:26px 0 8px; }
.legal-body p, .legal-body li{ color:rgba(48,31,0,.82); }
.legal-body ul{ padding-left:1.2em; margin:0 0 1em; }
.legal-body li{ margin-bottom:6px; }
.legal-body table{ width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:.95rem; }
.legal-body th{ text-align:left; font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dark-2); padding:10px 12px 10px 0; border-bottom:1px solid var(--dark-3); }
.legal-body td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--dark-3); vertical-align:top; }
.legal-body .tbl{ overflow-x:auto; }
.legal-body .note{ background:var(--mint); padding:16px 18px; border-radius:12px; color:var(--dark); }
.legal-body .updated{ font-family:var(--sans); font-size:.8rem; color:var(--grey); }
.legal-page .pill{ margin-top:10px; }
@media (max-width:900px){ .legal-page{ grid-template-columns:minmax(0,1fr); } .legal-page aside{ position:static; } }

.foot.simple{ padding-top:40px; }
.nav .back{ font-size:.95rem; text-decoration:none; padding:10px 12px; }

/* utilities generated from former inline styles */
.u1{ vertical-align:-2px;margin-right:6px; }
.u2{ margin-top:14px; }
.u3{ margin:0; }
.u4{ margin-top:20px;max-width:24em; }
.u5{ padding-top:0; }
.u6{ margin-bottom:40px; }
.u7{ padding-top:clamp(130px, 14vw, 190px); }
.u8{ color:var(--green); }
.u9{ margin:10px 0 12px; }

/* Bigger tap targets for footer links on touch screens (WCAG 2.5.8 / Google mobile guidance) */
@media (pointer:coarse){
  .foot-grid nav{ gap:0; }
  .foot-grid nav a{ padding-block:11px; }
  .legal-links{ gap:0 22px; }
  .legal-links a, .legal-links button{ padding-block:12px; }
}

/* Legal and 404 pages have no menu button: keep their two header links visible on phones */
@media (max-width:900px){
  .nav.simple .links{ position:static; inset:auto; z-index:auto; flex-direction:row; align-items:center; justify-content:flex-end; padding:0; background:none; opacity:1; visibility:visible; }
  .nav.simple .links a{ font-size:.95rem; padding:10px 8px; letter-spacing:0; }
  .nav.simple .links .back{ display:none; }
  .nav.simple .links .pill{ margin:0; font-size:.875rem; min-height:40px; padding:0 18px; }
}

/* "Get your week back": the tree-canopy scene (leaves moving over a sunlit floor) replaces the moss photo */
.cta-wide.canopy{ color:var(--dark); animation:none; }
.cta-wide.canopy > div{ position:relative; z-index:1; }
.cta-wide.canopy .h2{ text-shadow:0 1px 18px rgba(249,245,241,.65); }

/* Client dashboard section: real screenshot in a quiet browser frame */
.dash{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
.dash .dash-list{ margin:6px 0 30px; }
.dash .dash-list b{ font-size:1.25rem; }
.dash-shot{ margin:0; min-width:0; }
.dash-shot .frame{ border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 40px 80px -40px rgba(48,31,0,.35), 0 0 0 1px var(--dark-3); transform:perspective(1600px) rotateY(-4deg); transform-origin:left center; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.dash-shot:hover .frame{ transform:none; }
.dash-shot .bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:#f1ece6; border-bottom:1px solid var(--dark-3); }
.dash-shot .bar i{ width:10px; height:10px; border-radius:50%; background:rgba(48,31,0,.16); }
.dash-shot .bar em{ font-style:normal; font-family:var(--sans); font-size:.75rem; color:var(--dark-2); margin-left:10px; background:var(--bg); padding:4px 12px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-shot img{ display:block; width:100%; height:auto; }
.dash-shot figcaption{ font-family:var(--sans); font-size:.8rem; color:var(--grey); margin-top:14px; }
@media (max-width:860px){ .dash-shot .frame{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .dash-shot .frame{ transform:none; transition:none; } }

/* "Quiet automation" panel: the fluted-glass scene carries the Stratify wordmark, so the floating labels stand down here */
#green .labels{ visibility:hidden; }

/* "Get your week back": shallow water with sunlight caustics (WebGL scene) */
.cta-wide.water{ color:var(--inverse); animation:none; }
.cta-wide.water > div{ position:relative; z-index:1; }
.cta-wide.water .h2{ text-shadow:0 2px 28px rgba(8,40,42,.55); }
.cta-wide.water canvas.scene{ image-rendering:auto; }

/* ---------- Static explainer panels on the home page ---------- */
.about, .offload, .steps3, .trust{ position:relative; z-index:4; background:var(--bg); padding:clamp(80px, 10vw, 140px) var(--gutter); }
.about{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(30px, 5vw, 80px); border-top:1px solid var(--dark-3); }
.about .h2{ max-width:8em; margin-top:16px; }
.about-body .big{ max-width:30em; margin:0 0 34px; }
.about-points, .trust-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--dark-3); }
.about-points li, .trust-list li{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:20px; padding:20px 0; border-bottom:1px solid var(--dark-3); }
.about-points b, .trust-list b{ font-weight:400; font-size:var(--fs-h4); line-height:1.15; }
.about-points span, .trust-list span{ color:var(--dark-2); font-size:1.02rem; }
.sec-intro{ display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(36px, 5vw, 60px); }
.sec-intro .h2{ max-width:12em; }
.offload{ background:#f1ece6; }
.offload-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.offload-grid article{ background:var(--bg); border-radius:var(--r); padding:26px 26px 30px; display:flex; flex-direction:column; gap:10px; min-height:220px; }
.offload-grid .agent{ align-self:flex-start; font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:var(--mint); padding:5px 9px; border-radius:6px; }
.offload-grid .h4{ margin:auto 0 0; font-weight:400; }
.offload-grid p{ margin:0; color:var(--dark-2); font-size:1.02rem; }
.steps3-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 40px); }
.steps3-list li{ border-top:2px solid var(--dark); padding-top:22px; display:flex; flex-direction:column; gap:12px; }
.steps3-list .n{ font-family:var(--sans); font-weight:800; font-size:.9rem; letter-spacing:.04em; color:var(--green); }
.steps3-list .h4{ margin:0; font-weight:400; }
.steps3-list p{ margin:0; color:var(--dark-2); max-width:24em; }
.trust{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(30px, 5vw, 80px); align-items:start; background:#f1ece6; }
.trust .h2{ max-width:8em; margin:16px 0 0; }
.trust p.big{ max-width:24em; margin:22px 0 28px; }
@media (max-width:960px){ .offload-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:860px){
  .about, .trust{ grid-template-columns:minmax(0, 1fr); }
  .steps3-list{ grid-template-columns:minmax(0, 1fr); }
  .about-points li, .trust-list li{ grid-template-columns:minmax(0, 1fr); gap:6px; }
}
@media (max-width:560px){ .offload-grid{ grid-template-columns:minmax(0, 1fr); } .offload-grid article{ min-height:0; } }

/* =====================================================================
   October 2026 home page revision
   ===================================================================== */
/* Hero: half height, Ember gradient from the brand deck, dark type */
.hero{ height:52svh; min-height:400px; max-height:620px; color:var(--dark); padding-top:64px; }
.hero .bg{ background:linear-gradient(165deg, #d96f69 0%, #ea9a82 50%, #f3c3a2 100%); animation:none; }
.hero::after{ background:linear-gradient(180deg, rgba(249,245,241,0) 60%, rgba(249,245,241,.18)); }
.hero .h1{ text-shadow:none; font-size:clamp(2.5rem, 5.4vw, 4.4rem); }
.hero .sub{ margin-top:16px; }
.hero .row-cta{ margin-top:24px; }
.hero .pill.ghost:hover{ background:rgba(28,43,33,.06); }
.hero .glow{ mix-blend-mode:normal; opacity:.5; }

/* About STRATIFY: the company, explained in full */
.company{ position:relative; z-index:4; background:var(--bg); padding:clamp(80px, 10vw, 140px) var(--gutter); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(30px, 5vw, 80px); }
.company-head{ align-self:start; }
.company-head .h2{ max-width:9em; margin:16px 0 24px; }
.company-head .big{ max-width:28em; margin:0 0 18px; }
.company-head p:not(.big){ color:var(--dark-2); max-width:30em; margin:0 0 28px; }
.company-list{ margin:0; border-top:1px solid var(--dark); }
.company-list > div{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:20px; padding:24px 0; border-bottom:1px solid var(--dark-3); }
.company-list dt{ font-size:var(--fs-h4); line-height:1.15; display:flex; flex-direction:column; gap:8px; }
.company-list dt .n{ font-family:var(--sans); font-weight:800; font-size:.8rem; letter-spacing:.06em; color:var(--green); }
.company-list dd{ margin:0; color:var(--dark-2); font-size:1.05rem; }
.company-facts{ grid-column:1 / -1; list-style:none; margin:clamp(20px, 3vw, 40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.company-facts li{ border-radius:var(--r); padding:24px 22px; display:flex; flex-direction:column; gap:18px; background:#f1ece6; }
.company-facts li:nth-child(2){ background:var(--mint); }
.company-facts li:nth-child(3){ background:linear-gradient(165deg, #d96f69, #ea9a82 50%, #f3c3a2); }
.company-facts li:nth-child(4){ background:var(--dark); color:var(--inverse); }
.company-facts b{ font-weight:300; font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1; letter-spacing:-.03em; }
.company-facts span{ font-family:var(--sans); font-size:.9rem; line-height:1.35; }
@media (max-width:960px){ .company{ grid-template-columns:minmax(0, 1fr); } .company-head{ position:static; } .company-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:600px){ .company-list > div{ grid-template-columns:minmax(0, 1fr); gap:8px; } }

/* Quiet automation: sunrise light through fluted glass, dark type */
.green{ background:#f0c3a4; color:var(--dark); }
.green .txt p{ color:var(--dark-2); }

/* "We're clearing your desk": a small part of the dashboard section */
.desk{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(24px, 4vw, 60px); align-items:center; margin-top:clamp(30px, 4vw, 50px); padding:clamp(22px, 3vw, 36px); border-radius:24px; background:linear-gradient(180deg, #e9a58f 0%, #f0c3a4 45%, #f6dcc6 100%); }
.desk-txt .h3{ margin:12px 0 14px; }
.desk-txt p{ margin:0; max-width:24em; color:rgba(28,43,33,.78); }
.desk .screen{ margin:0; width:100%; aspect-ratio:16/10; transform:none; box-shadow:0 24px 50px -30px rgba(28,43,33,.6); background:#0f1712; }
.desk .screen .title .h1{ font-size:clamp(1.8rem, 3.2vw, 2.8rem); }
.desk .convo{ padding:clamp(16px, 3vw, 36px) clamp(14px, 4vw, 48px); gap:9px; }
.desk .msg{ font-size:clamp(.88rem, 1.1vw, 1rem); padding:10px 14px; }
.desk .msg.bot{ background:#22352a; }
.desk .screen .play{ top:12px; right:12px; min-height:36px; font-size:.82rem; }
@media (max-width:860px){ .desk{ grid-template-columns:minmax(0, 1fr); } .desk .screen{ aspect-ratio:3/4; } }

/* ---------- Who it's for (revamped) ---------- */
.who-hero{ padding:clamp(130px, 14vw, 190px) var(--gutter) clamp(50px, 6vw, 80px); background:linear-gradient(180deg, #f6dcc6 0%, var(--bg) 100%); }
.who-hero .h1{ max-width:12em; margin:16px 0 22px; }
.who-hero .big{ max-width:32em; margin:0; }
.who-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.who-chips a{ font-family:var(--sans); font-size:.88rem; text-decoration:none; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px var(--dark-3); transition:background .25s, box-shadow .25s; }
.who-chips a:hover{ background:#fff; box-shadow:inset 0 0 0 1px var(--dark); }
.who-signs, .who-stages, .who-fit{ padding:clamp(70px, 9vw, 120px) var(--gutter); }
.who-signs{ background:var(--bg); }
.signs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.signs li{ display:flex; gap:14px; align-items:flex-start; padding:22px; border-radius:var(--r); background:#f1ece6; font-size:1.2rem; line-height:1.3; }
.signs li i{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--green); position:relative; margin-top:2px; }
.signs li i::after{ content:""; position:absolute; left:7px; top:6px; width:9px; height:5px; border-left:2px solid var(--mint); border-bottom:2px solid var(--mint); transform:rotate(-45deg); }
.signs-foot{ margin:28px 0 0; max-width:30em; }
@media (max-width:900px){ .signs{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .signs{ grid-template-columns:minmax(0, 1fr); } }
.who-stages{ background:#f1ece6; }
.stage-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.stage-card{ background:var(--bg); border-radius:24px; overflow:hidden; display:flex; flex-direction:column; scroll-margin-top:100px; }
.stage-card .ph{ position:relative; min-height:200px; background:var(--dark) center/cover no-repeat; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:20px 24px; color:var(--inverse); }
.stage-card .ph::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,18,0) 25%, rgba(15,23,18,.7)); }
.stage-card .ph > *{ position:relative; }
.stage-card .ph b{ font-family:var(--sans); font-weight:800; font-size:1.35rem; letter-spacing:-.03em; }
.stage-body{ padding:26px 24px 28px; display:flex; flex-direction:column; gap:16px; flex:1; }
.stage-body .h3{ font-size:clamp(1.6rem, 2.4vw, 2.1rem); }
.stage-body ul{ list-style:none; margin:0; padding:0; flex:1; }
.stage-body li{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--dark-3); font-size:1.02rem; }
.stage-body li span{ font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:var(--mint); padding:4px 8px; border-radius:6px; align-self:center; white-space:nowrap; }
.stage-body .first{ margin:0; padding:16px 18px; border-radius:14px; background:linear-gradient(165deg, #ea9a82, #f3c3a2); font-size:1rem; }
.stage-body .first .eyebrow{ display:block; margin-bottom:6px; }
@media (max-width:900px){ .stage-grid{ grid-template-columns:minmax(0, 1fr); } }
.who-fit{ background:var(--bg); }
.fit-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.fit{ border-radius:24px; padding:clamp(24px, 3vw, 36px); }
.fit.yes{ background:var(--green); color:var(--inverse); }
.fit.no{ background:#f1ece6; }
.fit .h4{ margin-bottom:16px; }
.fit ul{ list-style:none; margin:0; padding:0; }
.fit li{ padding:12px 0 12px 28px; border-top:1px solid rgba(28,43,33,.14); position:relative; }
.fit.yes li{ border-color:rgba(249,245,241,.2); }
.fit li::before{ position:absolute; left:0; top:11px; font-family:var(--sans); font-weight:800; }
.fit.yes li::before{ content:"✓"; color:var(--mint); }
.fit.no li::before{ content:"–"; color:var(--dark-2); }
@media (max-width:760px){ .fit-grid{ grid-template-columns:minmax(0, 1fr); } }

/* =====================================================================
   October 2026 fixes: taller hero, desk demo inside quiet automation
   ===================================================================== */
.hero{ height:68svh; min-height:480px; max-height:780px; }
/* "We're clearing your desk" sits beside the quiet automation copy */
.green .desk{ grid-column:auto; position:relative; z-index:1; align-self:center; margin:clamp(40px, 6vw, 90px) var(--gutter) clamp(40px, 6vw, 90px) 0; display:flex; flex-direction:column; gap:18px; background:rgba(249,245,241,.62); border:1px solid rgba(255,255,255,.55); }
@supports (backdrop-filter:blur(6px)){ .green .desk{ background:rgba(249,245,241,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } }
.green .desk-txt .h3{ margin:8px 0 10px; }
.green .desk-txt p{ max-width:30em; }
.green .desk .screen{ aspect-ratio:4/3; }
@media (max-width:860px){ .green .desk{ margin:0 var(--gutter) 60px; } .green .desk .screen{ aspect-ratio:3/4; } }
/* the tilted dashboard screenshot no longer adds a sliver of sideways scroll on wide screens */
.dash{ overflow-x:clip; }
/* how-it-works orbit: keep the outer agent labels on screen on very small phones */
@media (max-width:380px){ .orbit{ width:min(300px, 86vw) !important; } .orbit .node{ width:74px; margin-left:-37px; font-size:.5rem; } }
.green .labels{ display:none; }
/* Dashboard section: Sunrise gradient from the brand deck */
.dash{ background:linear-gradient(180deg, #e9a58f 0%, #f0c3a4 40%, #f6dcc6 75%, #f9f5f1 100%); }
.dash .muted, .dash .eyebrow.muted, .dash-list span{ color:rgba(28,43,33,.78); }
.dash-list, .dash-list li{ border-color:rgba(28,43,33,.16); }
.dash-shot figcaption{ color:rgba(28,43,33,.7); }
/* three facts now (the "1 day" card was removed) */
.company-facts{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:960px){ .company-facts{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:600px){ .company-facts{ grid-template-columns:minmax(0, 1fr); } }
/* How it works: a shorter green band (fluted glass, green colourway) */
.band-hero{ height:clamp(280px, 42svh, 440px); }
.band-hero .display{ font-size:clamp(3rem, 9vw, 8rem); }
.desk .convo{ padding-top:clamp(56px, 6vw, 64px); }   /* keep the first message clear of the Pause button */

/* ---------- Mobile fixes (Oct 2026) ---------- */
/* The two-column .dash rule above (client dashboard section) came after its phone breakpoint and won,
   squeezing the text into one-word lines on phones. Stack it again below 860px. */
@media (max-width:860px){
  .dash{ grid-template-columns:minmax(0, 1fr); }
  .dash .h2{ max-width:none; }
}
/* The sans font's kerning swallows the space next to a capital Y in all-caps labels
   ("EVERY MONDAY" rendered as "EVERYMONDAY"). Kerning off for every uppercase label. */
.eyebrow, .labels span, .msg small, .orbit .node, .ind-item li span, .dash-list span, .panel .pfoot, .panel .tag,
.strata-viz span, .pinbox li em, .legal-body h3, .legal-body th, .offload-grid .agent, .stage-body li span{
  font-kerning:none; font-feature-settings:"kern" 0;
}
/* Phones: the frosted bar was too see-through over body text; make it near-opaque. */
@media (max-width:900px){
  .nav.solid::before, body:not(.on-dark) .nav::before{ background:rgba(249,245,241,.97); }
}
/* Phones: the cookie banner covered over half the screen. Smaller type, Reject and Accept side by side
   (still equally prominent), "Manage choices" as a slim full-width row underneath. */
@media (max-width:520px){
  .cc{ left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); border-radius:16px; max-height:calc(100svh - 90px); overflow-y:auto; }
  .cc-in{ padding:16px 16px 14px; }
  .cc-t{ font-size:1.12rem; margin-bottom:6px; }
  .cc-p{ font-size:.82rem; line-height:1.4; margin-bottom:12px; }
  .cc-btns{ grid-template-columns:1fr 1fr; gap:8px; }
  .cc-b{ min-height:42px; font-size:.84rem; padding:0 10px; }
  .cc-b.cc-ghost, .cc-b[data-cc="save"]{ grid-column:1 / -1; min-height:38px; }
}
/* Keep a word and its trailing punctuation on one line (the word splitter makes them separate boxes). */
.nw{ white-space:nowrap; }