/* Skale Bak brand system. Shared by every page. Edit here once, it changes everywhere. */

:root{
  --ink:#14180F; --forest:#214224; --moss:#3A5A3E; --sage:#86A58B;
  --haze:#C3D2C6; --cream:#F1F0CC; --oat:#FAF2E5; --paper:#FFFEFA; --ember:#E07A1F;
  --grey1:#5C6357; --grey2:#7C8377; --grey3:#98A093; --line:#EDE9DA;
  --mist:#FAF9F1;
  /* Two light grounds and one dark one, site wide: paper, stone, and the
     forest band once per page. --band used to be a separate tan for the
     tinted sections; it is now stone, so a hero and a tinted section are
     the same surface and the rhythm is paper against stone throughout.
     Kept as a name so nothing that points at it breaks. */
  --band:#E9E4D7;
  /* --stone is the hero ground. --cream at #F1F0CC was the most
     saturated surface on the site, a yellow green nothing else in the
     palette answered, so it now survives only as type and small accents
     on the forest band where it belongs. */
  --stone:#E9E4D7;
  /* --line is a hairline for use on paper. On stone it is a few points off
     the background and disappears. --rule is the hairline for anything
     sitting on a stone section. */
  --rule:#D9D2BB;
  --max:1200px; --gut:24px;
  --r-pill:9999px; --r-card:24px; --r-elev:20px; --r-small:16px; --r-img:12px;
  --sh1:0 0 0 1px rgba(20,24,15,.05), 0 4px 24px rgba(20,24,15,.07);
  --sh2:0 0 0 1px rgba(20,24,15,.05), 0 8px 40px rgba(20,24,15,.10);
  --sh3:0 0 0 1px rgba(20,24,15,.06), 0 20px 25px -5px rgba(20,24,15,.10);
  --t:200ms cubic-bezier(.2,.65,.3,1);
  --rise:700ms cubic-bezier(.16,.84,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased}
img{max-width:100%}[hidden]{display:none!important}

h1,h2,h3{font-family:Archivo,"Hanken Grotesk",Helvetica,Arial,sans-serif;font-stretch:115%;margin:0;color:var(--forest);text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,72px);font-weight:500;letter-spacing:-.025em;line-height:1.06}
/* One size and one measure for every section heading on the site. The
   measure lives here rather than inline on each h2, because when it was
   set per heading it drifted to six different values and the headings
   stopped looking like a family. A long heading takes another line; it
   does not get its own type size. */
h2{font-size:clamp(28px,3.9vw,54px);font-weight:500;letter-spacing:-.015em;line-height:1.08;
  max-width:18ch}
h3{font-size:clamp(26px,3.2vw,44px);font-weight:500;letter-spacing:-.015em;line-height:1.14}
h4{font-family:"Hanken Grotesk";font-size:26px;font-weight:550;letter-spacing:-.009em;line-height:1.18;margin:0;color:var(--forest)}
h5{font-family:"Hanken Grotesk";font-size:20px;font-weight:550;letter-spacing:-.006em;line-height:1.25;margin:0;color:var(--forest)}
p{margin:0}a{color:inherit;text-decoration:none}
.sub{font-size:22px;line-height:1.5;color:var(--grey1)}
.body{font-size:17px;line-height:1.4;color:var(--grey1)}
.lab{font-family:"Martian Mono",ui-monospace,Menlo,monospace;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);line-height:1}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{padding:72px 0}
.ctr{text-align:center}
.ctr>*,.ctr .wrap>*{margin-left:auto;margin-right:auto}
.oat{background:var(--oat)}.cream{background:var(--cream)}
.stone{background:var(--stone)}.mist{background:var(--stone)}

.btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r-pill);font-family:inherit;font-size:16px;font-weight:450;height:48px;padding:0 24px;border:1px solid transparent;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.btn.fill{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.btn.fill:hover{background:var(--moss);border-color:var(--moss)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--oat)}
.pair{display:flex;gap:10px;flex-wrap:wrap}
.arw{color:var(--grey1);font-size:16px;display:inline-flex;align-items:center;gap:6px;transition:color var(--t)}
.arw:hover{color:var(--ink)}
.arw i{font-style:normal;transition:transform var(--t);display:inline-block}
.arw:hover i{transform:translateX(4px)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:95;height:76px;display:flex;align-items:center;transition:background var(--t),box-shadow var(--t);padding-top:env(safe-area-inset-top,0px)}
.nav.solid{background:rgba(255,254,250,.9);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(20,24,15,.06)}
.nav .wrap{display:flex;align-items:center;gap:34px;width:100%}
.mark{font-family:Archivo;font-stretch:115%;font-weight:500;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.nv{display:flex;gap:26px;margin-right:auto}
.nv a{font-size:16px;color:var(--grey1);transition:color var(--t)}
.nv a:hover{color:var(--ink)}
.nav .btn{height:42px;font-size:15px;padding:0 20px}


/* ============ MARQUEE ============ */
.mq{padding:42px 0;background:var(--paper);overflow:hidden}
.mq .lab{text-align:center;display:block;margin-bottom:24px;color:var(--grey3)}
.mqr{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);overflow:hidden}
.mqr .track{display:flex;width:max-content;padding:4px 0;will-change:transform;backface-visibility:hidden}
.mqr.a .track{animation:slideL 60s linear infinite}
.mqr.b .track{animation:slideR 60s linear infinite;margin-top:14px}
.mqr .track span{font-size:16px;color:var(--grey1);white-space:nowrap;border:1px solid #E9E5D6;border-radius:var(--r-pill);padding:9px 20px;background:var(--paper);margin-right:14px;flex:0 0 auto}
@keyframes slideL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes slideR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* ============ THREE UP ============ */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;text-align:left}
.three .c .ic{width:44px;height:44px;border-radius:var(--r-img);background:var(--oat);display:grid;place-items:center;margin-bottom:20px}
.three .c .ic svg{width:17px;height:17px;color:var(--ember)}
.three .c h5{margin-bottom:10px}
.three .c p{max-width:32ch}


/* ============ TESTIMONIAL RAIL ============ */
.trail{position:relative;margin-top:36px}
.trail .vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 8px;scroll-padding-left:var(--gut)}
.trail .vp::-webkit-scrollbar{display:none}
.trail .tk{display:flex;gap:20px;width:max-content}
.tcard{flex:0 0 clamp(290px,29vw,380px);scroll-snap-align:start;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh1);padding:26px 25px;display:flex;flex-direction:column;transition:box-shadow var(--t)}
.tcard:hover{box-shadow:var(--sh2)}
.tcard .qm{width:22px;height:16px;margin-bottom:18px;color:var(--haze);flex:none}
.tcard q{quotes:none;display:block;font-family:Archivo;font-stretch:115%;font-weight:500;font-size:22px;letter-spacing:-.012em;line-height:1.26;color:var(--forest)}
.tcard .bd2{margin-top:16px;font-size:16px;line-height:1.42;color:var(--grey1)}
.tcard .who{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:12px}
.tcard .who .ln{width:24px;height:1px;background:var(--haze)}
.tcard.cta{background:var(--forest);box-shadow:none;justify-content:center}
.tcard.cta q{color:var(--cream);font-weight:450}
.tcard.cta .bd2{color:var(--haze)}
.tcard.cta .qm{color:var(--moss)}
.tcard.cta .go{margin-top:26px}
/* ---------- video testimonials ----------
   The clients film these themselves, so the footage arrives in whatever shape
   their phone was in. Most are vertical, some are landscape, and we do not get
   to choose. So nothing here is configured per video: the still sits on a
   blurred, darkened copy of itself and is contained rather than cropped, which
   means a portrait clip and a landscape clip both fill the same band without
   anybody losing the top of their head. The player then takes its shape from
   the file's own dimensions. Drop a new one in and it just works. */
.tcard.vid{padding:0;overflow:hidden}
.tcard.vid .pv{position:relative;display:block;width:100%;aspect-ratio:16/10;margin:0;padding:0;border:0;
  background:var(--forest);cursor:pointer;overflow:hidden}
