/* ============================================================
   VANTAGE — saaslinkbuildingagency.com
   Design: star chart / observatory. Midnight indigo + champagne gold.
   ============================================================ */

:root{
  --night:#070a1c;
  --night-2:#0b1029;
  --night-3:#101637;
  --gold:#e8c67a;
  --gold-dim:#a88b4a;
  --ice:#e7ecff;
  --ice-dim:#9aa4c8;
  --ice-fade:#6b74a0;
  --line:rgba(232,198,122,.2);
  --line-2:rgba(154,164,200,.18);

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;

  --wrap:1240px;
  --gut:clamp(18px,4vw,46px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--night);color:var(--ice-dim);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15.5px,.85vw + 13px,17.5px);line-height:1.75;
  overflow-x:hidden;
}
a{color:inherit}
svg{max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:880px}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--night);padding:12px 18px;z-index:10000;font-size:13px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── sky canvas ───────────────────────────────────────── */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.haze{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%,rgba(70,60,140,.28),transparent 65%),
    radial-gradient(ellipse 60% 45% at 85% 30%,rgba(232,198,122,.07),transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 100%,rgba(12,16,42,.9),transparent 70%);
}
header,main,footer{position:relative;z-index:2}

/* ── header ───────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:300;background:rgba(7,10,28,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:13px}
.logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.logo__m{width:38px;height:38px}
.logo__t{display:flex;flex-direction:column;line-height:1}
.logo__t b{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.22em;color:var(--ice)}
.logo__t em{font-family:var(--sans);font-style:normal;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim);margin-top:6px}

.nav__l{list-style:none;margin:0;padding:0;display:flex;gap:clamp(10px,1.6vw,24px);align-items:center;flex-wrap:wrap}
.nav__l a{text-decoration:none;font-size:13px;letter-spacing:.04em;color:var(--ice-dim);transition:color .25s;position:relative;padding-bottom:3px}
.nav__l a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .32s cubic-bezier(.2,.8,.3,1)}
.nav__l a:hover{color:var(--ice)}
.nav__l a:hover::after{width:100%}
.nav__cta{border:1px solid var(--gold);color:var(--gold)!important;padding:8px 16px!important;border-radius:2px}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--gold);color:var(--night)!important}
.nav__t{display:none}

/* ── type ─────────────────────────────────────────────── */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 26px}
.eyebrow__l{width:44px;height:1px;background:var(--gold);display:inline-block;flex:none}
.disp{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(36px,5.6vw,78px);line-height:1.03;letter-spacing:-.018em;
  margin:0 0 26px;color:var(--ice);max-width:17ch;text-wrap:balance;
}
.disp em{font-style:italic;color:var(--gold);font-weight:400}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.5vw,50px);line-height:1.08;letter-spacing:-.015em;margin:0 0 12px;color:var(--ice);text-wrap:balance}
h3{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.3vw,20px);line-height:1.3;margin:0 0 10px;color:var(--ice)}
p{margin:0 0 15px}
.lead{font-size:clamp(16px,1.15vw,19px);max-width:62ch;margin:0 0 34px;color:var(--ice-dim)}
.sub{color:var(--ice-fade);max-width:62ch;margin:0;font-size:16px}
.num{
  font-family:var(--serif);font-size:13px;letter-spacing:.4em;color:var(--gold);margin:0 0 14px;
  display:inline-block;border-bottom:1px solid var(--line);padding-bottom:8px;
}
.drop::first-letter{float:left;font-family:var(--serif);font-size:4.4em;line-height:.8;padding:.08em .12em 0 0;color:var(--gold);font-weight:400}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  padding:15px 26px;text-decoration:none;border:1px solid var(--gold);color:var(--gold);
  background:transparent;cursor:pointer;border-radius:2px;position:relative;isolation:isolate;overflow:hidden;transition:color .3s,transform .25s;
}
/* isolation on .btn + z-index:-1 here puts the sweep above the button's own
   background but below the label, so bare text nodes stay visible on hover */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:scale(0,1);transform-origin:left;transition:transform .38s cubic-bezier(.2,.8,.25,1)}
.btn > *{position:relative;z-index:1}
.btn:hover::before{transform:scale(1,1)}
.btn:hover{color:var(--night)}
.btn--gold{background:var(--gold);color:var(--night)}
.btn--gold::before{background:#fff0cf}
.btn--gold:hover{color:var(--night)}
.btn--full{width:100%}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:clamp(60px,9vw,140px) 0 clamp(50px,7vw,100px);position:relative}
.hero__cta{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:56px}
.orbs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin:0;padding-top:34px;border-top:1px solid var(--line-2)}
.orb dt{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);font-weight:300;color:var(--gold);line-height:1;margin-bottom:9px;font-variant-numeric:tabular-nums}
.orb dd{margin:0;font-size:12.5px;color:var(--ice-fade);line-height:1.5}
.scrollhint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ice-fade);display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollhint span{width:1px;height:32px;background:linear-gradient(var(--gold),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (max-width:900px){.scrollhint{display:none}}

/* ── sections ─────────────────────────────────────────── */
.sec{padding:clamp(56px,7.5vw,116px) 0;border-top:1px solid var(--line-2)}
.sec--alt{background:rgba(11,16,41,.55)}
.sec--deep{background:rgba(5,7,20,.8)}
.sec__hd{margin-bottom:clamp(32px,4.5vw,62px);max-width:78ch}

/* ── graph ────────────────────────────────────────────── */
.graph{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,72px);align-items:center}
.graph__txt p{color:var(--ice-dim)}
.viz{position:relative;aspect-ratio:1;max-width:440px;margin-inline:auto;display:grid;place-items:center}
.viz__ring{position:absolute;border:1px solid var(--line);border-radius:50%;animation:spin linear infinite}
.viz__ring--1{inset:6%;animation-duration:44s;border-style:dashed}
.viz__ring--2{inset:20%;animation-duration:32s;animation-direction:reverse;border-color:rgba(154,164,200,.16)}
.viz__ring--3{inset:34%;animation-duration:24s;border-color:rgba(232,198,122,.28)}
@keyframes spin{to{transform:rotate(360deg)}}
.viz__core{
  width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle,rgba(232,198,122,.2),rgba(7,10,28,.9));border:1px solid var(--gold);
  box-shadow:0 0 44px rgba(232,198,122,.16);
}
.viz__core b{font-family:var(--serif);font-size:20px;letter-spacing:.16em;color:var(--gold);display:block}
.viz__core span{font-size:11px;color:var(--ice-fade);letter-spacing:.1em}
.viz__sat{
  position:absolute;width:70px;height:70px;border-radius:50%;display:grid;place-content:center;text-align:center;
  border:1px solid var(--line-2);background:rgba(16,22,55,.9);
  transform:rotate(var(--a)) translate(0,-40%) rotate(calc(var(--a) * -1));
  transition:border-color .3s,box-shadow .3s;
}
.viz__sat:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(232,198,122,.22)}
.viz__sat b{display:block;font-size:12px;letter-spacing:.1em;color:var(--ice);font-weight:500}
.viz__sat span{font-size:11px;color:var(--gold-dim)}
.graph__viz figcaption{font-size:12.5px;color:var(--ice-fade);text-align:center;margin-top:22px;max-width:44ch;margin-inline:auto;line-height:1.6}

/* ── instruments (removed) ─────────────────────────────
   These rules styled the old "instruments" grid with a component class
   literally named .in — which collides with the .in class the reveal
   observer adds to every [data-reveal] element on the page. Under the old
   near-black palette the collision was invisible (a dark card on a dark
   page); the moment --night became white, every revealed element picked up
   a white background and 24-38px of padding, hiding white text on the dark
   strip and the process band. The section that used them is gone, so the
   rules are deleted rather than renamed. Never name a component .in. */

