/* Fernvie — restraint as the system, the scan as the payoff.
   Rule for this file: cyan is a LIGHT SOURCE, never a fill. If it is
   covering area rather than emitting, it is wrong. */

:root{
  --bg:#08090B;
  --bg-2:#0D0F13;
  --fg:#EDF2F6;
  --dim:#79828D;
  --dimmer:#4A525B;
  --cy:#00BFFF;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --warn:#FFB020;
  --max:1180px;
  --ease:cubic-bezier(.2,.7,.25,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
.mono{font-family:'Martian Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
a{color:inherit}

/* The horizon. One soft light source at the bottom of the first screen.
   Fixed so it reads as a place the page sits in, not a decoration on it. */
.horizon{
  position:fixed;left:50%;bottom:-42vh;transform:translateX(-50%);
  width:150vw;height:70vh;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(0,191,255,.30) 0%,
    rgba(0,191,255,.10) 38%,
    rgba(0,191,255,0) 70%);
  pointer-events:none;z-index:0;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
body.is-result .horizon{opacity:.35;transform:translateX(-50%) translateY(14vh)}

header,main,footer{position:relative;z-index:1}

/* ---------------- masthead ---------------- */
.masthead{display:flex;align-items:center;justify-content:space-between;padding:26px 28px}
.masthead img{height:17px;display:block}
.masthead nav{display:flex;gap:28px;align-items:center}
.masthead a{color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s}
.masthead a:hover{color:var(--fg)}

/* ---------------- stage ---------------- */
.stage{
  min-height:calc(100vh - 70px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 28px 80px;text-align:center;
}
body.is-result .stage{min-height:auto;padding-top:24px;justify-content:flex-start}

.console{width:100%;max-width:620px;transition:transform .7s var(--ease)}
body.is-result .console{transform:translateY(-8px)}

/* segmented toggle */
.modes{
  display:inline-flex;padding:3px;border:1px solid var(--line-2);border-radius:999px;
  margin-bottom:18px;background:rgba(255,255,255,.02);
}
.modes button{
  appearance:none;border:0;background:transparent;color:var(--dim);cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;
  padding:9px 22px;border-radius:999px;transition:color .25s,background .25s;
}
.modes button[aria-selected="true"]{background:var(--cy);color:#00222E}
.modes button:focus-visible{outline:2px solid var(--cy);outline-offset:2px}

/* the one field */
.field{position:relative;display:flex;align-items:center;gap:10px}
.field input{
  flex:1;appearance:none;background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);border-radius:999px;
  color:var(--fg);font:inherit;font-size:17px;
  padding:19px 26px;text-align:center;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.field input::placeholder{color:var(--dimmer)}
.field input:focus{
  outline:none;border-color:var(--cy);background:rgba(0,191,255,.04);
  box-shadow:0 0 0 4px rgba(0,191,255,.10),0 0 40px -8px rgba(0,191,255,.35);
}
.hint{margin-top:14px;color:var(--dimmer);font-size:12.5px;letter-spacing:.02em}
.hint b{color:var(--dim);font-weight:500}
.err{margin-top:14px;color:var(--warn);font-size:13px;min-height:18px}

/* ---------------- the scan plane ---------------- */
.scan{
  width:100%;max-width:940px;margin:0 auto;
  perspective:1400px;
  height:0;overflow:hidden;
  opacity:0;transform:translateY(28px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
body.is-scanning .scan,body.is-result .scan{
  height:auto;overflow:visible;margin-top:56px;
  opacity:1;transform:none;pointer-events:auto;
}

.plane{
  position:relative;margin:0 auto;width:100%;max-width:660px;
  aspect-ratio:16/11;border-radius:3px;
  background:linear-gradient(180deg,#12151A,#0A0C0F);
  border:1px solid var(--line-2);
  transform:rotateX(52deg) rotateZ(-1deg) scale(.96);
  transform-style:preserve-3d;
  box-shadow:0 60px 90px -40px rgba(0,0,0,.9);
  transition:transform 1s var(--ease);
  overflow:hidden;
}
body.is-result .plane{transform:rotateX(34deg) rotateZ(0) scale(1)}

/* wireframe drawn from the target's REAL structure */
.wire{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;gap:9px}
.wire i{display:block;background:rgba(255,255,255,.20);border-radius:2px;
  opacity:0;transform:translateY(6px);animation:wireIn .5s var(--ease) forwards}
.wire .bar{height:11px}
.wire .head{height:30px;background:rgba(255,255,255,.34)}
.wire .row{display:flex;gap:9px}
.wire .row i{flex:1;height:44px}
.wire .txt{height:7px;background:rgba(255,255,255,.13)}
@keyframes wireIn{to{opacity:1;transform:none}}

/* the light sheet. This is the whole idea: one sheet of light passing
   over their site, not a glow sitting on top of it. */
.sheet{
  position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,
    rgba(0,191,255,0) 0%,
    rgba(0,191,255,.10) 30%,
    rgba(0,191,255,.55) 50%,
    rgba(0,191,255,.10) 70%,
    rgba(0,191,255,0) 100%);
  filter:blur(1px);
  left:-40%;opacity:0;
}
body.is-scanning .sheet{opacity:1;animation:sweep 1.5s var(--ease) infinite}
@keyframes sweep{from{left:-40%}to{left:106%}}

.edge{position:absolute;left:0;right:0;height:1px;background:var(--cy);
  box-shadow:0 0 26px 3px rgba(0,191,255,.7);top:0;opacity:0}
body.is-scanning .edge{opacity:1;animation:drop 1.5s var(--ease) infinite}
@keyframes drop{from{top:0}to{top:100%}}

/* readouts on leader lines */
.leads{display:flex;justify-content:center;gap:0;margin-top:30px;flex-wrap:wrap}
.lead{padding:0 26px;border-left:1px solid var(--line);text-align:left;min-width:132px;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lead:first-child{border-left:0}
body.is-result .lead{opacity:1;transform:none}
body.is-result .lead:nth-child(2){transition-delay:.08s}
body.is-result .lead:nth-child(3){transition-delay:.16s}
body.is-result .lead:nth-child(4){transition-delay:.24s}
.lead .k{display:block;color:var(--dimmer);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:7px}
.lead .v{font-size:23px;font-weight:600;letter-spacing:-.02em}
.lead .v small{font-size:12px;color:var(--dim);font-weight:400;margin-left:2px}

/* grade */
.verdict{margin-top:52px;opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease) .3s,transform .6s var(--ease) .3s}
body.is-result .verdict{opacity:1;transform:none}
.grade{font-size:clamp(72px,13vw,150px);line-height:.85;font-weight:700;letter-spacing:-.05em;color:var(--cy)}
.gradesub{color:var(--dim);font-size:14.5px;margin-top:14px}
.gradesub b{color:var(--fg);font-weight:600}

/* findings */
.findings{max-width:660px;margin:44px auto 0;text-align:left}
.finding{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.finding .sev{width:6px;height:6px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:var(--dimmer)}
.finding.high .sev{background:var(--warn);box-shadow:0 0 10px rgba(255,176,32,.6)}
.finding.medium .sev{background:var(--dim)}
.finding h4{font-size:14.5px;font-weight:600;margin-bottom:4px}
.finding p{color:var(--dim);font-size:13.5px;line-height:1.6}
.after{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.after p{color:var(--dim);font-size:13.5px;line-height:1.65;margin-bottom:20px;max-width:60ch}
.after .acts{display:flex;gap:12px;flex-wrap:wrap}

/* checklist (social mode) */
.checklist{max-width:660px;margin:36px auto 0;text-align:left}
.checklist li{list-style:none;padding:15px 0;border-top:1px solid var(--line)}
.checklist b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.checklist span{color:var(--dim);font-size:13.5px;line-height:1.6}
.note{max-width:660px;margin:0 auto;color:var(--dim);font-size:13.5px;line-height:1.65;
  padding:16px 18px;border:1px solid var(--line);border-radius:4px;text-align:left}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cy);color:#00222E;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;
  transition:transform .2s var(--ease),box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,191,255,.7)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--cy);color:var(--cy);box-shadow:none}
.masthead a.btn{background:transparent;color:var(--fg);border:1px solid var(--line-2);font-weight:600}
.masthead a.btn:hover{border-color:var(--cy);color:var(--cy);box-shadow:none;transform:none}
.after a.btn{color:#00222E}
.masthead a.btn.ghost,.after a.btn.ghost{color:var(--fg)}

/* ---------------- lower page ---------------- */
section{padding:110px 0;border-top:1px solid var(--line)}
.eyebrow{color:var(--dimmer);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
h2{font-size:clamp(27px,3.4vw,42px);line-height:1.08;letter-spacing:-.03em;max-width:19ch;margin-bottom:16px}
.lede{color:var(--dim);font-size:16px;line-height:1.7;max-width:52ch}

.rows{margin-top:48px}
.row{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  padding:26px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.row:hover .rowhead{color:var(--cy)}
.rowhead{font-size:19px;letter-spacing:-.015em;margin-bottom:5px;transition:color .25s}
.row p{color:var(--dim);font-size:14px;line-height:1.6;max-width:56ch}
.row .go{color:var(--cy);font-size:12.5px;font-weight:700;white-space:nowrap}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px}
.tier{padding:0 30px;border-left:1px solid var(--line)}
.tier:first-child{border-left:0;padding-left:0}
.tier .t{font-size:14px;font-weight:600;margin-bottom:5px}
.tier .d{color:var(--cy);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.tier .c{font-size:38px;font-weight:600;letter-spacing:-.035em}
.tier .c small{font-size:13px;color:var(--dim);font-weight:400}
.tier ul{list-style:none;margin-top:22px}
.tier li{color:var(--dim);font-size:13.5px;line-height:1.5;padding:7px 0 7px 16px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:1px;background:var(--cy)}

.care{margin-top:60px;padding-top:38px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}
.care h3{font-size:clamp(21px,2.6vw,30px);line-height:1.2;letter-spacing:-.025em;max-width:22ch}
.care h3 span{color:var(--cy)}
.care p{color:var(--dim);font-size:14px;line-height:1.65;max-width:44ch;margin-top:12px}

footer{padding:44px 0;border-top:1px solid var(--line);color:var(--dimmer);font-size:12.5px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------------- responsive ---------------- */
@media(max-width:820px){
  .masthead nav a:not(.btn){display:none}
  .wrap{padding:0 20px}
  .stage{padding:24px 20px 60px}
  .field input{font-size:16px;padding:17px 20px}
  .leads{gap:0}
  .lead{min-width:50%;padding:14px 18px;border-left:0;border-top:1px solid var(--line)}
  .lead:first-child,.lead:nth-child(2){border-top:0}
  .plane{transform:rotateX(44deg) scale(.98)}
  body.is-result .plane{transform:rotateX(26deg) scale(1)}
  .tiers{grid-template-columns:1fr}
  .tier{border-left:0;border-top:1px solid var(--line);padding:26px 0 0}
  .tier:first-child{border-top:0;padding-top:0}
  .row{grid-template-columns:1fr;gap:10px}
  section{padding:76px 0}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .sheet,.edge{opacity:.35 !important}
}

/* ---------------- three-mode additions ---------------- */

/* Readiness questions, shown when there is nothing to scan. */
.quiz{max-width:560px;margin:0 auto}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 2px;border-top:1px solid var(--line);text-align:left}
.qrow:first-child{border-top:0}
.qrow span{font-size:14.5px;color:var(--fg)}
.yn{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:2px;flex:0 0 auto}
.yn button{appearance:none;border:0;background:transparent;color:var(--dim);cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;padding:7px 15px;border-radius:999px;
  transition:background .2s,color .2s}
.yn button[aria-pressed="true"]{background:var(--cy);color:#00222E}
.quiz .btn{margin-top:22px}

/* Trust / Flow / Found */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:660px;margin:40px auto 0;text-align:left}
.cat .ctop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.cat .cname{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.cat .cgrade{font-size:15px;font-weight:700;color:var(--cy)}
.cat .bar{height:3px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
.cat .bar i{display:block;height:100%;background:var(--cy);width:0;border-radius:2px;
  box-shadow:0 0 12px rgba(0,191,255,.7);transition:width .9s var(--ease)}
.cat.warn .cgrade{color:var(--warn)}
.cat.warn .bar i{background:var(--warn);box-shadow:0 0 12px rgba(255,176,32,.6)}
.cat .cwhy{color:var(--dimmer);font-size:12px;margin-top:8px;line-height:1.5}

/* Locked findings + email gate */
.locked{margin-top:18px;border:1px solid var(--line-2);border-radius:6px;padding:24px 22px;
  background:rgba(255,255,255,.02);text-align:left}
.locked h4{font-size:15px;font-weight:600;margin-bottom:6px}
.locked h4 b{color:var(--cy)}
.locked p{color:var(--dim);font-size:13.5px;line-height:1.65;margin-bottom:18px}
.gateform{display:flex;gap:10px;flex-wrap:wrap}
.gateform input{flex:1;min-width:220px;appearance:none;background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);border-radius:999px;color:var(--fg);font:inherit;font-size:15px;
  padding:14px 20px;transition:border-color .25s,box-shadow .25s}
.gateform input::placeholder{color:var(--dimmer)}
.gateform input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(0,191,255,.12)}
.gatenote{color:var(--dimmer);font-size:11.5px;margin-top:12px;line-height:1.55}
.unlocked{margin-bottom:20px;padding:14px 16px;border-radius:6px;
  border:1px solid rgba(0,191,255,.35);background:rgba(0,191,255,.07);
  color:var(--dim);font-size:13.5px;line-height:1.6}
.unlocked b{color:var(--cy)}

/* Honest limits — what this free pass did NOT do. */
.limits{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);text-align:left}
.limits b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:10px}
.limits li{list-style:none;color:var(--dim);font-size:13px;line-height:1.6;padding:4px 0 4px 16px;position:relative}
.limits li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--dimmer)}

/* Parked domain / recommendation */
.callout{max-width:660px;margin:36px auto 0;text-align:left;
  border:1px solid var(--line-2);border-radius:6px;padding:28px 26px}
.callout h3{font-size:21px;letter-spacing:-.02em;margin-bottom:10px}
.callout p{color:var(--dim);font-size:14.5px;line-height:1.7}
.callout .rec{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.callout .rec b{font-size:16px}
.callout .rec em{font-style:normal;color:var(--cy);font-weight:700}

/* Social stats + platform note */
.plat{color:var(--dimmer);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}

@media(max-width:820px){
  .cats{grid-template-columns:1fr;gap:20px}
  .qrow{gap:12px}
  .qrow span{font-size:13.5px}
}

/* ---------------- intro: who we are, before we ask for anything ---------------- */
.intro{max-width:760px;margin:0 auto 40px}
.kicker{color:var(--cy);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:22px}
.stage h1{font-size:clamp(34px,5.6vw,62px);line-height:1.04;letter-spacing:-.035em;
  font-weight:700;margin-bottom:22px}
.stage h1 em{font-style:normal;color:var(--cy)}
.sell{color:var(--dim);font-size:clamp(15.5px,1.6vw,18px);line-height:1.65;
  max-width:52ch;margin:0 auto}

/* one two three. The whole point is that it looks easy. */
.steps{list-style:none;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 auto 44px;max-width:820px}
.steps li{display:flex;align-items:center;gap:11px;padding:11px 18px 11px 12px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.steps b{width:24px;height:24px;border-radius:50%;background:var(--cy);color:#00222E;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:0 0 auto}
.steps span{color:var(--dim);font-size:13.5px;white-space:nowrap}

.ask{font-size:15px;color:var(--fg);margin-bottom:14px;font-weight:500}
body.is-result .intro,body.is-result .steps{display:none}

/* modes read as answers now, not as jargon */
.modes button{padding:9px 20px;letter-spacing:.02em;font-size:13px;text-transform:none;font-weight:600}

/* ---------------- services ---------------- */
.svcs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:48px;
  border-top:1px solid var(--line)}
.svc{padding:30px 34px 30px 0;border-bottom:1px solid var(--line)}
.svc:nth-child(even){padding-left:34px;border-left:1px solid var(--line)}
.svc h3{font-size:19px;letter-spacing:-.02em;margin-bottom:9px}
.svc p{color:var(--dim);font-size:14.5px;line-height:1.65;max-width:44ch}

/* ---------------- contact ---------------- */
.contact{margin-top:40px;max-width:660px}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact label{display:block;color:var(--dimmer);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px}
.contact input,.contact textarea{
  display:block;width:100%;margin-top:9px;appearance:none;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:8px;
  color:var(--fg);font:inherit;font-size:15.5px;padding:14px 16px;letter-spacing:normal;
  text-transform:none;transition:border-color .25s,box-shadow .25s}
.contact textarea{resize:vertical;min-height:110px;line-height:1.6}
.contact input::placeholder,.contact textarea::placeholder{color:var(--dimmer)}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--cy);
  box-shadow:0 0 0 3px rgba(0,191,255,.12)}
#ccompany{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cactions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.cnote{color:var(--dimmer);font-size:13px}
.cnote a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.cnote a:hover{color:var(--cy)}
.cstatus{margin-top:16px;font-size:14px;min-height:20px;color:var(--cy)}
.cstatus.bad{color:var(--warn)}

@media(max-width:820px){
  .steps{flex-direction:column;align-items:stretch;gap:9px}
  .steps li{justify-content:flex-start}
  .steps span{white-space:normal}
  .svcs{grid-template-columns:1fr}
  .svc,.svc:nth-child(even){padding:26px 0;border-left:0}
  .crow{grid-template-columns:1fr;gap:0}
  .modes{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
  .modes button{padding:10px 6px;font-size:12.5px}
}

/* ---------------- gallery: the beginner entrance ---------------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.gcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:var(--bg-2);
  transition:transform .28s var(--ease),border-color .28s}
.gcard:hover{transform:translateY(-4px);border-color:rgba(0,191,255,.45)}
.gcard img{width:100%;height:auto;display:block;filter:saturate(.95)}
.gmeta{padding:16px 18px 18px}
.gmeta b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.gmeta span{color:var(--dim);font-size:13px;line-height:1.5}
.galnote{margin-top:26px;color:var(--dim);font-size:14.5px}
.galnote a{color:var(--cy);text-decoration:underline;text-underline-offset:3px}

/* ---------------- faq ---------------- */
.faqs{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:44px;
  border-top:1px solid var(--line)}
.fq{padding:26px 0;border-bottom:1px solid var(--line)}
.fq h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.fq p{color:var(--dim);font-size:14.5px;line-height:1.7}

@media(max-width:900px){
  .gal{grid-template-columns:1fr 1fr;gap:14px}
  .faqs{grid-template-columns:1fr;gap:0}
}
@media(max-width:600px){ .gal{grid-template-columns:1fr} }

/* ---------------- document pages (about, privacy, terms) ---------------- */
body.page .horizon{opacity:.18}
.doc{padding:70px 0 100px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.03em;margin-bottom:22px}
.doc h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;margin:52px 0 14px;
  padding-top:26px;border-top:1px solid var(--line);max-width:none}
.doc h3{font-size:16.5px;font-weight:600;margin:26px 0 8px;color:var(--fg)}
.doc p{color:var(--dim);font-size:15px;line-height:1.75;margin-bottom:14px}
.doc p b{color:var(--fg);font-weight:600}
.doc .doclead{font-size:17px;line-height:1.72;color:var(--dim);margin-bottom:18px}
.doc .docnote{color:var(--dimmer);font-size:13.5px;line-height:1.65;margin-bottom:22px;max-width:64ch}
.doc a{color:var(--cy);text-decoration:underline;text-underline-offset:3px}
.doc a.btn{color:#00222E;text-decoration:none}
.roster{list-style:none;margin:18px 0 26px;border-top:1px solid var(--line)}
.roster li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:210px 1fr;gap:20px;align-items:baseline}
.roster b{font-size:15px;font-weight:600;color:var(--fg)}
.roster span{color:var(--dim);font-size:14px;line-height:1.6}
footer a{color:var(--dimmer);text-decoration:none}
footer a:hover{color:var(--cy)}
@media(max-width:700px){
  .roster li{grid-template-columns:1fr;gap:4px}
  .doc{padding:44px 0 70px}
}

.kicker-sub{color:var(--dim);letter-spacing:.16em;margin-top:-14px;margin-bottom:22px;
  font-size:11.5px}

/* ---------------- about page rhythm ----------------
   The old page was one uninterrupted left-aligned column. These break it up
   so the eye has somewhere to land. */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:38px 0 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statband div{padding:24px 0 24px 22px;border-left:1px solid var(--line)}
.statband div:first-child{border-left:0;padding-left:0}
.statband b{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--cy)}
.statband span{display:block;color:var(--dimmer);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:7px}

.logowall{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 18px}
.logowall span,.logowall img{display:flex;align-items:center;justify-content:center;
  min-height:62px;padding:0 22px;border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.02);color:var(--fg);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-align:center;
  opacity:.72;transition:opacity .25s,border-color .25s}
.logowall span:hover,.logowall img:hover{opacity:1;border-color:var(--line-2)}
.logowall img{max-height:62px;width:auto;object-fit:contain;padding:12px 22px}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:46px 0 10px;
  padding-top:30px;border-top:1px solid var(--line)}
.twocol h3{margin-top:0}

.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:26px 0 10px;
  background:var(--line);border:1px solid var(--line)}
