:root{
  --ink:#10141C;
  --ink-soft:#3C444F;
  --steel:#767D88;
  --concrete:#E6E4DF;
  --panel:#F3F1ED;
  --denim:#1B3A5C;
  --denim-deep:#122840;
  --chambray:#5A81B4;
  --hivis:#FF6A13;
  --rule:#C6C3BB;
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--mast-h);}
body{
  background:var(--concrete);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--hivis);color:var(--ink);}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:0.11em;text-transform:uppercase;}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;font-size:16px;padding:11px 20px;
  border:2px solid var(--ink);background:var(--ink);color:var(--concrete);
  transition:background .14s ease,color .14s ease,transform .14s ease,border-color .14s ease;cursor:pointer;
}
.btn:hover{background:var(--denim);border-color:var(--denim);transform:translateY(-1px);}
.btn-out{background:transparent;color:var(--ink);}
.btn-out:hover{background:var(--ink);color:var(--concrete);border-color:var(--ink);}
.btn-hivis{background:var(--hivis);border-color:var(--hivis);color:var(--ink);}
.btn-hivis:hover{background:#fff;border-color:#fff;color:var(--ink);}
.btn-lg{font-size:19px;padding:15px 30px;}

/* ================= utility + header ================= */
.utility{background:var(--denim-deep);color:#B9C6D8;padding:7px 0;}
.utility .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.utility a:hover{color:#fff;}

.masthead{border-bottom:2px solid var(--ink);background:var(--concrete);position:sticky;top:0;z-index:60;}
.masthead .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;}
.mark{display:flex;align-items:center;gap:11px;}
.mark .logo{width:38px;height:38px;flex-shrink:0;display:block;}
.mark .wm{display:flex;flex-direction:column;line-height:1;}
.mark .name{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:0.02em;text-transform:uppercase;white-space:nowrap;}
.mark .tld{font-family:var(--font-mono);font-size:11px;color:var(--steel);letter-spacing:0.06em;margin-top:3px;}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px;}
.nav a.link{font-weight:600;font-size:14.5px;color:var(--ink-soft);}
.nav a.link:hover{color:var(--ink);}

/* hamburger toggle — hidden on desktop */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:46px;height:42px;padding:9px 10px;background:transparent;border:2px solid var(--ink);cursor:pointer;}
.navtoggle span{display:block;height:2px;width:100%;background:var(--ink);transition:transform .2s ease,opacity .2s ease;}
@media (max-width:560px){.mark .tld{display:none;} .mark .name{font-size:23px;}}

/* ================= nav dropdown ================= */
.navitem{position:relative;display:flex;align-items:center;}
.navitem>.link{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.navitem>.link .caret{font-family:var(--font-mono);font-size:14px;color:var(--chambray);line-height:1;transition:transform .16s ease;}
.dropdown{
  position:absolute;top:100%;left:-14px;min-width:246px;
  background:var(--concrete);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--denim);
  padding:6px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:70;
}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.navitem:hover>.link .caret,.navitem:focus-within>.link .caret{transform:rotate(45deg);}
.dropdown a{
  display:block;padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
.dropdown a:last-child{border-bottom:none;}
.dropdown a:hover{background:var(--panel);color:var(--ink);}

/* ================= mobile nav panel ================= */
@media (max-width:960px){
  .navtoggle{display:flex;}
  .masthead.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .masthead.nav-open .navtoggle span:nth-child(2){opacity:0;}
  .masthead.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* nav collapses into a slide-down panel */
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--concrete);border-bottom:2px solid var(--ink);
    box-shadow:0 14px 26px rgba(16,20,28,.16);
    padding:6px 0 12px;display:none;
  }
  .masthead.nav-open .nav{display:flex;}
  .nav a.link{display:flex;padding:13px 22px;font-size:16px;}
  .nav .navitem{display:flex;flex-direction:column;align-items:stretch;}
  .nav .navitem>.link{padding:13px 22px;}
  .nav .navitem>.link .caret{display:none;}
  /* Services submenu shows expanded inline on mobile */
  .nav .dropdown{position:static;opacity:1;visibility:visible;transform:none;min-width:0;background:transparent;border:none;box-shadow:none;padding:0;}
  .nav .dropdown a{padding:11px 22px 11px 38px;border-bottom:none;color:var(--steel);font-weight:600;}
  .nav .dropdown a:hover{background:var(--panel);color:var(--ink);}
  .nav .btn{margin:12px 22px 4px;}
}

/* ================= hero ================= */
.hero{padding:66px 0 56px;}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;}
.hero h1{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-0.022em;
}
.hero h1 .under{
  background-image:linear-gradient(var(--hivis),var(--hivis));
  background-repeat:no-repeat;background-size:100% 0.17em;background-position:0 88%;
}

/* highlighter marker for skimmable urgency phrases */
.hl{
  background-image:linear-gradient(var(--hivis),var(--hivis));
  background-repeat:no-repeat;background-size:100% 1.05em;background-position:0 0.22em;
  color:var(--ink);font-weight:600;padding:0 2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero .sub{margin-top:20px;max-width:50ch;font-size:18.5px;color:var(--ink-soft);}
.hero .actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;}
.hero .note{margin-top:16px;color:var(--steel);}
@media (max-width:920px){.hero .grid{grid-template-columns:1fr;gap:38px;}}

