:root{
  --paper:#F4F3EF;
  --paper-2:#EBE9E3;
  --paper-3:#E0DDD5;
  --white:#FCFCFA;

  --ink:#121210;
  --ink-2:#46453E;
  --ink-3:#7C7B72;
  --ink-4:#A9A79E;

  --rule:#D9D6CD;
  --rule-2:#E6E3DB;

  --mark:#8B0000;
  --mark-deep:#6E0000;
  --mark-wash:#FBECEC;

  --display:'Young Serif',Georgia,serif;
  --ui:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
h1,h2,h3,h4,h5,summary,.vt,.q-title,.span-cell .v,.card h3,.step h4,.hub h4,.readout h4,.form-head h3{
  text-wrap:balance;
}
p,li,.sec-lede,.hero-sub,.q-help,.vs,.driver p,.span-cell .d,.card p,.step p,.hero-note,.span-note{
  text-wrap:pretty;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--ui);background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:980px;margin:0 auto;padding:0 40px}
@media (max-width:720px){.wrap,.wrap-narrow{padding:0 22px}}

/* ---------- NAV ---------- */
nav.top{
  position:sticky;top:0;z-index:60;background:rgba(244,243,239,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
}
nav.top .in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:28px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:30px;height:30px;flex:none}
.brand-stack{display:flex;flex-direction:column;line-height:1}
.brand-sub{font-family:var(--mono);font-size:7px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);margin-top:3px}
.brand-txt{
  font-family:var(--display);font-size:20px;letter-spacing:-.015em;color:var(--ink);line-height:1;
  white-space:nowrap;
}
.brand-txt i{font-style:normal;color:var(--mark)}
.navlinks{display:flex;gap:30px;align-items:center;margin-left:auto;margin-right:6px}
.navlinks a{
  font-size:14.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.005em;
  padding-bottom:4px;position:relative;transition:color .15s;
}
/* joist-mark hover: a small red beam slides in under the link */
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--mark);
  transition:right .22s cubic-bezier(.2,.7,.2,1);
}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{right:0}
.navlinks a.on{color:var(--ink)}
.navlinks a.on::after{right:0}
@media (prefers-reduced-motion:reduce){.navlinks a::after{transition:none}}
.nav-toggle{display:none;flex:none;flex-direction:column;width:32px;height:32px;padding:0;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);margin:3px 0;transition:transform .2s ease,opacity .2s ease}
@media (max-width:900px){
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 12px 24px rgba(18,18,16,.08);
  }
  nav.top.nav-open .navlinks{display:flex}
  .navlinks a{padding:16px 22px;border-bottom:1px solid var(--rule-2)}
  .nav-toggle{display:inline-flex}
  nav.top.nav-open .nav-toggle span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
  nav.top.nav-open .nav-toggle span:nth-child(2){opacity:0}
  nav.top.nav-open .nav-toggle span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}
}