.wg{background:var(--bg);padding:20px 22px}
.wg b{display:block;font-size:15px;font-weight:600;color:var(--fg);margin-bottom:5px}
.wg span{color:var(--dim);font-size:13.5px;line-height:1.6}

.pull{margin:52px 0;padding:0 0 0 26px;border-left:2px solid var(--cy);
  font-size:clamp(19px,2.4vw,24px);line-height:1.5;letter-spacing:-.015em;color:var(--fg)}

@media(max-width:700px){
  .statband{grid-template-columns:1fr 1fr}
  .statband div{border-left:0;border-top:1px solid var(--line);padding:18px 0}
  .statband div:nth-child(2),.statband div:nth-child(4){border-left:1px solid var(--line);padding-left:20px}
  .statband div:first-child,.statband div:nth-child(2){border-top:0}
  .twocol,.workgrid{grid-template-columns:1fr}
  .logowall span{min-height:54px;font-size:11px;padding:0 14px}
}

/* Submit button. The input alone assumed people press Enter; they do not. */
.field{gap:0;position:relative}
.field input{padding-right:150px;text-align:left}
.btn.go{position:absolute;right:6px;top:6px;bottom:6px;padding:0 22px;font-size:13.5px;
  white-space:nowrap}
.btn.go:hover{transform:none;box-shadow:0 0 26px -6px rgba(0,191,255,.8)}