.tcard.vid .pv .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(20px) saturate(.85) brightness(.66);transform:scale(1.15)}
.tcard.vid .pv .fg{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  transition:transform 620ms cubic-bezier(.2,.7,.3,1)}
.tcard.vid .pv:hover .fg,.tcard.vid .pv:focus-visible .fg{transform:scale(1.025)}
.tcard.vid .pv .play{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;
  background:rgba(253,251,245,.94);display:grid;place-items:center;box-shadow:var(--sh2);
  transform:translate(-50%,-50%);transition:transform var(--t),background var(--t)}
.tcard.vid .pv:hover .play{transform:translate(-50%,-50%) scale(1.07);background:var(--cream)}
.tcard.vid .pv .play svg{width:17px;height:17px;margin-left:3px;color:var(--forest)}
.tcard.vid .pv .dur{position:absolute;right:12px;bottom:12px;font-family:"Martian Mono";font-size:9.5px;
  letter-spacing:.1em;color:var(--cream);background:rgba(20,24,15,.6);padding:4px 8px;border-radius:var(--r-pill)}
.tcard.vid .vbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:24px 25px 26px}
.tcard.vid q{font-size:19px}
.tcard.vid .who{padding-top:20px}

/* The player. Built on .sheetwrap so the veil, the panel and the close button
   are the same object the quiz uses. The panel deliberately has no fixed
   width: the video reports its own dimensions and the box takes that shape,
   so a vertical clip opens tall and narrow and a landscape one opens wide. */
.sheetwrap.vidbox .panel{width:auto;max-width:min(94vw,1000px);padding:0;overflow:hidden;background:#12150F}
/* The panel is shrink to fit, so the video is what sets its width. That means
   the cap has to leave room for the 20px of padding .sheetwrap puts on each
   side, or a landscape clip on a phone grows wider than the box holding it. */
.sheetwrap.vidbox video{display:block;width:auto;height:auto;max-width:min(calc(100vw - 44px),1000px);
  max-height:78vh;background:#12150F}
.sheetwrap.vidbox .x{background:rgba(253,251,245,.92);z-index:2}
.sheetwrap.vidbox .x:hover{background:var(--cream)}
.sheetwrap.vidbox .cap{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--forest)}
.sheetwrap.vidbox .cap .ln{width:24px;height:1px;background:var(--moss);flex:none}
.sheetwrap.vidbox .cap .lab{color:var(--haze)}
@media (max-width:760px){
  .sheetwrap.vidbox .panel{max-width:calc(100vw - 40px)}
  .sheetwrap.vidbox video{max-height:68vh}


  /* Links that were sitting at twenty pixels tall. A finger is about forty. */
  .srcline a,.more2{display:inline-flex;align-items:center;min-height:38px}
  footer ul a{display:inline-block;padding:7px 0}
}

.tbar{margin-top:24px;display:flex;align-items:center;gap:14px}
.tbar .ar{width:44px;height:44px;border-radius:50%;border:1px solid var(--haze);background:var(--paper);display:grid;place-items:center;cursor:pointer;transition:border-color var(--t),background var(--t),opacity var(--t)}
.tbar .ar:hover:not(:disabled){border-color:var(--sage);background:var(--oat)}
.tbar .ar:disabled{opacity:.34;cursor:default}
.tbar .ar svg{width:13px;height:13px;color:var(--forest)}
.tbar .ar.prev svg{transform:rotate(180deg)}
.tbar .prog{flex:1;max-width:220px;height:3px;border-radius:var(--r-pill);background:var(--haze);overflow:hidden}
.tbar .prog i{display:block;height:100%;width:34%;border-radius:var(--r-pill);background:var(--ember);transition:width 260ms ease,transform 260ms ease}
.tbar .cnt{margin-left:auto;font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;color:var(--grey3)}

/* ============ GUARANTEE BOXES ============ */
.gbox{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.gbox .g{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh1);padding:30px 28px;display:flex;flex-direction:column;transition:box-shadow var(--t)}
.gbox .g:hover{box-shadow:var(--sh2)}
.gbox .g .k{display:block;font-family:Archivo;font-stretch:115%;font-weight:500;font-size:46px;letter-spacing:-.02em;line-height:1;color:var(--forest);margin-bottom:16px}
.gbox .g.hot .k{color:var(--ember)}
.gbox .g h5{margin-bottom:9px}
.gbox .g p{font-size:16px;line-height:1.4;color:var(--grey1)}
.gbox .g .tagline{margin-top:auto;padding-top:20px;font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey3)}


