:root{
  --canvas:#11100E;
  --surface1:#191815;
  --surface2:#22201C;
  --surface3:#2C2924;
  --border-subtle:#2F2A25;
  --border-strong:#3A342D;
  --text-primary:#F2ECE3;
  --text-secondary:#B0A79D;
  --text-muted:#9A9188;
  --ink-on-accent:#14110F;

  --persimmon:#F2694B; /* ACTIONS ONLY — the next move. Exactly 3 uses on the page. */
  --brass:#D4A017;
  --heather:#9A8295;
  --slate:#7E96B8;

  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:1180px;
  --gutter:clamp(22px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-optical-sizing:none;
}
a{color:inherit}
::selection{background:rgba(242,105,75,.22);color:var(--text-primary)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:800px}
section{position:relative;overflow:hidden}

.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent,var(--text-muted));font-weight:600}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
h2.title{font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.02em}
p.lead{color:var(--text-secondary);font-size:clamp(1.05rem,2vw,1.28rem);max-width:46ch}

.mark{font-family:var(--display);letter-spacing:-.01em;color:var(--text-primary);font-size:1.5rem;text-decoration:none}
.mark b{font-weight:600}
.mark i{font-style:italic;font-weight:300}

.ghost{display:inline-flex;align-items:center;gap:.5em;color:var(--text-secondary);text-decoration:none;
  font-size:.95rem;font-weight:500;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ghost:hover{color:var(--text-primary);border-color:var(--border-strong)}

/* Quiet inline link — arrow tinted with the section accent, rest stays neutral */
.quietlink{font-size:.95rem;font-weight:500;color:var(--text-secondary);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;transition:color .3s}
.quietlink .arrow{color:var(--accent,var(--text-muted));transition:transform .3s}
.quietlink:hover{color:var(--text-primary)}
.quietlink:hover .arrow{transform:translateX(3px)}

/* The one text action style — Persimmon, reserved for the hero link, the nav CTA, and the Instagram button */
.actionlink{font-size:1rem;font-weight:500;color:var(--persimmon);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;transition:gap .3s}
.actionlink .arrow{transition:transform .3s}
.actionlink:hover{gap:.75em}
.actionlink:hover .arrow{transform:translateX(3px)}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.36,1) var(--d,0s),transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.in .reveal{opacity:1;transform:none}
.mask{overflow:hidden;display:block;padding-top:.06em;padding-bottom:.18em;margin-top:-.06em;margin-bottom:-.18em}
.mask>span{display:block;transform:translateY(112%);transition:transform 1s cubic-bezier(.19,1,.22,1) var(--d,0s)}
.in .mask>span{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.mask>span{opacity:1;transform:none;transition:none}
  .hero-breathe{animation:none}
}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(17,16,14,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav-links{display:flex;align-items:center;gap:clamp(14px,3vw,32px)}
.nav-links a{white-space:nowrap;font-size:.92rem}
.nav-links .insta-link,
.nav-links .insta-link:hover{color:var(--persimmon)}
@media(max-width:640px){.nav-links .insta-link{display:none}}
@media(max-width:420px){.nav-links{gap:12px}.nav-links a{font-size:.82rem}}

/* ---------- HERO: full-width, left-pinned, no illustration ---------- */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 66px);display:flex;align-items:center;padding-block:clamp(48px,9vw,88px)}
.hero-breathe{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:radial-gradient(44% 40% at 60% 42%,rgba(242,105,75,.09),rgba(242,105,75,.02) 45%,transparent 70%);
  filter:blur(12px);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:.85}}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,6vw,72px);align-items:center}
.hero .eyebrow{margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.6rem,6.5vw,5.2rem)}
.hero h1 .dim{color:var(--text-secondary);font-size:.62em;display:block;margin-top:.5em;line-height:1.15}
.hero-body{margin-top:2rem;max-width:40ch;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--text-secondary)}
.hero-actions{margin-top:2.4rem;display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.hero-micro{font-size:.85rem;color:var(--text-muted)}
.hero-art{width:100%;display:flex;align-items:center;justify-content:center}
.hero-art img{width:100%;max-width:440px;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4))}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero-art{order:-1}.hero-art img{max-width:300px}}

