/* InspectFirst — example site stylesheet
   One page. Mobile first. Motion is progressive: if scripting is dead, everything is visible.
   Tokens ------------------------------------------------------------------ */
:root{
  --ink:#0E1116; --ink-2:#141A22; --ink-3:#1C242E;
  --paper:#FFFFFF; --paper-2:#F6F7F9; --paper-3:#EDEFF3;
  --text:#0E1116; --muted:#5C6672; --muted-2:#7C8592;
  --on-dark:rgba(255,255,255,.86); --on-dark-2:rgba(255,255,255,.60);
  --line:rgba(14,17,22,.10); --line-2:rgba(14,17,22,.06); --line-dark:rgba(255,255,255,.10);
  --amber:#E8A020; --amber-deep:#B9790A; --amber-soft:rgba(232,160,32,.13);
  --r-s:10px; --r:18px; --r-l:28px;
  --maxw:1140px; --banner-h:30px; --nav-h:60px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.68,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto;display:block}
::selection{background:var(--amber);color:var(--ink)}
a{color:inherit}

/* Type ------------------------------------------------------------------- */
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.08;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.75rem,8.6vw,5.2rem);letter-spacing:-.04em;line-height:1.0}
h2{font-size:clamp(1.85rem,4.4vw,3.05rem);letter-spacing:-.032em;line-height:1.05}
.sec--peak h2{font-size:clamp(2.1rem,5.4vw,3.6rem);letter-spacing:-.036em}
h3{font-size:1.075rem;letter-spacing:-.012em;font-weight:600;line-height:1.3}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted-2)}
.lede{font-size:clamp(1.02rem,2.1vw,1.2rem);line-height:1.62;color:var(--muted);max-width:60ch}
.sec--dark .lede,.hero .lede{color:var(--on-dark-2)}
.sec--dark .eyebrow,.hero .eyebrow{color:rgba(255,255,255,.52)}
.tiny{font-size:.8rem;color:var(--muted-2);line-height:1.55}

/* Layout ----------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.sec{padding-block:clamp(56px,8vw,88px)}
.sec--peak{padding-block:clamp(64px,10vw,128px)}
.sec--tight{padding-block:clamp(38px,5vw,52px)}
.sec--dark{background:var(--ink);color:#fff}
.sec--paper{background:var(--paper-2)}
.sec-head{max-width:66ch;display:grid;gap:14px}
[id]{scroll-margin-top:calc(var(--banner-h) + var(--nav-h) + 22px)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec--dark .rule{background:var(--line-dark)}

/* Buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:100px;border:1px solid transparent;
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
  will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--amber{background:var(--amber);color:var(--ink);box-shadow:0 8px 22px rgba(232,160,32,.24)}
.btn--amber:hover{background:#f0ac2b;box-shadow:0 12px 30px rgba(232,160,32,.32)}
.btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:rgba(14,17,22,.28)}
.sec--dark .btn--ghost,.hero .btn--ghost{border-color:rgba(255,255,255,.26);color:#fff}
.sec--dark .btn--ghost:hover,.hero .btn--ghost:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05)}
.btn--sm{padding:9px 15px;font-size:.83rem}
.hide-sm{display:inline}
.only-sm{display:none}
@media (max-width:699px){.hide-sm{display:none}.only-sm{display:inline}.nav-brand span{font-size:.88rem}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn-row--start{justify-content:flex-start}
.hero .btn-row{justify-content:flex-start}
.btn svg{width:17px;height:17px;flex:none}

/* Review banner ---------------------------------------------------------- */
.review-bar{position:fixed;inset:0 0 auto 0;height:var(--banner-h);z-index:80;
  background:var(--ink-2);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;padding-inline:12px;border-bottom:1px solid var(--line-dark)}
.review-bar b{font-weight:600;color:var(--amber)}

/* Nav -------------------------------------------------------------------- */
.nav{position:fixed;top:var(--banner-h);left:0;right:0;z-index:70;height:var(--nav-h);
  background:rgba(14,17,22,.78);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line-dark);
  transition:background .3s var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:var(--ink)}}