/* ============ QUESTIONS ============ */
.qa{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;max-width:none;border-top:1px solid var(--line)}
.qa details:nth-child(2){border-top:0}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:22px;padding:21px 2px;font-size:20px;font-weight:550;color:var(--forest);transition:color var(--t)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary:hover{color:var(--moss)}
.qa summary:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:6px}
.qa summary .pm{margin-left:auto;position:relative;width:12px;height:12px;flex:none}
.qa summary .pm:before,.qa summary .pm:after{content:"";position:absolute;background:var(--grey3);border-radius:1px;transition:transform 240ms cubic-bezier(.16,.84,.3,1),background var(--t)}
.qa summary .pm:before{left:0;top:5.2px;width:12px;height:1.6px}
.qa summary .pm:after{left:5.2px;top:0;width:1.6px;height:12px}
.qa details[open] summary .pm:after{transform:rotate(90deg)}
.qa details[open] summary .pm:before,.qa details[open] summary .pm:after{background:var(--ember)}
.qa .a{padding:0 44px 22px 2px;font-size:17px;line-height:1.45;color:var(--grey1);max-width:64ch}

/* ============ CTA + FOOTER ============ */
.cta{text-align:center;padding:84px 0}
.cta h2{margin:0 auto}
.cta .sub{max-width:46ch;margin:20px auto 0}
.cta .pair{justify-content:center;margin-top:28px}
.cta .fine{margin-top:14px;font-size:15px;color:var(--grey2)}
/* ============ THE DEEP BAND ============
   Forest ground with cream type. The homepage lights it; the role pages use
   it flat, as the ground a written system is laid on. */
.deep{background:var(--forest);color:var(--haze);position:relative;overflow:hidden;padding:84px 0}
.deep .wrap{position:relative;z-index:2}
/* lighter weight is an optical correction for cream on dark green, not a
   different heading size */
.deep h2{color:var(--cream);font-weight:450;margin:0 auto}
.deep .lab{color:var(--sage)}
.deep .dsub{max-width:52ch;margin:20px auto 0;font-size:20px;line-height:1.5;color:var(--haze);text-align:center}
@media (max-width:860px){.deep{padding:72px 0}}
@media (max-width:600px){.deep{padding:64px 0}}

/* ============ THE DOCUMENT MOCK ============
   A written system shown as the document it is. Used on the homepage stage,
   on how it works and on all three role pages, so it belongs here rather
   than in home.css. Rows are visible by default; the homepage adds .sys and
   reveals them one at a time. */
.frame{background:var(--paper);border-radius:var(--r-elev);box-shadow:var(--sh3);overflow:hidden;
  /* a paper document keeps paper text, even laid on the forest band, where
     it would otherwise inherit --haze and read as a ghost */
  color:var(--ink)}
.frame .doc li{color:var(--grey1)}
.frame .bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#E4E0D1;display:block}
.frame .bar b{margin-left:12px;font-weight:550;font-size:15px;color:var(--ink)}
.frame .bar .meta{margin-left:auto;display:flex;gap:16px}
.frame .bar .meta span{font-size:13px;color:var(--grey2)}
.frame .bar .meta em{font-style:normal;color:var(--ink)}
.frame .well{padding:18px 22px 22px;min-height:210px;position:relative}
.frame .well>.lab{display:block;margin-bottom:16px}
.doc{margin:0;padding:0;list-style:none}
.doc li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;padding:9px 0;
  border-top:1px solid #F0ECDD;font-size:16.5px;line-height:1.45}
.doc li:first-child{border-top:0}
.doc li i{font-style:normal;font-family:"Martian Mono";font-size:11px;letter-spacing:.14em;
  color:var(--grey3);padding-top:4px}