/* ── log / method ─────────────────────────────────────── */
.log{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:l}
.log li{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);padding:26px 0;border-top:1px solid var(--line-2);align-items:start}
.log li:last-child{border-bottom:1px solid var(--line-2)}
.log__n{
  font-family:var(--serif);font-size:clamp(28px,3vw,42px);font-weight:300;color:var(--gold);line-height:1;
  min-width:2.4ch;position:relative;
}
.log__n::after{content:"";position:absolute;left:50%;top:120%;width:1px;height:0;background:var(--line);transition:height .6s ease}
.log li p{margin:0;color:var(--ice-fade);font-size:15.5px;max-width:72ch}

/* ── charts / case studies ────────────────────────────── */
.charts{display:grid;gap:clamp(26px,3.5vw,44px)}
.chart{border:1px solid var(--line-2);border-radius:3px;padding:clamp(24px,3vw,42px);background:rgba(11,16,41,.5);transition:border-color .4s,transform .4s}
.chart:hover{border-color:var(--line);transform:translateY(-3px)}
.chart__k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 12px}
.chart header h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.3vw,33px);line-height:1.15;margin:0 0 22px;color:var(--ice);max-width:26ch}
.chart p{color:var(--ice-dim);font-size:15.5px;max-width:76ch}
.deltas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);margin:26px 0 0;border:1px solid var(--line-2)}
.deltas > div{background:var(--night);padding:18px 16px}
.deltas dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ice-fade);margin-bottom:10px;line-height:1.4}
.deltas dd{margin:0;font-family:var(--serif);font-size:19px;color:var(--ice-fade);letter-spacing:.02em}
.deltas dd i{color:var(--gold);font-style:normal;margin:0 4px}
.deltas dd b{color:var(--gold);font-weight:400;font-size:26px}

/* ── observatory / about ──────────────────────────────── */
.obs{display:grid;grid-template-columns:1.5fr .82fr;gap:clamp(30px,4.5vw,70px);align-items:start}
.obs__lead{font-size:clamp(17px,1.35vw,20px);color:var(--ice)}
.obs p{color:var(--ice-dim)}
.vows{border:1px solid var(--line);border-radius:3px;padding:24px;margin-top:30px;background:rgba(232,198,122,.04)}
.vows h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500}
.vows ol{margin:0;padding-left:20px;display:grid;gap:10px}
.vows li{font-size:15px;color:var(--ice-dim)}
.vows li::marker{color:var(--gold-dim)}
.plaque{border:1px solid var(--line-2);border-radius:3px;padding:22px;background:rgba(11,16,41,.75);position:sticky;top:92px}
.plaque h3{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500}
.plaque dl{margin:0}
.plaque dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line-2)}
.plaque dl div:first-child{border-top:0}
.plaque dt{font-size:12px;color:var(--ice-fade);letter-spacing:.04em}
.plaque dd{margin:0;font-size:13px;color:var(--ice);text-align:right}

/* ── programmes ───────────────────────────────────────── */
.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);margin-bottom:clamp(28px,3.5vw,48px)}
.prog{background:var(--night);padding:clamp(24px,2.8vw,36px);position:relative;transition:background .35s}
.prog:hover{background:var(--night-2)}
.prog--star{background:var(--night-2);box-shadow:inset 0 0 0 1px var(--gold)}
.prog__flag{position:absolute;top:0;right:0;background:var(--gold);color:var(--night);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;margin:0;font-weight:600}
.prog h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.06em;margin-bottom:14px;color:var(--gold)}
.prog__p{font-family:var(--serif);font-size:clamp(30px,3vw,40px);font-weight:300;color:var(--ice);margin:0 0 2px}
.prog__p span{font-family:var(--sans);font-size:12px;color:var(--ice-fade);letter-spacing:.06em}
.prog__l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 20px}
.prog ul{list-style:none;margin:0 0 20px;padding:18px 0 0;border-top:1px solid var(--line-2);display:grid;gap:9px}
.prog li{font-size:14.5px;color:var(--ice-dim);padding-left:18px;position:relative}
.prog li::before{content:"✦";position:absolute;left:0;color:var(--gold-dim);font-size:10px;top:4px}
.prog__f{font-size:12.5px;color:var(--ice-fade);margin:0;border-top:1px solid var(--line-2);padding-top:15px;line-height:1.6}

.mkt{border:1px solid var(--line);border-radius:3px;padding:clamp(24px,2.8vw,36px);background:rgba(232,198,122,.045)}
.mkt h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:500}
.mkt p{color:var(--ice-dim);font-size:15.5px}
.mkt b{color:var(--gold);font-weight:500}
.mkt__note{font-size:13.5px!important;color:var(--ice-fade)!important;margin-bottom:0!important}

/* ── faq ──────────────────────────────────────────────── */
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 48px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);font-weight:400;line-height:1.3;color:var(--ice);transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details > div{overflow:hidden}
.faq details p{color:var(--ice-fade);padding-right:48px;margin:0 0 24px;font-size:15.5px;max-width:78ch}

/* ── contact ──────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.contact__l p{color:var(--ice-dim);max-width:50ch}
.ticks{list-style:none;margin:26px 0;padding:0;display:grid;gap:12px}
.ticks li{padding-left:24px;position:relative;font-size:15px;color:var(--ice-dim)}
.ticks li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:11px;top:5px}
.hrs{font-size:11.5px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-fade)!important}

.form{border:1px solid var(--line-2);border-radius:3px;background:rgba(11,16,41,.7);padding:clamp(24px,3vw,38px);display:grid;gap:17px}
.field{display:grid;gap:7px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim)}
.field label i{color:var(--gold);font-style:normal}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-weight:300;font-size:15.5px;color:var(--ice);background:rgba(5,7,20,.6);
  border:1px solid var(--line-2);border-radius:2px;padding:13px 15px;width:100%;transition:border-color .25s,background .25s;
}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:#4e567c}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(232,198,122,.05)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e2705f}
.err{font-size:11.5px;color:#f09a8b;margin:0;letter-spacing:.03em}
.err:empty{display:none}
.consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.consent input{margin-top:4px;accent-color:var(--gold);width:15px;height:15px;flex:none}
.consent span{font-size:12.5px;color:var(--ice-fade);line-height:1.55}
.consent a{color:var(--gold)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.btn__spin{display:none;width:13px;height:13px;border:2px solid rgba(7,10,28,.25);border-top-color:var(--night);border-radius:50%;animation:spin2 .7s linear infinite}
.is-sending .btn__spin{display:inline-block}
@keyframes spin2{to{transform:rotate(360deg)}}
.fstatus{font-size:13px;margin:0;padding:12px 15px;border-radius:2px;line-height:1.55}
.fstatus:empty{display:none}
.fstatus.ok{background:rgba(232,198,122,.11);border-left:2px solid var(--gold);color:var(--gold)}
.fstatus.bad{background:rgba(226,112,95,.1);border-left:2px solid #e2705f;color:#f09a8b}
.fnote{font-size:11.5px;color:var(--ice-fade);margin:0;line-height:1.6}

/* ── footer ───────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line-2);background:rgba(5,7,20,.85);padding-top:clamp(42px,5vw,68px)}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,3vw,46px);padding-bottom:clamp(30px,4vw,50px)}
.logo--sm .logo__m{width:32px;height:32px}
.logo--sm .logo__t b{font-size:18px}
.ftr__b p{font-size:14px;color:var(--ice-fade);max-width:40ch;margin:18px 0 0}
.ftr__n h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 15px;font-weight:500}
.ftr__n ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr__n a{text-decoration:none;font-size:14px;color:var(--ice-fade);transition:color .2s}
.ftr__n a:hover{color:var(--gold)}
.ftr__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:20px;padding-bottom:24px}
.ftr__base p{font-size:11.5px;color:#4e567c;margin:0;letter-spacing:.06em}

/* ── reveal ───────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.8,.3,1),transform .75s cubic-bezier(.2,.8,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1060px){
  .graph{grid-template-columns:1fr}
  .inst{grid-template-columns:1fr 1fr}
  .deltas{grid-template-columns:1fr 1fr}
  .obs{grid-template-columns:1fr}
  .plaque{position:static}
  .progs{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .orbs{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hdr__in{flex-wrap:wrap}
  .nav{width:100%}
  .nav__t{
    display:flex;flex-direction:column;gap:5px;width:100%;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--line-2);padding:12px;cursor:pointer;border-radius:2px;
  }
  .nav__t span{display:block;width:20px;height:1px;background:var(--gold);transition:transform .3s}
  .nav__t[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
  .nav__t[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .nav__l{display:none;flex-direction:column;gap:0;padding-top:8px}
  .nav__l.open{display:flex}
  .nav__l li{width:100%;border-bottom:1px solid var(--line-2)}
  .nav__l a{display:block;padding:14px 0;text-align:center}
  .nav__cta{margin-top:10px;text-align:center}
  .inst{grid-template-columns:1fr}
  .deltas{grid-template-columns:1fr}
  .log li{grid-template-columns:1fr;gap:8px}
  .frow{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .disp{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ── page head ────────────────────────────────────────── */