/* Centre-stage bias on the tier we want sold. */
.tier.hi{position:relative}
.tier.hi .t em{font-style:normal;color:#00222E;background:var(--cy);font-size:9.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;
  border-radius:3px;margin-left:8px;vertical-align:middle}
.tier.hi .c{color:var(--cy)}

.reassure{margin-top:18px;padding:16px 20px;border-left:2px solid var(--cy);
  color:var(--dim);font-size:14.5px;line-height:1.7;max-width:60ch}
.reassure b{color:var(--fg);font-weight:600}

/* Client strip, homepage. Recognisable names belong where cold traffic lands. */
section.thin{padding:56px 0}
.clead{color:var(--dimmer);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:20px}
.cfoot{color:var(--dimmer);font-size:12.5px;margin-top:18px}
.cfoot a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.cfoot a:hover{color:var(--cy)}

@media(max-width:700px){
  .field input{padding-right:20px;text-align:center}
  .btn.go{position:static;width:100%;margin-top:10px;padding:15px 22px;justify-content:center}
  .field{flex-direction:column}
}

/* ==========================================================================
   TYPE SYSTEM — display voice (chosen: Bricolage Grotesque)
   Schibsted Grotesk stays on body copy: personality lives in the display
   face, trust lives in the reading face. Martian Mono stays on live data
   only, where tabular figures earn their keep.
   ========================================================================== */