@media (max-width:600px){
  .frame .well{padding:16px 17px 18px;min-height:0}
  .frame .bar{padding:11px 15px}
  .frame .bar b{font-size:14px}
  .frame .bar .meta{display:none}
  .doc li{grid-template-columns:30px 1fr;gap:12px;font-size:15.5px}
}

footer{background:var(--paper);padding:46px 0 26px;border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:34px}
footer .mark{display:block;margin-bottom:11px}
footer .blurb{font-size:15px;line-height:1.5;color:var(--grey2);max-width:26ch}
footer .lab{display:block;margin-bottom:13px;color:var(--grey3)}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
footer a{font-size:15px;color:var(--grey1);transition:color var(--t)}
footer a:hover{color:var(--ink)}
footer .btm{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--grey3)}


/* motion */
/* ---- motion vocabulary: four ways to arrive, not one ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity 720ms cubic-bezier(.16,.84,.3,1),transform 720ms cubic-bezier(.16,.84,.3,1)}
.rv.lift{transform:translateY(30px) scale(.985);transition-duration:840ms}
.rv.sweep{transform:translateY(10px);transition-duration:520ms}
.rv.in{opacity:1;transform:none}
.s1{transition-delay:80ms}.s2{transition-delay:160ms}.s3{transition-delay:240ms}

/* rules and meters draw from their origin */
.dw{transform:scaleX(0);transform-origin:left;transition:transform 820ms cubic-bezier(.16,.84,.3,1)}
.dw.in{transform:scaleX(1)}

/* word level reveal, used on two headlines only */
.wsplit w{display:inline-block;overflow:hidden;vertical-align:bottom}
.wsplit w>s{display:inline-block;text-decoration:none;transform:translateY(104%);transition:transform 760ms cubic-bezier(.16,.84,.3,1)}
.wsplit.in w>s{transform:translateY(0)}

/* scroll progress */
.prog-top{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;background:transparent;pointer-events:none}
.prog-top i{display:block;height:100%;width:0;background:var(--ember);transform-origin:left;transition:width 90ms linear}

/* arrows travel, the way Steep rations them */
.more2 svg,.arw i{transition:transform var(--t)}
.more2:hover svg{transform:translateX(4px)}

/* numbers hold their width while they count */
.count{font-variant-numeric:tabular-nums}

/* how it works, choreographed */
.steps .st .ring{transform:scale(.72);opacity:0;transition:transform 620ms cubic-bezier(.34,1.4,.5,1),opacity 420ms ease}
.steps.in .st .ring{transform:scale(1);opacity:1}
.steps.in .st:nth-child(1) .ring{transition-delay:60ms}
.steps.in .st:nth-child(2) .ring{transition-delay:250ms}
.steps.in .st:nth-child(3) .ring{transition-delay:440ms}
.steps.in .st:nth-child(4) .ring{transition-delay:630ms}
.steps .st .n{transform:scale(0);transition:transform 480ms cubic-bezier(.34,1.5,.5,1)}
.steps.in .st .n{transform:scale(1)}
.steps.in .st:nth-child(1) .n{transition-delay:240ms}
.steps.in .st:nth-child(2) .n{transition-delay:430ms}
.steps.in .st:nth-child(3) .n{transition-delay:620ms}
.steps.in .st:nth-child(4) .n{transition-delay:810ms}
.steps .st h5,.steps .st p{opacity:0;transform:translateY(12px);transition:opacity 560ms ease,transform 640ms cubic-bezier(.16,.84,.3,1)}
.steps.in .st h5,.steps.in .st p{opacity:1;transform:none}
.steps.in .st:nth-child(1) h5{transition-delay:300ms}.steps.in .st:nth-child(1) p{transition-delay:360ms}
.steps.in .st:nth-child(2) h5{transition-delay:490ms}.steps.in .st:nth-child(2) p{transition-delay:550ms}
.steps.in .st:nth-child(3) h5{transition-delay:680ms}.steps.in .st:nth-child(3) p{transition-delay:740ms}
.steps.in .st:nth-child(4) h5{transition-delay:870ms}.steps.in .st:nth-child(4) p{transition-delay:930ms}