.pagehead{padding:clamp(44px,5.5vw,84px) 0 clamp(28px,3.5vw,46px);border-bottom:1px solid var(--line-2)}
.pagehead h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,66px);line-height:1.04;letter-spacing:-.018em;margin:0 0 18px;color:var(--ice);max-width:20ch}
.pagehead h1 em{font-style:italic;color:var(--gold)}
.pagehead p{font-size:clamp(16px,1.2vw,19px);color:var(--ice-dim);max-width:62ch;margin:0}
.crumbs{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice-fade);margin:0 0 18px}
.crumbs a{color:var(--gold);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ── blog index — three across ─────────────────────────
   The wrap itself is the grid, so the markup stays one <a> per post. */
.obs-list{padding:clamp(32px,4vw,64px) 0}
.obs-list > .wrap{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);align-items:stretch;
}
.obsitem{
  display:flex;flex-direction:column;position:relative;
  padding:clamp(24px,2.6vw,32px);
  border:1px solid var(--line-2);border-radius:5px;background:var(--night-2);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .3s,background .3s,transform .3s;
}
/* a hairline that fills in from the left on hover — the only motion,
   so a wall of nine cards does not jitter */
.obsitem::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.25,1);
}
.obsitem:hover,.obsitem:focus-visible{border-color:var(--line);background:var(--night-3);transform:translateY(-3px)}
.obsitem:hover::after,.obsitem:focus-visible::after{transform:scaleX(1)}
.obsitem__n{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--gold-dim);line-height:1;margin-bottom:16px;
}
.obsitem > div{display:flex;flex-direction:column;flex:1}
.obsitem h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.5vw,23px);
  line-height:1.2;margin:0 0 12px;color:var(--ice);letter-spacing:-.01em;
  transition:color .25s;
}
.obsitem:hover h2{color:var(--gold)}
.obsitem p:not(.obsitem__m){margin:0 0 18px;color:var(--ice-dim);font-size:14.5px;line-height:1.62;flex:1}
.obsitem__m{
  margin:auto 0 0!important;flex:none;padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dim);
}
@media(max-width:980px){.obs-list > .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.obs-list > .wrap{grid-template-columns:1fr}}

/* ── article ──────────────────────────────────────────── */
.article{padding:clamp(36px,4.5vw,66px) 0 clamp(46px,5.5vw,86px)}
.article__hd{max-width:60ch;margin-bottom:clamp(30px,3.8vw,50px);padding-bottom:26px;border-bottom:1px solid var(--line)}
.article__hd h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,56px);line-height:1.06;letter-spacing:-.02em;margin:0 0 16px;color:var(--ice)}
.article__hd .standfirst{font-size:clamp(16.5px,1.3vw,20px);color:var(--ice-dim);margin:0 0 16px}
.article__hd .meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin:0}
.article__body{max-width:66ch}
.article__body > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:4.2em;line-height:.8;padding:.08em .12em 0 0;color:var(--gold);font-weight:400}
.article__body h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.5vw,34px);line-height:1.12;margin:42px 0 14px;color:var(--ice);letter-spacing:-.012em}
.article__body h3{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.4vw,20px);margin:30px 0 10px;color:var(--gold)}
.article__body p{margin:0 0 17px;color:var(--ice-dim)}
.article__body ul,.article__body ol{padding-left:22px;margin:0 0 20px;display:grid;gap:9px}
.article__body li{color:var(--ice-dim)}
.article__body li::marker{color:var(--gold-dim)}
.article__body strong{color:var(--ice);font-weight:500}
.article__body a{color:var(--gold)}
.article__body blockquote{
  margin:28px 0;padding:0 0 0 24px;border-left:1px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.7vw,24px);line-height:1.36;color:var(--ice);
}
.article__body table{border-collapse:collapse;width:100%;margin:0 0 24px;font-size:14.5px}
.article__body th,.article__body td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ice-dim)}
.article__body th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500}
.callout{border:1px solid var(--line);border-radius:3px;background:rgba(232,198,122,.05);padding:24px;margin:30px 0}
.callout h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 13px;font-weight:500}
.callout p:last-child{margin-bottom:0}
.article__end{margin-top:clamp(36px,4vw,56px);padding-top:28px;border-top:1px solid var(--line);max-width:66ch}
.article__end h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ice);margin-bottom:10px}
.article__end p{color:var(--ice-dim);margin-bottom:20px}
.more{margin-top:clamp(36px,4vw,56px);padding-top:26px;border-top:1px solid var(--line-2)}
.more h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500}
.more ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.more a{font-family:var(--serif);font-size:19px;text-decoration:none;color:var(--ice);border-bottom:1px solid var(--line-2);padding-bottom:11px;display:block}
.more a:hover{color:var(--gold)}

/* ── services page ────────────────────────────────────── */
.svc{padding:clamp(44px,5.5vw,84px) 0;border-bottom:1px solid var(--line-2)}
.svc:nth-of-type(even){background:rgba(11,16,41,.5)}
.svc__grid{display:grid;grid-template-columns:.9fr 1.45fr;gap:clamp(26px,4vw,66px);align-items:start}
.svc__n{font-family:var(--serif);font-size:13px;letter-spacing:.4em;color:var(--gold);display:inline-block;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:16px}
.svc__grid h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.7vw,38px);line-height:1.08;margin:0 0 12px;color:var(--ice);letter-spacing:-.015em}
.svc__lede{font-size:16px;color:var(--gold-dim);margin:0;font-style:italic}
.svc__body p{color:var(--ice-dim);margin:0 0 15px}
.svc__spec{border-top:1px solid var(--line-2);margin-top:22px;padding-top:2px}
.svc__spec div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.svc__spec dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0}
.svc__spec dd{margin:0;font-size:15px;color:var(--ice-dim)}

@media (max-width:900px){
  .svc__grid{grid-template-columns:1fr}

  .pagehead h1{max-width:none}
}