:root{ --display:'Bricolage Grotesque','Schibsted Grotesk',system-ui,sans-serif; }

h1, h2, h3,
.stage h1, .doc h1, .doc h2, .doc h3,
.rowhead, .svc h3, .fq h3, .tier .c, .p-cost,
.grade, .statband b, .wg b, .gmeta b, .callout h3,
.care h3, .pull, .locked h4, .lead .v{
  font-family:var(--display);
  font-optical-sizing:auto;
}
h1,.stage h1,.doc h1{font-weight:800}
h2,.doc h2,.care h3,.callout h3{font-weight:700}
h3,.doc h3,.svc h3,.fq h3,.rowhead,.wg b,.gmeta b,.locked h4{font-weight:700}
.tier .c,.p-cost,.grade,.statband b{font-weight:800}
.pull{font-weight:600}

/* Live readouts stay monospaced — tabular figures stop numbers jittering
   while they count up. */
.lead .v{font-family:'Martian Mono',ui-monospace,monospace;font-weight:600}

/* Section markers. The real reason sections did not read as separate was
   that headings were only BIGGER, never DIFFERENT. A rule plus a
   letterspaced kicker makes the division visible before a word is read. */
/* The tracked-label-plus-dash pattern is the clearest AI-generated tell there
   is, so sections divide by tone and scale instead. Alternating surfaces read
   as deliberate; a decorative chip reads as generated. */