@media (prefers-reduced-motion:reduce){
  .rv,.rv.lift,.rv.sweep{opacity:1;transform:none;transition:none}
  .dw{transform:none;transition:none}
  .wsplit w>s{transform:none;transition:none}
  .prog-top{display:none}
  .steps .st .ring,.steps .st .n,.steps .st h5,.steps .st p{opacity:1;transform:none;transition:none}
  .doc.sys li{opacity:1;transform:none}.skel{display:none}
  .cur,.mqr .track{animation:none}
  .steps .st .bar{transform:scaleX(1)}
  html{scroll-behavior:auto}
}


/* ============ FORMS ============ */
.form{display:flex;flex-direction:column;gap:14px;max-width:440px}
.form.wide{max-width:none}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-family:"Martian Mono";font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey3)}
.fld label .req{color:var(--ember);margin-left:1px}
.fld label .opt{color:var(--grey3);opacity:.75;letter-spacing:.08em;margin-left:2px}
.fld input,.fld textarea{font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--haze);border-radius:var(--r-small);padding:13px 15px;width:100%;transition:border-color var(--t)}
.fld textarea{min-height:120px;resize:vertical;line-height:1.45}
.fld input:hover,.fld textarea:hover{border-color:var(--sage)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-color:transparent}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{margin-top:6px;align-self:flex-start}
.form .fine{font-size:14px;color:var(--grey2);line-height:1.4}
.form .err{font-size:14.5px;color:#9B4227}
@media (max-width:600px){.form .row2{grid-template-columns:1fr}}

/* the gate, shown over a resource */
.sheetwrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.sheetwrap.on{display:flex}
.sheetwrap .veil{position:absolute;inset:0;background:rgba(20,24,15,.46);backdrop-filter:blur(3px);
  opacity:0;transition:opacity 260ms ease}
.sheetwrap.on .veil{opacity:1}
.sheetwrap .panel{position:relative;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh3);
  width:min(520px,100%);max-height:90vh;overflow-y:auto;padding:38px 36px;
  opacity:0;transform:translateY(16px) scale(.985);transition:opacity 320ms ease,transform 380ms cubic-bezier(.16,.84,.3,1)}
.sheetwrap.on .panel{opacity:1;transform:none}
.sheetwrap .x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:0;
  background:var(--mist);cursor:pointer;display:grid;place-items:center;color:var(--grey1);font-size:17px;line-height:1}
.sheetwrap .x:hover{background:var(--oat)}
.sheetwrap .kind{font-family:"Martian Mono";font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ember);display:block;margin-bottom:12px}
.sheetwrap h4{margin-bottom:10px}
.sheetwrap .intro{font-size:16px;line-height:1.45;color:var(--grey1);margin-bottom:26px;max-width:42ch}
.sheetwrap .form{max-width:none}
.done{text-align:center;padding:14px 0}
.done .tick{width:54px;height:54px;border-radius:50%;background:var(--cream);display:grid;place-items:center;
  margin:0 auto 20px}
.done .tick svg{width:20px;height:20px;color:var(--forest)}
.done h4{margin-bottom:10px}
.done p{font-size:16px;color:var(--grey1);margin-bottom:22px;max-width:36ch;margin-left:auto;margin-right:auto}


/* ============ THE HAND OVER QUIZ ============
   Built on .sheetwrap so the veil, the panel and the close are the same
   object the resource gate uses. The hero stays visible behind it. */
.sheetwrap.quiz .panel{width:min(600px,100%);padding:34px 34px 30px}
.qz-head{margin-bottom:26px;padding-right:44px}
.qz-step{font-family:"Martian Mono";font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey3);display:block;margin-bottom:12px}
.qz-prog{height:3px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.qz-prog i{display:block;height:100%;width:0;min-width:10px;border-radius:var(--r-pill);background:var(--ember);transition:width 420ms cubic-bezier(.16,.84,.3,1)}

.qz-q{opacity:0;transform:translateY(10px);transition:opacity 420ms ease,transform 480ms cubic-bezier(.16,.84,.3,1)}
.qz-q.in{opacity:1;transform:none}
.qz-q h4{margin-bottom:8px;max-width:26ch}
.qz-help{font-size:15.5px;line-height:1.45;color:var(--grey2);margin-bottom:4px}
.qz-opts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.qz-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:inherit;font-size:16.5px;
  color:var(--ink);background:var(--paper);border:1px solid var(--haze);border-radius:var(--r-small);
  padding:15px 17px;cursor:pointer;transition:border-color var(--t),background var(--t),transform var(--t)}