/* ── legal ────────────────────────────────────────────── */
.legal{padding:clamp(44px,6vw,84px) 0}
.legal h1{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.2vw,54px);color:var(--ice);margin:0 0 12px;letter-spacing:-.01em}
.legal .updated{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 36px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,29px);margin:38px 0 12px;color:var(--gold)}
.legal p,.legal li{color:var(--ice-dim);font-size:15.5px}
.legal b{color:var(--ice);font-weight:500}
.legal ul,.legal ol{padding-left:22px;display:grid;gap:8px;margin:0 0 18px}
.legal li::marker{color:var(--gold-dim)}
.legal a{color:var(--gold)}
.legal table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:14.5px}
.legal th,.legal td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ice-dim)}
.legal th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);font-weight:500}
.legal .backlink{display:inline-block;margin-bottom:28px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--gold)}
.legal .backlink:hover{text-decoration:underline}

/* ── article figures ── */
/* plates in the observatory register: hairline gold rule, centred legend */
.article__body{counter-reset:plate}
.figure{margin:48px 0;counter-increment:plate}
.figure--hero{margin:0 0 46px}
.figure__svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:2px;background:var(--night-2)}
.figure figcaption{margin:14px auto 0;max-width:64ch;text-align:center;font-family:var(--serif);font-size:17px;line-height:1.62;color:var(--ice-dim)}
.figure figcaption::before{display:block;margin-bottom:6px;content:"Plate " counter(plate,decimal-leading-zero);font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
@media(max-width:700px){.figure{margin:34px 0}.figure--hero{margin:0 0 30px}}

/* ── office & telephone ── */
.office{margin-top:24px}
.office .office__label{margin:0 0 8px;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.office .office__addr{font-style:normal;font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ice-dim)}
.office .office__tel{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:transparent;font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-decoration:none;color:var(--gold);transition:background .22s,color .22s,border-color .22s}
.office .office__tel:hover,.office .office__tel:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--night)}
.office__ico{width:17px;height:17px;flex:none}
.office--ftr{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.office--ftr .office__addr{font-family:var(--sans);font-size:13px;line-height:1.7}
.legal__addr{display:block;margin:0 0 24px;padding-left:18px;border-left:1px solid var(--line);font-style:normal;font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ice-dim)}
.legal__addr a{color:var(--gold)}

/* ── latest from the blog ── */
.latest__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.latest__kicker{margin:0 0 8px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.latest__h2{margin:0}
.latest__all{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-decoration:none;color:var(--gold);white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .2s}
.latest__all:hover{border-bottom-color:var(--gold)}
.latest{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.latest__link{display:flex;flex-direction:column;height:100%;gap:9px;padding:22px;text-decoration:none;background:var(--night-2);border:1px solid var(--line-2);border-radius:3px;transition:border-color .25s,transform .25s}
.latest__link:hover{border-color:var(--line);transform:translateY(-3px)}
.latest__tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.latest__title{font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--ice);}
.latest__sum{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ice-dim);flex:1}
.latest__more{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){.latest{grid-template-columns:1fr}}

/* ══ HIGHBEAM home page ══ */
/* Built on the existing tokens: --night, --gold, --ice, --line.
   Everything here is prefixed hb- so the inner pages keep their old rules. */

.hb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
}
.hb-btn--gold{background:var(--gold);color:var(--night);font-weight:600}
.hb-btn--gold:hover,.hb-btn--gold:focus-visible{background:#f2d798;transform:translateY(-2px)}
.hb-btn--ghost{border-color:var(--line);color:var(--ice);background:transparent}
.hb-btn--ghost:hover,.hb-btn--ghost:focus-visible{border-color:var(--gold);color:var(--gold)}
.hb-btn--full{width:100%}

.hb-kicker{margin:0 0 10px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.hb-link{display:inline-flex;align-items:center;gap:7px;margin-top:22px;
  font-family:var(--sans);font-size:14px;text-decoration:none;color:var(--gold);
  border-bottom:1px solid transparent;transition:border-color .2s}
.hb-link:hover{border-bottom-color:var(--gold)}

/* ── hero ─────────────────────────────────────────── */
.hb-hero{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:min(92vh,860px);padding:clamp(110px,14vh,180px) 0 clamp(64px,9vh,110px);overflow:hidden}
.hb-hero__bg{position:absolute;inset:0;z-index:-2}
.hb-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* two overlays: one to seat the type, one to blend into the page below */
.hb-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(7,10,28,.94) 0%,rgba(7,10,28,.82) 42%,rgba(7,10,28,.35) 78%,rgba(7,10,28,.55) 100%)}
.hb-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--night))}
.hb-hero__in{position:relative;max-width:820px}
.hb-eyebrow{margin:0 0 18px;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.hb-h1{margin:0 0 22px;font-family:var(--serif);font-weight:600;
  font-size:clamp(34px,5.2vw,62px);line-height:1.06;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.hb-lede{margin:0 0 32px;max-width:60ch;font-size:clamp(15.5px,1.15vw,18px);
  line-height:1.68;color:var(--ice-dim)}
.hb-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hb-trust{list-style:none;display:flex;gap:26px;flex-wrap:wrap;margin:0;padding:0}
.hb-trust li{position:relative;padding-left:22px;font-family:var(--sans);
  font-size:13px;color:var(--ice-fade)}
.hb-trust li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}

.hb-scroll{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:24px;height:38px;
  border:1px solid var(--line);border-radius:14px;display:grid;place-items:start center;padding-top:7px}
.hb-scroll span{width:3px;height:7px;border-radius:2px;background:var(--gold);
  animation:hbScroll 1.9s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hbScroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}
@media(max-width:760px){.hb-scroll{display:none}}

/* ── numbers strip ────────────────────────────────── */
.hb-strip{border-block:1px solid var(--line-2);background:var(--night-2)}
.hb-strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);
  padding-block:clamp(34px,5vw,54px)}
.hb-stat{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.hb-stat.in{opacity:1;transform:none}
.hb-stat__n{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.hb-stat__l{display:block;margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--ice-dim);max-width:26ch}
@media(max-width:900px){.hb-strip__in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hb-strip__in{grid-template-columns:1fr}}

/* ── generic section ──────────────────────────────── */
.hb-sec{padding:clamp(64px,9vw,120px) 0;border-bottom:1px solid var(--line-2)}
.hb-sec--alt{background:var(--night-2)}
.hb-sec__hd{max-width:760px;margin:0 auto clamp(38px,5vw,60px);text-align:center}
.hb-sec__hd--left{margin-inline:0;text-align:left}
.hb-sec__hd h2{margin:0 0 14px;font-family:var(--serif);font-weight:600;
  font-size:clamp(27px,3.6vw,46px);line-height:1.12;letter-spacing:-.012em;color:var(--ice);text-wrap:balance}
.hb-sub{margin:0;font-size:16px;line-height:1.68;color:var(--ice-dim)}

/* ── gap calculator ───────────────────────────────── */
.hb-calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);align-items:start}
.hb-calc__inputs{display:flex;flex-direction:column;gap:30px;
  padding:clamp(24px,3vw,38px);border:1px solid var(--line-2);border-radius:6px;background:var(--night-3)}
.hb-field{display:block}
.hb-field__l{display:block;margin-bottom:6px;font-family:var(--sans);font-size:14px;
  font-weight:500;color:var(--ice)}
.hb-field__l em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;
  font-weight:400;color:var(--ice-fade)}