/* --- google listing mock --- */
.listing{background:#1F2125;border:2px solid var(--ink);padding:22px 22px 18px;box-shadow:8px 8px 0 var(--denim);}
.listing .lname{font-family:var(--font-sans);font-weight:600;font-size:23px;color:#E8EAED;line-height:1.2;}
.listing .lmeta{margin-top:7px;font-size:14.5px;color:#9AA0A6;}
.listing .lmeta .open{color:#81C995;}
.listing .lacts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.lact{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 6px;flex:1;min-width:78px;border:1px solid #3C4043;color:#8AB4F8;
  font-size:12.5px;font-family:var(--font-sans);font-weight:600;
}
.lact .ic{width:22px;height:22px;border-radius:50%;border:1.5px solid #8AB4F8;display:flex;align-items:center;justify-content:center;font-size:11px;}
.lact.hi{border-color:var(--hivis);color:var(--ink);background:var(--hivis);animation:pop 2.6s ease-in-out infinite;}
.lact.hi .ic{border-color:var(--ink);}
@keyframes pop{0%,72%,100%{transform:translateY(0);}80%{transform:translateY(-4px);}88%{transform:translateY(0);}}
.listing-cap{margin-top:14px;color:var(--steel);}

/* ================= stat strip ================= */
.stats{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--panel);}
.stats .row{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:0 auto;}
.stat{padding:24px 20px;border-right:1px solid var(--rule);}
.stat:last-child{border-right:none;}
.stat .v{font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1;color:var(--denim);}
.stat .k{margin-top:7px;color:var(--steel);}
@media (max-width:820px){
  .stats .row{grid-template-columns:1fr 1fr;}
  .stat{border-bottom:1px solid var(--rule);}
  .stat:nth-child(2n){border-right:none;}
}

/* ================= section shells ================= */
.band{padding:74px 0;}
.band-tight{padding:54px 0;}
.band-panel{background:var(--panel);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.band-denim{background:var(--denim);color:#E4EBF4;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.band-denim h2,.band-denim h3{color:#fff;}
.band-denim .lead{color:#C3D2E4;}
.band-line{border-top:2px solid var(--ink);}

.eyebrow{color:var(--steel);margin-bottom:12px;}
h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
   font-size:clamp(24px,3vw,36px);line-height:1.06;letter-spacing:-0.018em;}
.lead{margin-top:15px;max-width:58ch;font-size:18px;color:var(--ink-soft);}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}

/* ================= gap cards ================= */
.probs{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);background:var(--panel);}
.prob{padding:26px 22px;border-right:2px solid var(--ink);}
.prob:last-child{border-right:none;}
.prob .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--chambray);}
.prob h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1.03;margin-top:10px;}
.prob p{margin-top:9px;font-size:15.5px;color:var(--ink-soft);}
@media (max-width:820px){
  .probs{grid-template-columns:1fr;}
  .prob{border-right:none;border-bottom:2px solid var(--ink);}
  .prob:last-child{border-bottom:none;}
}

/* ================= work order ================= */
.workorder{border:2px solid var(--ink);background:var(--panel);margin-top:36px;}
.wo-head{background:var(--ink);color:var(--concrete);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:11px 18px;}
.wo-cols{display:grid;grid-template-columns:88px 1fr 1.15fr;gap:16px;padding:9px 18px;border-bottom:1px solid var(--rule);color:var(--steel);}
.wo-item{display:grid;grid-template-columns:88px 1fr 1.15fr;gap:16px;padding:22px 18px;border-bottom:1px solid var(--rule);transition:background .15s ease;}
.wo-item:last-child{border-bottom:none;}
.wo-item:hover{background:#EAE7E1;}
.wo-item:hover .code{color:var(--ink);background:var(--hivis);}
.code{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.06em;color:var(--steel);align-self:start;padding:2px 5px;margin-left:-5px;transition:background .15s ease,color .15s ease;}
.wo-item h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:25px;line-height:1;}
.wo-item .what{margin-top:7px;font-size:15px;color:var(--steel);}
.wo-item p.desc{font-size:16px;color:var(--ink-soft);}
.tags{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px;}
.tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;border:1px solid var(--rule);color:var(--steel);padding:3px 7px;}
@media (max-width:720px){
  .wo-cols{display:none;}
  .wo-item{grid-template-columns:1fr;gap:8px;padding:22px 16px;}
  .code{margin-left:0;padding:2px 0;}
  .wo-item:hover .code{background:transparent;color:var(--steel);}
}

/* ================= spec sheet ================= */
.specwrap{margin-top:36px;border:2px solid var(--ink);background:var(--panel);}
.spec-head{background:var(--ink);color:var(--concrete);padding:11px 18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;}
.spec{display:flex;gap:12px;padding:15px 18px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);font-size:15.5px;color:var(--ink-soft);align-items:flex-start;}
.spec:nth-child(even){border-right:none;}
.spec .chk{flex-shrink:0;width:17px;height:17px;margin-top:3px;border:2px solid var(--ink);background:var(--hivis);position:relative;}
.spec .chk::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(42deg);}
.spec strong{color:var(--ink);font-weight:700;}
@media (max-width:720px){.spec-grid{grid-template-columns:1fr;} .spec{border-right:none;}}

/* ================= focus ================= */
.focus{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fcard{border:2px solid rgba(255,255,255,.28);padding:24px 20px;}
.fcard .fnum{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--hivis);}
.fcard h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:23px;line-height:1.05;margin-top:10px;}
.fcard p{margin-top:9px;font-size:15.5px;color:#B9C9DC;}
@media (max-width:860px){.focus{grid-template-columns:1fr;gap:16px;}}

/* ================= pricing table ================= */
.rates{margin-top:36px;border:2px solid var(--ink);background:var(--panel);}
.rate-head{background:var(--ink);color:var(--concrete);padding:11px 18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.rate{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:20px 18px;border-bottom:1px solid var(--rule);}
.rate:last-of-type{border-bottom:none;}
.rate .n{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:23px;line-height:1;}
.rate .d{margin-top:6px;font-size:15.5px;color:var(--steel);max-width:54ch;}
.rate .p{font-family:var(--font-display);font-weight:800;font-size:27px;white-space:nowrap;text-align:right;}
.rate .p small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--steel);font-weight:400;text-transform:uppercase;}
.ratefoot{padding:15px 18px;border-top:2px solid var(--ink);color:var(--steel);}
@media (max-width:600px){.rate{grid-template-columns:1fr;gap:10px;} .rate .p{text-align:left;}}