/* ---------- TOO SMALL FOR THERAPY: centred, oversized, all air ---------- */
.s-therapy{--accent:var(--slate)}
.s-therapy{text-align:center;padding-block:clamp(120px,20vh,220px)}
.s-therapy h2{font-size:clamp(2.6rem,7.5vw,5.4rem)}
.s-therapy p.lead{margin:1.8rem auto 0;max-width:30ch;text-align:center}

/* ---------- YOU'VE BEEN HERE: asymmetric, sticky head, no rules ---------- */
.s-moments{--accent:var(--brass)}
.s-moments{padding-block:clamp(96px,15vh,160px)}
.moments-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);gap:clamp(30px,6vw,90px)}
.moments-head{align-self:start;position:sticky;top:100px}
.moments-head .eyebrow{margin-bottom:1.1rem}
.moments-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.moments-list{list-style:none;display:flex;flex-direction:column;gap:clamp(26px,4vh,40px)}
.moments-list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px);align-items:baseline}
.moments-list .num{font-family:var(--display);font-size:clamp(1.1rem,2vw,1.5rem);color:var(--brass);font-variant-numeric:tabular-nums}
.moments-list p{font-family:var(--display);font-size:clamp(1.35rem,2.7vw,2rem);line-height:1.22;letter-spacing:-.01em}
@media(max-width:760px){.moments-grid{grid-template-columns:1fr;gap:44px}.moments-head{position:static}}

/* ---------- WHAT IT DOES: 2x2 card grid ---------- */
.s-does{--accent:var(--heather)}
.s-does{padding-block:clamp(96px,15vh,160px)}
.s-does .eyebrow{margin-bottom:1.1rem}
.does-head{max-width:20ch;font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:1.1rem}
.does-intro{max-width:44ch;color:var(--text-secondary);font-size:clamp(1.05rem,1.6vw,1.2rem);margin-bottom:clamp(40px,7vh,72px)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
@media(max-width:720px){.feature-grid{grid-template-columns:1fr}}
.fcard{background:var(--surface1);border:1px solid var(--border-subtle);border-radius:18px;padding:clamp(26px,3vw,38px);transition:border-color .4s,transform .4s}
.fcard:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.fcard .flabel{display:flex;align-items:center;gap:11px;margin-bottom:1.4rem}
.fcard .dot{width:8px;height:8px;border-radius:50%;background:var(--fc);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 22%,transparent)}
.fcard .flabel span{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fc)}
.fcard h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.6rem}
.fcard p{color:var(--text-secondary);font-size:.98rem}