.eyebrow{display:none}
.clead{color:var(--dimmer);font-weight:600}

/* Bricolage runs slightly wide; pull the big sizes back in. */
.stage h1{letter-spacing:-.04em}
.doc h1{letter-spacing:-.035em}

/* Section rhythm without labels: alternating surface + a bigger heading step. */
main > section:nth-of-type(odd){background:#0B0D10}
main > section{border-top:0;padding:104px 0}
main > section h2{font-size:clamp(32px,4.6vw,52px);line-height:1.02;letter-spacing:-.038em;
  max-width:16ch;margin-bottom:18px}
section.thin{padding:52px 0}

/* Headline setup line. Lighter and smaller so the three-beat payoff below it
   is what actually lands. */
.preline{font-size:clamp(16px,1.9vw,21px);color:var(--fg);font-weight:500;
  letter-spacing:-.01em;margin-bottom:16px;opacity:.85}
.stage h1{max-width:18ch;margin-left:auto;margin-right:auto}

/* ---------------- idea intake form ---------------- */
.ifintro{color:var(--dim);font-size:14.5px;line-height:1.7;margin-bottom:26px;text-align:left}
.ifl{display:block;color:var(--dimmer);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;margin-bottom:18px;font-weight:600}
.ifl input,.ifl textarea{display:block;width:100%;margin-top:9px;appearance:none;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:8px;
  color:var(--fg);font:inherit;font-size:15.5px;padding:13px 16px;letter-spacing:normal;
  text-transform:none;font-weight:400;transition:border-color .25s,box-shadow .25s}
.ifl textarea{resize:vertical;line-height:1.6}
.ifl input::placeholder,.ifl textarea::placeholder{color:var(--dimmer)}
.ifl input:focus,.ifl textarea:focus{outline:none;border-color:var(--cy);
  box-shadow:0 0 0 3px rgba(0,191,255,.12)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.chip{appearance:none;background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:999px;color:var(--dim);font:inherit;font-size:13.5px;padding:10px 18px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--cy);color:#00222E;border-color:var(--cy);font-weight:600}
.ifnote{color:var(--dimmer);font-size:12.5px;margin-top:14px;text-align:left}
.ifdone{color:var(--dim);font-size:16px;line-height:1.7;text-align:left}
.ifdone b{color:var(--fg)}

/* ==========================================================================
   BIGGER, FATTER, EASIER
   Body copy was 14.5px and captions 13px. Too small for the audience and too
   small for a thumb. Everything steps up and tap targets grow.
   ========================================================================== */
body{font-size:17px}
.lede{font-size:18.5px;line-height:1.7;max-width:56ch}
.lede.big{font-size:clamp(20px,2.3vw,26px);line-height:1.55;color:var(--fg);
  max-width:26ch;margin-bottom:20px;font-weight:500}
.lede.big b{color:var(--cy);font-weight:700}
.svc p,.fq p,.row p,.wg span,.tier li{font-size:16px;line-height:1.7}
.gmeta b{font-size:17px}
.gmeta span{font-size:15px}
.fq h3,.svc h3{font-size:19px}
.rowhead{font-size:21px}
.tier .t{font-size:16.5px}
.tier .c{font-size:44px}
.hint,.cnote,.galnote,.cfoot{font-size:15px}
.clead{font-size:12px}
.finding p,.checklist span,.limits li{font-size:15px}
.btn{font-size:16px;padding:16px 30px}
.btn.go{padding:0 26px;font-size:15px}

/* ---- the service picker: three fat targets, the primary path ---- */
.ask{font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--fg);
  letter-spacing:-.02em;margin-bottom:22px}
.ask.small{font-size:19px;margin-bottom:8px}
.asksub{color:var(--dim);font-size:16px;line-height:1.6;max-width:46ch;margin:0 auto 22px}
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:840px;
  margin:0 auto 18px}