/* ================= timeline ================= */
.timeline{margin-top:48px;position:relative;}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--rule);transform:translateX(-50%);}
.tstep{display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;margin-bottom:26px;}
.tstep:last-child{margin-bottom:0;}
.tcard{border:2px solid var(--ink);background:var(--panel);padding:24px 22px;}
.tcard .tlabel{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase;color:var(--chambray);}
.tcard h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.02;margin-top:9px;}
.tcard p{margin-top:9px;font-size:15.5px;color:var(--ink-soft);}
.tlist{margin-top:14px;display:flex;flex-direction:column;gap:7px;}
.tlist span{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--steel);}
.tlist span::before{content:"";flex-shrink:0;width:8px;height:8px;margin-top:6px;background:var(--hivis);border:1.5px solid var(--ink);}
.tnum{
  justify-self:center;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--ink);background:var(--concrete);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:24px;z-index:2;
}
.tstep.right .tcard{grid-column:3;}
.tstep.left .tcard{grid-column:1;}
.tspacer{display:block;}
@media (max-width:820px){
  .timeline::before{left:26px;}
  .tstep{grid-template-columns:52px 1fr;gap:18px;margin-bottom:20px;}
  .tnum{justify-self:start;grid-column:1;grid-row:1;}
  .tstep.right .tcard,.tstep.left .tcard{grid-column:2;grid-row:1;}
  .tspacer{display:none;}
}

/* ================= CTA band ================= */
.ctaband{background:var(--ink);color:var(--concrete);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:56px 0;}
/* The solid inline highlight paints a box as tall as the font's ascent+descent.
   At line-height 1.22 that box was taller than the line, so the next line's
   orange block painted over the previous line's letters and clipped them.
   Vertical padding is gone and the leading is opened up to clear it. */