.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 21px;
  font-family:var(--ui);font-size:14.5px;font-weight:600;letter-spacing:-.008em;
  border-radius:2px;transition:background .16s,color .16s,border-color .16s;
  border:1px solid transparent;white-space:nowrap;
}
.btn svg{width:14px;height:14px}
.nav-book-short{display:none}
@media (max-width:560px){
  nav.top .in{gap:8px;padding-left:16px;padding-right:16px}
  nav.top .brand{gap:8px}
  nav.top .brand-mark{width:24px;height:24px}
  nav.top .brand-txt{font-size:17px}
  nav.top .in>.btn{padding:10px 12px;font-size:13px}
  .nav-book-full{display:none}
  .nav-book-short{display:inline}
}
.btn-mark{background:var(--mark);color:#fff}
.btn-mark:hover{background:var(--mark-deep)}
.btn-ink{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 rgba(139,0,0,.30);transition:background .16s,transform .12s ease,box-shadow .12s ease}
.btn-ink:hover{background:#2C2B26}
.btn-ink:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(139,0,0,0)} /* stamp press */
@media (prefers-reduced-motion:reduce){.btn-ink{transition:background .16s}.btn-ink:active{transform:none;box-shadow:3px 3px 0 rgba(139,0,0,.30)}}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-onink{background:var(--paper);color:var(--ink)}
.btn-onink:hover{background:#fff}
.btn-onink-line{border-color:rgba(244,243,239,.4);color:var(--paper)}
.btn-onink-line:hover{border-color:var(--paper)}

/* ---------- SECTION SHELL ---------- */
.sec{padding:104px 0}
.sec.paper{background:var(--paper-2)}
.sec.dark{background:var(--ink);color:var(--paper)}
@media (max-width:720px){.sec{padding:64px 0}}

.eyebrow,.tag{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.eyebrow::before,.tag::before{content:"";width:20px;height:1px;background:var(--mark)}
.sec.dark .eyebrow,.sec.dark .tag{color:var(--ink-4)}
.tag .dot{display:none}

h2.sec-h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5.6vw,64px);line-height:1.02;letter-spacing:-.025em;
  margin-bottom:20px;max-width:30ch;color:var(--ink);
}
.sec.dark h2.sec-h{color:var(--paper)}
h2.sec-h em,h2.sec-h .cy,h2.sec-h .amber{font-style:normal;color:var(--mark)}

.sec-lede{
  font-size:18px;line-height:1.62;color:var(--ink-2);max-width:60ch;margin-bottom:44px;
}
.sec.dark .sec-lede{color:rgba(244,243,239,.72)}
.sec-lede b{font-weight:600;color:var(--ink)}
.sec.dark .sec-lede b{color:var(--paper)}

/* ---------- HERO ---------- */
.lb-hero{padding:74px 0 0;background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden}
.lb-hero-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.lb-hero-bar .eyebrow{margin:0}
.lb-hero-code{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.lb-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,520px);gap:clamp(40px,7vw,104px);align-items:center;padding:62px 0 54px}
.lb-hero-copy h1{font-family:var(--display);font-weight:400;font-size:clamp(52px,6.4vw,92px);line-height:.94;letter-spacing:-.038em;color:var(--ink);max-width:12ch;margin-bottom:28px}
.lb-hero-copy h1 em{font-style:normal;color:var(--mark)}
.lb-hero-lede{font-size:18px;line-height:1.58;color:var(--ink-2);max-width:49ch}
.lb-hero-lede b{color:var(--ink);font-weight:600}
.lb-hero-copy .hero-cta{margin-top:28px}
.lb-hero-searches{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.lb-search-label{color:var(--ink-3);margin-right:4px}
.lb-hero-searches a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.lb-hero-searches a:hover{color:var(--mark);text-decoration-color:var(--mark)}
.lb-hero-console{background:var(--ink);color:var(--paper);padding:18px 18px 14px;box-shadow:8px 8px 0 rgba(139,0,0,.22)}
.lb-console-head,.lb-console-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,243,239,.58)}
.lb-console-status{color:rgba(244,243,239,.8)}
.lb-console-status i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#B6422E;vertical-align:1px}
.lb-console-diagram{margin:18px 0 14px;border:1px solid rgba(244,243,239,.16);background:#191917;padding:12px}
.lb-console-diagram svg{width:100%;height:auto;display:block}
.lb-grid-lines path{stroke:rgba(244,243,239,.07);stroke-width:1}
.lb-roof,.lb-floor{stroke:rgba(244,243,239,.8);stroke-width:2;fill:none}
.lb-joists{stroke:rgba(244,243,239,.35);stroke-width:1}
.lb-wall{fill:var(--mark)}
.lb-footing{fill:rgba(244,243,239,.28)}
.lb-load-arrow,.lb-load-arrow-head{stroke:#D95A3A;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lb-leader{stroke:rgba(244,243,239,.65);stroke-width:1}
.lb-svg-label{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;fill:#F4F3EF}
.lb-svg-sub{font-family:var(--mono);font-size:9px;letter-spacing:.5px;fill:rgba(244,243,239,.55)}
.lb-console-foot strong{font-weight:500;color:var(--paper)}
.lb-hero-proof{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:0;border-top:1px solid var(--rule);padding:20px 0 24px;align-items:center}
.lb-hero-proof>div{display:flex;flex-direction:column;gap:2px;padding-right:28px;margin-right:28px;border-right:1px solid var(--rule)}
.lb-hero-proof b{font-family:var(--display);font-size:26px;font-weight:400;line-height:1;color:var(--ink)}
.lb-hero-proof span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lb-hero-proof p{justify-self:end;max-width:27ch;font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--ink-3);text-align:right}
.lb-hero-proof p b{font-family:var(--mono);font-size:inherit;font-weight:500;color:var(--ink)}
@media (max-width:980px){.lb-hero-grid{grid-template-columns:1fr;gap:44px}.lb-hero-copy h1{max-width:15ch}.lb-hero-console{max-width:620px;width:100%;justify-self:end}}
@media (max-width:720px){.lb-hero{padding-top:46px}.lb-hero-bar{align-items:flex-start;flex-direction:column;gap:10px}.lb-hero-code{font-size:9px}.lb-hero-grid{padding:38px 0 36px;gap:34px}.lb-hero-copy h1{font-size:clamp(48px,13vw,64px);line-height:.95;max-width:11ch;margin-bottom:22px}.lb-hero-lede{font-size:16.5px}.lb-hero-searches{align-items:flex-start;flex-direction:column;gap:9px}.lb-search-label{margin:0}.lb-hero-console{padding:12px 12px 11px;box-shadow:5px 5px 0 rgba(139,0,0,.22)}.lb-console-head,.lb-console-foot{font-size:8px}.lb-console-diagram{padding:8px;margin:12px 0 10px}.lb-svg-label{font-size:9px}.lb-svg-sub{font-size:7.5px}.lb-hero-proof{grid-template-columns:1fr 1fr;gap:18px 12px}.lb-hero-proof>div{padding-right:0;margin-right:0;border-right:0}.lb-hero-proof>div:nth-child(2){border-left:1px solid var(--rule);padding-left:14px}.lb-hero-proof p{grid-column:1/-1;justify-self:start;max-width:42ch;text-align:left;margin-top:4px}}

.hero{padding:88px 0 0}
@media (max-width:820px){.hero{padding:52px 0 0}}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,7.4vw,98px);line-height:.96;letter-spacing:-.032em;
  color:var(--ink);margin-bottom:28px;max-width:24ch;
}
.hero h1 em{font-style:normal;color:var(--mark)}
.hero-row{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:end;padding-bottom:44px}
@media (max-width:900px){.hero-row{grid-template-columns:1fr;gap:30px;align-items:start}}
.hero-sub{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.hero-note{
  font-family:var(--mono);font-size:11.5px;line-height:1.8;color:var(--ink-3);
  padding-top:16px;border-top:1px solid var(--rule);
}
.hero-note b{color:var(--ink);font-weight:500}

/* the big section drawing */
.fig-pin-outer{position:relative}
.pin-ready .fig-pin-outer{height:240vh}
.pin-ready .fig-pin-inner{position:sticky;top:88px}
.fig-stage{opacity:1;transform:translateY(0)}
.pin-ready .fig-stage{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.pin-ready .fig-stage.visible{opacity:1;transform:translateY(0)}
.pin-ready .fig-stage-final{transition-delay:.25s}
@media (prefers-reduced-motion:reduce){
  .pin-ready .fig-pin-outer{height:auto}
  .pin-ready .fig-pin-inner{position:static;top:auto}
  .pin-ready .fig-stage{opacity:1;transform:none;transition:none}
}
.figure{border-top:1px solid var(--rule);padding-top:30px;padding-bottom:20px}
.fig-cap{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:22px;
}
.fig-cap b{color:var(--mark);font-weight:500}
.section-fig{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .ld{animation:ld 3s ease-in-out infinite}
  .ld:nth-of-type(2){animation-delay:.3s}
  .ld:nth-of-type(3){animation-delay:.6s}
  .ld:nth-of-type(4){animation-delay:.9s}
  @keyframes ld{0%,100%{opacity:.2}50%{opacity:1}}
}

/* ---------- WALL CHECK ---------- */
.check{background:var(--white);border:1px solid var(--rule)}
.check-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 30px;border-bottom:1px solid var(--rule-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);flex-wrap:wrap;
}
.check-top .step{color:var(--ink)}
.progress{height:2px;background:var(--rule-2);position:relative}
.progress i{position:absolute;inset:0 auto 0 0;background:var(--mark);width:0%;transition:width .4s cubic-bezier(.4,0,.2,1)}
.check-body{padding:52px 46px 44px;min-height:404px}
@media (max-width:640px){.check-body{padding:32px 22px}}

.q-num{font-family:var(--mono);font-size:11px;color:var(--mark);letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.q-title{
  font-family:var(--display);font-weight:400;font-size:clamp(28px,4.2vw,44px);
  line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin-bottom:12px;max-width:28ch;
}
.q-help{font-size:15.5px;color:var(--ink-3);line-height:1.6;margin-bottom:34px;max-width:56ch}

.opts{border-top:1px solid var(--rule-2)}
.opt{
  display:flex;align-items:baseline;gap:20px;width:100%;text-align:left;
  padding:20px 6px;border-bottom:1px solid var(--rule-2);
  border-left:2px solid transparent;transition:border-color .14s,padding-left .16s,background .14s;
}
.opt:hover{border-left-color:var(--mark);padding-left:18px;background:var(--mark-wash)}
.opt .key{font-family:var(--mono);font-size:11px;color:var(--ink-4);flex:none;transition:color .14s}
.opt:hover .key{color:var(--mark)}
.opt .lab{font-size:17.5px;font-weight:500;color:var(--ink);line-height:1.35;display:block;letter-spacing:-.01em}
.opt .sub{font-size:14px;color:var(--ink-3);line-height:1.5;margin-top:4px;display:block}

.check-nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 30px;border-top:1px solid var(--rule-2);flex-wrap:wrap;
}
.linkish{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);transition:color .15s}
.linkish:hover{color:var(--mark)}
.linkish[disabled]{opacity:.28;pointer-events:none}