.qz-opt:hover{border-color:var(--sage);background:var(--oat)}
.qz-opt:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.qz-opt .dot{flex:none;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--haze);position:relative;transition:border-color var(--t)}
.qz-opt .dot:after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--forest);transform:scale(0);transition:transform 220ms cubic-bezier(.34,1.5,.5,1)}
.qz-opt:hover .dot{border-color:var(--sage)}
.qz-opt.on{border-color:var(--forest);background:var(--oat)}
.qz-opt.on .dot{border-color:var(--forest)}
.qz-opt.on .dot:after{transform:scale(1)}
.qz-back{margin-top:20px;display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:4px 2px;
  font-family:inherit;font-size:15px;color:var(--grey2);cursor:pointer;transition:color var(--t)}
.qz-back:hover{color:var(--ink)}
.qz-back svg{width:11px;height:11px;transform:rotate(180deg);color:var(--grey3)}

.sheetwrap.quiz .intro{max-width:none}
.qz-result .intro{margin-bottom:22px}
.qz-stat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.qz-stat div{background:var(--mist);border-radius:var(--r-small);padding:18px 18px 16px}
.qz-stat .k{display:block;font-family:Archivo;font-stretch:115%;font-weight:500;font-size:38px;letter-spacing:-.02em;
  line-height:1;color:var(--ember);margin-bottom:8px}
.qz-stat .t{font-size:14px;line-height:1.3;color:var(--grey1);display:block;max-width:14ch}
.qz-match{border:1px solid var(--line);border-radius:var(--r-small);padding:18px 18px 16px;margin-bottom:24px}
.qz-match .lab{display:block;margin-bottom:9px;color:var(--grey3)}
.qz-match b{display:block;font-family:"Hanken Grotesk";font-size:19px;font-weight:550;color:var(--forest);margin-bottom:6px}
.qz-match p{font-size:15.5px;line-height:1.42;color:var(--grey1)}
.qz-result .btn{width:100%}
.qz-result .fine{margin-top:12px;font-size:14px;color:var(--grey2);text-align:center}

.qz-gate .form .btn{width:100%;align-self:stretch}
.qz-end{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.qz-end .btn{flex:1 1 auto;min-width:150px}
.done .fine{margin-top:14px;font-size:14px;color:var(--grey2);max-width:38ch;margin-left:auto;margin-right:auto}

/* on a phone it is a sheet that comes up from the bottom, not a dialog */
@media (max-width:600px){
  .sheetwrap.quiz{align-items:flex-end;padding:0}
  .sheetwrap.quiz .panel{width:100%;max-height:92vh;border-radius:24px 24px 0 0;padding:28px 22px 26px;
    transform:translateY(28px)}
  .sheetwrap.quiz.on .panel{transform:none}
  .qz-opt{font-size:16px;padding:14px 15px}
  .qz-stat{grid-template-columns:1fr 1fr;gap:10px}
  .qz-stat div{padding:15px 14px 13px}
  .qz-stat .k{font-size:31px}
  .qz-end .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .qz-q{opacity:1;transform:none;transition:none}
  .qz-opt .dot:after{transition:none}
}

/* ============ RESPONSIVE, shared chrome and components ============ */
/* ---------- the phone menu ----------
   Below 1000px the five nav links were simply switched off and nothing
   replaced them, so on a phone the only route to another page was the footer,
   nine screens down. The same links now slide out of the bar. */
.navtoggle{display:none;width:42px;height:42px;border:1px solid var(--haze);background:var(--paper);
  border-radius:50%;cursor:pointer;padding:0;place-items:center;gap:5px;flex-direction:column;
  transition:border-color var(--t),background var(--t)}
.navtoggle span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:1px;
  transition:transform 240ms cubic-bezier(.16,.84,.3,1),opacity 160ms}