/* ---------- WON'T FLATTER YOU: headline left, cards stacked right ---------- */
.s-flatter{--accent:var(--heather)}
.s-flatter{padding-block:clamp(96px,15vh,160px)}
.flatter-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(34px,5vw,72px);align-items:center}
.flatter-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:1.4rem}
.flatter-head p.lead{max-width:40ch;font-size:clamp(1.02rem,1.5vw,1.15rem)}
.flatter-cards{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.card{border-radius:16px;padding:clamp(24px,2.6vw,34px)}
.card .clabel{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.card q{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.24;quotes:none;display:block}
.card.other{background:var(--surface1);border:1px solid var(--border-subtle)}
.card.other .clabel{color:var(--text-muted)}
.card.other q{color:var(--text-muted)}
.card.ours{background:var(--surface2);border:1px solid var(--border-strong)}
.card.ours .clabel{color:var(--text-primary)}
.card.ours q{color:var(--text-primary)}
@media(max-width:760px){.flatter-grid{grid-template-columns:1fr}}

/* ---------- WHY WE BUILT IT: narrow centred reading column ---------- */
.s-story{--accent:var(--brass)}
.s-story{padding-block:clamp(96px,15vh,160px)}
.s-story .inner{max-width:62ch;margin:0 auto}
.s-story .eyebrow{margin-bottom:1.6rem}
.story-copy p{font-family:var(--display);font-size:clamp(1.08rem,1.7vw,1.28rem);line-height:1.72;color:var(--text-secondary);font-weight:300}
.story-copy p+p{margin-top:1.15em}
.story-copy p.accent{font-style:italic;color:var(--text-primary);font-weight:400}
.s-story .story-copy p.opening{color:var(--text-primary);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.32;font-weight:400}
.story-sign{margin-top:1.4rem;display:flex;flex-direction:column;gap:1.2rem}
.story-founders{font-family:var(--display);font-style:italic;color:var(--text-muted)}

/* ---------- TEAM ---------- */
.founders{--accent:var(--heather)}
.founders{padding-block:clamp(60px,9vw,120px)}
.founders .head{margin-bottom:clamp(38px,5vw,58px)}
.founders .head h2{margin-top:1rem}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.f-card{display:flex;flex-direction:column;gap:20px}
.f-photo{aspect-ratio:1/1;border-radius:14px;width:100%;max-width:168px;display:block;object-fit:cover;object-position:top center;
  border:1px solid var(--border-subtle);background:var(--surface1)}
.f-name{font-family:var(--display);font-size:1.5rem}
.f-role{color:var(--heather);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.4rem;font-weight:600}
.f-bio{color:var(--text-secondary);font-size:.98rem;margin-top:.9rem;max-width:46ch;margin-bottom:.3rem}
@media(max-width:640px){.f-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- CLOSER: full statement, mask reveal ---------- */
.s-closer{text-align:center;padding-block:clamp(130px,24vh,240px)}
.s-closer h2{font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.08;max-width:18ch;margin-inline:auto}

/* ---------- EARLY ACCESS: one contained box, the single Persimmon button ---------- */
.s-early{padding:clamp(40px,8vh,90px) 0 clamp(90px,14vh,150px);text-align:center}
.early-card{max-width:760px;margin:0 auto;border:1px solid var(--border-subtle);border-radius:24px;background:var(--surface1);padding:clamp(44px,7vw,76px) clamp(24px,5vw,56px)}
.early-card .eyebrow{display:block;margin-bottom:1.4rem;color:var(--text-muted)}
.early-card h2{font-size:clamp(2rem,5vw,3.1rem);max-width:16ch;margin:0 auto 1rem}
.early-card p.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);margin:0 auto 2.1rem}
.btn-ig{display:inline-flex;align-items:center;gap:.6em;background:var(--persimmon);color:var(--ink-on-accent);font-weight:600;font-size:1rem;text-decoration:none;padding:.95em 1.7em;border-radius:999px;transition:transform .25s ease,box-shadow .25s ease}
.btn-ig:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(242,105,75,.55)}
.btn-ig svg{width:19px;height:19px}

/* SIMPLE PAGE HERO (Contact / Story page headers) */
.page-hero{padding-block:clamp(56px,9vw,120px)}
.page-hero .eyebrow{margin-bottom:1.4rem}
.page-hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);letter-spacing:-.02em;max-width:16ch}
.page-hero p.lead{margin-top:1.2rem}

/* CONTACT PAGE */
.contact-block{padding-block:clamp(40px,7vw,88px)}
.contact-email{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);
  font-size:clamp(1.6rem,4vw,2.4rem);color:var(--text-primary);text-decoration:none;
  border-bottom:1.5px solid var(--border-strong);padding-bottom:.15em;transition:border-color .2s,color .2s}
.contact-email:hover{color:var(--text-primary);border-color:var(--text-secondary)}

/* STORY PAGE */
.story-page{padding-block:clamp(20px,4vw,40px) clamp(80px,11vh,140px)}

/* FOOTER */
footer{border-top:1px solid var(--border-subtle);padding-block:clamp(40px,6vw,64px)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
footer .tagline{color:var(--text-muted);font-size:.9rem;margin-top:.8rem;max-width:30ch}
.foot-links{display:flex;gap:22px}
.foot-links a{color:var(--text-muted);text-decoration:none;font-size:.88rem;transition:color .2s}
.foot-links a:hover{color:var(--text-primary)}
.foot-fine{color:var(--text-muted);opacity:.6;font-size:.78rem;margin-top:28px}
.foot-fine a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong)}
.foot-fine a:hover{color:var(--text-primary)}