.verdict{display:none}
.verdict.on{display:block}
.v-head{border-bottom:1px solid var(--rule-2);padding-bottom:26px;margin-bottom:28px}
.v-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;color:var(--mark)}
.v-kicker.calm{color:var(--ink-3)}
.vt{
  font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,52px);
  line-height:1.02;letter-spacing:-.028em;color:var(--ink);margin-bottom:12px;
}
.vt em{font-style:normal;color:var(--mark)}
.vs{font-size:16.5px;color:var(--ink-2);line-height:1.55;max-width:52ch}

.drivers{margin-bottom:30px}
.driver{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule-2);align-items:baseline}
.driver .w{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.driver .w.hi{color:var(--mark)}
.driver .w.lo{color:var(--ink-3)}
.driver .w.un{color:var(--ink-4)}
.driver p{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.driver p b{color:var(--ink);font-weight:600}
@media (max-width:560px){.driver{grid-template-columns:1fr;gap:5px}}

.v-foot{background:var(--paper-2);padding:28px 30px;border-left:2px solid var(--mark)}
.v-foot h4{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.v-foot p{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:22px}
.v-foot p b{color:var(--ink);font-weight:600}
/* Quiz close-the-loop lead form: verdict + signals ride along via the hidden wall_check field */
.v-lead .vl-head{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px}
.vl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.vl-grid input{
  padding:12px 14px;font-family:var(--ui);font-size:15px;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);width:100%;
}
.vl-grid input::placeholder{color:var(--ink-4)}
.vl-grid input:focus{outline:0;border-color:var(--mark)}
.vl-grid input[name="address"]{grid-column:1 / -1}
.vl-micro{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:640px){.vl-grid{grid-template-columns:1fr}}
/* Top-of-page confirmation band (post-submit redirect lands at the top of /request) */
.lb-flash{background:var(--ink);color:var(--paper)}
.lb-flash-in{display:flex;align-items:center;gap:16px;padding:13px 0}
.lb-flash-badge{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--mark);color:#fff;padding:5px 10px;white-space:nowrap}
.lb-flash p{margin:0;font-size:14.5px;font-weight:600}
.v-actions{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- JOIST VIZ ---------- */
.viz{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
@media (max-width:900px){.viz{grid-template-columns:1fr;gap:28px}}
.viz-stage{background:var(--white);border:1px solid var(--rule);padding:26px}
.toggle-row{display:flex;gap:26px;margin-bottom:26px;border-bottom:1px solid var(--rule);padding-bottom:2px}
.tgl{
  padding:0 0 12px;border-bottom:2px solid transparent;text-align:left;
  transition:border-color .15s,color .15s;color:var(--ink-3);
}
.tgl:hover{color:var(--ink)}
.tgl.on{border-color:var(--mark);color:var(--ink)}
.tgl .t{font-family:var(--ui);font-size:15.5px;font-weight:600;display:block;letter-spacing:-.01em}
.tgl .s{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:3px;display:block;letter-spacing:.06em;text-transform:uppercase}

.readout h4{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;line-height:1.1}
.readout h4 em{font-style:normal;color:var(--mark)}
.readout p{font-size:15.5px;color:var(--ink-2);line-height:1.65}
.readout p b{color:var(--ink);font-weight:600}
.readout p + p{margin-top:12px}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.legend i{width:16px;height:3px;display:block}

/* ---------- SPAN TOOL ---------- */
.span-tool{background:var(--white);border:1px solid var(--rule)}
.span-head{padding:38px 40px 0}
@media (max-width:640px){.span-head{padding:26px 22px 0}}
.span-val{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.span-val .n{font-family:var(--display);font-weight:400;font-size:clamp(64px,11vw,112px);letter-spacing:-.05em;color:var(--ink);line-height:.9}
.span-val .u{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.13em;text-transform:uppercase}
.span-val .badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mark)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--rule);
  outline:none;margin:34px 0 10px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--mark);cursor:grab;border:3px solid var(--white);box-shadow:0 0 0 1px var(--mark);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--mark);cursor:grab;
  border:3px solid var(--white);box-shadow:0 0 0 1px var(--mark);
}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.08em;padding-bottom:34px}
.span-body{border-top:1px solid var(--rule-2);display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.span-body{grid-template-columns:1fr}}
.span-cell{padding:28px 32px;border-right:1px solid var(--rule-2)}
.span-cell:last-child{border-right:0}
@media (max-width:720px){.span-cell{border-right:0;border-bottom:1px solid var(--rule-2);padding:22px}}
.span-cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.span-cell .v{font-family:var(--display);font-size:26px;font-weight:400;color:var(--ink);letter-spacing:-.022em;line-height:1.1;margin-bottom:8px}
.span-cell .d{font-size:14px;color:var(--ink-3);line-height:1.55}
.span-note{padding:22px 32px;background:var(--paper-2);border-top:1px solid var(--rule-2);font-size:14.5px;color:var(--ink-2);line-height:1.6}
.span-note b{color:var(--ink);font-weight:600}