.nav.is-scrolled{background:rgba(14,17,22,.94)}
.nav-in{height:100%;display:flex;align-items:center;gap:20px}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.nav-brand img{width:30px;height:30px}
.nav-brand span{color:#fff;font-weight:600;font-size:.94rem;letter-spacing:-.015em}
.nav-links{display:none}
.nav-cta{display:inline-flex}
.nav-menu{position:relative}
.nav-menu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;
  border-radius:100px;border:1px solid var(--line-dark)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::marker{content:''}
.nav-menu summary i{display:block;width:16px;height:1.6px;background:#fff;position:relative}
.nav-menu summary i::before,.nav-menu summary i::after{content:'';position:absolute;left:0;width:16px;height:1.6px;background:#fff}
.nav-menu summary i::before{top:-5px}.nav-menu summary i::after{top:5px}
.nav-menu[open] summary{background:rgba(255,255,255,.08)}
.nav-sheet{position:fixed;left:0;right:0;top:calc(var(--banner-h) + var(--nav-h));background:rgba(14,17,22,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line-dark);
  padding:10px 22px 24px;display:grid;gap:2px}
.nav-menu:not([open]) .nav-sheet{display:none}
.nav-sheet a{color:var(--on-dark);text-decoration:none;font-size:1.28rem;font-weight:600;letter-spacing:-.02em;
  padding:14px 0;border-bottom:1px solid var(--line-dark)}
.nav-sheet a:last-of-type{border-bottom:0}
.nav-sheet .btn{margin-top:14px;width:100%}

/* Hero ------------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-top:calc(var(--banner-h) + var(--nav-h) + clamp(46px,9vw,92px));
  padding-bottom:0}
.hero::before{content:'';position:absolute;left:50%;top:-14%;width:min(1180px,132vw);height:820px;transform:translateX(-50%);
  background:radial-gradient(42% 38% at 50% 30%,rgba(232,160,32,.15),rgba(232,160,32,.04) 55%,transparent 76%);
  pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% -10%,transparent 40%,rgba(0,0,0,.5));
  pointer-events:none}
.hero-in{position:relative;z-index:2;display:grid;justify-items:start;text-align:left;gap:18px}
.hero-mark{width:clamp(92px,15vw,132px);height:auto;opacity:.97;
  filter:drop-shadow(0 12px 40px rgba(232,160,32,.20))}
.hero h1{max-width:20ch}
.hero .lede{max-width:52ch}
.hero-price-group{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.hero-price{display:inline-flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);
  border:1px solid var(--line-dark);border-radius:100px;padding:9px 16px}
.hero-price b{color:#fff;font-weight:600}
.hero-link{color:var(--amber);font-weight:600;font-size:.92rem;text-decoration:none;
  border-bottom:1px solid rgba(232,160,32,.4);padding-bottom:2px}
.hero-link:hover{border-color:var(--amber)}
.hero-report{position:relative;z-index:1;width:min(520px,84%);margin:clamp(22px,4.4vw,44px) auto 0}
.hero-report img{width:100%;height:auto;border-radius:14px;
  box-shadow:0 46px 96px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09)}
.hero-report figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.36);text-align:center;padding:18px 0 26px}
.scene{background:var(--ink);border:1px solid var(--line-dark);border-radius:var(--r-l);
  padding:clamp(14px,2.6vw,30px) clamp(14px,2.8vw,34px) 0;margin:clamp(30px,5vw,56px) 0 0;
  overflow:hidden}
.scene img{width:100%;height:auto;display:block}
.scene figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.42);text-align:center;padding:14px 0 20px}
.hero-scene{position:relative;z-index:1;width:min(1120px,100%);margin:clamp(14px,2.6vw,30px) auto 0;
  padding-inline:10px}
.hero-scene-in{background:rgba(255,255,255,.022);border:1px solid var(--line-dark);border-radius:var(--r-l);
  padding:clamp(12px,2.2vw,26px) clamp(12px,2.4vw,28px) 0;overflow:hidden}
.hero-scene img{width:100%;height:auto;display:block}
.hero-scene figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.36);text-align:center;padding:14px 0 20px}
.hero-facts{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 26px;
  padding:26px 0 34px;border-top:1px solid var(--line-dark);margin-top:clamp(24px,4vw,44px)}
.hero-facts span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);
  display:inline-flex;align-items:center;gap:8px}
.hero-facts span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}

/* Intro statement -------------------------------------------------------- */
.statement{display:grid;gap:26px}
.statement h2{max-width:24ch}
.statement .lede{max-width:64ch}
.statement-grid{display:grid;gap:30px}
.stat{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px}
.stat b{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);font-weight:600}
.stat p{color:var(--muted);font-size:.95rem}

/* What we check — sticky map + scrolling areas (this section sits on ink) -- */
.areas{display:grid;gap:clamp(28px,5vw,54px)}
.areas-map{align-self:start}
.areas-map svg{width:100%;height:auto;color:#7A8492;max-width:430px;margin-inline:auto}
.areas-map .hotspot{transition:color .45s var(--ease);transform-box:fill-box;transform-origin:center}
.areas-map .hotspot.is-active{color:var(--amber)}
.areas-map .hotspot .hs-ring{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
.areas-map .hotspot.is-active .hs-ring{transform:scale(1.22)}
.areas-map .hotspot .hs-dot{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
.areas-map .hotspot.is-active .hs-dot{transform:scale(1.35)}
.areas-list{display:grid}
.area{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.2vw,22px);align-items:start;
  padding:clamp(15px,2.4vw,24px) 0;border-top:1px solid var(--line-dark);
  transition:opacity .5s var(--ease)}
.area:last-child{border-bottom:1px solid var(--line-dark)}
.area-dgm{width:clamp(46px,8vw,62px);height:auto;color:rgba(255,255,255,.94);flex:none;
  background:rgba(255,255,255,.045);border:1px solid var(--line-dark);border-radius:18px;
  padding:clamp(10px,1.7vw,15px)}
.area-dgm svg{width:100%;height:auto;display:block;overflow:visible}
.area-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;color:var(--amber);flex:none}
.area-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.area-body{display:grid;gap:9px}
.area-body h3{color:#fff}
.area-body p{color:var(--on-dark-2);font-size:.96rem;max-width:60ch}

/* How it works (sits on white — text must be ink, not white) -------------- */
.steps{display:grid;gap:clamp(24px,4vw,34px)}
.step{border-top:1px solid var(--line);padding-top:22px;display:grid;gap:12px}
.step b{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-text)}
.step h3{font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--ink)}
.step p{color:var(--muted);font-size:.97rem;max-width:48ch}

/* The report ------------------------------------------------------------- */
.report{display:grid;gap:clamp(30px,5vw,58px);align-items:center}
.report-copy{display:grid;gap:16px}
.report-list{display:grid;gap:12px;margin:6px 0 0;padding:0;list-style:none}
.report-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;color:var(--on-dark-2);font-size:.97rem}
.report-list svg{width:16px;height:16px;margin-top:.34em;color:var(--amber);flex:none}
.report-claim{margin:22px 0 4px;padding-left:16px;border-left:3px solid var(--amber);font-size:clamp(17px,1.5vw,20px);line-height:1.45;font-weight:600;color:#fff;max-width:56ch}
.report-frame{background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 34px 70px rgba(0,0,0,.42),0 2px 0 rgba(255,255,255,.06) inset;
  transform:rotate(-.5deg);transition:transform .8s var(--ease)}
.report-frame img{width:100%}
.report-link{display:inline-flex;align-items:center;gap:8px;color:var(--amber);font-weight:600;
  font-size:.92rem;text-decoration:none;border-bottom:1px solid rgba(232,160,32,.4);padding-bottom:2px;width:max-content}
.report-link:hover{border-color:var(--amber)}
.report-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:rgba(255,255,255,.44);text-transform:uppercase}

/* Pricing ---------------------------------------------------------------- */
.plans{display:grid;gap:18px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,32px);
  display:grid;gap:14px;align-content:start;position:relative;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.plan:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(14,17,22,.09)}