.nav.open .navtoggle{background:var(--oat);border-color:var(--sage)}
.nav.open .navtoggle span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.open .navtoggle span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.nv .nvask{display:none}

@media (max-width:1000px){
  .navtoggle{display:flex;align-items:center;justify-content:center}
  .nv .nvask{display:block}
  .nv{position:fixed;left:0;right:0;top:0;z-index:-1;flex-direction:column;gap:0;margin:0;
    padding:calc(var(--navh,76px) + env(safe-area-inset-top,0px) + 6px) var(--gut) 20px;
    background:#FFFEFA;
    box-shadow:0 14px 34px rgba(20,24,15,.12);
    transform:translateY(-101%);transition:transform 300ms cubic-bezier(.2,.7,.3,1)}
  .nav.open{background:#FFFEFA}
  .nav.open .nv{transform:none}
  .nv a{font-size:18px;color:var(--ink);padding:15px 2px;border-bottom:1px solid var(--line)}
  .nv a:last-child{border-bottom:0}
  .three,.asks{grid-template-columns:1fr}
  .gbox{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:600px){
  :root{--gut:20px}
  .gbox{grid-template-columns:1fr 1fr}
  .nav{height:62px}
  .nv{--navh:62px}
  .mark{white-space:nowrap;font-size:19px}
  .nav .pair .btn.ghost{display:none}
  section{padding:60px 0}.cta{padding:80px 0}
  .gbox{grid-template-columns:1fr}
  .tcard{flex:0 0 84vw}
}

/* ============ BOOKING BLOCK ============ */
.bookwrap{max-width:860px;margin:34px auto 0;background:var(--paper);border-radius:var(--r-card,24px);
  box-shadow:var(--sh2);overflow:hidden;min-height:720px}
.bookwrap iframe{display:block;width:100%;border:0}
@media (max-width:600px){.bookwrap{margin-top:26px;border-radius:18px;min-height:780px}}

/* the calendar in its dialog: the panel is wider than the quiz's and carries
   no padding, so the booking widget sits edge to edge inside it */
.sheetwrap.bookbox .panel{width:min(94vw,900px);padding:0}
.sheetwrap.bookbox .bookwrap{margin:0;max-width:none;border-radius:inherit;box-shadow:none;min-height:640px}
.sheetwrap.bookbox .x{top:12px;right:12px;z-index:2;background:var(--paper);box-shadow:var(--sh1)}
@media (max-width:600px){.sheetwrap.bookbox .bookwrap{min-height:620px}}

/* Ask a question, in the same sheet as the quiz and the booking calendar */
.sheetwrap.askbox .panel{width:min(560px,100%)}
.sheetwrap.askbox h3{margin:12px 0 8px}
.sheetwrap.askbox .sub{color:var(--grey1);font-size:16px;margin:0 0 22px;max-width:42ch}
.sheetwrap.askbox .form{margin:0}
.sheetwrap.askbox .done{text-align:left}
.sheetwrap.askbox .done .tick{margin-left:0}
.sheetwrap.askbox .done p{margin-left:0}

/* ============ PHONE: card grids become swipeable rails ============
   Three cards stacked is three screens of scrolling for one idea. On a phone
   the same three become one screen you swipe, which keeps every section to a
   single view the way the rest of the site behaves. */
@media (max-width:760px){
  .rail-x{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding:4px var(--gut) 12px;
    gap:14px;
  }
  .rail-x::-webkit-scrollbar{display:none}
  .rail-x > *{flex:0 0 82vw;scroll-snap-align:start;min-width:0}
  .rail-x > * > *{min-width:0}
}

/* present in the DOM and rendered, but nowhere a person will ever find it */
.offscreen{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- phone only, and deliberately last ----------
   These override base rules that appear further up the file. An earlier
   attempt put them in the 760px block near the top, where the base .qa rule
   below them simply won on source order. */
@media (max-width:760px){
  /* two columns at every width since launch gave four line questions in a
     half width column, and a dead gap under whichever column ran out first */
  .qa{grid-template-columns:1fr;gap:0}
  .qa summary{font-size:18px;gap:16px;padding:19px 2px}
  .qa .a{padding-right:6px}
}