:root{
  --cream:#f3efe4;
  --cream-2:#ece6d8;
  --paper:#faf7ef;
  --ink:#1c2b27;
  --ink-soft:#41514b;
  --muted:#84908a;
  --sage:#7fa68c;
  --sage-deep:#487a5f;
  --sage-soft:#c2d6c8;
  --clay:#cf8260;
  --clay-soft:#e6b394;
  --line:rgba(28,43,39,0.11);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top) + 96px);overflow-x:clip}
body{
  background:var(--cream);color:var(--ink);
  font-family:'Figtree',sans-serif;font-weight:300;
  overflow-x:clip;cursor:none;-webkit-font-smoothing:antialiased;line-height:1.5;
}
::selection{background:var(--sage);color:var(--paper)}

body::before{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* the grain is a full-screen mix-blend-mode layer — cheap on desktop, but it
   forces a whole-viewport recomposite on every scroll frame on phones. The 3.5%
   grain is imperceptible there anyway, so drop it on touch devices for smooth
   scrolling. */
@media (pointer:coarse){ body::before{display:none} }

/* cursor */
.cursor{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--sage-deep);
  z-index:10000;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .25s}
.ring{position:fixed;top:0;left:0;width:32px;height:32px;border:1px solid rgba(72,122,95,0.45);border-radius:50%;
  z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:transform .16s ease-out,width .25s,height .25s,border-color .25s}
.cursor.grow{width:0;height:0}.ring.grow{width:58px;height:58px;border-color:var(--clay)}

.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9500;background:linear-gradient(90deg,var(--sage-deep),var(--clay))}

/* nav — a fixed header that always paints the full top strip (incl. the iOS
   status-bar / safe-area inset) so page content can never bleed above or
   through it on scroll. Transparent over the hero, frosted once you move. */
nav{position:fixed;top:0;left:0;right:0;z-index:8000;display:flex;justify-content:space-between;align-items:center;
  gap:24px;background:transparent;
  padding:18px max(5vw,env(safe-area-inset-right)) 18px max(5vw,env(safe-area-inset-left));
  padding-top:calc(18px + env(safe-area-inset-top));
  /* Do NOT promote the bar to its own compositing layer (no transform /
     backface hacks). On modern iOS Safari a promoted fixed layer drifts a
     frame behind the visual viewport during the elastic/toolbar-collapse
     scroll and reveals page text in the strip above the bar; the un-promoted
     fixed bar stays glued to the viewport top. */
  transition:background .35s ease,padding .35s ease,box-shadow .35s ease,transform .4s ease,opacity .4s ease}
/* hide-on-scroll-down / reveal-on-scroll-up: JS adds .nav-hidden while the
   page is scrolling down, and removes it the moment the user scrolls up. */
nav.nav-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
/* OPAQUE on scroll — a solid cream bar so scrolled content (and the section
   heading that passes under the status-bar strip) can never show through or
   above it. Translucency here was the bug: content ghosted through the glass. */
nav.scrolled{
  padding-top:calc(11px + env(safe-area-inset-top));padding-bottom:11px;
  background:var(--cream);
  box-shadow:0 1px 0 var(--line),0 14px 34px -26px rgba(28,43,39,.55)}
/* iOS toolbar-collapse seal — the real fix for "page text bleeds into the
   notch strip above the bar" on iPhones. env(safe-area-inset-top) is 0 in
   normal Safari tab browsing, so the old inset-height cap was a zero-height
   no-op; meanwhile Safari's top address bar collapses on scroll (larger, more
   aggressive on Dynamic-Island devices) and briefly reveals page content in
   the sliver above a top:0 fixed bar. This paints cream from 240px ABOVE the
   viewport top down through the bar, so that sliver is always cream, never
   text. Part of the nav itself so it shares the bar's compositing layer.
   It is painted ALWAYS (not gated on .scrolled / no opacity fade): the cover
   sits entirely above top:0, so it is off-screen and invisible over the hero,
   and only becomes visible in the exact sliver Safari reveals on scroll — if
   we wait for the .scrolled class and a .35s fade, that sliver leaks page
   text during the toolbar collapse before the cover has faded in. */
nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:240px;
  background:var(--cream);pointer-events:none}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:34px;width:auto;display:block;mix-blend-mode:normal;transition:height .35s ease}
.navlinks{display:flex;gap:32px;font-size:13px;letter-spacing:.04em;font-weight:500;margin:0 auto}
.navlinks a{color:var(--ink-soft);text-decoration:none;opacity:.8;transition:opacity .3s,color .3s;position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--sage-deep);transition:width .3s}
.navlinks a:hover{opacity:1;color:var(--ink)}
.navlinks a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav-login{color:var(--ink-soft);text-decoration:none;font-size:13px;letter-spacing:.02em;font-weight:500;opacity:.85;transition:opacity .3s,color .3s}
.nav-login:hover{opacity:1;color:var(--ink)}
.nav-cta{padding:11px 22px;border-radius:40px;background:var(--ink);color:var(--cream);font-size:13px;
  letter-spacing:.02em;text-decoration:none;transition:.35s;font-weight:500}
.nav-cta:hover{background:var(--sage-deep);transform:translateY(-1px)}
.nav-login{padding:11px 20px;border-radius:40px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  font-size:13px;letter-spacing:.02em;text-decoration:none;transition:.35s;font-weight:500}
.nav-login:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
@media(max-width:920px){.nav-login{display:none}}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:none;padding:6px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){transform:translateY(-0px) rotate(-45deg)}
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;background:var(--cream);z-index:7999;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:max(env(safe-area-inset-top),24px) max(8vw,env(safe-area-inset-right)) max(env(safe-area-inset-bottom),24px) max(8vw,env(safe-area-inset-left));
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.16,1,.3,1);opacity:0}
.mobile-menu.open{transform:translateY(0);opacity:1}
.mobile-menu a{font-family:'Figtree',sans-serif;font-weight:600;font-size:2rem;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border:0}
.mobile-menu .mm-cta{color:var(--sage-deep)}
@media(max-width:920px){.navlinks{display:none}.nav-cta{display:none}.nav-toggle{display:flex}}

/* shared display type */
.display{font-family:'Figtree',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.0}
.serif-em{font-family:'Figtree',sans-serif;font-style:normal;font-weight:700;letter-spacing:-.02em;color:var(--sage-deep)}
.kicker{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--clay);font-weight:500;
  display:inline-flex;align-items:center;gap:12px;margin-bottom:28px}
.kicker::before{content:"";width:26px;height:1px;background:var(--clay)}

/* reveal */
.r{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* panels: a calm, consistent vertical rhythm. No forced 100vh — sections flow
   into one another instead of leaving full-screen voids between ideas. */
.panel{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,13vh,156px) 7vw;position:relative;max-width:1500px;margin:0 auto}
@media(max-width:700px){.panel{padding:clamp(72px,10vh,108px) 6vw}}

.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;z-index:0;will-change:transform}
.blob.sage{background:radial-gradient(circle,rgba(127,166,140,0.6),transparent 66%)}
.blob.clay{background:radial-gradient(circle,rgba(207,130,96,0.42),transparent 68%)}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;justify-content:center;
  padding-top:max(140px,calc(env(safe-area-inset-top) + 104px))}
.hero .blob.a{width:50vw;height:50vw;right:-10vw;top:-12vw;animation:drift1 26s ease-in-out infinite}
.hero .blob.b{width:40vw;height:40vw;left:-12vw;bottom:-14vw;animation:drift2 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(-4vw,5vh) scale(1.12)}}
@keyframes drift2{50%{transform:translate(5vw,-4vh) scale(1.1)}}
.hero-inner{position:relative;z-index:2;max-width:1100px}
.hero h1{font-size:clamp(2.6rem,7vw,6.6rem);margin-top:0;font-weight:400;font-family:'Figtree',sans-serif;letter-spacing:-.02em;line-height:1.02}
.hero h1 b{font-weight:700}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .l>span{display:block;transform:translateY(115%);animation:up 1.1s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .l:nth-child(1)>span{animation-delay:.25s}
.hero h1 .l:nth-child(2)>span{animation-delay:.4s}
.hero-sub{margin-top:36px;max-width:430px;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-soft);
  line-height:1.6;opacity:0;animation:fade 1s .95s forwards}