.plan--main{border-color:rgba(232,160,32,.55);box-shadow:0 18px 44px rgba(232,160,32,.13)}
.plan-tag{position:absolute;top:-11px;left:clamp(24px,3.4vw,32px);background:var(--amber);color:var(--ink);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:5px 10px;border-radius:100px}
.plan h3{font-size:1.32rem;letter-spacing:-.02em}
.plan .price{font-family:var(--mono);font-size:clamp(1.7rem,4.6vw,2.15rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.plan .price small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--muted);
  letter-spacing:0;margin-top:6px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.94rem;color:var(--muted)}
.plan li svg{width:15px;height:15px;margin-top:.33em;color:var(--amber-deep);flex:none}
.plan .btn{width:100%;margin-top:4px}
.price-note{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px}
.price-note span{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.promise{font-weight:700;color:var(--ink)}

/* FAQ -------------------------------------------------------------------- */
.faq{display:grid;gap:0;margin-top:clamp(26px,4vw,40px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:17px 0;font-size:1.045rem;font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:''}
.faq summary i{position:relative;width:15px;height:15px;flex:none}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;background:var(--amber-deep);
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.faq summary i::before{left:0;top:6.7px;width:15px;height:1.6px}
.faq summary i::after{top:0;left:6.7px;width:1.6px;height:15px}
.faq details[open] summary i::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--ink)}
.faq .faq-a{padding:0 0 18px;color:var(--muted);font-size:.97rem;max-width:74ch}
.faq details[open] .faq-a{animation:fade .4s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Closing CTA ------------------------------------------------------------ */
.closing{background:var(--ink);color:#fff;text-align:center}
.closing-in{display:grid;justify-items:center;gap:20px}
.closing img{width:clamp(72px,12vw,104px)}
.closing .lede{max-width:52ch}
.closing .btn-row{justify-content:center}
.closing small{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.46)}

/* Footer ----------------------------------------------------------------- */
.foot{background:var(--ink-2);color:rgba(255,255,255,.62);padding-block:44px 34px;font-size:.9rem}
@media (max-width:559px){.foot-wrap{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.foot-wrap{display:grid;gap:26px}
.foot-brand{display:grid;gap:14px}
.foot-brand .mark{display:flex;align-items:center;gap:10px}
.foot-brand .mark img{width:28px;height:28px}
.foot-brand .mark span{color:#fff;font-weight:600;font-size:.95rem}
.foot-brand p{max-width:42ch;font-size:.88rem;line-height:1.6}
.foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:500;margin-bottom:12px}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.foot a{color:rgba(255,255,255,.72);text-decoration:none}
.foot a:hover{color:#fff}
.foot-legal{border-top:1px solid var(--line-dark);margin-top:26px;padding-top:18px;display:grid;gap:8px;
  font-size:.75rem;color:rgba(255,255,255,.44);line-height:1.5}
.foot-legal b{color:rgba(255,255,255,.62);font-weight:600}

/* Mobile sticky action --------------------------------------------------- */
.mobile-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:none;
  align-items:center;justify-content:center;gap:10px;padding:15px 20px;border-radius:100px;
  background:var(--amber);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.30)}
.mobile-bar svg{width:18px;height:18px}

/* Motion — progressive enhancement -------------------------------------- */
/* Reveal moves a block, it never hides one. The previous version started at opacity:0 and relied
   on the transition finishing to become readable; a throttled, interrupted or never-started
   transition left the page dark and blank, which reads as a site that did not load. Moving the
   block cannot hide anything. */
.js .reveal{transform:translateY(18px)}
.js .reveal.is-in{transform:none;transition:transform .72s var(--ease)}
.js .area-dgm [stroke]{stroke-dasharray:300;stroke-dashoffset:300}
.js .area.is-in .area-dgm [stroke]{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s var(--ease)}
.js .area-dgm [fill]:not([fill="none"]):not([fill="#fff"]):not([fill="#FFFFFF"]){opacity:0}
.js .area.is-in .area-dgm [fill]:not([fill="none"]):not([fill="#fff"]):not([fill="#FFFFFF"]){
  opacity:1;transition:opacity .6s var(--ease) .5s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal.is-in{opacity:1;transform:none;transition:none}
  .js .area-dgm [stroke]{stroke-dasharray:none;stroke-dashoffset:0}
  .btn:hover,.plan:hover{transform:none}
}

/* Breakpoints ------------------------------------------------------------ */
@media (min-width:560px){
  .statement-grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .plans{grid-template-columns:1fr 1fr}
  .foot-wrap{grid-template-columns:1.6fr 1fr 1fr}
}
@media (min-width:900px){
  .nav-links{display:flex;align-items:center;gap:26px;margin-right:22px}
  .nav-links a{color:var(--on-dark);text-decoration:none;font-size:.84rem;font-weight:500;letter-spacing:-.005em;
    transition:color .2s var(--ease)}
  .nav-links a:hover{color:#fff}
  .nav-cta{display:inline-flex}
  .nav-menu{display:none}
  .hero{padding-top:calc(var(--banner-h) + var(--nav-h) + clamp(66px,7vw,104px))}
  .steps{grid-template-columns:repeat(3,1fr);gap:34px}
  .report{grid-template-columns:1fr 1.06fr;gap:clamp(38px,5vw,64px)}
  .report-frame:hover{transform:rotate(0deg) translateY(-3px)}
  .areas{grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(38px,5vw,72px)}
  .areas-map{position:sticky;top:calc(var(--banner-h) + var(--nav-h) + 34px)}
  .plan{padding:36px 32px}
}
@media (max-width:699px){
  .mobile-bar{display:inline-flex;transform:translateY(230%);transition:transform .32s var(--ease)}
  .mobile-bar.is-on{transform:none}
  .review-bar{font-size:.58rem;letter-spacing:.07em}
  body{padding-bottom:0}
  .foot{padding-bottom:92px}
  .hero .btn-row{width:100%}
  .hero .btn-row .btn{flex:1 1 100%}
  .closing .btn-row{width:100%}
  .closing .btn-row .btn{flex:1 1 100%}
}

/* ---- Multi-page shell -------------------------------------------------------------------
   The site is six pages. This adds the compact page hero used by the five detail pages, the
   price rows on the home page, and a marker for the current page in the navigation. The home
   page's own hero is untouched. */
.page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-top:calc(var(--banner-h) + var(--nav-h) + clamp(28px,4.6vw,58px));
  padding-bottom:clamp(26px,4.6vw,48px)}
.page-hero .wrap{position:relative;z-index:2;display:grid;justify-items:start;gap:16px}
.page-hero h1{font-size:clamp(1.95rem,5.4vw,3.2rem);letter-spacing:-.032em;max-width:24ch;margin:0}
.page-hero .lede{max-width:56ch}
.page-hero .hero-price-group{margin-top:2px}

.price-rows{display:grid;gap:12px}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--text);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.price-row:hover,.price-row:focus-visible{border-color:var(--amber)}
.price-row-name{display:grid;gap:4px;font-weight:600;font-size:1.02rem}
.price-row-name small{font-weight:400;color:var(--muted);font-size:.88rem}
.price-row b{font-family:var(--mono);font-size:.92rem;white-space:nowrap;color:var(--text)}

.nav-links a[aria-current="page"],.nav-sheet a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{content:'';display:block;height:2px;margin-top:6px;
  background:var(--amber);border-radius:2px}

@media (max-width:699px){
  .page-hero h1{font-size:clamp(1.7rem,7.6vw,2.3rem)}
  .price-row{flex-wrap:wrap;gap:8px}
  .price-row b{font-size:.86rem}
}

/* ===================================================================== Quiet light
   The chosen design direction, applied to the shell and all six pages. It was picked on
   2026-09-10 from three comps; the comps still live at /design-1, /design-2 and /design-3
   for comparison and are not part of the site.

   What it is: a warm off-white page, white cards with soft shadows and generous radii, one
   ink primary action, amber used as punctuation rather than as the loudest thing, and the
   menu sitting on the left next to the mark.
   What it is not: the dark band the previous skin put at the top of every page.

   Note on class names: the fragments mark the primary action as .btn--amber, because that is
   what it used to look like. In this design the primary action is ink, so .btn--ink and
   .btn--amber both render as the ink pill, and .btn--accent is the amber fill. Renaming the
   fragments would be churn with no visual gain, and the aliases keep the markup and the
   build guards untouched.

   These rules sit at the end of the file on purpose: they override the earlier skin.
   ------------------------------------------------------------------------------------ */
:root{
  --paper:#F5F5F3; --paper-2:#FFFFFF; --paper-3:#EDEDEA;
  --text:#101418; --ink-2:#181D24;
  --muted:#5E6672; --muted-2:#7C8592; --amber-text:#8A5A05;
  --line:rgba(16,20,24,.09); --line-2:rgba(16,20,24,.055);
  --amber:#E8A020; --amber-deep:#B9790A; --amber-soft:rgba(232,160,32,.14);
  --sh-1:0 1px 2px rgba(16,20,24,.05);
  --sh-2:0 18px 44px -22px rgba(16,20,24,.22);
  --r-s:12px; --r:20px; --r-l:28px;
  --banner-h:32px; --nav-h:64px;
}
body{background:var(--paper);color:var(--text)}
::selection{background:var(--amber);color:#241703}
h1,h2,h3,h4{font-weight:650}
h3{font-weight:600}
.lede{color:var(--ink-2)}
/* The closing band and the dark cards are the two dark islands on a light page. Every rule
   that sets a light-page colour has to be re-stated for them, or the text disappears into the
   background. These were found by measuring contrast on the rendered pages, not by eye: the
   light-page .lede rule above read 1.12 to 1 on the closing band before this block existed. */
.closing .lede,.closing p{color:rgba(255,255,255,.74)}
.closing small{color:rgba(255,255,255,.62)}
.sec--dark .step h3,.sec--dark .promise{color:#fff}
.sec--dark .step p,.sec--dark .stat p,.sec--dark .faq .faq-a{color:rgba(255,255,255,.74)}
.sec--dark .step b,.sec--dark .stat b{color:var(--amber)}
.sec--dark .step,.sec--dark .faq details{border-top-color:rgba(255,255,255,.14)}
.sec--dark .faq details{border-bottom-color:rgba(255,255,255,.14)}
.sec--dark .faq summary{color:#fff}
.sec--dark .stat{background:transparent;box-shadow:none}
.sec--dark .price-row{background:rgba(255,255,255,.05);box-shadow:none}
.sec--dark .price-row b,.sec--dark .price-row-name{color:#fff}
.sec--dark .price-row-name small{color:rgba(255,255,255,.66)}
.sec--dark .tiny{color:rgba(255,255,255,.66)}
.sec--dark .report-note{color:rgba(255,255,255,.62)}
.eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.tiny{color:var(--muted)}

/* Banner, and a bar that is light with the menu on the left ------------------ */
.review-bar{background:var(--text);color:rgba(255,255,255,.84);font-family:var(--sans);
  font-size:.78rem;letter-spacing:0;text-transform:none;border-bottom:0}
.review-bar b{color:var(--amber)}
.nav{background:rgba(245,245,243,.84);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:var(--paper)}}
.nav.is-scrolled{background:rgba(245,245,243,.95);border-bottom-color:var(--line)}
.nav-brand{margin-right:0}
.nav-brand svg{width:30px;height:30px;flex:none;color:var(--text)}
.nav-brand span{color:var(--text);font-weight:650;letter-spacing:-.025em}
.nav-links{margin-right:0}
.nav-cta{margin-left:auto}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-menu summary{border-color:var(--line);background:#fff}
.nav-menu summary i,.nav-menu summary i::before,.nav-menu summary i::after{background:var(--text)}
.nav-menu[open] summary{background:var(--paper-3)}
.nav-sheet{background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.nav-sheet a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.nav-sheet a:hover,.nav-sheet a[aria-current="page"]{color:var(--text)}
/* The sheet gives every link inside it the ink text colour, and that also caught the button in
   the sheet: an ink button with ink text, measured at 1.09 to 1, unreadable. The button keeps
   its own colour. */
.nav-sheet .btn{color:#fff}
/* On a phone the menu button belongs at the top left, as asked, with the action kept at the
   right. On a wide screen the links themselves sit on the left, immediately after the mark. */
@media (max-width:899px){
  .nav-menu{order:-1;margin-right:4px}
  .nav-in{gap:12px}
}

/* Hero, light. The old glow and vignette are switched off by name. -------------- */
.hero{background:var(--paper);color:var(--text);
  padding-top:calc(var(--banner-h) + var(--nav-h) + clamp(40px,7vw,84px))}
.hero::before,.hero::after{display:none}
.hero .eyebrow{color:var(--muted)}
.hero .lede{color:var(--ink-2)}
.hero-price{background:#fff;border-color:transparent;box-shadow:var(--sh-1);color:var(--muted);
  font-family:var(--sans);font-size:.9rem;letter-spacing:0;text-transform:none;
  padding:11px 18px;border-radius:100px}
.hero-price b{color:var(--text);font-weight:650;font-size:.98rem;letter-spacing:-.025em}
.hero-facts{border-top-color:var(--line);padding:22px 0 30px}
.hero-facts span{font-family:var(--sans);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.hero-facts span::before{width:7px;height:7px}
/* --muted and --amber-text are deliberately darker than the comp: on this off-white the
   comp's lighter greys and ambers measured 3.1 to 4.4 to 1 on small text, under the 4.5
   the accessibility guidance asks for. These pass. */
.hero-link{color:var(--amber-text);border-bottom-color:rgba(138,90,5,.35)}
.hero-link:hover{border-color:var(--amber-text)}
.page-hero{background:var(--paper);color:var(--text)}
.page-hero .lede{color:var(--ink-2)}
.page-hero h1{max-width:22ch}

/* Buttons: ink is the primary, white with a hairline is the secondary ---------- */
.btn{border-radius:100px;padding:14px 24px;font-size:.95rem;font-weight:600}
.btn--amber,.btn--ink{background:var(--text);color:#fff;box-shadow:0 1px 2px rgba(16,20,24,.18)}
.btn--amber:hover,.btn--ink:hover{background:#1C222A;box-shadow:0 12px 26px -12px rgba(16,20,24,.5)}
.btn--accent{background:var(--amber);color:#241703;box-shadow:0 1px 2px rgba(16,20,24,.14)}
.btn--accent:hover{background:#F0AC2B;box-shadow:0 12px 26px -12px rgba(217,139,18,.55)}
.btn--ghost,.hero .btn--ghost{border-color:var(--line);background:#fff;color:var(--text);box-shadow:var(--sh-1)}
.btn--ghost:hover,.hero .btn--ghost:hover{border-color:var(--line);background:#fff;box-shadow:var(--sh-2)}
.sec--dark .btn--ghost{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06);
  color:#fff;box-shadow:none}
.sec--dark .btn--ghost:hover{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.1)}
.btn:focus-visible,.faq summary:focus-visible,.nav-menu summary:focus-visible,.price-row:focus-visible{
  outline:3px solid rgba(16,20,24,.22);outline-offset:2px}

/* The old dark band becomes one dark card inside the light page. No markup change:
   the section is transparent and the card is drawn on its inner wrapper. ---------- */
.sec--dark{background:transparent;color:var(--text);padding-inline:22px}
.sec--dark>.wrap{width:100%;max-width:calc(var(--maxw) - 44px);background:var(--ink);color:#fff;
  border-radius:var(--r-l);padding:clamp(22px,3.6vw,46px);
  box-shadow:0 34px 74px -40px rgba(16,20,24,.55)}
.sec--dark .lede{color:rgba(255,255,255,.72)}
.sec--dark .eyebrow{color:rgba(255,255,255,.55)}

/* Cards ------------------------------------------------------------------------ */
.plan{background:#fff;border-color:transparent;box-shadow:var(--sh-2);border-radius:var(--r)}
.plan:hover{box-shadow:0 24px 54px -24px rgba(16,20,24,.3);border-color:transparent}
.plan--main{border-color:rgba(232,160,32,.5);box-shadow:0 20px 48px -26px rgba(217,139,18,.5)}
.plan .price{font-family:var(--sans);font-weight:650;letter-spacing:-.04em}
.plan li svg{color:var(--amber)}
.price-row{background:#fff;border-color:transparent;box-shadow:var(--sh-1);border-radius:var(--r)}
.price-row:hover,.price-row:focus-visible{border-color:transparent;box-shadow:var(--sh-2);transform:translateY(-2px)}
.price-row b{font-family:var(--sans);font-weight:650;font-size:1.05rem;letter-spacing:-.025em}
.statement-grid .stat{background:#fff;border:0;border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--sh-1);gap:10px}
.stat b{color:var(--amber-text)}
.step{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary i::before,.faq summary i::after{background:var(--muted)}
.promise{color:var(--text)}

/* Booking card: the hero's right-hand column on a wide screen ---------------- */
.hero-grid{display:grid;justify-items:stretch;gap:clamp(26px,4vw,54px);align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:1.12fr .88fr}}
.book-card{background:#fff;border-radius:var(--r-l);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-2)}
.book-card h3{font-size:1.06rem;letter-spacing:-.025em}
.book-rows{margin:14px 0 0;border-top:1px solid var(--line)}
.book-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.book-row span{font-size:.9rem;color:var(--muted)}
.book-row b{font-size:1.03rem;font-weight:650;letter-spacing:-.025em}
.book-card .btn{width:100%;margin-top:18px}
.book-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:var(--muted)}
.book-note svg{width:16px;height:16px;color:var(--amber);flex:none}

/* Footer, light with a hairline top -------------------------------------------- */
.foot{background:transparent;color:var(--muted);border-top:1px solid var(--line);padding-block:40px 46px}
.foot-brand .mark svg{width:28px;height:28px;color:var(--text)}
.foot-brand .mark span{color:var(--text);font-weight:650}
.foot h4{color:var(--text)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}
.foot-legal{border-top:1px solid var(--line);color:var(--muted)}
.foot-legal b{color:var(--ink-2)}
.mobile-bar{background:var(--text);color:#fff;box-shadow:0 14px 34px rgba(16,20,24,.28)}

/* Hero media ---------------------------------------------------------------------
   The poster is on the video element, so it paints even if scripting is dead. The video only
   loads when the browser decides the connection and the visitor's motion settings allow it
   (see the script at the foot of the home page), which is what keeps a metered phone from
   paying for it. Fixed height in CSS means the block reserves its space and nothing shifts. */
.hero-media{position:relative;margin:clamp(26px,4.6vw,48px) 0 0;border-radius:var(--r-l);
  overflow:hidden;background:var(--paper-3)}
.hero-media video{display:block;width:100%;height:clamp(220px,42vw,430px);object-fit:cover}
.hero-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 13px;
  font-size:.78rem;color:rgba(255,255,255,.9);
  background:linear-gradient(transparent,rgba(16,20,24,.74))}
.hero-media figcaption b{font-weight:600;color:#fff}
@media (max-width:699px){
  .hero-media{border-radius:var(--r)}
  .hero-media video{height:clamp(190px,56vw,300px)}
}

/* Hub and service cards ------------------------------------------------------
   The home page and the hub page both sell two services, so the same card is used at two depths:
   .svc for the short teaser on the home page, .hub-card for the long version on the hub. */
.tech{display:grid;gap:clamp(26px,4vw,48px);align-items:center}
@media (min-width:980px){.tech{grid-template-columns:1fr 1.06fr}}
.tech .scene{margin:0}
.tech .lede{margin-top:14px}
.tech .tiny{margin-top:16px}

.svc-grid{display:grid;gap:clamp(18px,2.6vw,26px);margin-top:clamp(28px,4.4vw,44px)}
@media (min-width:820px){.svc-grid{grid-template-columns:1fr 1fr}}
.svc{background:#fff;border-radius:var(--r-l);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-2);
  display:grid;gap:12px;align-content:start}
.svc h3{font-size:1.35rem;letter-spacing:-.028em;margin-top:6px}
.svc-line{font-size:1.02rem;font-weight:600;color:var(--text)}
.svc-body{color:var(--muted);font-size:.97rem}
.svc-price{margin-top:2px;color:var(--muted);font-size:.95rem}
.svc-price b{color:var(--text);font-weight:650;font-size:1.1rem;letter-spacing:-.02em}
.svc .btn{width:100%;margin-top:6px}

.hub-card{background:#fff;border-radius:var(--r-l);padding:clamp(22px,3.2vw,38px);box-shadow:var(--sh-2);
  margin-top:clamp(24px,4vw,38px)}
.hub-head{display:grid;gap:8px;align-items:start}
@media (min-width:700px){.hub-head{grid-template-columns:1fr auto;gap:20px}}
.hub-card h3{font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.03em;margin-top:6px}
.hub-card>p{color:var(--muted);margin-top:14px;max-width:74ch}
.hub-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.hub-list li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:.95rem}
.hub-list li svg{width:16px;height:16px;margin-top:.34em;color:var(--amber-deep);flex:none}
.hub-card .btn{margin-top:24px;width:100%}
@media (min-width:700px){.hub-card .btn{width:auto;justify-self:start}}

/* Guarantee block on the pricing page: stated once, because it applies to both services. */
.guarantee{margin-top:clamp(26px,4vw,40px);padding:clamp(18px,2.4vw,26px);border-radius:var(--r);
  background:var(--amber-soft);border:1px solid rgba(232,160,32,.35)}
.guarantee-line{font-weight:650;font-size:1.05rem;letter-spacing:-.02em;color:var(--amber-text)}
.guarantee .tiny{margin-top:6px}
.plan-link{display:block;margin-top:12px;font-size:.88rem;font-weight:600;color:var(--amber-text);
  text-align:center;text-decoration:none;border-bottom:1px solid transparent}
.plan-link:hover{border-color:currentColor}

/* A four-step row, for the diagnosis page. Three steps is the inspection. */
@media (min-width:560px){.steps--four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.steps--four{grid-template-columns:repeat(4,1fr);gap:28px}}

/* The chooser on the booking page: two rows, each a link, so it works without scripting. */
.choose{display:grid;gap:14px;margin-top:clamp(28px,4.4vw,42px)}
.choose-row{position:relative;display:grid;gap:5px;background:#fff;border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--sh-1);text-decoration:none;color:inherit;
  border:2px solid transparent;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.choose-row:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.choose-row.is-chosen{border-color:var(--amber);box-shadow:var(--sh-2)}
.choose-k{font-weight:650;font-size:1.1rem;letter-spacing:-.025em}
.choose-d{color:var(--muted);font-size:.95rem}
.choose-p{margin-top:8px;font-weight:650;font-size:1rem;color:var(--text)}
.choose-flag{position:absolute;top:14px;right:14px;background:var(--amber);color:#241703;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px}
@media (min-width:760px){.choose{grid-template-columns:1fr 1fr}}
.send-extra{margin-top:clamp(24px,3.6vw,34px);border-top:1px solid var(--line);padding-top:20px;max-width:70ch}
.send-extra h3{font-size:1.08rem}
.send-extra p{color:var(--muted);font-size:.96rem;margin-top:8px}

/* The hero booking card now names the two services, so its rows are links. */
.book-row a{color:var(--muted);text-decoration:none;font-size:.9rem}
.book-row a:hover{color:var(--text);text-decoration:underline}
/* On a narrow phone "Advanced diagnosis" and its price each wrapped to two lines, which made the
   row four lines tall. Stack them instead, and keep the amount on one line everywhere else. */
.book-row b{white-space:nowrap}
@media (max-width:430px){
  .book-row{display:grid;gap:2px}
  .book-row b{white-space:normal}
}