/* ---------- BEFORE / AFTER REVEAL ---------- */
.ba{position:relative;background:var(--white);border:1px solid var(--rule);overflow:hidden;--pos:50%;user-select:none;-webkit-user-select:none}
.ba-layer{position:relative;width:100%}
.ba-layer svg{width:100%;height:auto;display:block}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--mark);pointer-events:none}
.ba-grip{
  position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--mark);pointer-events:none;
  display:grid;place-items:center;
}
.ba-grip::before{content:"";width:15px;height:9px;
  background:
    linear-gradient(90deg,#fff 1.5px,transparent 1.5px) 0 0/5px 9px repeat-x;
  opacity:.9}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:col-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:col-resize}
.ba-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:col-resize}
.ba-tag{
  position:absolute;bottom:16px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;background:var(--paper);color:var(--ink-2);
  border:1px solid var(--rule);pointer-events:none;
}
.ba-tag.l{left:16px}
.ba-tag.r{right:16px}

/* ---------- ANATOMY HOTSPOTS ---------- */
.anat{display:grid;grid-template-columns:1fr 330px;gap:48px;align-items:start}
@media (max-width:900px){.anat{grid-template-columns:1fr;gap:28px}}
.anat-stage{background:var(--white);border:1px solid var(--rule);padding:26px}
.hot{cursor:pointer}
.hot circle{transition:fill .15s,r .15s}
.hot:hover circle,.hot.on circle{fill:var(--mark)}
.hot text{font-family:var(--mono);font-size:11px;fill:#fff;pointer-events:none}
.anat-list{border-top:1px solid var(--rule)}
.anat-item{
  display:grid;grid-template-columns:26px 1fr;gap:14px;width:100%;text-align:left;
  padding:15px 0;border-bottom:1px solid var(--rule-2);align-items:baseline;
  border-left:2px solid transparent;transition:border-color .14s,padding-left .16s;
}
.anat-item:hover,.anat-item.on{border-left-color:var(--mark);padding-left:12px}
.anat-item .n{font-family:var(--mono);font-size:11px;color:var(--mark)}
.anat-item .t{font-family:var(--ui);font-size:16px;font-weight:600;color:var(--ink);display:block;letter-spacing:-.01em}
.anat-item .d{font-size:14.5px;color:var(--ink-3);line-height:1.55;margin-top:4px;display:none}
.anat-item.on .d{display:block}

/* ---------- SPAN SCALE DRAWING + COST BAR ---------- */
.span-draw{padding:8px 40px 0;background:var(--white)}
@media (max-width:640px){.span-draw{padding:8px 22px 0}}
.span-draw svg{width:100%;height:auto}
.letter-strip{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:20px 32px;border-top:1px solid var(--rule-2)}
.letter-strip .ls-k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mark);font-weight:500}
.letter-strip span:not(.ls-k){display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.letter-strip span:not(.ls-k) i{width:8px;height:8px;display:block;background:var(--mark)}

/* ---------- CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{padding:34px 32px 34px 0;border-right:1px solid var(--rule);padding-right:32px}
.card:first-child{padding-left:0}
.card:not(:first-child){padding-left:32px}
.card:last-child{border-right:0;padding-right:0}
@media (max-width:900px){
  .card{border-right:0;border-bottom:1px solid var(--rule);padding:28px 0}
  .card:not(:first-child){padding-left:0}
  .card:last-child{border-bottom:0}
}
.card .ic{width:30px;height:30px;margin-bottom:20px}
.card h3{font-family:var(--display);font-size:27px;font-weight:400;letter-spacing:-.024em;color:var(--ink);margin-bottom:10px;line-height:1.08}
.card p{font-size:15px;color:var(--ink-2);line-height:1.62}
.card .price{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.card .price b{color:var(--mark);font-weight:500}

/* ---------- STEPS ---------- */
.steps{border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:150px 1fr;gap:36px;padding:30px 0;border-bottom:1px solid var(--rule)}
@media (max-width:720px){.step{grid-template-columns:1fr;gap:8px;padding:24px 0}}
.step .when{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mark);padding-top:7px}
.step h4{grid-column:2;font-family:var(--display);font-size:29px;font-weight:400;color:var(--ink);letter-spacing:-.025em;margin-bottom:9px;line-height:1.08}
.step p{grid-column:2;font-size:16px;color:var(--ink-2);line-height:1.65;max-width:60ch}
@media (max-width:720px){.step h4,.step p{grid-column:1}}
.step p b{color:var(--ink);font-weight:600}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  padding:26px 0;cursor:pointer;list-style:none;display:flex;
  align-items:baseline;justify-content:space-between;gap:22px;
  font-family:var(--display);font-size:clamp(21px,2.8vw,28px);font-weight:400;letter-spacing:-.022em;
  color:var(--ink);line-height:1.15;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mark)}