.pick{display:block;text-decoration:none;color:inherit;text-align:left;
  padding:26px 26px 28px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(255,255,255,.03);
  transition:transform .2s var(--ease),border-color .2s,background .2s}
.pick:hover{transform:translateY(-3px);border-color:var(--cy);background:rgba(0,191,255,.06)}
.pick b{display:block;font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:-.02em;margin-bottom:7px}
.pick span{display:block;color:var(--dim);font-size:15px;line-height:1.55}
.pickmore{color:var(--dim);font-size:15.5px;margin-bottom:44px}
.pickmore a{color:var(--cy);text-decoration:underline;text-underline-offset:3px}

/* clear break so the free check does not read as part of the picker */
.split{display:flex;align-items:center;gap:18px;max-width:840px;margin:0 auto 40px;
  color:var(--dimmer);font-size:14px}
.split::before,.split::after{content:"";flex:1;height:1px;background:var(--line)}

.modes button{font-size:15px;padding:12px 22px}
.field input{font-size:17px;padding:20px 160px 20px 26px}
.chip{font-size:15px;padding:13px 22px}
.yn button{font-size:13px;padding:10px 18px}

@media(max-width:820px){
  body{font-size:16.5px}
  .picker{grid-template-columns:1fr;gap:11px}
  .pick{padding:20px 20px 22px}
  .pick b{font-size:20px}
  .modes{grid-template-columns:1fr 1fr}
  .field input{padding:18px 20px}
}

/* ==========================================================================
   TAP TARGETS — 44px minimum.
   Inline text links were rendering 15-19px tall, which is a miss on a phone
   for exactly the audience least likely to try twice. Padding is added
   without disturbing the text flow.
   ========================================================================== */