.hero-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fade 1s 1.15s forwards}
.btn{padding:16px 30px;border-radius:50px;font-size:13.5px;letter-spacing:.02em;text-decoration:none;
  border:1px solid var(--ink);color:var(--cream);background:var(--ink);transition:.4s;display:inline-flex;align-items:center;gap:8px;font-weight:400}
.btn:hover{background:var(--sage-deep);border-color:var(--sage-deep);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
@keyframes up{to{transform:translateY(0)}}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* STATEMENT panels — single huge line */
.statement{text-align:left}
.statement h2{font-size:clamp(2.4rem,6.5vw,6rem);max-width:16ch}
.statement .small{margin-top:34px;max-width:440px;color:var(--ink-soft);font-size:1.12rem;line-height:1.65}

/* HERO right visual removed */

/* PRECISION live capture — showpiece under hero */
.demo{position:relative;z-index:2;max-width:1000px;margin:0 auto;width:100%}
.demo .lead-line{text-align:center;margin-bottom:40px}
.demo h2{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:18ch;margin:18px auto 0;font-weight:500;letter-spacing:-.03em}
.demo .small{margin:20px auto 0;max-width:540px;color:var(--ink-soft);font-size:1.08rem;line-height:1.6;text-align:center}
.cap-stage{position:relative;border-radius:22px;background:var(--paper);border:1px solid var(--line);
  overflow:hidden;box-shadow:0 36px 80px -50px rgba(28,43,39,.7);display:flex;flex-direction:column}
.cap-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.cap-live{display:inline-flex;align-items:center;gap:6px;color:var(--sage-deep)}
.cap-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage-deep);animation:blink 1.5s infinite}
@keyframes blink{50%{opacity:.25}}
.cap-body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 24px 14px;gap:14px;min-height:300px}
.cap-body canvas{width:100%;height:180px;display:block}
.cap-phrase{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:400;letter-spacing:-.01em;text-align:center;
  min-height:1.4em;color:var(--ink);transition:opacity .4s}
.cap-phrase .mark{color:var(--sage-deep);font-weight:600}
.cap-phrase .lbl{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
  margin-top:14px;font-weight:500}
.cap-foot{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px;border-top:1px solid var(--line);justify-content:center}
.chip{font-size:11.5px;padding:6px 14px;border-radius:30px;background:var(--cream-2);color:var(--ink-soft);
  border:1px solid var(--line);opacity:.35;transition:.4s;letter-spacing:.02em}
.chip.on{opacity:1;background:var(--sage-soft);border-color:var(--sage);color:var(--ink)}

/* MODEL section */
.model{position:relative;z-index:2}
.model h2{font-size:clamp(2.2rem,5.5vw,4.6rem);max-width:14ch}
.model .small{margin-top:24px;max-width:480px;color:var(--ink-soft);font-size:1.1rem;line-height:1.6}
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
@media(max-width:820px){.model-grid{grid-template-columns:1fr}}
.mcard{padding:34px 28px;border:1px solid var(--line);border-radius:18px;background:var(--paper);transition:.4s}
.mcard:hover{transform:translateY(-6px);box-shadow:0 28px 60px -42px rgba(28,43,39,.5);border-color:var(--sage-soft)}
.mcard .mi{font-family:'Figtree',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep)}
.mcard h3{font-size:1.4rem;font-weight:500;letter-spacing:-.02em;margin:14px 0 10px}
.mcard p{color:var(--ink-soft);font-size:.98rem;line-height:1.6}