.hb-field__v{display:block;margin:12px 0 6px;font-family:var(--serif);font-weight:600;
  font-size:32px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.hb-field input[type=range]{width:100%;height:26px;background:transparent;-webkit-appearance:none;appearance:none;cursor:grab}
.hb-field input[type=range]:active{cursor:grabbing}
.hb-field input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--gold) var(--fill,50%),rgba(154,164,200,.25) var(--fill,50%))}
.hb-field input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(154,164,200,.25)}
.hb-field input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:var(--gold)}
.hb-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-8.5px;border-radius:50%;background:var(--gold);
  border:3px solid var(--night-3);box-shadow:0 0 0 1px var(--gold);transition:transform .15s}
.hb-field input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:3px solid var(--night-3);box-shadow:0 0 0 1px var(--gold)}
.hb-field input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
.hb-field input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:4px}

.hb-calc__out{padding:clamp(24px,3vw,38px);border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(160deg,rgba(232,198,122,.07),transparent 60%),var(--night-2)}
.hb-calc__viz{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.hb-calc__bar{display:flex;align-items:center;gap:12px}
.hb-calc__bar i{display:block;height:14px;border-radius:0 7px 7px 0;
  transition:width .45s cubic-bezier(.2,.8,.25,1);min-width:4px}
.hb-calc__bar span{font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ice-fade);flex:none}
.hb-calc__bar--you i{background:var(--gold)}
.hb-calc__bar--them i{background:rgba(154,164,200,.4)}

.hb-calc__nums{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:0 0 22px;
  padding-top:22px;border-top:1px solid var(--line-2)}
.hb-calc__nums dt{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice-fade);margin-bottom:6px}
.hb-calc__nums dd{margin:0;font-family:var(--serif);font-weight:600;font-size:26px;
  line-height:1.1;color:var(--ice);font-variant-numeric:tabular-nums}
.hb-calc__verdict{margin:0 0 22px;padding:14px 16px;border-left:2px solid var(--gold);
  background:rgba(232,198,122,.06);font-size:14.5px;line-height:1.6;color:var(--ice)}
.hb-calc__verdict[data-tone=warn]{border-left-color:#e0a23c;background:rgba(224,162,60,.08)}
.hb-calc__verdict[data-tone=stop]{border-left-color:#d8654f;background:rgba(216,101,79,.08)}
.hb-calc__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ice-fade)}
@media(max-width:900px){.hb-calc{grid-template-columns:1fr}}

/* ── case studies ─────────────────────────────────── */
.hb-cases{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.hb-case{display:flex;flex-direction:column;padding:clamp(22px,2.5vw,30px);
  border:1px solid var(--line-2);border-radius:5px;background:var(--night);
  opacity:0;transform:translateY(16px);
  transition:opacity .55s,transform .55s,border-color .3s,background .3s}
.hb-case.in{opacity:1;transform:none}
.hb-case:hover{border-color:var(--line);background:var(--night-3)}
.hb-case__tag{margin:0 0 16px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dim)}
.hb-case__n{font-family:var(--serif);font-weight:600;font-size:clamp(34px,3.6vw,46px);
  line-height:1;color:var(--gold);margin-bottom:14px}
.hb-case__d{margin:0 0 18px;font-size:14.5px;line-height:1.62;color:var(--ice-dim);flex:1}
.hb-case__m{margin:0;padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--sans);font-size:12px;color:var(--ice-fade)}
@media(max-width:960px){.hb-cases{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hb-cases{grid-template-columns:1fr}}

/* ── split: pillars + report ──────────────────────── */
.hb-split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,66px);align-items:center}
.hb-split h2{margin:0 0 26px;font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,3.2vw,40px);line-height:1.14;color:var(--ice)}
.hb-pillars{list-style:none;margin:0;padding:0;counter-reset:hbp}
.hb-pillars li{position:relative;padding:0 0 22px 42px;margin-bottom:22px;counter-increment:hbp;
  border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.66;color:var(--ice-dim);
  opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s}
.hb-pillars li.in{opacity:1;transform:none}
.hb-pillars li:last-child{border-bottom:0;margin-bottom:0}
.hb-pillars li::before{content:counter(hbp,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--gold)}
.hb-pillars b{display:block;margin-bottom:5px;font-weight:600;color:var(--ice)}

.hb-report{margin:0;opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .7s,transform .7s}
.hb-report.in{opacity:1;transform:none}
.hb-report__frame{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
  background:#f7f6f2;box-shadow:0 30px 60px -24px rgba(0,0,0,.65)}
.hb-report__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--night-3);border-bottom:1px solid var(--line-2)}
.hb-report__bar i{width:9px;height:9px;border-radius:50%;background:rgba(154,164,200,.35)}
.hb-report__bar span{margin-left:10px;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.1em;color:var(--ice-fade)}
.hb-report img{display:block;width:100%;height:auto}
.hb-report figcaption{margin-top:16px;font-size:13px;line-height:1.6;color:var(--ice-fade)}
@media(max-width:900px){.hb-split{grid-template-columns:1fr}}

/* ── photo band + steps ───────────────────────────── */
.hb-band{position:relative;isolation:isolate;padding:clamp(70px,9vw,120px) 0;overflow:hidden;
  border-bottom:1px solid var(--line-2)}
.hb-band__bg{position:absolute;inset:0;z-index:-2}
.hb-band__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hb-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(7,10,28,.86),rgba(7,10,28,.74) 45%,rgba(7,10,28,.9))}
.hb-band h2{margin:0 0 clamp(32px,4vw,52px);font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,3.4vw,42px);line-height:1.12;color:#fff;max-width:20ch}
.hb-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)}
.hb-steps li{padding-top:20px;border-top:2px solid var(--line);
  opacity:0;transform:translateY(14px);transition:opacity .55s,transform .55s}
.hb-steps li.in{opacity:1;transform:none}
.hb-steps b{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.hb-steps span{display:block;margin:10px 0 9px;font-family:var(--serif);
  font-size:22px;font-weight:600;color:var(--ice)}
.hb-steps em{font-style:normal;font-size:14px;line-height:1.6;color:var(--ice-dim)}
@media(max-width:900px){.hb-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hb-steps{grid-template-columns:1fr}}

/* ── pricing ──────────────────────────────────────── */
.hb-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);align-items:start}
.hb-plan{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,36px);border:1px solid var(--line-2);border-radius:6px;
  background:var(--night-2);opacity:0;transform:translateY(16px);
  transition:opacity .55s,transform .55s,border-color .3s}
.hb-plan.in{opacity:1;transform:none}
.hb-plan:hover{border-color:var(--line)}
.hb-plan--on{border-color:var(--gold);background:linear-gradient(165deg,rgba(232,198,122,.08),transparent 55%),var(--night-2)}
.hb-plan__flag{position:absolute;top:-11px;left:clamp(26px,3vw,36px);padding:4px 12px;
  border-radius:999px;background:var(--gold);color:var(--night);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hb-plan h3{margin:0 0 10px;font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ice)}