@media(max-width:820px){
  .pickmore a, .galnote a, .cfoot a, .cnote a, .doc a:not(.btn),
  footer a, .limits a, .locked a{
    display:inline-block; padding:14px 2px; line-height:1.25; min-height:44px;
  }
  footer{gap:4px}
  footer span{display:flex;flex-wrap:wrap;gap:0 14px;align-items:center}
  /* The submit button sits under the field on phones and must be thumb-sized. */
  .btn.go{min-height:52px}
  .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
  .modes button{min-height:48px}
  .masthead nav a.btn{min-height:46px}
}
/* Logo link had no height of its own. */
.masthead > a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}

/* Real client marks, flattened to white so nine brand palettes read as one
   wall instead of a sticker collage. */
.logowall{gap:0 40px;row-gap:26px;align-items:center}
.logowall img{min-height:0;padding:0;border:0;background:none;border-radius:0;
  height:auto;width:auto;max-height:58px;max-width:170px;object-fit:contain;
  opacity:.6;transition:opacity .25s}
/* Wide wordmarks can run longer; tall crests are capped by height above. */
.logowall img[alt="Smith+Nephew"]{max-width:210px;max-height:34px}
.logowall img[alt="Habitat for Humanity"],
.logowall img[alt="Hallmark Channel"],
.logowall img[alt="Anderson Contractors"]{max-height:42px}
.logowall img:hover{opacity:1}
@media(max-width:820px){
  .logowall{gap:0 26px;row-gap:20px;justify-content:flex-start}
  .logowall img{max-height:40px;max-width:112px}
}
.reassure2{margin-top:16px;padding:18px 22px;border:1px solid var(--line-2);border-radius:10px;
  color:var(--dim);font-size:15.5px;line-height:1.7;max-width:64ch;background:rgba(255,255,255,.02)}
.reassure2 b{color:var(--fg);font-weight:600}

/* ==========================================================================
   AUDIT FIXES
   ========================================================================== */

/* Keyboard users had no way past the header. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cy);color:#00222E;
  padding:14px 22px;font-weight:700;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}

/* Focus was the browser default hairline, invisible on a dark UI. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--cy);outline-offset:3px;border-radius:4px}

/* --dimmer (#4A525B) on #08090B measured ~2.5:1 and was carrying real copy:
   hints, the client-strip label, footer text, form notes. WCAG AA needs 4.5.
   Lifted to #8C96A2 (~5.5:1). Kept only for non-text ornament. */