.faq summary .pm{font-family:var(--mono);font-size:15px;color:var(--mark);flex:none;transition:transform .22s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 0 30px;max-width:66ch}
.faq .ans p{font-size:16.5px;color:var(--ink-2);line-height:1.7;margin-bottom:13px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans b{color:var(--ink);font-weight:600}
.faq .ans a{color:var(--mark);text-decoration:underline;text-underline-offset:3px}

/* ---------- ENGINEER ---------- */
.eor{display:grid;grid-template-columns:1fr 260px;gap:56px;align-items:start;border-top:1px solid var(--rule);padding-top:40px}
@media (max-width:860px){.eor{grid-template-columns:1fr;gap:26px}}
.eor .seal{display:none}
.eor h3{font-family:var(--display);font-size:clamp(28px,4vw,42px);font-weight:400;letter-spacing:-.026em;color:var(--ink);margin-bottom:16px;line-height:1.06;max-width:26ch}
.eor p{font-size:16.5px;color:var(--ink-2);line-height:1.65;max-width:58ch}
.eor p b{color:var(--ink);font-weight:600}
.eor-meta{display:flex;flex-direction:column}
.eor-meta div{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.05em;
  display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule-2);
}
.eor-meta div b{color:var(--ink);font-weight:500}

/* ---------- CTA ---------- */
.cta-band{padding:104px 0;background:var(--ink);color:var(--paper)}
@media (max-width:720px){.cta-band{padding:64px 0}}
.cta-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr;gap:34px}}
.cta-band h2{
  font-family:var(--display);font-weight:400;font-size:clamp(40px,6.4vw,74px);
  line-height:.98;letter-spacing:-.032em;margin-bottom:22px;color:var(--paper);
}
.cta-band h2 em{font-style:normal;color:var(--mark)}
.cta-band p{font-size:18px;line-height:1.6;color:rgba(244,243,239,.68);max-width:48ch}
.cta-band p b{color:var(--paper);font-weight:600}
.cta-list{display:flex;flex-direction:column;border-top:1px solid rgba(244,243,239,.16)}
.cta-list div{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(244,243,239,.16)}
.cta-list .k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);flex:none;width:78px}
.cta-list .v{font-size:15px;color:var(--paper)}
.cta-btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}