.hb-plan__for{margin:0 0 22px;font-size:14px;line-height:1.6;color:var(--ice-fade);min-height:4.6em}
.hb-plan__p{margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line-2)}
.hb-plan__p b{font-family:var(--serif);font-weight:600;font-size:clamp(38px,4vw,50px);
  line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.hb-plan__p span{margin-left:6px;font-family:var(--sans);font-size:14px;color:var(--ice-fade)}
.hb-plan__f{list-style:none;margin:0 0 26px;padding:0;flex:1}
.hb-plan__f li{position:relative;padding:0 0 11px 24px;font-size:14.5px;line-height:1.55;color:var(--ice-dim)}
.hb-plan__f li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:5px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.hb-plan__f b{color:var(--ice);font-weight:600}
.hb-plans__note{max-width:70ch;margin:clamp(28px,3.5vw,44px) auto 0;text-align:center;
  font-size:13.5px;line-height:1.7;color:var(--ice-fade)}
@media(max-width:960px){.hb-plans{grid-template-columns:1fr}.hb-plan__for{min-height:0}}

/* ── quotes ───────────────────────────────────────── */
.hb-quotes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.hb-quotes li{opacity:0;transform:translateY(14px);transition:opacity .55s,transform .55s}
.hb-quotes li.in{opacity:1;transform:none}
.hb-quotes blockquote{margin:0;padding:clamp(24px,3vw,32px);border:1px solid var(--line-2);
  border-radius:5px;background:var(--night);height:100%;display:flex;flex-direction:column}
.hb-quotes p{margin:0 0 20px;flex:1;font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;color:var(--ice);font-style:italic}
.hb-quotes footer{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--gold-dim)}
@media(max-width:900px){.hb-quotes{grid-template-columns:1fr}}

/* ── faq ──────────────────────────────────────────── */
.hb-faq__wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:start}
.hb-faq__wrap > .hb-sec__hd{position:sticky;top:110px}
@media(max-width:900px){.hb-faq__wrap > .hb-sec__hd{position:static}}
.hb-faq details{border-bottom:1px solid var(--line-2);opacity:0;transform:translateY(10px);
  transition:opacity .5s,transform .5s}