:root{--dimmer:#8C96A2}
.lead .k,.eyebrow,.clead{color:#98A2AE}

/* --- mobile navigation, which did not exist at all --- */
.burger{display:none;appearance:none;background:transparent;border:1px solid var(--line-2);
  border-radius:10px;width:48px;height:48px;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  .burger{display:flex}
  .masthead{position:relative}
  .masthead nav{
    position:absolute;top:calc(100% + 12px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#0E1116;border:1px solid var(--line-2);border-radius:14px;
    padding:8px;box-shadow:0 26px 60px -20px rgba(0,0,0,.9);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
    z-index:60}
  body.nav-open .masthead nav{opacity:1;visibility:visible;transform:none}
  /* the earlier rule hid every nav link on small screens */
  .masthead nav a:not(.btn){display:flex;align-items:center;min-height:50px;padding:0 14px;
    font-size:16px;color:var(--fg);border-radius:9px}
  .masthead nav a:not(.btn):hover{background:rgba(255,255,255,.06)}
  .masthead nav a.btn{margin:8px 6px 4px;justify-content:center}
}

/* --dim (#79828D) measured 3.9:1 on the step pills and picker descriptions,
   short of the 4.5 AA floor for text under 18px. Lifted to ~4.7:1. Still
   clearly secondary against --fg. */
:root{--dim:#8A94A1}

/* ==========================================================================
   LOGO MARQUEE
   Nine logos on a fixed grid left seven on one row and two orphaned on the
   next. A continuous track removes the ragged row entirely and reads as
   deliberate motion rather than a layout accident.
   ========================================================================== */
.marquee{position:relative;overflow:hidden;margin:26px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mtrack{display:flex;align-items:center;gap:0 62px;width:max-content;
  animation:slide 42s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack img{height:auto;width:auto;max-height:52px;max-width:168px;object-fit:contain;
  opacity:.62;flex:0 0 auto;transition:opacity .25s}
.mtrack img:hover{opacity:1}
.mtrack img[alt="Smith+Nephew"]{max-width:200px;max-height:32px}
.mtrack img[alt="Habitat for Humanity"],
.mtrack img[alt="Hallmark Channel"],
.mtrack img[alt="Anderson Contractors"]{max-height:38px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mtrack{animation:none;flex-wrap:wrap;width:auto;gap:26px 44px;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
}
@media(max-width:820px){
  .mtrack{gap:0 40px;animation-duration:32s}
  .mtrack img{max-height:38px;max-width:120px}
}

/* Add-ons. Deliberately a plain price list, not more cards: the three tiers
   are the decision, these are afterthoughts you tack on. */
.aohead{margin:44px 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#98A2AE;font-weight:700}
.aogrid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  border-top:1px solid var(--line)}
.ao{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.ao span{color:var(--dim);font-size:16px;line-height:1.5}
.ao b{font-family:var(--display);font-weight:700;font-size:16.5px;white-space:nowrap;color:var(--fg)}
.aonote{margin-top:16px;color:#98A2AE;font-size:14.5px;line-height:1.6;max-width:60ch}
@media(max-width:820px){ .aogrid{grid-template-columns:1fr;gap:0} }

/* Contact: taps first, typing last. */
.q{border:0;padding:0;margin:0 0 26px}
.q legend{padding:0;color:var(--fg);font-size:16.5px;font-weight:600;margin-bottom:12px}
.q legend i{font-style:normal;color:#98A2AE;font-size:13.5px;font-weight:400;margin-left:6px}
.contact label i{font-style:normal;text-transform:none;letter-spacing:normal;
  color:#98A2AE;font-size:12px;margin-left:6px}
.contact .chips{margin-bottom:0}

/* The estimate. Everyone else takes your details then promises a reply. */
.estimate{border:1px solid var(--cy);border-radius:12px;padding:24px 26px;margin:6px 0 28px;
  background:linear-gradient(120deg,rgba(0,191,255,.10),transparent 60%)}
.ehead{color:var(--cy);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin-bottom:10px}
.erange{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,42px);
  letter-spacing:-.035em;line-height:1.05;margin-bottom:10px}
.etime{color:var(--fg);font-size:16px;margin-bottom:12px}
.enote{color:#98A2AE;font-size:14px;line-height:1.6;max-width:56ch}
/* Add-on explanations sit inline. A tooltip would hide the answer behind a
   second action and fail on touch entirely. */
.ao span em{display:block;font-style:normal;color:#98A2AE;font-size:14px;line-height:1.55;
  margin-top:4px;max-width:46ch}
.aogrid.wide{grid-template-columns:1fr;gap:0}
.aogrid.wide .ao{padding:16px 0}

/* Add-ons collapsed. Native <details> so it is keyboard operable and needs no
   JS; the three tiers stay the decision and these stay out of the way. */
.addons{margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.addons summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 2px;min-height:44px}
.addons summary::-webkit-details-marker{display:none}
.addons summary span{font-family:var(--display);font-weight:700;font-size:18px;color:var(--fg)}
.addons summary i{font-style:normal;color:#98A2AE;font-size:14.5px;margin-left:auto;
  padding-right:34px;position:relative}
.addons summary i::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--cy);border-bottom:2px solid var(--cy);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease)}
.addons[open] summary i::after{transform:translateY(-20%) rotate(-135deg)}
.addons summary:hover span{color:var(--cy)}
.addons summary:focus-visible{outline:3px solid var(--cy);outline-offset:2px;border-radius:6px}
.addons .aogrid{border-top:1px solid var(--line);margin-bottom:8px}
.addons .aonote{margin-bottom:22px}
@media(max-width:820px){ .addons summary i{font-size:13px} }
/* Contrast anchor above the top tier. */
.anchor{margin-top:22px;color:var(--dim);font-size:16px;line-height:1.7;max-width:62ch}
.anchor b{color:var(--fg);font-weight:700}
/* Loss framing. Only shown on a genuinely poor grade, and only in terms we measured. */
.cost{margin-top:20px;padding:18px 22px;border-left:2px solid var(--warn);
  background:rgba(255,176,32,.06);color:var(--dim);font-size:15.5px;line-height:1.7;max-width:62ch}
.cost b{color:var(--fg);font-weight:600}
/* The A to F scale. Shows what is coming, which is the whole draw: a grade is
   neutral until revealed, so trying it feels safe. */
.scale{display:flex;justify-content:center;gap:8px;margin:0 auto 22px}
.scale span{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--line-2);color:#98A2AE;font-family:var(--display);font-weight:700;
  font-size:15px;background:rgba(255,255,255,.02)}
.scale span:first-child{border-color:var(--cy);color:var(--cy)}
.scale span:last-child{border-color:rgba(255,176,32,.5);color:var(--warn)}

/* ==========================================================================
   STICKY HEADER
   Found in usability walkthrough: the page runs ~22 phone screens and the
   header was position:relative, so from roughly screen 2 onward there was NOT
   ONE clickable action anywhere on screen. Someone who decided "yes" in the
   middle had to scroll back to the top or all the way to the bottom.
   ========================================================================== */
.masthead{position:sticky;top:0;z-index:70;transition:background .25s var(--ease),
  border-color .25s var(--ease),padding .25s var(--ease);
  border-bottom:1px solid transparent}
body.scrolled .masthead{background:rgba(8,9,11,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);padding:14px 28px}
body.scrolled .masthead img{height:15px}
@media(max-width:820px){
  body.scrolled .masthead{padding:10px 20px}
}
/* CTA + burger live outside the collapsing panel so the primary action is
   never more than one tap away, at any scroll depth. */
.hactions{display:flex;align-items:center;gap:10px;margin-left:auto}
.masthead nav{margin-left:auto}
@media(max-width:820px){
  .masthead nav{margin-left:0}
  .hactions .btn{padding:11px 18px;font-size:14.5px;min-height:44px}
  body.scrolled .hactions .btn{padding:10px 16px;font-size:14px}
}
/* Sticky header eats anchor targets: jumping to #websites landed the heading
   14px ABOVE the fold, hidden underneath. scroll-margin reserves the space. */
section[id],#book,#gallery,#clients,#faq,#main{scroll-margin-top:88px}
@media(max-width:820px){ section[id],#book,#gallery,#clients,#faq,#main{scroll-margin-top:76px} }