/* ---------- FORM ---------- */
.form-wrap{background:var(--white);border:1px solid var(--rule)}
.request-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:start}
.request-layout>*{min-width:0}
@media (max-width:860px){.request-layout{grid-template-columns:minmax(0,1fr);gap:36px}}
.form-head{padding:32px 36px 26px;border-bottom:1px solid var(--rule-2)}
.form-head h3{font-family:var(--display);font-size:32px;font-weight:400;color:var(--ink);letter-spacing:-.025em;line-height:1.08}
.form-head p{font-size:15px;color:var(--ink-3);margin-top:7px}
.form-body{padding:30px 36px;display:grid;gap:24px}
@media (max-width:640px){.form-body,.form-head{padding:22px}}
.fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 0;font-family:var(--ui);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);transition:border-color .15s;border-radius:0;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--mark)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld textarea{min-height:84px;resize:vertical}
.fld .hint{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}
.form-foot{padding:26px 36px;background:var(--paper-2);border-top:1px solid var(--rule-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.form-foot p{font-size:14px;color:var(--ink-2);max-width:40ch;line-height:1.55}
.form-foot p b{color:var(--ink);font-weight:600}

/* ---------- SUBPAGE HERO ---------- */
.sub-hero{padding:84px 0 64px;border-bottom:1px solid var(--rule)}
@media (max-width:720px){.sub-hero{padding:52px 0 42px}}
.sub-hero h1{
  font-family:var(--display);font-weight:400;font-size:clamp(44px,7.4vw,86px);
  line-height:.96;letter-spacing:-.032em;color:var(--ink);margin-bottom:24px;max-width:22ch;
}
.sub-hero h1 em,.sub-hero h1 .cy,.sub-hero h1 .amber{font-style:normal;color:var(--mark)}
.sub-hero .lede{font-size:18.5px;line-height:1.6;color:var(--ink-2);max-width:58ch}
.sub-hero .lede b{color:var(--ink);font-weight:600}
.gridbg{background:var(--paper)}

/* ---------- PROSE ---------- */
.prose{max-width:66ch}
.prose p{font-size:17px;line-height:1.72;margin-bottom:17px;color:var(--ink-2)}
.prose p b{font-weight:600;color:var(--ink)}
.prose h3{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:-.026em;margin:44px 0 14px;line-height:1.08;color:var(--ink)}
.prose h3:first-child{margin-top:0}
.prose ul{list-style:none;margin:16px 0 20px}
.prose ul li{padding-left:26px;position:relative;margin-bottom:12px;line-height:1.65;font-size:16.5px;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:1px;background:var(--mark)}
.prose ul li b{font-weight:600;color:var(--ink)}
.prose a{color:var(--mark);text-decoration:underline;text-underline-offset:3px}
.sec.dark .prose p,.sec.dark .prose ul li{color:rgba(244,243,239,.74)}
.sec.dark .prose h3{color:var(--paper)}
.sec.dark .prose p b,.sec.dark .prose ul li b{color:var(--paper)}

.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 56px}
@media (max-width:760px){.two-col{grid-template-columns:1fr;gap:28px}}
.two-col h3{margin-top:0;font-size:27px}

/* ---------- HUB + FOOTER ---------- */
.hub{padding:0}
.hub-in{
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
  padding:44px 0;border-top:1px solid var(--rule);
}
@media (max-width:760px){.hub-in{grid-template-columns:1fr;gap:22px}}
.hub .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.hub h4{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:-.025em;color:var(--ink);margin-bottom:10px;line-height:1.08}
.hub p{font-size:15.5px;color:var(--ink-2);line-height:1.62;max-width:62ch}

footer{padding:60px 0 30px;background:var(--paper);border-top:1px solid var(--rule)}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-brand p{font-size:14.5px;color:var(--ink-3);line-height:1.65;margin:16px 0;max-width:36ch}
.f-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.f-col ul a{font-size:15px;color:var(--ink-2);transition:color .15s}
.f-col ul a:hover{color:var(--mark)}
.f-meta{
  margin-top:50px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.05em;
}
.f-meta a{color:var(--mark)}