.hb-faq details.in{opacity:1;transform:none}
.hb-faq summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ice);transition:color .2s}
.hb-faq summary::-webkit-details-marker{display:none}
.hb-faq summary:hover{color:var(--gold)}
.hb-faq summary::after{content:"";position:absolute;right:6px;top:27px;width:9px;height:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s}
.hb-faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.hb-faq details div{padding:0 0 22px}
.hb-faq details p{margin:0;font-size:15px;line-height:1.72;color:var(--ice-dim);max-width:64ch}
@media(max-width:900px){.hb-faq__wrap{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .hb-stat,.hb-case,.hb-plan,.hb-quotes li,.hb-steps li,.hb-pillars li,.hb-report,.hb-faq details{
    opacity:1!important;transform:none!important}
  .hb-scroll span{animation:none}
}

/* ── blog card thumbnails ── */
/* The padding lives in a variable so the image can bleed to the card edge
   with a matching negative margin and stay in sync if the padding changes. */
.obsitem{--pad:clamp(24px,2.6vw,32px);padding:var(--pad)}
.obsitem__img{
  display:block;margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 20px;
  border-bottom:1px solid var(--line-2);background:var(--night-3);overflow:hidden;
}
.obsitem__img img{
  display:block;width:100%;height:auto;aspect-ratio:900/430;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .3s;opacity:.92;
}
.obsitem:hover .obsitem__img img,.obsitem:focus-visible .obsitem__img img{transform:scale(1.035);opacity:1}
/* the hairline already sits on the card's top edge — keep it above the image */
.obsitem::after{z-index:2}
@media(prefers-reduced-motion:reduce){.obsitem__img img{transition:none}}

/* ══ HIGHBEAM THEME — light SaaS ══ */
/* ── tokens ───────────────────────────────────────────
   The old names are kept so the 768 lines above keep working; only
   what they resolve to changes. --night is now the page, --ice the ink. */
:root{
  --night:#ffffff;          /* page ground        */
  --night-2:#f5f7fa;        /* tinted section     */
  --night-3:#eef1f6;        /* card / inset       */
  --gold:#2f5bff;           /* primary accent     */
  --gold-dim:#5b7bff;       /* accent, quieter    */
  --ice:#0b1020;            /* primary ink        */
  --ice-dim:#4a5568;        /* secondary ink      */
  --ice-fade:#727d92;       /* muted ink          */
  --line:rgba(47,91,255,.24);
  --line-2:rgba(11,16,32,.11);

  --beam:#ffb400;           /* the signal colour, used sparingly */
  --ok:#0f9d58;
  --shadow:0 1px 2px rgba(11,16,32,.05),0 8px 24px -12px rgba(11,16,32,.18);
  --shadow-lg:0 2px 4px rgba(11,16,32,.04),0 24px 48px -20px rgba(11,16,32,.22);

  /* --serif drove 41 rules; pointing it at the display grotesk flips
     every heading on the site in one move */
  --serif:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --radius:14px;
}

html{color-scheme:light}
body{background:var(--night);color:var(--ice-dim);font-family:var(--sans);font-weight:400}

/* the star canvas and its nebula were the whole astrology impression */
#sky,.haze{display:none!important}

/* headings were set at Cormorant's light weights; a grotesk needs mass */
h1,h2,h3,.disp,.hb-h1,.hb-sec__hd h2,.hb-split h2,.hb-band h2,.hb-stat__n,
.hb-case__n,.hb-plan h3,.hb-plan__p b,.hb-calc__nums dd,.hb-field__v,
.obsitem h2,.latest__title,.pagehead h1{
  font-family:var(--serif);font-weight:700;letter-spacing:-.022em;font-style:normal;
}
.disp em,.hb-quotes p{font-style:normal}
.hb-quotes p{font-family:var(--sans);font-weight:400}

/* ── the dark-baked rules ─────────────────────────── */
.hdr{background:rgba(255,255,255,.86);border-bottom:1px solid var(--line-2)}
.sec--alt{background:var(--night-2)}
.sec--deep{background:var(--night-2)}
.skip{background:var(--gold);color:#fff}
.logo__t b{color:var(--ice);letter-spacing:.02em;font-weight:700}
.logo__t em{color:var(--ice-fade)}
.nav__l a{color:var(--ice-dim);font-weight:500}
.nav__l a:hover{color:var(--ice)}
.nav__cta{background:var(--gold);border-color:var(--gold);color:#fff!important;border-radius:999px;font-weight:600}
.nav__cta:hover{background:#1f47e0;border-color:#1f47e0;color:#fff!important}
.btn{border-radius:999px;font-weight:600;text-transform:none;letter-spacing:0;font-size:14.5px}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold::before{background:#1f47e0}
.btn--gold:hover{color:#fff}
.btn:hover{color:#fff}

/* ── hero ─────────────────────────────────────────── */
.hb-hero{min-height:0;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,84px);background:
  radial-gradient(120% 90% at 88% 0%,rgba(47,91,255,.09),transparent 60%),
  linear-gradient(to bottom,#fbfcfe,#fff)}
.hb-hero::before,.hb-hero::after,.hb-hero__bg,.hb-scroll{display:none!important}
.hb-hero__in{max-width:none;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,4.5vw,72px);align-items:center}
.hb-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 14px;
  border-radius:999px;background:rgba(47,91,255,.09);color:var(--gold);
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:none}
.hb-h1{font-size:clamp(34px,4.4vw,56px);line-height:1.05;color:var(--ice);margin-bottom:20px}
.hb-h1 mark{background:linear-gradient(to bottom,transparent 62%,rgba(255,180,0,.55) 62%);
  color:inherit;padding:0 2px}
.hb-lede{color:var(--ice-dim);font-size:clamp(16px,1.15vw,18.5px);margin-bottom:28px}
.hb-hero__cta{margin-bottom:26px}
.hb-trust{gap:18px}
.hb-trust li{color:var(--ice-fade);font-weight:500}
.hb-trust li::before{border-color:var(--ok)}

.hb-btn{border-radius:999px;font-weight:600}
.hb-btn--gold{background:var(--gold);color:#fff}
.hb-btn--gold:hover,.hb-btn--gold:focus-visible{background:#1f47e0;transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(47,91,255,.7)}
.hb-btn--ghost{border-color:var(--line-2);color:var(--ice);background:#fff}
.hb-btn--ghost:hover,.hb-btn--ghost:focus-visible{border-color:var(--gold);color:var(--gold);background:#fff}
.hb-kicker{color:var(--gold);letter-spacing:.14em}
.hb-link{color:var(--gold);font-weight:600}

/* the hero's right-hand card — a gap read-out instead of a nebula */
.hb-panel{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden}
.hb-panel__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);background:var(--night-2)}
.hb-panel__hd b{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ice)}
.hb-panel__hd span{font-family:var(--sans);font-size:11.5px;color:var(--ice-fade)}
.hb-panel__rows{padding:18px}
.hb-row{display:grid;grid-template-columns:104px 1fr 46px;align-items:center;gap:12px;margin-bottom:12px}
.hb-row:last-child{margin-bottom:0}
.hb-row span{font-family:var(--sans);font-size:12.5px;color:var(--ice-dim)}
.hb-row i{display:block;height:26px;border-radius:6px;background:#dfe4ee}
.hb-row b{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ice);text-align:right;
  font-variant-numeric:tabular-nums}
.hb-row--you i{background:var(--gold)}
.hb-row--you span,.hb-row--you b{color:var(--gold)}
.hb-panel__ft{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-top:1px solid var(--line-2);background:rgba(255,180,0,.08)}
.hb-panel__ft b{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ice)}
.hb-panel__ft span{font-family:var(--sans);font-size:12.5px;color:var(--ice-dim)}
@media(max-width:900px){.hb-hero__in{grid-template-columns:1fr}}

/* ── the rest of the components ───────────────────── */
.hb-strip{background:var(--ice);border-block:0}
/* the stat cards sit straight on the dark strip — no surface of their own */
.hb-strip .hb-stat{background:transparent;border:0;box-shadow:none;padding:0}
.hb-stat__n{color:#fff}
.hb-stat__l{color:rgba(255,255,255,.66)}
.hb-sec{border-bottom:1px solid var(--line-2)}
.hb-sec--alt{background:var(--night-2)}
.hb-sub{color:var(--ice-dim)}

.hb-calc__inputs{background:#fff;border-color:var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.hb-calc__out{background:#fff;border-color:var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.hb-field__l{color:var(--ice)}
.hb-field__v{color:var(--gold)}
.hb-field input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(to right,var(--gold) var(--fill,50%),#dfe4ee var(--fill,50%))}
.hb-field input[type=range]::-moz-range-track{background:#dfe4ee}
.hb-field input[type=range]::-webkit-slider-thumb{border-color:#fff;box-shadow:0 0 0 1px var(--gold),var(--shadow)}
.hb-calc__bar--them i{background:#dfe4ee}
.hb-calc__nums dd{color:var(--ice)}
.hb-calc__verdict{background:rgba(47,91,255,.06);border-left-color:var(--gold);color:var(--ice)}
.hb-calc__verdict[data-tone=warn]{background:rgba(255,180,0,.12);border-left-color:var(--beam)}
.hb-calc__verdict[data-tone=stop]{background:rgba(220,68,50,.08);border-left-color:#dc4432}

.hb-case,.hb-plan,.hb-quotes blockquote,.obsitem{
  background:#fff;border-color:var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.hb-case:hover,.obsitem:hover{background:#fff;border-color:var(--line);box-shadow:var(--shadow-lg)}
.hb-case__tag,.obsitem__m{color:var(--ice-fade)}
.hb-case__n{color:var(--gold)}
.hb-case__d{color:var(--ice-dim)}
.hb-pillars li{color:var(--ice-dim)}
.hb-pillars b{color:var(--ice)}
.hb-report__frame{border-color:var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.hb-report__bar{background:var(--night-2);border-bottom:1px solid var(--line-2)}
.hb-report__bar span{color:var(--ice-fade)}
.hb-report figcaption{color:var(--ice-fade)}

/* the process band keeps a photograph, but as a dark inset rather than the page ground */
.hb-band{border-radius:0}
.hb-band::before{background:linear-gradient(to bottom,rgba(11,16,32,.9),rgba(11,16,32,.82))}
.hb-band h2{color:#fff}
.hb-band .hb-kicker{color:var(--beam)}
.hb-steps li{border-top-color:rgba(255,255,255,.28)}
.hb-steps b{color:var(--beam)}
.hb-steps span{color:#fff}
.hb-steps em{color:rgba(255,255,255,.72)}

.hb-plan--on{border-color:var(--gold);background:#fff;box-shadow:0 2px 4px rgba(11,16,32,.04),0 28px 56px -22px rgba(47,91,255,.4)}
.hb-plan__flag{background:var(--gold);color:#fff}
.hb-plan__p b{color:var(--ice)}
.hb-plan__f li::before{border-color:var(--ok)}
.hb-plan__f b{color:var(--ice)}
.hb-plans__note{color:var(--ice-fade)}
.hb-quotes p{color:var(--ice);font-size:clamp(16px,1.3vw,18px);line-height:1.6}
.hb-quotes footer{color:var(--ice-fade);font-weight:500}
.hb-faq summary{color:var(--ice);font-weight:600}
.hb-faq details p{color:var(--ice-dim)}

/* ── inner pages ──────────────────────────────────── */
.pagehead{background:var(--night-2);border-bottom:1px solid var(--line-2)}
.crumbs,.crumbs a{color:var(--ice-fade)}
.obsitem h2{color:var(--ice)}
.obsitem p{color:var(--ice-dim)}
.obsitem__n{color:var(--gold)}
.obsitem__img{border-bottom:1px solid var(--line-2);background:var(--night-3)}
.article__body p,.article__body li{color:var(--ice-dim)}
.article__body blockquote{border-left-color:var(--gold);color:var(--ice);font-style:normal;font-family:var(--sans)}
.callout{background:rgba(47,91,255,.05);border-color:var(--line);border-radius:var(--radius)}
.figure__svg{border-color:var(--line-2)!important;border-radius:10px;background:#fff!important}
.latest__link{background:#fff;border-color:var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.latest__link:hover{border-color:var(--line);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.latest__title{color:var(--ice)}
.latest__sum{color:var(--ice-dim)}
.latest__kicker,.latest__all,.latest__more,.latest__tag{color:var(--gold)}

/* ── forms ────────────────────────────────────────── */
.form{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.form input,.form select,.form textarea{
  background:#fff;border:1px solid #d7dce6;border-radius:10px;color:var(--ice)}
.form input::placeholder,.form textarea::placeholder{color:#9aa3b4}
.form label,.field label{color:var(--ice)}

/* ── footer ───────────────────────────────────────── */
.ftr{background:var(--ice);border-top:0;color:rgba(255,255,255,.68)}
.ftr a,.ftr p,.ftr li{color:rgba(255,255,255,.68)}
.ftr a:hover{color:#fff}
.ftr h4{color:rgba(255,255,255,.45)}
.ftr .logo__t b{color:#fff}
.ftr .logo__t em,.ftr .office__addr{color:rgba(255,255,255,.55)}
.ftr .logo__m path{stroke:var(--beam)}
.office .office__tel{border-color:rgba(255,255,255,.28);color:#fff}
.office .office__tel:hover{background:var(--beam);border-color:var(--beam);color:var(--ice)}

/* ── contrast corrections ── */
.svc,.svc--alt,.sec--tint{background:#f6f8fb!important}
.svc:nth-child(even){background:#eef2f8!important}
:root{--ice-fade:#5c6779;--gold-dim:#2f5bff}
.svc__lede,.meta,th,.hb-case__tag{color:var(--gold-dim)!important}

.office__tel{border-color:var(--line);color:var(--ink)}
.footer .office__tel,.ftr .office__tel{border-color:rgba(255,255,255,.3);color:#fff}
.office__tel:hover{background:var(--gold);border-color:var(--gold);color:#fff}

.office__tel,.office__tel span,.office__tel svg{color:var(--ink)!important;fill:currentColor}
.footer .office__tel,.footer .office__tel span,
.ftr .office__tel,.ftr .office__tel span{color:#fff!important}
.office__tel:hover,.office__tel:hover span{color:#fff!important}


/* ── free tools ── */
.hbt-jump{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2)}
.hbt-jump__in{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 0}
.hbt-jump a{font-family:var(--sans);font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ice-dim);
  padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;background:#fff;transition:all .2s}
.hbt-jump a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow)}
.hbt-jump__note{margin-left:auto;font-size:12.5px;color:var(--ice-fade)}
/* two sticky bars stack here, so an anchor jump has to clear both or it
   parks the heading underneath them */
.sec[id]{scroll-margin-top:126px}

.hbt{max-width:1080px}
.hbt > .sub{margin-bottom:clamp(24px,3vw,38px)}
.hbt-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);align-items:start}
.hbt-form{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);
  padding:clamp(18px,2.4vw,28px);box-shadow:var(--shadow)}
.hbt-form + .hbt-two,.hbt-form + .hbt-out{margin-top:18px}
.hbt-two .hbt-form{height:auto}
.hbt-form label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ice);margin:0 0 8px}
.hbt-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hbt-row input{flex:1 1 200px}
.hbt-form input[type="text"],.hbt-form textarea,.hbt-form select{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ice);background:#fff;
  border:1px solid #d7dce6;border-radius:10px;padding:12px 14px}
.hbt-form textarea{resize:vertical;line-height:1.55}
.hbt-form input:focus,.hbt-form textarea:focus,.hbt-form select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(47,91,255,.14)}
.hbt-hint{margin:10px 0 0;font-size:13px;color:var(--ice-fade)}
.hbt-hint code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--night-3);padding:1px 5px;border-radius:4px}
.hbt-fine{margin:16px 0 0;font-size:14px;color:var(--ice-fade);max-width:62ch}

/* the pixel gauge under each field */
.hbt-gauge{margin:10px 0 0;display:flex;align-items:center;gap:11px}
.hbt-gauge i{flex:1 1 auto;height:5px;border-radius:999px;background:var(--night-3);
  position:relative;overflow:hidden;display:block}
.hbt-gauge i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);
  background:var(--ok);border-radius:999px;transition:width .18s,background .18s}
.hbt-gauge[data-s="warn"] i::after{background:var(--beam)}
.hbt-gauge[data-s="over"] i::after{background:#d93025}
.hbt-gauge span{flex:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--ice-fade);white-space:nowrap;font-variant-numeric:tabular-nums}

/* the SERP mock. Colours are Google's, deliberately, because a preview in
   another palette tells you nothing about how it will read. */
.hbt-preview{position:sticky;top:120px}
.hbt-tabs{display:flex;gap:6px;margin:0 0 12px}
.hbt-tab{font-family:var(--sans);font-size:13px;font-weight:600;padding:7px 15px;cursor:pointer;
  border:1px solid var(--line-2);background:#fff;color:var(--ice-fade);border-radius:999px;transition:all .2s}
.hbt-tab--on{border-color:var(--gold);color:var(--gold);background:rgba(47,91,255,.06)}
.hbt-serp{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);font-family:arial,sans-serif}
.hbt-serp[data-view="mobile"]{max-width:400px}
.hbt-serp__crumb{display:flex;align-items:center;gap:9px;font-size:14px;color:#202124;line-height:20px}
.hbt-serp__fav{flex:none;width:26px;height:26px;border-radius:50%;background:var(--night-3);
  border:1px solid var(--line-2)}
.hbt-serp__url{font-size:12px;color:#4d5156;margin:0 0 4px;padding-left:35px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbt-serp__title{font-family:arial,sans-serif;font-size:20px;line-height:1.3;color:#1a0dab;
  margin:2px 0 3px;cursor:pointer}
.hbt-serp[data-view="mobile"] .hbt-serp__title{font-size:18px}
.hbt-serp__title:hover{text-decoration:underline}
.hbt-serp__desc{font-size:14px;line-height:1.58;color:#4d5156}
.hbt-serp__cut{color:#9aa0a6}

.hbt-pre{margin:18px 0 14px;padding:15px 17px;background:#0b1020;color:#e7ecff;border-radius:10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}

.hbt-out{margin:18px 0 0}
.hbt-out[hidden]{display:none!important}
.hbt-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow)}
.hbt-card + .hbt-card{margin-top:12px}
.hbt-card h3{margin:0 0 12px;font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ice-fade)}
.hbt-err{border-left:3px solid #d93025;background:#fdf3f2;border-radius:8px;padding:13px 15px;
  font-size:15px;color:var(--ice)}
.hbt-load{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ice-fade)}
.hbt-load i{width:15px;height:15px;border:2px solid var(--night-3);border-top-color:var(--gold);
  border-radius:50%;display:block;animation:hbtspin .7s linear infinite}
@keyframes hbtspin{to{transform:rotate(360deg)}}

.hbt-big{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,38px);
  letter-spacing:-.02em;color:var(--ice);line-height:1.05;margin:0 0 4px}
.hbt-big + p{margin:0 0 16px;color:var(--ice-fade);font-size:14.5px;word-break:break-word}

.hbt-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.hbt-kv dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ice-fade);white-space:nowrap;padding-top:3px}
.hbt-kv dd{margin:0;font-size:14.5px;color:var(--ice);word-break:break-word}
.hbt-kv code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all}

.hbt-find{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.hbt-find li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ice-dim)}
.hbt-find b{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ice-fade)}
.hbt-find [data-l="bad"] b{background:#d93025}
.hbt-find [data-l="warn"] b{background:#b8860b}
.hbt-find [data-l="good"] b{background:var(--ok)}

.hbt-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.hbt-pill{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;
  background:rgba(47,91,255,.08);color:var(--gold);border:1px solid var(--line)}
.hbt-pill span{color:var(--ice-fade);font-weight:500}

.hbt-rows{list-style:none;margin:0;padding:0}
.hbt-rows li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.hbt-rows li:last-child{border-bottom:0}
.hbt-rows code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  word-break:break-all;color:var(--ice-dim)}
.hbt-tag{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:6px;background:var(--night-3);color:var(--ice);white-space:nowrap}
.hbt-yes,.hbt-no{font-size:12.5px;font-weight:600;white-space:nowrap}
.hbt-yes{color:var(--ok)}
.hbt-no{color:#d93025}

.hbt-scfield{margin-top:16px}
/* the generator column runs long; without this the reader panel sits alone at
   the top of a tall empty column */
#scCheckForm{position:sticky;top:126px}

@media(max-width:900px){
  .hbt-jump{top:0}
  /* one scrollable row — wrapped to three, sticky, it ate a sixth of the screen */
  .hbt-jump__in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hbt-jump__in::-webkit-scrollbar{display:none}
  .hbt-jump a{white-space:nowrap}
  .hbt-jump__note{display:none}
  .sec[id]{scroll-margin-top:66px}
  #scCheckForm{position:static}
  .hbt-two{grid-template-columns:1fr}
  .hbt-preview{position:static}
  .hbt-kv{grid-template-columns:1fr;gap:2px 0}
  .hbt-kv dd{margin-bottom:9px}
  .hbt-rows li{grid-template-columns:auto 1fr;gap:9px}
  .hbt-rows li > :last-child{grid-column:1/-1}
}