.ctaband h2{color:#fff;line-height:1.45;}
.ctaband h2 .hl{
  background:var(--hivis);background-size:auto;
  padding:0 0.14em;                       /* horizontal only — never vertical */
}
.ctaband p{margin-top:14px;color:#A9B0BB;max-width:56ch;margin-left:auto;margin-right:auto;font-size:17.5px;}
.ctaband .actions{margin-top:26px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.ctaband .fine{margin-top:16px;color:#767D88;}

/* ================= trade cards ================= */
.tradecards{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tcardsm{border:2px solid var(--ink);background:var(--panel);padding:24px 20px;transition:transform .15s ease,box-shadow .15s ease;}
.tcardsm:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--denim);}
.tcardsm .tt{display:flex;align-items:center;gap:10px;}
.tcardsm .sq{width:14px;height:14px;background:var(--hivis);border:2px solid var(--ink);flex-shrink:0;}
.tcardsm h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1;}
.tcardsm p{margin-top:11px;font-size:15px;color:var(--ink-soft);}
@media (max-width:900px){.tradecards{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.tradecards{grid-template-columns:1fr;}}

/* ================= service area ================= */
.area{margin-top:30px;display:flex;flex-wrap:wrap;border:2px solid var(--ink);background:var(--panel);}
.area span,.area a{
  padding:11px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:0.04em;color:var(--ink-soft);flex:1 1 auto;text-align:center;
}
.area a:hover{background:var(--panel);color:var(--ink);}

/* ================= FAQ ================= */
.faq{margin-top:30px;border-top:2px solid var(--ink);}
details{border-bottom:1px solid var(--rule);}
summary{
  list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.1;
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:22px;color:var(--chambray);font-weight:400;}
details[open] summary::after{content:"\2013";}
details[open] summary{color:var(--denim);}
details p{padding:0 0 20px;max-width:66ch;color:var(--ink-soft);font-size:16.5px;}

/* ================= contact ================= */
.ctwrap{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);}
.ct-left{padding:32px 26px;background:var(--panel);border-right:2px solid var(--ink);}
.ct-right{padding:32px 26px;background:var(--panel);}
.phone{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,5vw,46px);line-height:1;display:inline-block;margin-top:6px;}
.phone:hover{color:var(--denim);}
.hours{margin-top:16px;color:var(--steel);}
.field{margin-bottom:14px;}
.field label{display:block;margin-bottom:5px;color:var(--steel);}
.field input,.field textarea{
  width:100%;padding:11px 12px;border:2px solid var(--ink);background:#fff;
  font-family:var(--font-sans);font-size:16px;color:var(--ink);
}
.field textarea{min-height:96px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:3px solid var(--chambray);outline-offset:1px;}
@media (max-width:760px){
  .ctwrap{grid-template-columns:1fr;}
  .ct-left{border-right:none;border-bottom:2px solid var(--ink);}
}

/* ================= footer ================= */
footer{background:var(--denim-deep);color:#B9C6D8;border-top:2px solid var(--ink);padding:48px 0 30px;}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.fcol h4{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:17px;color:#fff;letter-spacing:0.05em;margin-bottom:14px;}
.fcol a,.fcol p{display:block;font-size:15px;color:#96A6BC;margin-bottom:9px;}
.fcol a:hover{color:#fff;}
.fbrand .name{font-family:var(--font-display);font-weight:800;font-size:30px;color:#fff;text-transform:uppercase;letter-spacing:0.02em;}
.fbrand .fmark{display:flex;align-items:center;gap:11px;}
.fbrand .fmark img{width:40px;height:40px;display:block;flex-shrink:0;}
.fbrand p{margin-top:10px;max-width:34ch;color:#8FA0B8;}
.fbase{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#6F8199;}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px;}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr;}}

/* ================= service page ================= */
.svc-hero{background:var(--denim);color:#E4EBF4;border-bottom:2px solid var(--ink);padding:60px 0 56px;}
.svc-hero .crumbs{margin-bottom:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#8FA9C9;}
.svc-hero .crumbs a:hover{color:#fff;}
.svc-hero .eyebrow{color:var(--chambray);}
.svc-hero h1{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,3.7vw,46px);line-height:1.03;color:#fff;letter-spacing:-0.02em;max-width:16ch;
}
.svc-hero .lead{color:#C3D2E4;max-width:60ch;}
.svc-hero .actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;}
.prose{margin-top:16px;max-width:66ch;font-size:17px;color:var(--ink-soft);}
.prose p{margin-top:14px;}
.prose p:first-child{margin-top:0;}
.svc-cross{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.svc-cross a{border:2px solid var(--ink);background:var(--panel);padding:20px 20px;transition:transform .15s ease,box-shadow .15s ease;display:block;}
.svc-cross a:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--denim);}
.svc-cross .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--chambray);}
.svc-cross h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.03;margin-top:8px;}
.svc-cross p{margin-top:7px;font-size:14.5px;color:var(--ink-soft);}
@media (max-width:640px){.svc-cross{grid-template-columns:1fr;}}

/* ================= local-seo hero map mock ================= */
.svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
@media (max-width:920px){.svc-grid{grid-template-columns:1fr;gap:34px;}}
.mapcard{background:var(--concrete);border:2px solid var(--ink);box-shadow:8px 8px 0 #0c1c30;}
.mapcard .maptop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--ink);}
.mapcard .maptop .q{font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;color:#cfd6df;text-transform:uppercase;}
.mapcard .maptop .q b{color:#fff;font-weight:600;}
.mapcard .mapimg{display:block;width:100%;height:auto;border-bottom:2px solid var(--ink);}
.mapcard .pack{padding:4px 0;}
.mrow{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--rule);}
.mrow:last-child{border-bottom:none;}
.mrow .rank{flex-shrink:0;width:22px;height:22px;border:1.5px solid var(--steel);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--steel);}
.mrow .biz{flex:1;min-width:0;}
.mrow .biz .bn{display:block;font-weight:600;font-size:15px;color:var(--ink);line-height:1.15;}
.mrow .biz .bm{display:block;font-size:12.5px;color:var(--steel);}
.mrow .stars{font-size:12.5px;color:var(--steel);white-space:nowrap;}
.mrow.you{background:var(--panel);}
.mrow.you .rank{background:var(--hivis);border-color:var(--ink);color:var(--ink);}
.mrow.you .biz .bn{font-weight:700;}
.mrow.you .stars{color:var(--ink);}
.mapcap{margin-top:14px;color:#8FA9C9;}

/* ================= advertising hero — search results mock ================= */
.serp{padding:4px 0;}
.sresult{padding:13px 15px;border-bottom:1px solid var(--rule);}
.sresult:last-child{border-bottom:none;}
.sresult.ad{background:var(--panel);border-left:4px solid var(--hivis);}
.stag{display:inline-block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:var(--ink);background:var(--hivis);padding:2px 7px;margin-bottom:8px;}
.stag.muted{background:transparent;color:var(--steel);border:1px solid var(--rule);}
.sttl{font-family:var(--font-sans);font-weight:600;font-size:15.5px;color:#1a4fb4;line-height:1.2;}
.sttl.muted{color:var(--steel);font-size:14.5px;}
.surl{font-size:12.5px;color:#3a7a3a;margin-top:3px;}
.surl.muted{color:var(--steel);}
.sdesc{font-size:13px;color:var(--ink-soft);margin-top:6px;}
.scta{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:0.04em;color:var(--ink);background:var(--hivis);border:2px solid var(--ink);padding:6px 11px;}

/* ================= web dev hero — phone mock ================= */
.phonewrap{display:flex;justify-content:center;}
.phoneframe{width:272px;max-width:100%;border:3px solid var(--ink);border-radius:32px;background:var(--ink);padding:10px;box-shadow:8px 8px 0 #0c1c30;position:relative;}
.phone-notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:82px;height:6px;border-radius:4px;background:#2a3340;z-index:2;}
.phone-screen{background:var(--concrete);border-radius:22px;overflow:hidden;}
.ph-top{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:2px solid var(--ink);}
.ph-logo{font-family:var(--font-display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:0.02em;color:var(--ink);}
.ph-call{width:27px;height:27px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink);}
.ph-hero{padding:22px 16px 24px;background:var(--denim);color:#fff;}
.ph-eyebrow{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#9db6d6;}
.ph-h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:27px;line-height:0.98;margin-top:9px;}
.ph-btn{margin-top:16px;background:var(--hivis);color:var(--ink);border:2px solid var(--ink);text-align:center;padding:10px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:0.03em;}
.ph-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;}
.ph-chips span{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.05em;color:#cdd9ea;border:1px solid rgba(255,255,255,.3);padding:4px 7px;}

/* ===================================================================
   DARK "TECH" TREATMENT — hero, service hero + CTA band
   Near-black bg, blueprint grid, scanlines, glow accents.
   =================================================================== */
:root{
  --void:#080B11;
  --grid:rgba(90,129,180,.16);
  --glow:rgba(255,106,19,.55);
}

.hero,.svc-hero,.ctaband{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--void);
  border-bottom:2px solid #000;
}
/* blueprint grid, fades out toward the top so headlines stay clean */
.hero::before,.svc-hero::before,.ctaband::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;background-position:center;
  -webkit-mask-image:radial-gradient(125% 120% at 50% 4%,#000 32%,transparent 80%);
          mask-image:radial-gradient(125% 120% at 50% 4%,#000 32%,transparent 80%);
}
/* corner glows + faint scanlines */
.hero::after,.svc-hero::after,.ctaband::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 80% at 84% -12%,rgba(255,106,19,.15),transparent 60%),
    radial-gradient(70% 90% at -4% 112%,rgba(90,129,180,.18),transparent 60%),
    repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.18) 3px 4px);
}

/* --- index hero: relight text that used to sit on a light bg --- */
.hero .eyebrow{color:var(--chambray);}
.hero h1{color:#F3F7FC;}
.hero .sub{color:#AEBECE;}
.hero .note{color:#788799;}
.hero .listing-cap{color:#8497AB;}
.hero .listing{box-shadow:8px 8px 0 #06254a,0 0 46px rgba(0,0,0,.55);}

/* --- dark-hero buttons: solid becomes glowing hi-vis, outline goes light --- */
.hero .actions .btn:not(.btn-out){
  background:var(--hivis);border-color:var(--hivis);color:var(--ink);
  box-shadow:0 0 22px rgba(255,106,19,.30);
}
.hero .actions .btn:not(.btn-out):hover{
  background:#ff7d33;border-color:#ff7d33;
  box-shadow:0 0 32px var(--glow);transform:translateY(-1px);
}
.hero .btn-out{color:#EEF3F9;border-color:#4A5A6D;}
.hero .btn-out:hover{background:#EEF3F9;color:var(--ink);border-color:#EEF3F9;}

/* CTA band glow on the primary button */
.ctaband .btn-hivis{box-shadow:0 0 24px rgba(255,106,19,.32);}
.ctaband .btn-hivis:hover{box-shadow:0 0 34px var(--glow);}


/* ===================================================================
   DECK MODE — one full-viewport "page" per section, snap on scroll.
   Opt in per page with <body class="deck">.
   =================================================================== */
/* Default only — nav.js measures the real masthead and overwrites this as an
   inline style on <html>. It must live on :root, not on .deck (body), or the
   body declaration would shadow the measured value for every descendant. */
:root{--mast-h:72px;--util-h:31px;}

/* One place to change the typeface. --font-display is the headline face;
   --font-mono stays IBM Plex Mono for the technical/blueprint labels. */
:root{
  --font-sans:'Manrope',system-ui,sans-serif;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

/* Every scroll lands on exactly one new panel (desktop, motion-OK only). */
@media (min-width:821px){
  html.deck-on{
    scroll-snap-type:y mandatory;
    scroll-padding-top:var(--mast-h);
    /* Snapping animates the scroll itself. Leaving scroll-behavior:smooth on
       means two things drive the scroll position at once — the smooth animation
       gets re-targeted by the snap engine mid-flight, which feels like the page
       sticking and refusing to settle (notably when scrolling back to the top). */
    scroll-behavior:auto;
  }
  /* If any panel cannot fit a screen, the whole container relaxes to proximity.
     Mandatory snapping must always come to rest ON a snap point, so a panel
     without one becomes unreachable — and an oversized panel's overflow gets
     skipped entirely. Proximity still snaps near the edges but lets the page
     rest anywhere, so nothing is ever trapped. */
  html.deck-on.deck-loose{scroll-snap-type:y proximity;}
}

.deck .snap-panel{position:relative;}
.deck .snap-panel>.wrap{width:100%;}

/* Below 821px there is no snapping, so panels flow normally at their
   natural height instead of forcing a screen each. */
@media (min-width:821px){
  .deck .snap-panel{
    scroll-snap-align:start;
    scroll-snap-stop:always;         /* no skipping two panels in one fling */
    /* --vh is measured in JS; 100dvh is only the pre-script fallback */
    min-height:calc(100dvh - var(--mast-h));
    min-height:calc(var(--vh,100dvh) - var(--mast-h));
    display:flex;align-items:center;
    padding-top:max(5vh,34px);padding-bottom:max(5vh,34px);
  }
  /* A panel too tall to fit KEEPS its snap point — removing it would make that
     position unreachable (for the hero, that means the top of the page becomes
     impossible to rest on). Only the forced stop is dropped; .deck-loose above
     relaxes the container so the overflow stays scrollable. */
  .deck .snap-panel.is-tall{scroll-snap-align:start;scroll-snap-stop:normal;align-items:flex-start;}
  .deck footer{scroll-snap-align:start;}
}

/* --- text takes the whole page --- */
.deck .hero h1{font-size:clamp(32px,4.6vw,68px);line-height:1.0;letter-spacing:-0.025em;}
.deck .hero .sub{font-size:clamp(17px,1.5vw,22px);max-width:44ch;}
.deck .snap-panel h2{font-size:clamp(25px,3.6vw,52px);line-height:1.05;letter-spacing:-0.02em;}
/* the CTA heading carries the solid inline highlight, whose painted box is
   taller than the glyphs — it needs real leading or line 2 clips line 1 */
/* Manrope's ascent/descent is taller than the old condensed face, so the solid
   highlight box needs more leading than it did to clear the line above. */
.deck .snap-panel.ctaband h2{font-size:clamp(22px,3.1vw,42px);line-height:1.45;}
.deck .snap-panel .lead{font-size:clamp(17px,1.5vw,23px);max-width:52ch;}
.deck .prob h3,.deck .tcardsm h3,.deck .fcard h3{font-size:clamp(21px,1.9vw,30px);}
/* Even grid instead of flex:1 1 auto, which stretched the last row into a few
   oversized cells. 13 cities + the "all areas" link = 14, an exact 7 x 2 block. */
.deck .area{
  display:grid;grid-template-columns:repeat(7,1fr);
  grid-auto-rows:1fr;                    /* rows size to content otherwise */
  border:1px solid rgba(255,255,255,.22);
}
.deck .area span,.deck .area a{
  flex:none;display:flex;align-items:center;justify-content:center;
  font-size:clamp(14px,1.15vw,18px);padding:clamp(16px,3.4vh,34px) 10px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .16s ease,color .16s ease;
}
/* no doubled edges against the container border */
.deck .area>:nth-child(7n){border-right:none;}
.deck .area>:nth-last-child(-n+7){border-bottom:none;}
/* the CTA closes the grid out in hi-vis */
.deck .area .is-all{
  background:var(--hivis);color:var(--ink);font-weight:800;letter-spacing:0.06em;
}
.deck .area .is-all span{display:inline-block;margin-left:7px;transition:transform .16s ease;}
.deck .area .is-all:hover{background:#ff7d33;color:var(--ink);}
.deck .area .is-all:hover span{transform:translateX(4px);}

@media (max-width:1023px){
  .deck .area{grid-template-columns:repeat(4,1fr);}
  .deck .area .is-all{grid-column:span 3;}
  .deck .area>:nth-child(7n){border-right:1px solid rgba(255,255,255,.12);}
  .deck .area>:nth-child(4n){border-right:none;}
  .deck .area>:nth-last-child(-n+7){border-bottom:1px solid rgba(255,255,255,.12);}
  .deck .area>:nth-last-child(-n+2){border-bottom:none;}
}
@media (max-width:639px){
  .deck .area{grid-template-columns:repeat(2,1fr);}
  .deck .area .is-all{grid-column:span 1;}
  /* the vh-based padding balloons on a tall phone — 7 rows of it is all
     scrolling and no content, so pin it to a fixed, compact value */
  .deck .area span,.deck .area a{padding:15px 10px;font-size:14px;}
  .deck .area>:nth-child(4n){border-right:1px solid rgba(255,255,255,.12);}
  .deck .area>:nth-child(2n){border-right:none;}
}
.deck summary{font-size:clamp(19px,1.7vw,27px);}

/* --- hero page: headline block centers, proof + trades pin to the bottom --- */
@media (min-width:821px){
  /* the stat bar sits just above the bottom edge rather than jammed against it */
  .deck .snap-panel.hero{flex-direction:column;justify-content:center;padding-bottom:max(3.2vh,22px);}
  .deck .snap-panel.hero>.wrap{flex:1 1 auto;display:flex;align-items:center;}

  /* The utility bar sits above the hero in normal flow, so the hero's natural
     snap position is *below* y=0. Under mandatory snapping that makes the true
     top of the document unreachable — the page yanks itself down on any scroll.
     Pulling the hero's snap area up by the utility height puts the snap point
     back at 0; its min-height drops to match so it still fits on that screen. */
  .deck .snap-panel.hero{
    scroll-margin-top:var(--util-h);
    min-height:calc(var(--vh,100dvh) - var(--util-h) - var(--mast-h));
    /* it also loses the utility bar's height from its own budget, so it runs a
       tighter top pad than the other panels */
    padding-top:max(3.6vh,26px);
  }
}
.deck .herofoot{width:100%;flex:0 0 auto;}
/* the stat strip goes transparent so it reads as part of the dark hero */
.deck .hero .stats{
  background:transparent;border-bottom:none;border-top:1px solid rgba(255,255,255,.16);
}
.deck .hero .stats .stat{
  border-right-color:rgba(255,255,255,.13);
  padding:clamp(15px,2.8vh,28px) 18px 0;
}
.deck .hero .stats .v{font-size:clamp(25px,2.7vw,42px);color:#fff;}
/* the labels wrap to two lines at some widths; reserve the space so the row
   keeps an even baseline instead of one cell hanging lower than the rest */
.deck .hero .stats .k{margin-top:7px;color:#8497AB;min-height:2.5em;line-height:1.25;}

/* --- fit to one screen: the panel owns the vertical rhythm now, so the
       band's own padding and the components' stacked margins come off --- */
.deck .snap-panel.band,
.deck .snap-panel.band-tight,
.deck .snap-panel.ctaband{padding-top:max(5vh,34px);padding-bottom:max(5vh,34px);}
/* .hero is deliberately absent — it sets its own tighter padding above, and
   repeating it here would override that by source order. */
.deck .snap-panel.svc-hero{padding-top:max(6vh,40px);padding-bottom:max(6vh,40px);}
.deck .probs,.deck .workorder,.deck .specwrap,
.deck .rates,.deck .focus,.deck .tradecards,.deck .faq{margin-top:clamp(16px,3vh,34px);}
.deck .area{margin-top:clamp(14px,2.4vh,28px);}
.deck .lead{margin-top:clamp(9px,1.4vh,15px);}
.deck .eyebrow{margin-bottom:clamp(6px,1vh,12px);}

/* pricing rows — 4 rows + head + foot is the densest table on the site */
.deck .rate{padding:clamp(9px,1.45vh,16px) 18px;}
.deck .rate .n{font-size:clamp(19px,1.7vw,22px);}
.deck .rate .d{margin-top:3px;font-size:15px;}
.deck .ratefoot{padding:clamp(9px,1.3vh,13px) 18px;}
/* a wider measure drops the intro from three lines to two */
.deck #pricing .lead{max-width:72ch;margin-top:10px;}
/* the hosting line item makes five rate rows, not four, and all five still
   have to share one screen */
.deck #pricing .rates{margin-top:14px;}
.deck #pricing .rate{padding:8px 18px;}
.deck #pricing .rate .n{font-size:20px;}
.deck #pricing .rate .d{font-size:14px;line-height:1.4;margin-top:2px;}
.deck #pricing .ratefoot{padding:8px 18px;}

/* process timeline — the tallest component on the page */
.deck .timeline{margin-top:clamp(16px,2.6vh,34px);}
.deck .tstep{margin-bottom:clamp(9px,1.4vh,20px);}
.deck .tcard{padding:clamp(13px,2vh,22px) 20px;}
.deck .tcard h3{font-size:clamp(19px,1.7vw,25px);margin-top:6px;}
.deck .tcard p{margin-top:clamp(5px,0.9vh,9px);}
.deck .tlist{margin-top:clamp(7px,1.1vh,13px);gap:clamp(4px,0.7vh,7px);}
.deck .tnum{width:44px;height:44px;font-size:21px;}

/* the 4-step timeline goes horizontal in deck mode so it fits one screen */
@media (min-width:961px){
  .deck .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .deck .timeline::before{
    left:0;right:0;top:21px;bottom:auto;width:auto;height:2px;transform:none;
  }
  .deck .tstep{
    display:flex;flex-direction:column;align-items:stretch;
    grid-template-columns:none;margin-bottom:0;
  }
  /* DOM order differs between .left and .right — normalize it */
  .deck .tstep .tnum{order:1;justify-self:start;align-self:flex-start;margin-bottom:13px;background:var(--panel);}
  .deck .tstep .tcard{order:2;}
  .deck .tstep .tspacer{display:none;}
  .deck .tstep.left .tcard,.deck .tstep.right .tcard{grid-column:auto;}
  .deck .tcard p{font-size:14.5px;}
  .deck .tlist span{font-size:13.5px;}
}

/* work order + spec rows */
.deck .wo-item{padding:clamp(12px,2vh,20px) 18px;}
.deck .spec{padding:clamp(10px,1.7vh,15px) 18px;}
.deck .prob{padding:clamp(16px,2.6vh,26px) 20px;}
.deck .fcard,.deck .tcardsm{padding:clamp(11px,1.8vh,18px) 18px;}
/* the trades/service-area index pages run a 12-card grid — 4 rows have to
   share one screen, so the gaps and card padding run tighter than elsewhere */
.deck .tradecards{gap:clamp(10px,1.6vh,16px);}
/* The service-area index carries 13 cities + a closing card = 14, which no
   rectangle divides evenly. A grid either orphans the last card or stretches
   it across the gap, and both read as a mistake. Flex-wrap with a centred
   final row keeps every card the same width and lets the remainder sit
   balanced under the block instead. */
@media (min-width:900px){
  .deck .tradecards.is-areas{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:14px;
  }
  .deck .tradecards.is-areas > *{
    flex:0 1 calc(25% - 10.5px);          /* 4 per row: 25% - gap*3/4 */
  }
  /* four narrower columns wrap the blurbs harder than the three-up trade
     grids elsewhere, so this one runs tighter type */
  .deck .tradecards.is-areas .tcardsm{padding:10px 13px;}
  .deck .tradecards.is-areas h3{font-size:17px;}
  .deck .tradecards.is-areas p{font-size:12.5px;line-height:1.35;margin-top:5px;}
}
.deck .tradecards.is-areas .is-more{border-color:var(--hivis);}
.deck .tradecards.is-areas .is-more .sq{background:var(--hivis);}
.deck .tcardsm p{margin-top:7px;}
/* 7 questions plus one open answer have to share one screen, so the collapsed
   rows run tight to leave room for the answer (nav.js keeps it to one at a time) */
.deck details p{padding-bottom:clamp(9px,1.4vh,15px);}
.deck summary{padding:clamp(8px,1.25vh,13px) 40px clamp(8px,1.25vh,13px) 0;}

/* --- shorter screens ---------------------------------------------------
   Headings are sized in vw, which ignores viewport HEIGHT, so on a short
   laptop the panels overflow and drop out of snapping. Scale with height. */
@media (min-width:821px) and (max-height:900px){
  .deck .hero h1{font-size:clamp(34px,5.2vw,70px);}
  .deck .snap-panel h2{font-size:clamp(27px,4vw,56px);}
  .deck .snap-panel .lead,.deck .hero .sub{font-size:16px;}
  .deck .prob p,.deck .fcard p,.deck .tcardsm p,.deck .spec{font-size:14px;}
  .deck .wo-item p.desc,.deck .rate .d{font-size:14.5px;}
  .deck summary{font-size:17.5px;}
  .deck .listing{padding:16px 16px 13px;}
  .deck .listing .lname{font-size:20px;}
  .deck .lact{padding:8px 5px;}
  .deck .hero .stats .v{font-size:clamp(21px,2vw,30px);}
  .deck .prob h3,.deck .tcardsm h3,.deck .fcard h3{font-size:20px;}
}
@media (min-width:821px) and (max-height:780px){
  .deck .hero h1{font-size:clamp(30px,4.2vw,54px);}
  .deck .snap-panel h2{font-size:clamp(24px,3.2vw,44px);}
  .deck .snap-panel .lead,.deck .hero .sub{font-size:15px;}
  .deck .listing .lmeta{font-size:13px;}
  .deck summary{font-size:16px;}
}
/* the three densest panels (a table, a rate list and a form) need extra help */
@media (min-width:821px) and (max-height:900px){
  .deck .wo-item{padding:9px 16px;}
  .deck .wo-item h3{font-size:20px;}
  .deck .wo-item .what{margin-top:4px;}
  .deck .tags{margin-top:6px;}
  .deck .rate{padding:7px 16px;}
  .deck .rate .n{font-size:18px;}
  .deck .rate .d{font-size:13.5px;}
  .deck .ratefoot{padding:8px 16px;}
  .deck .field{margin-bottom:8px;}
  .deck .field input,.deck .field textarea{padding:8px 10px;font-size:15px;}
  .deck .field textarea{min-height:62px;}
  .deck .ct-left,.deck .ct-right{padding:18px 20px;}
  .deck .phone{font-size:clamp(26px,3.2vw,34px);}
  .deck .hours{margin-top:10px;}
  .deck .spec{padding:8px 16px;}
}
@media (min-width:821px) and (max-height:760px){
  .deck #pricing .rates{margin-top:10px;}
  .deck #pricing .rate{padding:6px 16px;}
  .deck #pricing .rate .d{margin-top:2px;}
  .deck #pricing .ratefoot{padding:6px 16px;}
}
/* Below this there is no sensible way to fit a panel per screen, so stop
   pretending: fall back to an ordinary scrolling page. */
@media (max-height:600px){
  html.deck-on{scroll-snap-type:none;}
  .deck .snap-panel{min-height:0;display:block;}
}

/* ===================================================================
   PANEL REVEAL — replays each time a panel scrolls into view
   =================================================================== */
.deck [data-anim]{
  opacity:0;transform:translateY(26px);
  transition:opacity .62s cubic-bezier(.2,.6,.2,1),transform .62s cubic-bezier(.2,.6,.2,1);
  transition-delay:calc(var(--i,0) * 68ms);
}
.deck .snap-panel.is-active [data-anim]{opacity:1;transform:none;}

/* Heading word reveal — nav.js splits h1/h2 text into .wword-in spans;
   each slides up out of its own clipped .wword box, staggered per word
   via an inline transition-delay, replaying with the rest of the panel. */
.deck h1 .wword,.deck h2 .wword{display:inline-block;overflow:hidden;vertical-align:top;}
.deck h1 .wword-in,.deck h2 .wword-in{
  display:inline-block;transform:translateY(100%);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.deck .snap-panel.is-active h1 .wword-in,
.deck .snap-panel.is-active h2 .wword-in{transform:translateY(0);}

/* the old load-time .rise animation is inert — the panel observer drives it now */
/* neutralize the old load-time rise; the panel observer drives it now */
.deck .rise{opacity:1;transform:none;animation:none;}

/* ===================================================================
   LEFT SECTION RAIL — one marker per section, current one lit
   Sits in the margin beside .wrap (max 1120px), so it only appears once
   there is room for it; below that the top nav is the only navigation.
   =================================================================== */
.deckrail{display:none;}
@media (min-width:1200px){
  .deckrail{
    display:flex;flex-direction:column;gap:1px;
    position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:55;
    --rail-idle:#8A93A0;--rail-strong:#10141C;--rail-bg:rgba(243,241,237,.94);
  }
  .deckrail.on-dark{
    --rail-idle:#6E7D90;--rail-strong:#EDF2F8;--rail-bg:rgba(8,11,17,.92);
  }
  .deckrail-item{
    display:flex;align-items:center;gap:6px;position:relative;
    background:none;border:0;padding:6px 0;cursor:pointer;
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;
    color:var(--rail-idle);transition:color .18s ease;
  }
  .deckrail-item .n{opacity:.75;}
  .deckrail-item .ln{
    display:block;width:16px;height:2px;background:currentColor;
    transition:width .18s ease,background .18s ease;
  }
  /* label sits on its own backdrop so it stays readable over any panel */
  .deckrail-item .lb{
    position:absolute;left:100%;margin-left:8px;white-space:nowrap;
    /* sub-page labels are derived from headings, so cap runaway ones */
    max-width:230px;overflow:hidden;text-overflow:ellipsis;
    text-transform:uppercase;font-weight:600;color:var(--rail-strong);
    background:var(--rail-bg);padding:4px 8px;
    opacity:0;transform:translateX(-4px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .deckrail-item:hover,.deckrail-item:focus-visible{color:var(--rail-strong);}
  .deckrail-item:hover .ln,.deckrail-item:focus-visible .ln{width:26px;}
  .deckrail-item:hover .lb,.deckrail-item:focus-visible .lb{opacity:1;transform:none;}
  .deckrail-item.is-current{color:var(--hivis);}
  .deckrail-item.is-current .n{opacity:1;}
  .deckrail-item.is-current .ln{width:30px;background:var(--hivis);}
}

/* ===================================================================
   DARK STATEMENT PANELS — alternate against the light ones
   =================================================================== */
.deck .panel-dark{
  background:var(--void);color:#DCE6F1;
  border-top:2px solid #000;border-bottom:2px solid #000;
}
.deck .panel-dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 110% at 50% 0%,#000 30%,transparent 78%);
}
.deck .panel-dark>.wrap{position:relative;z-index:1;}
.deck .panel-dark h2,.deck .panel-dark h3{color:#fff;}
.deck .panel-dark .lead,.deck .panel-dark p{color:#A9BACD;}
.deck .panel-dark .eyebrow{color:var(--chambray);}
.deck .panel-dark .hl{color:var(--ink);}

/* dark variants of the components that live in those panels */
.deck .panel-dark .probs{background:transparent;border-color:rgba(255,255,255,.22);}
.deck .panel-dark .prob{border-color:rgba(255,255,255,.22);}
.deck .panel-dark .prob .idx{color:var(--hivis);}
.deck .panel-dark .specwrap{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.22);}
.deck .panel-dark .spec-head{background:rgba(255,255,255,.07);color:#E8EEF5;}
.deck .panel-dark .spec{border-color:rgba(255,255,255,.14);color:#A9BACD;}
.deck .panel-dark .spec strong{color:#fff;}
.deck .panel-dark .area{background:transparent;border-color:rgba(255,255,255,.22);}
.deck .panel-dark .area span,.deck .panel-dark .area a{
  border-color:rgba(255,255,255,.14);color:#C3D2E4;
}
.deck .panel-dark .area a:hover{background:var(--hivis);color:var(--ink);}
.deck .panel-dark a[style]{color:#fff;}

/* ================= motion / a11y ================= */
.rise{opacity:0;transform:translateY(10px);animation:rise .55s cubic-bezier(.2,.6,.2,1) forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}.d4{animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--chambray);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .rise{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
  /* panels still snap (instant, no motion) but nothing fades or slides */
  .deck [data-anim]{opacity:1!important;transform:none!important;}
  .deck h1 .wword-in,.deck h2 .wword-in{transform:none!important;}
}