/* OUR MODEL (why we train our own) — dark, contrast */
.ours{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.ours .blob.a{width:46vw;height:46vw;left:-12vw;top:-14vh;opacity:.2}
.ours .blob.b{width:34vw;height:34vw;right:-8vw;bottom:-16vh;opacity:.16}
.ours-inner{position:relative;z-index:2}
.ours h2{font-size:clamp(2.2rem,5.5vw,4.6rem);max-width:16ch;color:var(--cream)}
.ours h2 .serif-em{color:var(--clay-soft)}
.ours .small{margin-top:26px;max-width:560px;color:rgba(243,239,228,.72);font-size:1.12rem;line-height:1.68}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
@media(max-width:820px){.contrast{grid-template-columns:1fr}}
.cbox{padding:32px 28px;border-radius:18px;border:1px solid rgba(243,239,228,.14)}
.cbox.them{background:rgba(243,239,228,.03)}
.cbox.us{background:rgba(127,166,140,.12);border-color:var(--sage)}
.cbox .ct{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.cbox.them .ct{color:var(--muted)}.cbox.us .ct{color:var(--sage-soft)}
.cbox h4{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;margin-bottom:10px;color:var(--cream)}
.cbox p{color:rgba(243,239,228,.7);font-size:1rem;line-height:1.6}

/* STEPS */
.steps{position:relative;z-index:2}
.steps h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:14ch;margin-bottom:60px}
.step-row{display:grid;grid-template-columns:90px 1fr;gap:34px;padding:38px 0;border-top:1px solid var(--line);align-items:start}
.step-row:last-child{border-bottom:1px solid var(--line)}
.step-row .n{font-family:'Figtree',sans-serif;font-weight:700;font-size:1.4rem;color:var(--sage-deep)}
.step-row h3{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.step-row p{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;max-width:54ch}

/* PRIVACY dark */
.privacy{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.privacy .blob.a{width:46vw;height:46vw;right:6vw;top:-16vh;opacity:.2}
.privacy .blob.b{width:34vw;height:34vw;left:8vw;bottom:-16vh;opacity:.18}
.privacy-inner{position:relative;z-index:2}
.privacy h2{font-size:clamp(2.2rem,5.5vw,4.6rem);max-width:15ch;color:var(--cream)}
.privacy .small{margin-top:26px;max-width:480px;color:rgba(243,239,228,.7);font-size:1.1rem;line-height:1.65}
.privacy .kicker{color:var(--clay-soft)}.privacy .kicker::before{background:var(--clay-soft)}
.priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
@media(max-width:820px){.priv-grid{grid-template-columns:1fr}}
.priv{padding:30px 26px;border:1px solid rgba(243,239,228,.14);border-radius:16px;background:rgba(243,239,228,.04);transition:.4s}
.priv:hover{border-color:var(--sage-soft);background:rgba(243,239,228,.07)}
.priv .pi{color:var(--sage-soft);margin-bottom:14px}
.priv h4{font-size:1.2rem;font-weight:500;margin-bottom:9px;color:var(--cream);letter-spacing:-.01em}
.priv p{color:rgba(243,239,228,.68);font-size:.96rem;line-height:1.55}

/* HIRING */
.hiring{position:relative;z-index:2}
.hiring h2{font-size:clamp(2.2rem,5.5vw,4.6rem);max-width:13ch}
.hiring .small{margin-top:24px;max-width:460px;color:var(--ink-soft);font-size:1.1rem;line-height:1.6}
.roles{margin-top:54px}
.role{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:30px 0;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding .4s}
.roles .role:last-child{border-bottom:1px solid var(--line)}
.role:hover{padding-left:16px}
.role .rt{font-size:clamp(1.4rem,3vw,2.3rem);font-weight:500;letter-spacing:-.02em;transition:color .3s}
.role:hover .rt{color:var(--sage-deep)}
.role .rm{color:var(--muted);font-size:.95rem;margin-top:5px}
.role .arrow{font-size:1.4rem;color:var(--sage-deep);transition:transform .3s}
.role:hover .arrow{transform:translateX(8px)}

/* CLOSER */
.closer{text-align:center;position:relative;overflow:hidden}
.closer .blob.a{width:44vw;height:44vw;right:16vw;top:-12vh}
.closer .blob.b{width:34vw;height:34vw;left:14vw;bottom:-12vh}
.closer-inner{position:relative;z-index:2;width:100%}
.closer h2{font-size:clamp(2.6rem,8vw,6.5rem);max-width:14ch;margin:0 auto}
.closer .small{margin:28px auto 0;max-width:440px;color:var(--ink-soft);font-size:1.1rem}
.closer .hero-cta{justify-content:center;animation:none;opacity:1}

footer{padding:90px 7vw 40px;border-top:1px solid var(--line);position:relative;z-index:2;background:var(--cream-2)}
.foot-top{display:grid;grid-template-columns:1.3fr 2fr;gap:60px;max-width:1400px;margin:0 auto}
@media(max-width:900px){.foot-top{grid-template-columns:1fr;gap:48px}}
.foot-brand .brand{height:auto;margin-bottom:20px}
.foot-brand .brand img{height:30px;mix-blend-mode:multiply}
.foot-tag{color:var(--ink-soft);font-size:1rem;line-height:1.6;max-width:38ch;margin-bottom:26px}
.foot-btn{font-size:13.5px;padding:13px 26px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
@media(max-width:640px){.foot-cols{grid-template-columns:1fr 1fr;gap:34px 20px}}
.foot-col h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:18px}
.foot-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:.96rem;padding:6px 0;transition:color .3s}
.foot-col a:hover{color:var(--sage-deep)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  max-width:1400px;margin:64px auto 0;padding-top:28px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.foot-bottom a{color:var(--muted);text-decoration:none;transition:color .3s}.foot-bottom a:hover{color:var(--sage-deep)}

/* ---- subpage helpers ---- */
.subpage{padding:160px 7vw 60px;max-width:880px;margin:0 auto;position:relative;z-index:2}
.subpage.wide{max-width:1180px}
.subpage .kicker{margin-bottom:22px}
.subpage h1{font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(2.4rem,6vw,4.6rem);
  letter-spacing:-.03em;line-height:1.02;margin-bottom:22px}
.subpage .intro{font-size:1.2rem;color:var(--ink-soft);line-height:1.6;max-width:62ch;margin-bottom:14px}
.subpage h2{font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.02em;margin:48px 0 14px}
.subpage h3{font-weight:600;font-size:1.2rem;margin:30px 0 8px}
.subpage p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin-bottom:16px;max-width:68ch}
.subpage ul{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin:0 0 16px 1.1em;max-width:68ch}
.subpage li{margin-bottom:8px}
.subpage a.inline{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px}
.subpage .muted{color:var(--muted);font-size:.95rem}
.divider{height:1px;background:var(--line);margin:46px 0;border:0}

/* careers role rows reused on careers page */
.subpage .roles{margin-top:10px}

/* form */
.form{display:flex;flex-direction:column;gap:18px;max-width:540px;margin-top:36px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{font-family:'Figtree',sans-serif;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;outline:none;transition:.3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(127,166,140,.18)}
.field textarea{resize:vertical;min-height:120px}
.form .btn{align-self:flex-start;border:0;cursor:none}
.form-note{font-size:.9rem;color:var(--muted);margin-top:4px}

/* blog list */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
@media(max-width:760px){.posts{grid-template-columns:1fr}}
.post{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:18px;
  padding:30px 28px;background:var(--paper);transition:.4s}
.post:hover{transform:translateY(-6px);box-shadow:0 26px 56px -42px rgba(28,43,39,.5);border-color:var(--sage-soft)}
.post .pdate{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600}
.post h3{font-family:'Figtree',sans-serif;font-weight:600;font-size:1.4rem;letter-spacing:-.02em;margin:14px 0 10px}
.post p{font-size:.98rem;color:var(--ink-soft);line-height:1.55;margin:0}

/* faq */
.faq-item{border-top:1px solid var(--line);padding:26px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-family:'Figtree',sans-serif;font-weight:600;font-size:1.25rem;margin:0 0 10px}
.faq-item p{margin:0}

/* 404 */
.error-panel{align-items:flex-start;text-align:left;overflow:hidden}
.error-inner{position:relative;z-index:2;max-width:760px}
.error-panel h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:0 0 6px}
.error-panel .small{margin-top:24px;max-width:440px;color:var(--ink-soft);font-size:1.12rem;line-height:1.6}
.error-panel .hero-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

/* nav active state */
.navlinks a.active{opacity:1;color:var(--ink)}
.navlinks a.active::after{width:100%}

/* skip link — visible only on keyboard focus */
.skip-link{position:fixed;top:-100px;left:16px;z-index:10001;background:var(--ink);color:var(--cream);
  padding:12px 20px;border-radius:0 0 12px 12px;text-decoration:none;font-size:14px;font-weight:500;
  transition:top .25s ease}
.skip-link:focus{top:0}

/* visible focus for keyboard users (custom cursor hides the pointer, so this matters) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--sage-deep);outline-offset:3px;border-radius:4px}

/* respect reduced-motion: drop the custom cursor, blobs, and reveal animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  body{cursor:auto}
  .cursor,.ring{display:none!important}
  .blob{animation:none!important}
  .r{opacity:1!important;transform:none!important}
  .hero h1 .l>span{transform:none!important;animation:none!important}
  .hero-sub,.hero-cta{opacity:1!important;animation:none!important}
}

/* touch devices: no custom cursor, and reveal content immediately so scrolling
   never feels janky or leaves sections blank */
@media (hover:none),(pointer:coarse){
  html,body{cursor:auto}
  .cursor,.ring,.progress{display:none!important}
  .r{opacity:1!important;transform:none!important}
}

/* ============================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   Layered on top of the base styles (later source order wins) so
   the existing design is untouched on desktop while phones get:
   finger-friendly tap targets, headlines that never clip, calmer
   spacing, full-width CTAs, and dynamic-viewport heights.
   ============================================================ */

/* stop iOS from auto-inflating text in landscape */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* the fullscreen menu should always be able to scroll if it's tall */
.mobile-menu{overflow-y:auto}

/* the full-screen menu should track the dynamic viewport so it never jumps
   as the mobile browser chrome shows/hides. */
@supports (height:100dvh){
  .mobile-menu{height:100dvh}
}

/* ---- tablets & large phones ---- */
@media(max-width:760px){
  nav{padding:15px max(6vw,env(safe-area-inset-right)) 15px max(6vw,env(safe-area-inset-left));
    padding-top:calc(15px + env(safe-area-inset-top))}
  nav.scrolled{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
  .brand img{height:31px}
  /* bigger, finger-friendly hamburger (>=44px hit area) */
  .nav-toggle{min-width:44px;min-height:44px;padding:10px;align-items:center;justify-content:center}
  .nav-toggle span{width:24px}

  .panel{padding:clamp(72px,9vh,104px) 6vw}
  .subpage{padding:calc(96px + env(safe-area-inset-top)) 6vw 64px}

  .hero-sub{max-width:none}
  .demo .lead-line{margin-bottom:28px}

  /* comfortable tap spacing for footer links */
  .foot-col a{padding:9px 0}
}

/* ---- phones ---- */
@media(max-width:480px){
  nav{gap:12px;padding:13px max(5vw,env(safe-area-inset-right)) 13px max(5vw,env(safe-area-inset-left));
    padding-top:calc(13px + env(safe-area-inset-top))}
  nav.scrolled{padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}

  .panel{padding:clamp(64px,8vh,92px) 6vw}
  .subpage{padding:calc(88px + env(safe-area-inset-top)) 6vw 54px}

  /* keep the big headline from being cut off by the .l reveal clip */
  .hero h1{font-size:clamp(1.95rem,9vw,3.2rem)}
  .hero-sub{margin-top:24px;font-size:1.05rem}
  .hero-cta{margin-top:30px;gap:10px}
  /* full-width, equal CTAs on the hero only */
  .hero .hero-cta{flex-wrap:nowrap}
  .hero .hero-cta .btn{flex:1 1 0;justify-content:center;padding:15px 16px}

  .btn{padding:15px 24px}

  .demo h2{font-size:clamp(1.6rem,6.8vw,2.2rem)}
  .cap-body{min-height:240px;padding:24px 16px 12px}
  .cap-body canvas{height:140px}
  .cap-phrase{font-size:clamp(1.3rem,6vw,1.9rem)}
  .cap-head,.cap-foot{padding:14px 16px}

  .model h2,.ours h2,.privacy h2,.hiring h2,.steps h2{max-width:none}
  .step-row{grid-template-columns:48px 1fr;gap:16px;padding:28px 0}
  .step-row .n{font-size:1.1rem}

  .mcard,.cbox,.priv{padding:26px 22px}
  .role{gap:14px;padding:26px 0}

  /* subpage body type a touch larger-line for reading on small screens */
  .subpage h1{font-size:clamp(2rem,8.5vw,3rem)}
  .subpage .intro{font-size:1.1rem}

  /* footer */
  footer{padding:64px 6vw 36px}
  .foot-bottom{margin-top:44px;flex-direction:column;align-items:flex-start;gap:6px}

  /* 16px form text avoids iOS zoom-on-focus; stretch the submit button */
  .field input,.field select,.field textarea{font-size:16px}
  .form .btn{align-self:stretch;justify-content:center}
}

/* ---- short / landscape phones: shrink the fullscreen menu so the
   links are never clipped above/below the centered stack ---- */
@media(max-height:560px){
  .mobile-menu{justify-content:flex-start;padding-top:84px;padding-bottom:32px;gap:2px}
  .mobile-menu a{font-size:1.4rem;padding:8px 0}
}

/* ============================================================
   HERO + DISPLAY TYPE — robust mobile pass
   The hero headline was rendering at desktop size on phones, so the
   reveal wrappers (.l{overflow:hidden}) clipped the too-wide words and
   the fixed header sat on top of the text. This guarantees the big
   display type scales down, wraps safely, and always clears the fixed
   nav at 375 / 390 / 414 px. Layered last so desktop is untouched.
   ============================================================ */

/* safety: long words can wrap instead of overflowing the screen */
.hero h1,.display,.subpage h1,.closer h2,.demo h2{overflow-wrap:break-word;word-break:normal;max-width:100%}

@media(max-width:760px){
  .hero-inner{max-width:100%}
  .hero h1{font-size:clamp(2.1rem,7.2vw,4rem)}
  /* always start the hero below the fixed header (incl. the safe-area inset) */
  .hero{padding-top:max(118px,calc(env(safe-area-inset-top) + 92px))}
}

@media(max-width:480px){
  .hero h1{font-size:clamp(1.85rem,8.6vw,2.9rem);line-height:1.07}
  .hero{padding-top:max(104px,calc(env(safe-area-inset-top) + 84px))}
  .hero-sub{font-size:1.02rem}
  /* tame the other oversized headings on phones */
  .closer h2{font-size:clamp(2rem,9vw,3.1rem)}
  .demo h2{font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .model h2,.ours h2,.privacy h2,.hiring h2,.steps h2{font-size:clamp(1.85rem,7.2vw,2.7rem)}
  .subpage h1{font-size:clamp(1.95rem,8vw,2.9rem)}
}

/* the narrowest phones (≈320–380px): shrink the hero a touch more so the
   bold "Speech Therapists" line never exceeds the viewport */
@media(max-width:380px){
  .hero h1{font-size:clamp(1.6rem,8.2vw,2.35rem)}
}

/* ============================================================
   HEADER — refined wordmark + bar (padding/safe-area live in the
   base `nav` rules above so the inset coverage is never overridden)
   ============================================================ */
#nav{gap:20px}
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{height:32px;width:auto;mix-blend-mode:normal;transition:height .35s ease;display:block}
#nav.scrolled .brand img{height:28px}
.navlinks{gap:34px;font-size:13.5px;font-weight:500;letter-spacing:.01em}
.navlinks a{opacity:.74}
.navlinks a:hover{opacity:1}
.nav-login{font-size:13.5px;color:var(--ink-soft);text-decoration:none;font-weight:500;transition:color .3s}
.nav-login:hover{color:var(--ink)}
.nav-cta{padding:11px 22px;border-radius:40px;background:var(--ink);color:var(--cream);font-size:13.5px;font-weight:500;letter-spacing:.01em;transition:.35s}
.nav-cta:hover{background:var(--sage-deep);transform:translateY(-1px)}
/* hamburger: two clean bars that morph into an X */
.nav-toggle{width:34px;height:34px;align-items:center;justify-content:center;gap:6px}
.nav-toggle span{width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* Scroll feel: sections simply rise into view once (the .r reveal) and then
   stay put. The old "recede" effect that faded/blurred/shrank every panel as
   it exited made mid-scroll content look washed-out and the page feel janky,
   so it's intentionally gone. Calm, legible, continuous. */