/* WebPro360 site, design option A (approved 2026-11-04). Built by .kennel/redesign-a/build.py. Do not edit here. */
/* Option A base (from design-options/a, approved 2026-11-04) */

:root{
  --n10:#050e1c; --n9:#071426; --n85:#0a1a31; --n8:#0B1D36; --n7:#0F2846; --n6:#163a63;
  --teal:#1FA8B8; --teal-d:#0E8A98; --teal-b:#38C3D2; --teal-s:#7AD9E3; --wash:#EAF7F9;
  --amber:#E88A2A; --ink:#0B1321; --ink2:#3a4658; --paper:#F4F6F8; --white:#fff;
  --line:rgba(122,217,227,.18); --line2:rgba(122,217,227,.32);
  --lline:rgba(15,40,70,.16);
  --body:rgba(255,255,255,.86);
  --wrap:1240px; --gut:32px;
  --disp:"Archivo", "Arial Narrow", sans-serif;
  --sans:"Public Sans", "Helvetica Neue", Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--n9);color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
em,i{font-style:normal}
h1,h2,h3,h4{font-family:var(--disp);font-stretch:118%;font-weight:800;line-height:1.02;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--teal-b);outline-offset:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--disp);font-stretch:108%;font-weight:700;font-size:16px;line-height:1;text-decoration:none;padding:17px 24px;border-radius:4px;transition:background-color .2s, color .2s, border-color .2s, transform .2s;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--teal-b);color:var(--n9);border:1.5px solid var(--teal-b)}
.btn-primary:hover{background:var(--teal-s);border-color:var(--teal-s);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--white);border:1.5px solid rgba(122,217,227,.55)}
.btn-secondary:hover{border-color:var(--teal-s);background:rgba(122,217,227,.08)}
.on-light .btn-secondary,.btn-secondary.on-light{color:var(--n7);border-color:rgba(15,40,70,.55)}
.on-light .btn-secondary:hover,.btn-secondary.on-light:hover{background:var(--n7);border-color:var(--n7);color:#fff}
.btn-sm{padding:13px 18px;font-size:15px;border-radius:3px}
.phone{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;text-decoration:none;color:var(--white)}
.phone .pi{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);color:var(--teal-s);flex:none;transition:background-color .2s}
.phone .pi svg{width:17px;height:17px}
.phone span.t{border-bottom:1px solid rgba(122,217,227,.5);padding-bottom:1px}
.phone:hover .pi{background:rgba(122,217,227,.12)}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:20}
.hdr .wrap{display:flex;align-items:center;height:92px;gap:40px}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{font-size:16px;font-weight:500;text-decoration:none;color:rgba(255,255,255,.82);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;border-bottom-color:var(--teal-b)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line2);border-radius:4px;background:transparent;color:#fff;cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px}
.mpanel{display:none}

/* ---------- hero (from A) ---------- */
.hero{position:relative;background:
  radial-gradient(640px 520px at 76% 52%, rgba(31,168,184,.16), transparent 70%),
  radial-gradient(900px 600px at 10% 110%, rgba(15,40,70,.9), transparent 70%),
  var(--n9);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(122,217,227,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(122,217,227,.045) 1px, transparent 1px);background-size:80px 80px;mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);-webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:48px;align-items:center;padding-top:118px;padding-bottom:40px}
.kicker{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;color:var(--teal-s);margin-bottom:26px}
.kicker::before{content:"";width:34px;height:1px;background:var(--teal-s)}
.hero h1{font-size:clamp(46px,5.1vw,78px);font-stretch:122%;line-height:.98}
.hero h1 .l{display:block}
.hero h1 .l2{color:var(--teal-s)}
.lead{font-size:19px;line-height:1.6;color:var(--body);max-width:540px;margin-top:28px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:36px}
.ctas .phone{margin-left:10px}

.dial{position:relative;width:600px;max-width:100%;aspect-ratio:1;user-select:none;-webkit-user-select:none}
.dial svg{width:100%;height:100%;touch-action:pan-y;cursor:grab;overflow:visible}
.dial.dragging svg{cursor:grabbing}
.seg{cursor:pointer}
.seg path{fill:var(--n7);stroke:rgba(122,217,227,.28);stroke-width:1;transition:fill .35s}
.seg text{fill:var(--teal-s);font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;transition:fill .35s;pointer-events:none}
.seg.under path{fill:#14365b}
.seg.on path{fill:var(--teal-b);stroke:var(--teal-s)}
.seg.on text{fill:var(--n9)}
.seg g.mv{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.seg:focus{outline:none}
.seg:focus-visible path{stroke:#fff;stroke-width:2}
.dnum{fill:rgba(255,255,255,.62);font-family:var(--disp);font-stretch:100%;font-weight:600;font-size:16px}
.dial.small .dnum.minor{display:none}
.dial-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;transition:opacity .35s, transform .35s}
.dial-core b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:104px;line-height:.9;letter-spacing:-.03em}
.dial-core b sup{font-size:.36em;vertical-align:top;position:relative;top:.12em;color:var(--teal-s);font-weight:700;margin-left:2px}
.dial-core span{display:block;font-size:15px;color:rgba(255,255,255,.75);margin-top:12px;line-height:1.4}
.dial-core span strong{color:#fff;font-weight:600}
.readout{position:absolute;left:50%;top:50%;width:226px;transform:translate(-50%,-46%);text-align:center;opacity:0;pointer-events:none;transition:opacity .3s, transform .3s}
.readout .rc{font-size:14px;font-weight:600;color:var(--teal-s)}
.readout .rn{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:23px;line-height:1.08;margin-top:6px}
.readout .rl{font-size:16px;line-height:1.42;color:rgba(255,255,255,.86);margin-top:8px}
.readout .rp{display:inline-block;margin-top:12px;font-size:15px;font-weight:700;color:var(--n9);background:var(--teal-s);padding:5px 10px;border-radius:2px;line-height:1.3}
.dial.engaged .dial-core{opacity:0;transform:translate(-50%,-50%) scale(.94)}
.dial.engaged .readout{opacity:1;transform:translate(-50%,-50%)}
.dial-hint{font-size:14px;color:rgba(255,255,255,.62);text-align:center;margin-top:6px}

.hero-bar{position:relative;border-top:1px solid var(--line)}
.hero-bar .wrap{display:grid;grid-template-columns:auto 1fr 1fr 1fr;align-items:stretch}
.hero-bar .since{display:flex;align-items:center;gap:12px;padding:22px 36px 22px 0;font-size:15px;color:rgba(255,255,255,.72);border-right:1px solid var(--line)}
.hero-bar .since b{font-family:var(--disp);font-stretch:120%;font-size:24px;color:#fff;font-weight:800}
.hero-bar a.ch{display:flex;align-items:center;gap:16px;padding:22px 28px;text-decoration:none;border-right:1px solid var(--line);transition:background-color .25s}
.hero-bar a.ch:last-child{border-right:0}
.hero-bar a.ch:hover{background:rgba(122,217,227,.06)}
.hero-bar a.ch i{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:15px;color:var(--teal-s)}
.hero-bar a.ch span{font-weight:600;font-size:16px}
.hero-bar a.ch small{display:block;font-size:14px;color:rgba(255,255,255,.6);font-weight:400}

/* ---------- chapters ---------- */
.chap{position:relative;padding:72px 0 64px;border-top:1px solid var(--line)}
.ch1{background:var(--paper);color:var(--ink);border-top:0}
.ch2{background:var(--n8)}
.ch3{background:var(--n9)}
.ch-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px;align-items:end;margin-bottom:34px}
.ch-no{font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:120px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--teal-s);letter-spacing:-.04em;display:block;margin-bottom:20px}
.ch-band h2{font-size:38px;font-stretch:115%}
.ch-band .sub{font-size:17px;color:var(--body);margin-top:12px;max-width:520px}
.ch-band .sub strong{color:#fff;font-weight:600}
.ch1 .ch-no{-webkit-text-stroke-color:var(--n7)}
.ch1 h2{color:var(--n7)}
.ch1 .ch-band .sub{color:var(--ink2)}
.ch1 .ch-band .sub strong{color:var(--ink)}
.ch-count{font-size:15px;color:rgba(255,255,255,.62);text-align:right;padding-bottom:6px}
.ch1 .ch-count{color:var(--ink2)}
.ch-count b{font-family:var(--disp);font-stretch:118%;font-size:15px;color:var(--teal-s)}
.ch1 .ch-count b{color:var(--teal-d)}
.ch-count .tc{display:none}
@media (hover:none),(pointer:coarse){.ch-count .hv{display:none}.ch-count .tc{display:inline}}

/* index rows */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.ch1 .index{border-top-color:rgba(15,40,70,.28)}
.row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 236px 186px;gap:24px;align-items:center;padding:21px 0;border-bottom:1px solid var(--line);transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1)}
.ch1 .row{border-bottom-color:var(--lline)}
.row .n{font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:15px;color:rgba(255,255,255,.5);transition:color .3s,opacity .2s}
.ch1 .row .n{color:rgba(15,40,70,.5)}
.row h3{font-size:26px;font-stretch:112%;color:var(--teal-s);line-height:1.1;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ch1 .row h3{color:var(--n7)}
.row .desc{font-size:16px;line-height:1.5;color:var(--body);margin-top:6px}
.ch1 .row .desc{color:var(--ink2)}
.row .price{font-family:var(--disp);font-stretch:106%;font-weight:700;font-size:17px;line-height:1.3;color:#fff}
.row .price small{display:block;font-family:var(--sans);font-weight:500;font-size:14px;color:rgba(255,255,255,.58);margin-bottom:3px}
.ch1 .row .price{color:var(--n7)}
.ch1 .row .price small{color:var(--ink2)}
.row .go{justify-self:end}
.row .thumb{display:none}
.row .peek{position:absolute;left:0;top:50%;width:190px;height:132px;margin-top:-66px;pointer-events:none;z-index:5;opacity:0;border-radius:3px;overflow:hidden;box-shadow:0 26px 50px -20px rgba(0,0,0,.65);border:1px solid var(--line2);transition:opacity .25s;will-change:transform}
.ch1 .row .peek{border-color:rgba(15,40,70,.2);box-shadow:0 26px 50px -22px rgba(7,20,38,.55)}
.row .peek img{width:100%;height:100%;object-fit:cover;object-position:top}
.row .peek span{position:absolute;left:0;bottom:0;background:var(--n9);color:#fff;font-size:14px;font-weight:600;padding:3px 8px;border-radius:0 3px 0 0;line-height:1.4}
.row.peeking{grid-template-columns:196px minmax(0,1fr) 236px 186px}
.row.peeking .n{opacity:0}
@media (hover:hover) and (pointer:fine){
  .row:hover .n{color:var(--amber)}
  .row.peeking .peek{opacity:1}
  .row:hover::before{transform:scaleX(1)}
}
.row::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--teal-b);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ch1 .row::before{background:var(--n7)}

/* hosting layers line diagram */
.layers{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.layers-h,.jr-h{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:16px;color:#fff;margin-bottom:14px;display:flex;justify-content:space-between;gap:12px}
.layers-h span,.jr-h span{font-family:var(--sans);font-weight:400;font-size:14px;color:rgba(255,255,255,.6)}
.layers::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:1px;background:var(--line2)}
.layers .fill{position:absolute;left:5px;right:5px;top:4px;height:3px;background:var(--teal-b);transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.6,.05,.3,1)}
.layers li{position:relative;padding-top:24px}
.layers li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;background:var(--n8);border:1.5px solid var(--teal-s);border-radius:1px;transition:background-color .3s}
.layers li.timo::before{border-color:var(--amber)}
.layers li b{display:block;font-size:15px;font-weight:700;line-height:1.25;color:#fff}
.layers li span{display:block;font-size:14px;line-height:1.35;color:rgba(255,255,255,.66);margin-top:3px}
.layers li i{display:block;font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--teal-s);margin-bottom:2px}
.layers li.timo i{color:var(--amber)}
.layers.in .fill{transform:scaleX(1)}
.layers.in li::before{background:var(--teal-s)}
.layers.in li.timo::before{background:var(--amber)}
.layers.in li:nth-of-type(2)::before{transition-delay:.45s}
.layers.in li:nth-of-type(3)::before{transition-delay:.9s}
.layers.in li:nth-of-type(4)::before{transition-delay:1.35s}

/* journey: three linked steps */
.jl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0;padding:0}
.jl li{position:relative;padding-top:20px}
.jl li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(122,217,227,.16)}
.jl li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal-b);transform-origin:left;transform:scaleX(var(--f,0))}
.jl li i{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:rgba(255,255,255,.5);transition:color .3s}
.jl li.lit i{color:var(--teal-s)}
.jl b{display:block;font-size:15px;font-weight:700;line-height:1.25;margin-top:2px}
.jl span{display:block;font-size:14px;line-height:1.35;color:rgba(255,255,255,.68);margin-top:3px}

/* ---------- work carousel (from C, A palette) ---------- */
.work{background:var(--n85);border-top:1px solid var(--line);padding:76px 0 64px}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.work h2{font-size:clamp(32px,3.2vw,44px);font-stretch:115%}
.work .sub{color:var(--body);font-size:17px;margin-top:10px}
.sr-stage{position:relative;height:330px;perspective:1500px;perspective-origin:50% 45%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sr-stage::before{content:"";position:absolute;left:50%;top:44%;width:900px;height:420px;transform:translate(-50%,-50%);background:radial-gradient(closest-side, rgba(31,168,184,.13), transparent);pointer-events:none}
.sr-stage.dragging{cursor:grabbing}
.sr{position:absolute;left:50%;top:14px;width:0;height:0;transform-style:preserve-3d}
.sr-card{position:absolute;left:-180px;top:0;width:360px;height:264px;margin:0;padding:0;border:0;border-radius:3px;overflow:hidden;background:var(--n7);box-shadow:0 22px 40px -22px rgba(0,0,0,.8);outline:1px solid rgba(122,217,227,.16);backface-visibility:hidden;will-change:transform,opacity;cursor:pointer;font:inherit;color:inherit;text-align:left}
.sr-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none;-webkit-user-drag:none}
.sr-card .cap{position:absolute;left:0;bottom:0;background:var(--n7);color:var(--teal-s);font-size:14px;font-weight:600;padding:6px 10px;border-radius:0 3px 0 0;display:flex;align-items:center;gap:8px}
.sr-card .cap i{font-style:normal;color:rgba(255,255,255,.55);font-weight:500;transition:color .2s}
.sr-card:hover{outline-color:var(--teal-s)}
.sr-card:hover .cap i{color:var(--amber)}
.sr-card:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sr-hint{max-width:calc(var(--wrap) + var(--gut)*2);margin:10px auto 0;padding:0 var(--gut);font-size:15px;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:10px}
.sr-hint .drag{display:inline-flex;gap:3px}
.sr-hint .drag i{width:18px;height:2px;background:var(--teal-s);display:block}
.sr-hint .drag i:nth-child(2){width:8px;background:var(--amber)}
/* project popup */
.pj{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(5,14,28,.72);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.pj.open{opacity:1;visibility:visible;transition:opacity .25s}
.pj-box{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--n85);border:1px solid var(--line2);border-radius:4px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pj.open .pj-box{transform:none}
.pj-img{position:relative;min-height:300px;background:var(--n7);overflow:hidden}
.pj-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.pj-body{padding:30px 28px 26px;display:flex;flex-direction:column}
.pj-k{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--amber)}
.pj-body h3{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:26px;line-height:1.12;color:#fff;margin:8px 0 12px}
.pj-body p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.55;margin:0 0 20px}
.pj-go{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.pj-x{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;border-radius:4px;border:1px solid var(--line2);background:rgba(5,14,28,.8);color:#fff;cursor:pointer;display:grid;place-items:center}
.pj-x:hover{border-color:var(--teal-s)}
.pj-nav{display:flex;gap:8px;margin-top:14px}
.pj-nav button{flex:1;height:40px;border-radius:4px;border:1px solid var(--line2);background:transparent;color:#fff;font:600 14px var(--sans);cursor:pointer}
.pj-nav button:hover{border-color:var(--teal-s);background:rgba(122,217,227,.08)}
body.pj-lock{overflow:hidden}

/* ---------- people ---------- */
.people{background:#fff;color:var(--ink);padding:84px 0}
.pp{display:grid;grid-template-columns:400px minmax(0,1fr);gap:64px;align-items:center}
.pp h2{font-size:42px;color:var(--n7);font-stretch:115%}
.pp p{font-size:18px;line-height:1.65;color:var(--ink2);margin-top:18px}
.pp .btn{margin-top:28px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0}
.team .ph{overflow:hidden;border-radius:3px;aspect-ratio:3/4;background:var(--paper)}
.team img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.4s cubic-bezier(.2,.8,.2,1), filter .4s}
.team li{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.team.in li{opacity:1;transform:none}
.team.in img{transform:scale(1)}
.team.in li:nth-child(2){transition-delay:.12s}.team.in li:nth-child(3){transition-delay:.24s}.team.in li:nth-child(4){transition-delay:.36s}
.team li:hover img{transform:scale(1.04)}
.team .nm{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:var(--n7);margin-top:12px;line-height:1.2}
.team .rl{font-size:14px;color:var(--ink2);line-height:1.35;margin-top:3px}

/* ---------- planner ---------- */
.plan{background:var(--n9);border-top:1px solid var(--line);padding:72px 0 68px;position:relative;overflow:hidden}
.plan-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:30px}
.plan-head h2{font-size:clamp(34px,3.4vw,46px);font-stretch:115%}
.plan-head p{color:var(--body);font-size:17px;max-width:440px}
.plan-grid{display:grid;grid-template-columns:minmax(0,1.15fr) 300px minmax(0,1fr);gap:48px;align-items:start}
.sw-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.sw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:#fff;text-align:left;font:inherit;cursor:pointer;transition:background-color .2s}
.sw:hover{background:rgba(122,217,227,.04)}
.sw .nm{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:17px;line-height:1.2;color:#fff;transition:color .2s}
.sw .ds{display:block;font-size:14px;line-height:1.35;color:rgba(255,255,255,.6);margin-top:2px}
.sw .tg{position:relative;width:46px;height:24px;border:1.5px solid rgba(122,217,227,.5);border-radius:3px;transition:background-color .25s,border-color .25s;flex:none}
.sw .tg::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;background:rgba(255,255,255,.55);border-radius:2px;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s}
.sw[aria-checked="true"] .nm{color:var(--teal-s)}
.sw[aria-checked="true"] .tg{background:var(--teal-b);border-color:var(--teal-b)}
.sw[aria-checked="true"] .tg::after{transform:translateX(22px);background:var(--n9)}
.sw-all{margin-top:18px}
.ringcol{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:4px}
.ring{position:relative;width:300px;height:300px}
.ring svg{width:100%;height:100%;overflow:visible}
.ring .rs{fill:none;stroke-width:26;transition:stroke-dashoffset .7s cubic-bezier(.6,.05,.2,1)}
.ring .done{fill:none;stroke:var(--amber);stroke-width:3;stroke-dasharray:360 360;stroke-dashoffset:360;transition:stroke-dashoffset 1s ease .2s}
.ring.full .done{stroke-dashoffset:0}
.ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .deg{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:62px;line-height:1;letter-spacing:-.03em}
.ring .of{font-size:15px;color:rgba(255,255,255,.66);margin-top:6px}
.ring .cnt{font-size:15px;color:var(--teal-s);margin-top:2px;font-weight:600}
.allway{margin-top:16px;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:22px;line-height:1.1;color:var(--amber);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;min-height:26px}
.ring.full + .allway{opacity:1;transform:none}
.sum h3{font-size:22px;font-stretch:112%;color:#fff}
.sum .hint{font-size:15px;color:rgba(255,255,255,.62);margin-top:4px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.sgroup{padding:14px 0 6px}
.sgroup h4{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--teal-s);margin-bottom:6px}
.sgroup ul{list-style:none;margin:0;padding:0}
.sgroup li{font-size:16px;line-height:1.35;padding:4px 0;color:var(--body);animation:sin .35s ease both}
.sgroup li b{font-weight:600;color:#fff}
@keyframes sin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sum .empty{font-size:16px;color:rgba(255,255,255,.62);padding:16px 0}
.sum .btn{margin-top:18px;width:100%}
.sum .fine{font-size:14px;color:rgba(255,255,255,.58);margin-top:10px}

/* ---------- steps ---------- */
.steps-s{background:var(--paper);color:var(--ink);padding:76px 0 80px}
.steps-s h2{font-size:34px;color:var(--n7);margin-bottom:34px}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;margin:0;padding:0}
.steps .rail{position:absolute;left:24px;right:calc(33.33% - 24px);top:23px;height:2px;background:rgba(15,40,70,.12)}
.steps .rail i{position:absolute;inset:0;background:var(--teal-d);transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.6,.05,.3,1)}
.steps.in .rail i{transform:scaleX(1)}
.steps li{position:relative}
.steps .sn{position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;border-radius:4px;background:var(--paper);border:2px solid rgba(15,40,70,.2);font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:18px;color:var(--n7);transition:background-color .4s, border-color .4s, color .4s}
.steps.in .sn{background:var(--n7);border-color:var(--n7);color:var(--teal-s)}
.steps.in li:nth-of-type(2) .sn{transition-delay:.75s}
.steps.in li:nth-of-type(3) .sn{transition-delay:1.5s}
.steps h3{font-size:21px;font-stretch:112%;color:var(--n7);margin-top:22px}
.steps p{font-size:16px;color:var(--ink2);margin-top:10px;line-height:1.6}

/* ---------- closing (from A) ---------- */
.close{position:relative;overflow:hidden;background:var(--n10);min-height:620px;display:flex;align-items:center}
.close video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform:scale(var(--z,1.1));will-change:transform}
.close::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(5,14,28,.96) 0%, rgba(5,14,28,.86) 38%, rgba(5,14,28,.35) 75%, rgba(5,14,28,.25) 100%)}
.close .wrap{position:relative;z-index:2;width:100%}
.close h2{font-size:clamp(40px,4.6vw,66px);font-stretch:122%;max-width:640px}
.close p{font-size:19px;color:var(--body);max-width:520px;margin-top:22px}
.close .ctas{margin-top:34px}

/* ---------- footer ---------- */
.ftr{background:var(--n10);border-top:1px solid var(--line);padding:44px 0 92px}
.ftr .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.ftr img{height:34px;width:auto}
.ftr .fi{display:flex;gap:36px;margin-left:auto;font-size:15px;color:rgba(255,255,255,.72);flex-wrap:wrap}
.ftr .fi a{text-decoration:none;color:#fff;font-weight:600}
.ftr .fi b{color:#fff;font-weight:600}


/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}.js .rv.d4{transition-delay:.4s}
.js .row.rv{transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), grid-template-columns .45s cubic-bezier(.2,.7,.2,1)}
.js .hero .ld{opacity:0;transform:translateY(22px);animation:ld .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .hero .ld1{animation-delay:.05s}.js .hero .ld2{animation-delay:.18s}.js .hero .ld3{animation-delay:.32s}.js .hero .ld4{animation-delay:.46s}.js .hero .ld5{animation-delay:.6s}
.js .dial-wrap{opacity:0;transform:scale(.94) rotate(-8deg);animation:dl 1.4s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes ld{to{opacity:1;transform:none}}
@keyframes dl{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav,.hdr > .wrap > .phone{display:none}
  .burger{display:grid}
  .mpanel{position:absolute;top:84px;left:var(--gut);right:var(--gut);background:var(--n7);border:1px solid var(--line2);border-radius:4px;padding:10px 20px 20px;z-index:30}
  .mpanel.open{display:block}
  .mpanel a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
  .mpanel a.phone{border:0;margin-top:12px;padding:0;display:inline-flex}
  .hero-in{grid-template-columns:minmax(0,1fr) 480px;gap:32px}
  .dial{width:480px}
  .readout{width:200px}
  .dial-core b{font-size:80px}
  .readout .rn{font-size:20px}
  .readout .rl{font-size:15px}
  .row{grid-template-columns:72px minmax(0,1fr) 220px}
  .row.peeking{grid-template-columns:180px minmax(0,1fr) 220px}
  .row .go{grid-column:2/-1;justify-self:start}
  .plan-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .plan-grid .swcol{grid-column:1/-1}
  .ring{width:260px;height:260px}
  .pp{grid-template-columns:320px minmax(0,1fr);gap:44px}
  .ch-band{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:40px}
}
@media (max-width:900px){
  :root{--gut:24px}
  .hero-in{grid-template-columns:1fr;padding-top:116px}
  .dial-col{justify-self:center;width:100%;max-width:560px}
  .dial{width:100%;margin:0 auto}
  .dial-core b{font-size:clamp(64px,18vw,104px)}
  .readout,.dial.engaged .readout{position:static;transform:none;opacity:1;width:auto;max-width:440px;margin:22px auto 0;min-height:176px;pointer-events:auto}
  .dial-core,.dial.engaged .dial-core{top:0;left:0;right:0;aspect-ratio:1;transform:none;opacity:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .hero-bar .wrap{grid-template-columns:1fr 1fr;padding:0}
  .hero-bar .since{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);padding:18px var(--gut)}
  .hero-bar a.ch{padding:18px var(--gut);border-bottom:1px solid var(--line)}
  .hero-bar a.ch:nth-child(3){border-right:0}
  .hero-bar a.ch:last-child{grid-column:1/-1}
  .chap{padding:64px 0 52px}
  .ch-band{grid-template-columns:1fr;gap:30px;align-items:start}
  .ch-count{text-align:left}
  .ch-no{font-size:88px}
  .pp{grid-template-columns:1fr;gap:36px}
  .plan-grid{grid-template-columns:1fr;gap:36px}
  .plan-head{flex-direction:column;align-items:flex-start;gap:12px}
  .ringcol{order:-1}
  .sum{order:3}
}
@media (max-width:700px){
  :root{--gut:20px}
  body{font-size:16px}
  .hdr .wrap{height:76px}
  .logo img{height:32px}
  .mpanel{top:72px}
  .hero h1{font-size:clamp(38px,11vw,52px)}
  .lead{font-size:17px;margin-top:22px}
  .ctas{flex-direction:column;align-items:stretch}
  .ctas .btn{justify-content:center}
  .ctas .phone{margin:6px 0 0;justify-content:center}
  .dial-core span{display:none}
  .dial-core b{font-size:15vw}
  .dial-hint{margin-top:2px}
  .readout,.dial.engaged .readout{min-height:160px;margin-top:14px}
  .hero-bar .wrap{grid-template-columns:1fr}
  .hero-bar .since{padding:14px var(--gut)}
  .hero-bar a.ch{border-right:0;padding:14px var(--gut)}
  .hero-bar a.ch:last-child{grid-column:auto;border-bottom:0}
  .ch-band h2{font-size:32px}
  .row,.row.peeking{grid-template-columns:minmax(0,1fr);gap:0;padding:22px 0 24px;align-items:start}
  .row .n{display:none}
  .row .peek{display:none}
  .row .thumb{display:block;position:absolute;right:0;top:24px;width:96px;aspect-ratio:1000/720;border-radius:2px;overflow:hidden;border:1px solid var(--line2)}
  .ch1 .row .thumb{border-color:var(--lline)}
  .row .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
  .row h3{font-size:23px;padding-right:110px;min-height:69px}
  .row .desc{margin-top:8px}
  .row .price{margin-top:14px}
  .row .go{grid-column:auto;justify-self:stretch;margin-top:14px}
  .row .go .btn{width:100%}
  .layers{grid-template-columns:1fr 1fr;gap:18px 16px}
  .layers::before,.layers .fill{display:none}
  .layers li{padding:0 0 0 22px}
  .layers li::before{top:4px}
  .jl{grid-template-columns:1fr;gap:14px}
  .jl li{padding:0 0 0 18px}
  .jl li::before,.jl li::after{right:auto;bottom:0;width:3px;height:auto}
  .jl li::after{transform-origin:top;transform:scaleY(var(--f,0))}
  .layers-h,.jr-h{flex-direction:column;gap:2px}
  .work{padding:60px 0 52px}
  .work-head{flex-direction:column;align-items:flex-start}
  .sr-stage{height:230px}
  .sr{top:12px}
  .sr-card{width:240px;height:176px;left:-120px}
  .pj-box{grid-template-columns:1fr}
  .pj-img{min-height:0;aspect-ratio:auto;height:210px}
  .pj-body{padding:22px 20px 20px}
  .pj-body h3{font-size:22px}
  .people{padding:64px 0}
  .pp h2{font-size:34px}
  .pp p{font-size:17px}
  .team{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .plan{padding:64px 0}
  .ring{width:210px;height:210px}
  .ring .deg{font-size:46px}
  .allway{margin-top:10px;font-size:20px}
  .plan-grid{gap:28px}
  .steps-s{padding:60px 0 64px}
  .steps-s h2{font-size:30px;margin-bottom:28px}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps .rail{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .steps .rail i{transform-origin:top;transform:scaleY(0)}
  .steps.in .rail i{transform:scaleY(1)}
  .steps li{display:grid;grid-template-columns:48px 1fr;column-gap:18px}
  .steps h3{margin-top:12px;align-self:start}
  .steps p{margin-top:6px;grid-column:2}
  .close{min-height:560px}
  .close::after{background:linear-gradient(180deg, rgba(5,14,28,.55) 0%, rgba(5,14,28,.9) 45%, rgba(5,14,28,.96) 100%)}
  .close .wrap{padding-top:120px;padding-bottom:64px}
  .close h2{font-size:38px}
  .close p{font-size:17px}
  .ftr .wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .ftr .wrap > a{grid-column:1/-1}
  .ftr .fi{display:contents}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .hero .ld,.js .dial-wrap,.team li{opacity:1!important;transform:none!important}
  .team img{transform:none!important}
  .layers .fill{transform:scaleX(1)}
}

/* The live webpro360.com navigation and footer, restyled in option A's type and palette, shared by options D, E, F.
   Loaded after each page's own CSS so it overrides the placeholder header and footer. */
.hdr.wx{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;transition:background-color .3s ease, box-shadow .3s ease, border-color .3s ease;border-bottom:1px solid transparent}
.hdr.wx.scrolled{background:#071426;border-bottom-color:rgba(122,217,227,.16);box-shadow:0 12px 30px -22px rgba(0,0,0,.8)}
.hdr.wx .wrap{display:flex;align-items:center;height:84px;gap:28px;transition:height .3s ease}
.hdr.wx.scrolled .wrap{height:68px}
.hdr.wx .logo img{height:30px;width:auto;display:block}
.wx-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.wx-nav > a,.wx-nav > .wx-dd > button{font:600 15px/1 var(--sans);color:rgba(255,255,255,.86);text-decoration:none;padding:12px 14px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:4px;transition:color .2s, background-color .2s}
.wx-nav > a:hover,.wx-nav > .wx-dd > button:hover,.wx-nav > .wx-dd.open > button{color:#fff;background:rgba(122,217,227,.08)}
.wx-nav [aria-current="page"]{color:var(--teal-s,#7AD9E3) !important}
.wx-dd{position:relative}
.wx-dd > button svg{width:14px;height:14px;transition:transform .25s}
.wx-dd.open > button svg{transform:rotate(180deg)}
.wx-panel{position:absolute;top:calc(100% + 12px);left:50%;width:640px;transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .2s, transform .25s, visibility .2s;background:#0B1D36;border:1px solid rgba(122,217,227,.22);border-radius:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);padding:10px}
.wx-dd.open .wx-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.wx-panel .ov{display:block;padding:14px 16px;border-radius:4px;text-decoration:none;background:rgba(122,217,227,.07);margin-bottom:6px}
.wx-panel .ov small{display:block;font:600 12px/1.2 var(--sans);letter-spacing:.06em;color:var(--teal-s,#7AD9E3)}
.wx-panel .ov strong{display:block;font:700 17px/1.3 var(--disp);font-stretch:112%;color:#fff;margin-top:4px}
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.wx-grid a{display:block;padding:12px 16px;border-radius:4px;text-decoration:none;color:#fff;font:600 15px/1.3 var(--sans);transition:background-color .2s}
.wx-grid a small{display:block;font:400 13.5px/1.35 var(--sans);color:rgba(255,255,255,.62);margin-top:2px}
.wx-grid a:hover,.wx-grid a:focus-visible{background:rgba(122,217,227,.1)}
.wx-grid a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--teal-b,#38C3D2)}
.wx-cta{margin-left:10px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:4px;background:var(--teal-b,#38C3D2);color:#071426;font:700 15px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s, transform .2s}
.wx-cta:hover{background:#7AD9E3;transform:translateY(-1px)}
.hdr.wx .burger{display:none;margin-left:auto}
.hdr.wx .mpanel{display:none}

/* footer */
.ftr.wx{background:#071426;color:rgba(255,255,255,.8);padding:64px 0 28px;border-top:1px solid rgba(122,217,227,.14);font:15px/1.6 var(--sans)}
.ftr.wx .wrap{display:block !important;gap:0}
.ftr.wx{padding-bottom:84px}
.ftr.wx img{height:30px}
.ftr.wx a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s}
.ftr.wx a:hover{color:#fff}
.wx-ftop{display:flex;align-items:center;gap:28px;padding-bottom:36px;border-bottom:1px solid rgba(122,217,227,.14)}
.wx-ftop img{height:30px;width:auto;display:block}
.wx-ftop .tag{font:600 12.5px/1.6 var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.55)}
.wx-ftop .top{margin-left:auto;font-weight:600;font-size:14px}
.wx-fcols{display:grid;grid-template-columns:1fr 1.3fr 1.2fr 1.6fr;gap:32px;padding:40px 0}
.wx-fcols h3{font:600 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-s,#7AD9E3);margin:0 0 16px}
.wx-fcols div > a{display:block;padding:5px 0;font-size:15px}
.wx-based{font:700 22px/1.3 var(--disp);font-stretch:108%;color:#fff}
.wx-based span{display:block;color:var(--teal-s,#7AD9E3)}
.wx-based p{font:400 14px/1.6 var(--sans);color:rgba(255,255,255,.62);margin:12px 0 0}
.wx-soc{display:flex;gap:10px;margin-top:18px}
.wx-fcols .wx-soc a,.wx-soc a{width:42px;height:42px;padding:0;margin:0;display:grid;place-items:center;line-height:0;color:#fff;border:1px solid rgba(122,217,227,.3);border-radius:4px;transition:border-color .2s,background-color .2s,color .2s}
.wx-soc a:hover{border-color:#7AD9E3;background:rgba(122,217,227,.1);color:#7AD9E3}
.wx-soc svg{display:block;width:19px;height:19px;flex:none}
.wx-fbot{display:flex;align-items:center;gap:24px;padding-top:24px;border-top:1px solid rgba(122,217,227,.14);font-size:13.5px;color:rgba(255,255,255,.55)}
.wx-fbot .mid{margin:0 auto;letter-spacing:.14em;font-weight:600;font-size:12.5px}
.wx-fbot .legal{display:flex;gap:18px}

/* management team: two people, larger */
.team.wx-mgmt{grid-template-columns:repeat(2,minmax(0,260px)) !important;justify-content:start;gap:24px !important}

@media (max-width:1100px){
  .wx-nav,.wx-cta{display:none}
  .hdr.wx .burger{display:grid}
  .hdr.wx .mpanel{display:none;position:absolute;top:calc(100% - 4px);left:var(--gut,24px);right:var(--gut,24px);max-height:calc(100vh - 100px);overflow:auto;background:#0B1D36;border:1px solid rgba(122,217,227,.22);border-radius:6px;padding:8px 20px 20px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
  .hdr.wx .mpanel.open{display:block}
  .hdr.wx .mpanel > a,.hdr.wx .mpanel summary{display:block;padding:14px 0;border-bottom:1px solid rgba(122,217,227,.14);color:#fff;text-decoration:none;font:600 16px/1.2 var(--sans);cursor:pointer;list-style:none}
  .hdr.wx .mpanel summary::-webkit-details-marker{display:none}
  .hdr.wx .mpanel details a{display:block;padding:11px 0 11px 14px;color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(122,217,227,.08)}
  .hdr.wx .mpanel .wx-cta{display:flex;margin:18px 0 0}
  .hdr.wx .mpanel .mph{display:block;text-align:center;margin-top:12px;color:var(--teal-s,#7AD9E3);font-weight:600;text-decoration:none}
  .wx-fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hdr.wx .wrap{height:70px}
  .wx-ftop{flex-wrap:wrap;gap:14px}
  .wx-ftop .top{margin-left:0}
  .wx-fcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 18px}
  .wx-fcols .wx-based{grid-column:1/-1;font-size:20px}
  .wx-fbot{flex-wrap:wrap;gap:10px 18px}
  .wx-fbot .mid{margin:0}
  .team.wx-mgmt{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}
}

/* service member discount (Roger and Josh, 2026-11-03): one quiet line, no flags. 20% off the one-time build or setup;
   standard pricing on Foundation and retainers. Active duty, veterans, Reserve/Guard, Gold Star families; business owned by one. */
/* service member discount as a panel (Josh, 2026-11-04: not the thin band). The star icon is replaced by an outlined 20%. */
.wx-svc{background:#0B1D36;padding:8px 0 56px}
.wx-svc .wrap{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:32px;align-items:center;box-sizing:border-box;max-width:calc(var(--wrap) + var(--gut)*2);padding:30px 32px;border:1px solid rgba(232,138,42,.45);border-radius:4px;background:rgba(7,20,38,.5)}
.wx-svc .mk{display:block;width:auto;height:auto;border:0;color:#E88A2A}
.wx-svc .mk svg{display:none}
.wx-svc .mk::before{content:"20%";display:block;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:84px;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px #E88A2A}
.wx-svc .mk::after{content:"OFF THE BUILD";display:block;font:700 12px/1 var(--sans);letter-spacing:.1em;color:#E88A2A;margin-top:10px}
.wx-svc .tx{min-width:0}
.wx-svc .tx::before{content:"SERVICE MEMBER DISCOUNT";display:block;font:700 12px/1 var(--sans);letter-spacing:.1em;color:#E88A2A;margin-bottom:8px}
.wx-svc .tx b{display:block;font:700 24px/1.15 var(--disp);font-stretch:112%;color:#fff}
.wx-svc .tx span{display:block;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72);margin-top:8px;max-width:620px}
.wx-svc a{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:13px 22px;border:1.5px solid rgba(255,255,255,.5);border-radius:4px;color:#fff;font:700 15px/1.2 var(--sans);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.wx-svc a:hover{background:#fff;color:#071426;border-color:#fff}
@media (max-width:1180px){.wx-svc .wrap{grid-template-columns:160px minmax(0,1fr) auto;gap:24px}.wx-svc .mk::before{font-size:68px}}
@media (max-width:1000px){.wx-svc .wrap{grid-template-columns:140px minmax(0,1fr)}.wx-svc a{grid-column:2;justify-self:start}}
@media (max-width:700px){.wx-svc{padding-bottom:40px}.wx-svc .wrap{grid-template-columns:1fr;gap:18px;padding:22px 20px}.wx-svc .mk{display:flex;align-items:center;gap:14px}.wx-svc .mk::before{font-size:56px}.wx-svc .mk::after{margin-top:0}.wx-svc a{grid-column:1;justify-self:stretch}.wx-svc .tx b{font-size:22px}.wx-svc .tx span{font-size:16px}}

/* phones: the dial box must grow with the readout under it. Mobile Safari does not stretch an aspect-ratio box to fit
   content, so the readout and hint were spilling over the chapter bar (Josh, iPhone, 2026-11-03). The ring keeps its
   square through the SVG instead. */
@media (max-width:900px){
  .dial{aspect-ratio:auto !important;height:auto !important}
  .dial > svg{display:block;width:100% !important;height:auto !important;aspect-ratio:1/1}
  .dial-hint{position:static !important;margin-top:10px !important}
  /* review switcher sits left so the staging feedback button on the right never covers it */
  .switch{left:10px !important;transform:none !important;padding-left:8px !important}
  .switch .lbl{display:none !important}
}

/* hide the review switcher while the phone menu is open */
body:has(.mpanel.open) .switch{display:none !important}

/* phones: services become swipeable slides with the real site on top (Josh: the mobile service list was bland). Built by chrome.js. */
@media (max-width:760px){
  .wx-slides{display:flex !important;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;list-style:none;margin:6px calc(-1 * var(--gut,20px)) 0 !important;padding:4px var(--gut,20px) 10px !important;scroll-padding-left:var(--gut,20px);border:0 !important}
  .wx-slides::-webkit-scrollbar{display:none}
  .wx-slides > .wx-slide{flex:0 0 84%;scroll-snap-align:start;position:relative;display:flex !important;flex-direction:column;gap:0 !important;margin:0 !important;padding:0 0 18px !important;border:1px solid rgba(122,217,227,.22) !important;border-radius:6px !important;overflow:hidden;background:linear-gradient(180deg,#0F2846 0%,#0B1D36 100%) !important;box-shadow:0 22px 40px -28px rgba(0,0,0,.8);opacity:1 !important;transform:none !important;min-height:0 !important}
  .wx-slides > .wx-slide:only-child{flex-basis:100%}
  .wx-slide::before,.wx-slide::after{display:none !important}
  .wx-slide .wx-media{position:relative !important;order:-2;display:block !important;width:100% !important;aspect-ratio:16/10;top:auto !important;right:auto !important;left:auto !important;margin:0 0 16px !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;outline:0 !important;overflow:hidden;background:#071426}
  .wx-slide .wx-media img{position:absolute !important;inset:0;width:100% !important;height:100% !important;object-fit:cover;object-position:center top;display:block;transform:none !important}
  .wx-slide .wx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,38,0) 45%,rgba(11,29,54,.92) 100%)}
  .wx-slide .wx-media > span:not(.wx-num){display:none !important}
  .wx-slide .wx-num{position:absolute !important;left:16px;bottom:8px;z-index:2;margin:0 !important;font-family:var(--disp) !important;font-stretch:125%;font-weight:900 !important;font-size:52px !important;line-height:1 !important;letter-spacing:-.02em;color:transparent !important;-webkit-text-stroke:1.5px #7AD9E3;opacity:1 !important;transform:none !important;width:auto !important;background:none !important;border:0 !important}
  .wx-slide .wx-site{position:absolute;right:12px;bottom:12px;z-index:2;font:600 12.5px/1 var(--sans);color:#fff;background:rgba(7,20,38,.82);border:1px solid rgba(122,217,227,.3);border-radius:3px;padding:6px 8px}
  .wx-slide > :not(.wx-media){margin-left:18px !important;margin-right:18px !important;padding:0 !important;width:auto !important;max-width:none !important;transform:none !important}
  .wx-slide > div,.wx-slide .sdet{display:flex !important;flex-direction:column;gap:0;flex:1 1 auto}
  .wx-slide h3,.wx-slide h3 a{font-family:var(--disp) !important;font-stretch:112%;font-weight:800 !important;font-size:22px !important;line-height:1.15 !important;color:#7AD9E3 !important;text-decoration:none !important;margin:0 0 8px !important;transform:none !important}
  .wx-slide p,.wx-slide .desc,.wx-slide .d{color:rgba(255,255,255,.86) !important;font-size:15.5px !important;line-height:1.55 !important;margin:0 0 14px !important}
  .wx-slide .price,.wx-slide .pr{margin-top:auto !important;padding-top:12px !important;border-top:1px solid rgba(122,217,227,.18) !important;color:#fff !important;font-weight:700 !important;font-size:15.5px !important;line-height:1.4 !important;display:block !important}
  .wx-slide .price small,.wx-slide .pr{font-weight:600}
  .wx-slide .price small{display:block;font-size:13px !important;color:#7AD9E3 !important;font-weight:600 !important;margin-bottom:2px}
  .wx-slide .pr b{display:block;color:#fff;font-size:15.5px}
  .wx-slide .pr{color:#7AD9E3 !important;font-size:13px !important}
  .wx-slide .price::before,.wx-slide .pr::before{display:none !important}
  .wx-slide .sp,.wx-slide .thumb:not(.wx-media),.wx-slide .peek{display:none !important}
  .wx-slide .go{margin-top:12px !important}
  .wx-slide .btn,.wx-slide .btn-box{display:flex !important;justify-content:center;width:100% !important;margin-top:12px !important;color:#fff !important;border-color:rgba(255,255,255,.5) !important;background:transparent !important}
  .wx-dots{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
  .wx-dots button{width:22px;height:4px;border:0;border-radius:2px;background:rgba(122,217,227,.28);padding:0;cursor:pointer;transition:background-color .2s,width .2s}
  .wx-dots button[aria-current="true"]{background:#38C3D2;width:34px}
  .wx-dots span{margin-left:auto;font:600 13px/1 var(--sans);color:rgba(127,140,160,1)}
  .on-light .wx-dots span,.ch1 .wx-dots span{color:#47536A}
}

/* Services menu, round 2 (Josh, 2026-11-04): Website security reads as a hub with its own pages, next to the six single services */
.wx-panel.wx-panel2{width:780px}
.wx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px}
.wx-grid.wx-one{grid-template-columns:1fr;align-content:start}
.wx-hub{border-left:1px solid rgba(122,217,227,.22);padding-left:10px;display:flex;flex-direction:column}
.wx-hub-h{display:block;padding:12px 16px 14px;border-radius:4px;text-decoration:none;background:rgba(122,217,227,.07);transition:background-color .2s}
.wx-hub-h:hover,.wx-hub-h:focus-visible{background:rgba(122,217,227,.14)}
.wx-hub-h small{display:block;font:700 11.5px/1.2 var(--sans);letter-spacing:.08em;color:#E88A2A}
.wx-hub-h strong{display:block;font:800 19px/1.2 var(--disp);font-stretch:112%;color:#fff;margin-top:5px}
.wx-hub-h span{display:block;font:400 13.5px/1.4 var(--sans);color:rgba(255,255,255,.66);margin-top:4px}
.wx-hub-h[aria-current="page"] strong{color:var(--teal-s,#7AD9E3)}
.wx-hub-l{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;padding:6px 6px 2px}
.wx-hub-l a{display:block;padding:8px 10px;border-radius:3px;text-decoration:none;color:rgba(255,255,255,.88);font:500 14px/1.3 var(--sans);transition:background-color .2s,color .2s}
.wx-hub-l a:hover,.wx-hub-l a:focus-visible{background:rgba(122,217,227,.1);color:#fff}
.wx-hub-l a[aria-current="page"]{color:var(--teal-s,#7AD9E3);box-shadow:inset 3px 0 0 var(--teal-b,#38C3D2)}
@media (max-width:1100px){
  .hdr.wx .mpanel details.wx-mhub{margin:4px 0 0 14px;border-left:2px solid rgba(232,138,42,.6);padding-left:12px}
  .hdr.wx .mpanel details.wx-mhub summary{padding:12px 0;font-size:15px}
  .hdr.wx .mpanel details.wx-mhub summary small{font:700 11px/1 var(--sans);letter-spacing:.08em;color:#E88A2A;margin-left:8px;vertical-align:middle}
  .hdr.wx .mpanel details.wx-mhub a{font-size:14.5px;padding:10px 0 10px 10px}
}

/* Services menu, round 3 (Josh, 2026-11-04): three single services, then the two hubs */
.wx-panel.wx-panel3{width:900px}
.wx-cols3{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr) minmax(0,1.05fr);gap:10px}
.wx-col .wx-ch{margin:0;padding:12px 16px 6px;font:700 11.5px/1.2 var(--sans);letter-spacing:.08em;color:var(--teal-s,#7AD9E3)}
.wx-cols3 .wx-hub{padding-left:10px}
.wx-cols3 .wx-hub-l{grid-template-columns:1fr;gap:0}
.wx-cols3 .wx-hub-l a{padding:7px 10px}
@media (max-width:1100px){.hdr.wx .mpanel details.wx-mhub + details.wx-mhub{margin-top:6px}}
/* the marketing hub row on the Services page */
.row.hub .n{color:#E88A2A;letter-spacing:.08em}
.row.hub h3{color:#fff}
.row.hub h3::after{content:"HUB";display:inline-block;margin-left:10px;vertical-align:middle;font:800 11px/1 var(--sans);letter-spacing:.1em;color:#1b0f02;background:#E88A2A;padding:4px 6px;border-radius:2px}

/* About us menu (Josh, 2026-11-04): The team, Reviews, Regions we serve */
.wx-panel.wx-panel-s{width:320px}
.wx-panel-s .wx-grid a small{color:rgba(255,255,255,.6)}

/* consultation popup */
.cx{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(5,14,28,.74);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.cx.open{opacity:1;visibility:visible;transition:opacity .25s}
.cx-box{position:relative;width:min(640px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--n85);border:1px solid var(--line2);border-radius:4px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);padding:34px 32px 26px;transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cx.open .cx-box{transform:none}
.cx-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:4px;border:1px solid var(--line2);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.cx-x:hover{border-color:var(--teal-s)}
.cx-k{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--amber);margin:0}
.cx h2{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:30px;line-height:1.1;color:#fff;margin:8px 48px 10px 0}
.cx-lead{color:rgba(255,255,255,.75);font-size:16px;margin:0 0 18px}
.cx-lead a,.cx-next a,.cx-legal a{color:var(--teal-s)}
.cx-req{font-size:14px;color:rgba(255,255,255,.6);margin:0 0 14px}
.cx-svcs{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.cx-svcs legend{font-weight:700;color:#fff;font-size:15px;margin-bottom:10px;padding:0}
.cx-svcs label{position:relative;cursor:pointer}
.cx-svcs input{position:absolute;opacity:0;width:1px;height:1px}
.cx-svcs span{display:inline-block;padding:9px 13px;border:1px solid var(--line2);border-radius:4px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.85);transition:background-color .2s,border-color .2s,color .2s}
.cx-svcs label:hover span{border-color:var(--teal-s)}
.cx-svcs input:checked + span{background:var(--teal-b);border-color:var(--teal-b);color:var(--n9)}
.cx-svcs input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}
.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-f{display:block;margin:0 0 12px}
.cx-f span{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:6px}
.cx-f input,.cx-f textarea{width:100%;box-sizing:border-box;font:16px/1.4 var(--sans);color:#fff;background:var(--n9);border:1px solid var(--line2);border-radius:4px;padding:11px 12px}
.cx-f textarea{resize:vertical;min-height:96px}
.cx-f input::placeholder,.cx-f textarea::placeholder{color:rgba(255,255,255,.4)}
.cx-f input:focus,.cx-f textarea:focus{outline:none;border-color:var(--teal-s);box-shadow:0 0 0 3px rgba(122,217,227,.18)}
.cx-f [aria-invalid="true"]{border-color:#F08A7A}
.cx-more{margin:0 0 12px}
.cx-more summary{cursor:pointer;font-weight:600;color:var(--teal-s);font-size:15px;padding:4px 0 10px}
.cx-more summary small{color:rgba(255,255,255,.55);font-weight:500;margin-left:6px;font-size:13px}
.cx-legal{font-size:13.5px;color:rgba(255,255,255,.6);margin:4px 0 14px}
.cx-err{background:rgba(240,138,122,.12);border:1px solid rgba(240,138,122,.5);color:#FFD3CB;border-radius:4px;padding:10px 12px;font-size:14.5px;margin:0 0 14px}
.cx-send{width:100%}
.cx-send[disabled]{opacity:.6;cursor:progress}
.cx-next{font-size:14px;color:rgba(255,255,255,.62);margin:14px 0 0}
.cx-done{outline:none}
.cx-done .btn{margin-top:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.cx-lock{overflow:hidden}
@media (max-width:600px){.cx{padding:0;place-items:end stretch}.cx-box{width:100%;max-height:92vh;max-height:92dvh;border-radius:6px 6px 0 0;padding:28px 18px 22px}.cx h2{font-size:25px}.cx-row{grid-template-columns:1fr;gap:0}}

/* ======================================================================
   Option A subpages (2026-11-04). Shared pieces for every redesigned page
   after the Services page: subpage hero, light chapters, ruled lists, FAQ,
   next connections, closing, and each page's signature section.
   Rules: no italics, no pill chips, no boxed service cards, no scroll lock,
   teal as accent, amber only for the security report and warnings.
   ====================================================================== */
:root{--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--ok:#2FB57A;--warn:#E88A2A}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:#fff;color:#071426;padding:10px 14px;border-radius:4px;font-weight:700}
.skip:focus{top:12px}
main:focus{outline:none}
.btn-amber{background:var(--amber);color:#1b0f02;border:1.5px solid var(--amber)}
.btn-amber:hover{background:#f3a24f;border-color:#f3a24f;transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.on-light .phone,.lt .phone{color:var(--n7)}
.on-light .phone .pi,.lt .phone .pi{border-color:rgba(15,40,70,.3);color:var(--teal-d)}
.on-light .phone span.t,.lt .phone span.t{border-bottom-color:rgba(15,40,70,.35)}

/* ---------- subpage hero ---------- */
.sh{position:relative;background:radial-gradient(620px 480px at 78% 46%, rgba(31,168,184,.13), transparent 70%),radial-gradient(900px 600px at 6% 120%, rgba(15,40,70,.9), transparent 70%),var(--n9);overflow:hidden}
.sh::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(122,217,227,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(122,217,227,.045) 1px, transparent 1px);background-size:80px 80px;mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);-webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);pointer-events:none}
.sh-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px;align-items:center;padding-top:132px;padding-bottom:56px}
.sh-in.wide{grid-template-columns:minmax(0,1fr) 600px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 26px;padding:0;font-size:14px;color:rgba(255,255,255,.6)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid rgba(122,217,227,.6);border-right:1.5px solid rgba(122,217,227,.6);transform:rotate(45deg)}
.crumbs a{text-decoration:none;color:rgba(255,255,255,.78)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--teal-s);font-weight:600}
.sh h1{font-size:clamp(42px,4.6vw,70px);font-stretch:122%;line-height:.99}
.sh h1 .l{display:block}
.sh h1 .l2{color:var(--teal-s)}
.sh .lead{max-width:560px}
.sh-vis{position:relative;min-width:0}
.sh-bar{position:relative;border-top:1px solid var(--line)}
.sh-bar .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(var(--n,3),minmax(0,1fr));align-items:stretch}
.sh-bar .since{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:20px 32px 20px 0;border-right:1px solid var(--line)}
.sh-bar .since small{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--teal-s)}
.sh-bar .since b{font-family:var(--disp);font-stretch:110%;font-size:17px;font-weight:700;color:#fff;line-height:1.3}
.sh-bar a.ch{display:flex;align-items:center;gap:14px;padding:20px 24px;text-decoration:none;border-right:1px solid var(--line);transition:background-color .25s}
.sh-bar a.ch:last-child{border-right:0}
.sh-bar a.ch:hover{background:rgba(122,217,227,.06)}
.sh-bar a.ch i{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:15px;color:var(--teal-s)}
.sh-bar a.ch span{font-weight:600;font-size:15.5px;line-height:1.3}

/* ---------- chapter colors ---------- */
.chap.lt{background:var(--paper);color:var(--ink);border-top:0}
.chap.lt.white{background:#fff}
.chap.lt + .chap.lt.white,.chap.lt.white + .chap.lt{border-top:1px solid rgba(15,40,70,.08)}
.lt .ch-no{-webkit-text-stroke-color:var(--n7)}
.lt h2,.lt h3{color:var(--n7)}
.lt .ch-band .sub,.lt .body{color:var(--ink2)}
.lt .ch-band .sub strong{color:var(--ink)}
.chap.n8{background:var(--n8)}
.chap.n9{background:var(--n9)}
.ch-no.sm{font-size:88px}
.body{font-size:18px;line-height:1.65;color:var(--body);max-width:620px}
.body + .body{margin-top:14px}
.body strong{font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.split.r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}

/* ruled list of included items (no boxes) */
.rl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));gap:0 36px;counter-reset:rl}
.rl li{position:relative;padding:22px 0 26px;border-top:1px solid var(--line2);counter-increment:rl}
.lt .rl li{border-top-color:rgba(15,40,70,.22)}
.rl li::before{content:counter(rl,decimal-leading-zero);display:block;font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--teal-s);margin-bottom:12px}
.lt .rl li::before{color:var(--teal-d)}
.rl li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--teal-b);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.lt .rl li::after{background:var(--n7)}
.rl.in li::after{width:44px}
.rl h3{font-size:21px;font-stretch:112%;line-height:1.15;color:#fff}
.lt .rl h3{color:var(--n7)}
.rl p{font-size:16px;line-height:1.55;color:var(--body);margin-top:8px}
.lt .rl p{color:var(--ink2)}

/* security index rows: like the Services rows, no prices */
.sx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.lt .sx{border-top-color:rgba(15,40,70,.28)}
.sx li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 230px 200px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.lt .sx li{border-bottom-color:var(--lline)}
.sx li::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--teal-b);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lt .sx li::before{background:var(--n7)}
.sx .n{font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:15px;color:rgba(255,255,255,.5);transition:color .3s}
.lt .sx .n{color:rgba(15,40,70,.5)}
.sx h3{font-size:25px;font-stretch:112%;line-height:1.1;color:var(--teal-s)}
.lt .sx h3{color:var(--n7)}
.sx .desc{font-size:16px;line-height:1.5;color:var(--body);margin-top:6px}
.lt .sx .desc{color:var(--ink2)}
.sx .how{font-size:15px;line-height:1.4;color:rgba(255,255,255,.8);font-weight:600}
.sx .how small{display:block;font-weight:500;font-size:13.5px;color:rgba(255,255,255,.56);margin-bottom:3px}
.lt .sx .how{color:var(--n7)}
.lt .sx .how small{color:var(--ink2)}
.sx .go{justify-self:end}
@media (hover:hover) and (pointer:fine){.sx li:hover::before{transform:scaleX(1)}.sx li:hover .n{color:var(--amber)}}

/* group heading inside a chapter */
.grp{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 12px}
.grp h3{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-s)}
.lt .grp h3{color:var(--teal-d)}
.grp span{font-size:14px;color:rgba(255,255,255,.56)}
.lt .grp span{color:var(--ink2)}
.grp-gap{margin-top:52px}

/* ---------- quote ---------- */
.qt{display:grid;grid-template-columns:120px minmax(0,1fr);gap:32px;align-items:start}
.qt .mk{font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:120px;line-height:.7;color:transparent;-webkit-text-stroke:1.5px var(--teal-s)}
.lt .qt .mk{-webkit-text-stroke-color:var(--n7)}
.qt blockquote{margin:0;font-family:var(--disp);font-stretch:108%;font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.28;color:#fff}
.lt .qt blockquote{color:var(--n7)}
.qt cite{display:block;font-style:normal;font-size:16px;color:var(--body);margin-top:20px}
.lt .qt cite{color:var(--ink2)}
.qt cite b{color:#fff;font-weight:600}
.lt .qt cite b{color:var(--ink)}
.qt .since{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--amber);margin-bottom:14px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line2)}
.lt .faq{border-top-color:rgba(15,40,70,.28)}
.faq details{border-bottom:1px solid var(--line)}
.lt .faq details{border-bottom-color:var(--lline)}
.faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:20px;align-items:center;padding:22px 0;cursor:pointer;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:20px;line-height:1.25;color:#fff}
.lt .faq summary{color:var(--n7)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:28px;height:28px;border:1.5px solid var(--line2);border-radius:3px}
.lt .faq summary i{border-color:rgba(15,40,70,.3)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--teal-s);transition:transform .25s}
.lt .faq summary i::before,.lt .faq summary i::after{background:var(--n7)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:hover{color:var(--teal-s)}
.lt .faq summary:hover{color:var(--teal-d)}
.faq .a{padding:0 60px 24px 0;font-size:17px;line-height:1.65;color:var(--body);max-width:820px}
.lt .faq .a{color:var(--ink2)}
.faq .a a{color:inherit}

/* ---------- next connections ---------- */
.nx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(15,40,70,.22)}
.nx a{position:relative;display:block;padding:30px 72px 32px 0;text-decoration:none;color:var(--n7);border-bottom:1px solid rgba(15,40,70,.22)}
.nx a + a{padding-left:36px;border-left:1px solid rgba(15,40,70,.22)}
.nx small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-d)}
.nx strong{display:block;font-family:var(--disp);font-stretch:115%;font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.1;margin-top:8px}
.nx span{display:block;font-size:16px;color:var(--ink2);margin-top:8px;max-width:420px}
.nx svg{position:absolute;right:24px;top:50%;width:30px;height:30px;margin-top:-15px;color:var(--n7);transition:transform .3s}
.nx a:hover svg{transform:translateX(6px)}
.nx a:hover strong{color:var(--teal-d)}

/* ---------- closing ---------- */
.cl{position:relative;overflow:hidden;background:var(--n10);border-top:1px solid var(--line);padding:110px 0 104px}
.cl::before{content:"360\00B0";position:absolute;right:-2vw;top:50%;transform:translateY(-52%);font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(220px,30vw,460px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(122,217,227,.14);pointer-events:none}
.cl .wrap{position:relative}
.cl h2{font-size:clamp(38px,4.4vw,62px);font-stretch:122%;max-width:700px}
.cl p{font-size:19px;color:var(--body);max-width:540px;margin-top:20px}
.cl .ctas{margin-top:32px}
.cl .alt{margin-top:22px;font-size:15px;color:rgba(255,255,255,.66)}
.cl .alt a{color:#fff;font-weight:600}

/* ---------- amber alert band ---------- */
.ab{background:#fff7ee;border-top:1px solid rgba(232,138,42,.35);border-bottom:1px solid rgba(232,138,42,.35);color:var(--ink)}
.ab .wrap{display:flex;align-items:center;gap:22px;padding-top:24px;padding-bottom:24px}
.ab .mk{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:4px;background:var(--amber);color:#1b0f02}
.ab .mk svg{width:22px;height:22px}
.ab b{display:block;font-family:var(--disp);font-stretch:110%;font-size:20px;color:var(--n7)}
.ab span{display:block;font-size:15.5px;color:var(--ink2);margin-top:2px}
.ab .tx{flex:1;min-width:0}
.ab a.call{flex:none;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:4px;background:var(--n7);color:#fff;font:700 16px/1 var(--sans);text-decoration:none;white-space:nowrap}
.ab a.call:hover{background:var(--n6)}

/* ---------- section heads ---------- */
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:end;margin-bottom:40px}
.sec-h h2{font-size:clamp(32px,3.2vw,44px);font-stretch:115%}
.sec-h .k{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-s);margin-bottom:14px}
.lt .sec-h .k{color:var(--teal-d)}
.sec-h p{font-size:17px;color:var(--body)}
.lt .sec-h p{color:var(--ink2)}

/* =================== SIGNATURES =================== */

/* --- hub: security lead --- */
.lead-sec{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start}
.lead-sec figure{margin:0}
.lead-sec .ph{aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--paper)}
.lead-sec .ph img{width:100%;height:100%;object-fit:cover}
.lead-sec figcaption{margin-top:12px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:var(--n7)}
.lead-sec figcaption span{display:block;font-family:var(--sans);font-weight:400;font-size:14px;color:var(--ink2);margin-top:2px}
.lead-sec h2{font-size:clamp(30px,3vw,42px);font-stretch:115%;color:var(--n7)}
.lead-sec .body{margin-top:16px;color:var(--ink2)}
.rules{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid rgba(15,40,70,.22);counter-reset:r}
.rules li{counter-increment:r;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--lline);font-size:16.5px;line-height:1.5;color:var(--ink)}
.rules li::before{content:counter(r,decimal-leading-zero);font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--amber);padding-top:2px}
.lead-sec .ctas .phone{margin-left:6px}

/* --- hub: probe log --- */
.probe{background:var(--n9);color:#fff;border-radius:4px;border:1px solid rgba(15,40,70,.4);box-shadow:0 30px 60px -36px rgba(7,20,38,.7);overflow:hidden;font-family:var(--mono);font-size:13.5px}
.probe-h{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.6)}
.probe-h b{color:#fff;font-weight:600}
.probe ol{list-style:none;margin:0;padding:6px 0;height:286px;overflow:hidden;position:relative}
.probe ol::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,transparent,var(--n9))}
.probe li{display:grid;grid-template-columns:62px minmax(0,1fr) 72px;gap:10px;padding:6px 16px;line-height:1.4;white-space:nowrap;animation:pin .5s ease both}
.probe li .m{color:rgba(255,255,255,.5)}
.probe li .p{overflow:hidden;text-overflow:ellipsis;color:var(--teal-s)}
.probe li .s{text-align:right;color:var(--amber);font-weight:700}
.probe-f{display:flex;align-items:baseline;gap:12px;padding:14px 16px;border-top:1px solid var(--line);font-family:var(--sans)}
.probe-f b{font-family:var(--disp);font-stretch:118%;font-size:30px;font-weight:800;color:#fff;letter-spacing:-.01em}
.probe-f span{font-size:14px;color:rgba(255,255,255,.66);line-height:1.35}
@keyframes pin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fact{margin-top:22px;padding-top:18px;border-top:1px solid rgba(15,40,70,.2);font-size:15px;color:var(--ink2);line-height:1.55}
.fact b{color:var(--n7)}

/* --- hacked: browser warning --- */
.brw{position:relative;border-radius:6px;overflow:hidden;background:#0d2140;border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.brw-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0a1a31;border-bottom:1px solid var(--line)}
.brw-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.brw-bar span{flex:1;margin-left:8px;padding:6px 10px;border-radius:3px;background:rgba(255,255,255,.06);font-size:13px;color:rgba(255,255,255,.7);font-family:var(--mono);display:flex;align-items:center;gap:8px;min-width:0}
.brw-bar span svg{width:13px;height:13px;flex:none}
.brw-bar .lk-bad{color:var(--amber)}
.brw-bar .lk-ok{color:var(--ok);display:none}
.brw-v{position:relative;aspect-ratio:16/11}
.brw-v > div{position:absolute;inset:0;transition:opacity .6s ease}
.brw-bad{display:flex;flex-direction:column;justify-content:center;padding:8% 9%;background:#7a2d0c;background:linear-gradient(160deg,#8a3410,#5c1f07)}
.brw-bad svg{width:46px;height:46px;color:#ffd7b0}
.brw-bad b{display:block;font-family:var(--disp);font-stretch:110%;font-size:clamp(20px,2vw,28px);line-height:1.15;color:#fff;margin-top:16px}
.brw-bad p{font-size:15px;color:rgba(255,255,255,.82);margin-top:10px;max-width:360px}
.brw-bad u{display:inline-block;margin-top:18px;text-decoration:none;font-size:14px;font-weight:700;color:#5c1f07;background:#ffd7b0;padding:9px 14px;border-radius:3px}
.brw-ok{opacity:0;background:#fff}
.brw-ok img{width:100%;height:100%;object-fit:cover;object-position:top}
.brw-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal-b);box-shadow:0 0 22px 6px rgba(56,195,210,.5);opacity:0}
.brw.clean .brw-ok{opacity:1}
.brw.clean .brw-bad{opacity:0}
.brw.clean .lk-bad{display:none}
.brw.clean .lk-ok{display:block}
.brw.scanning .brw-scan{animation:scan 1.4s cubic-bezier(.6,.1,.4,1) forwards}
@keyframes scan{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.brw-tag{position:absolute;right:12px;bottom:12px;z-index:2;font:700 12.5px/1 var(--sans);letter-spacing:.06em;padding:7px 10px;border-radius:3px;background:var(--n9);color:var(--amber);border:1px solid rgba(232,138,42,.5);transition:color .3s,border-color .3s}
.brw.clean .brw-tag{color:var(--ok);border-color:rgba(47,181,122,.5)}

/* signs of trouble */
.signs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.signs li{padding:24px 0 8px;border-top:2px solid var(--n7)}
.signs svg{width:30px;height:30px;color:var(--amber)}
.signs h3{font-size:21px;font-stretch:112%;line-height:1.15;margin-top:18px}
.signs p{font-size:16px;line-height:1.55;color:var(--ink2);margin-top:8px}

/* vertical recovery rail */
.vr{position:relative;list-style:none;margin:0;padding:0}
.vr::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line2)}
.vr .fill{position:absolute;left:23px;top:24px;width:2px;height:calc((100% - 48px) * var(--p,0));background:var(--teal-b);transition:height .2s linear}
.vr li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:28px;padding:0 0 40px}
.vr li:last-child{padding-bottom:0}
.vr .sn{position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;border-radius:4px;background:var(--n8);border:2px solid var(--line2);font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:17px;color:rgba(255,255,255,.6);transition:background-color .35s,border-color .35s,color .35s}
.vr li.lit .sn{background:var(--teal-b);border-color:var(--teal-b);color:var(--n9)}
.vr h3{font-size:24px;font-stretch:112%;color:#fff;padding-top:9px}
.vr p{font-size:17px;line-height:1.6;color:var(--body);margin-top:8px;max-width:560px}

/* --- insurance: scan report --- */
.scan{background:#fff;border:1px solid rgba(15,40,70,.16);border-radius:4px;box-shadow:0 30px 60px -40px rgba(7,20,38,.5);overflow:hidden;color:var(--ink)}
.scan-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 20px;border-bottom:1px solid rgba(15,40,70,.12);background:var(--paper)}
.scan-h p{font-size:14px;color:var(--ink2)}
.scan-h p b{display:block;font-family:var(--mono);font-size:14px;color:var(--n7);font-weight:600}
.seg2{display:inline-flex;border:1.5px solid var(--n7);border-radius:4px;overflow:hidden}
.seg2 button{border:0;background:transparent;padding:10px 18px;font:700 14px/1 var(--sans);color:var(--n7);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--n7);color:#fff}
.scan table{width:100%;border-collapse:collapse}
.scan th{text-align:left;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink2);padding:12px 20px;border-bottom:1px solid rgba(15,40,70,.12)}
.scan td{padding:14px 20px;border-bottom:1px solid rgba(15,40,70,.08);vertical-align:top;font-size:15px}
.scan td b{display:block;color:var(--n7);font-size:16px}
.scan td small{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.sev{font-size:13px;font-weight:700;letter-spacing:.04em}
.sev.hi{color:#b4510c}.sev.md{color:#8a6a0e}.sev.lo{color:var(--ink2)}
.st{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;white-space:nowrap}
.st::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--amber)}
.st .b{color:#b4510c}
.st .a{display:none;color:#17865a}
.scan.after .st::before{background:var(--ok)}
.scan.after .st .b{display:none}
.scan.after .st .a{display:inline}
.scan-f{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;background:var(--paper)}
.scan-f b{font-family:var(--disp);font-stretch:115%;font-size:22px;color:var(--n7)}
.scan-f span{font-size:14px;color:var(--ink2)}
.scan-note{font-size:14px;color:var(--ink2);margin-top:12px}
/* hero scan readout */
.score{position:relative;padding:32px 32px 28px;border:1px solid var(--line2);border-radius:4px;background:rgba(11,29,54,.72)}
.score small{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-s)}
.score .dom{font-family:var(--mono);font-size:15px;color:rgba(255,255,255,.75);margin-top:6px}
.score .big{display:flex;align-items:baseline;gap:14px;margin-top:20px}
.score .big b{font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:120px;line-height:.85;letter-spacing:-.04em;color:var(--amber);transition:color .4s}
.score .big span{font-size:17px;color:rgba(255,255,255,.75);line-height:1.3}
.score.done .big b{color:var(--teal-s)}
.bars{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;font-size:14px;color:rgba(255,255,255,.75)}
.bars i{position:relative;height:6px;background:rgba(122,217,227,.12);border-radius:1px;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0;background:var(--amber);transform-origin:left;transform:scaleX(var(--w,1));transition:transform 1s cubic-bezier(.6,.1,.3,1),background-color .4s}
.score.done .bars i::after{transform:scaleX(0);background:var(--teal-b)}
.ours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.ours h3{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-bottom:14px;border-bottom:2px solid var(--teal-b);color:#fff}
.ours div + div h3{border-bottom-color:rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
.ours ul{list-style:none;margin:0;padding:0}
.ours li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px;color:var(--body)}

/* --- email auth: DNS records --- */
.term{border-radius:4px;border:1px solid var(--line2);background:#06101f;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);font-family:var(--mono);font-size:14px;line-height:1.6;overflow:hidden}
.term-h{display:flex;gap:7px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.5)}
.term-h i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.term-h span{margin-left:8px}
.term pre{margin:0;padding:18px 18px 22px;white-space:pre-wrap;word-break:break-all;color:rgba(255,255,255,.85);min-height:300px}
.term .c{color:rgba(255,255,255,.45)}
.term .k{color:var(--teal-s)}
.term .v{color:#fff}
.term .ok{color:var(--ok)}
.term .cur{display:inline-block;width:8px;height:16px;background:var(--teal-s);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.recs{list-style:none;margin:0;padding:0;border-top:1px solid rgba(15,40,70,.28)}
.recs li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;padding:28px 0;border-bottom:1px solid var(--lline)}
.recs .nm b{display:block;font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:30px;color:var(--n7);line-height:1}
.recs .nm span{display:block;font-size:14px;font-weight:600;color:var(--teal-d);margin-top:6px}
.recs .nm em{display:block;font-size:13px;color:var(--ink2);margin-top:4px}
.recs code{display:block;font-family:var(--mono);font-size:14px;line-height:1.55;background:var(--n9);color:var(--teal-s);padding:14px 16px;border-radius:3px;overflow-x:auto;white-space:pre}
.recs code span{color:rgba(255,255,255,.55)}
.recs p{font-size:16.5px;color:var(--ink2);margin-top:12px;line-height:1.55}
.gauge{position:relative}
.gauge-track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.gauge-track::before{content:"";position:absolute;left:0;top:-2px;height:3px;width:calc(100% * var(--g,0) / 3 + 100% / 6);max-width:100%;background:linear-gradient(90deg,var(--teal-b),var(--amber));transition:width .8s cubic-bezier(.6,.1,.3,1)}
.gauge button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;padding:26px 28px 6px 0;opacity:.55;transition:opacity .3s}
.gauge button[aria-pressed="true"]{opacity:1}
.gauge button:hover{opacity:.9}
.gauge code{display:inline-block;font-family:var(--mono);font-size:14px;color:var(--teal-s);border:1px solid var(--line2);border-radius:3px;padding:4px 8px}
.gauge button[aria-pressed="true"] code{background:var(--teal-b);color:var(--n9);border-color:var(--teal-b)}
.gauge h3{font-size:24px;font-stretch:112%;margin-top:16px;color:#fff}
.gauge p{font-size:16px;color:var(--body);margin-top:8px;line-height:1.55}

/* --- form spam: stopped vs delivered --- */
.sort{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.sort h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--disp);font-stretch:112%;font-size:22px;padding-bottom:14px;border-bottom:2px solid var(--n7)}
.sort h3 span{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink2)}
.sort .stop h3{border-bottom-color:rgba(15,40,70,.25);color:var(--ink2)}
.sort ul{list-style:none;margin:0;padding:0}
.sort li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--lline);opacity:0;transform:translateX(var(--x,-16px));transition:opacity .5s ease,transform .5s ease}
.sort.in li{opacity:1;transform:none}
.sort .stop li{--x:16px}
.sort li svg{width:20px;height:20px;margin-top:3px}
.sort .stop li svg{color:var(--amber)}
.sort .go li svg{color:var(--ok)}
.sort li b{display:block;font-size:16.5px;color:var(--n7);font-weight:600}
.sort .stop li b{color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(232,138,42,.6)}
.sort li small{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.fm{position:relative;padding:28px 28px 26px;border:1px solid var(--line2);border-radius:4px;background:rgba(11,29,54,.78);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.fm small{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-s)}
.fm h3{font-size:24px;margin-top:6px}
.fm .f{margin-top:14px;padding:12px 14px;border:1px solid rgba(122,217,227,.25);border-radius:3px;font-size:15px;color:rgba(255,255,255,.78);min-height:46px}
.fm .f.t{min-height:76px}
.fm .tv{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid rgba(122,217,227,.25);border-radius:3px;font-size:14px;color:rgba(255,255,255,.75)}
.fm .tv i{position:relative;width:24px;height:24px;flex:none;border-radius:50%;border:2.5px solid rgba(122,217,227,.25);border-top-color:var(--teal-s);animation:spin .9s linear infinite}
.fm .tv i::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s}
.fm.ok .tv i{animation:none;border-color:var(--ok);background:var(--ok)}
.fm.ok .tv i::after{transform:rotate(45deg) scale(1)}
.fm .tv b{font-weight:600;color:#fff}
.fm .send{margin-top:16px;padding:14px;border-radius:3px;background:var(--teal-b);color:var(--n9);font:700 15px/1 var(--disp);text-align:center}
.fm .res{margin-top:14px;font-size:14px;color:var(--ok);font-weight:600;opacity:0;transition:opacity .4s}
.fm.ok .res{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- backup: restore points --- */
.cal{--cs:1fr}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-g .dh{font-size:13px;font-weight:700;color:var(--ink2);text-align:center;padding-bottom:4px}
.cal-g button{position:relative;aspect-ratio:1/1;border:1px solid rgba(15,40,70,.18);border-radius:3px;background:#fff;cursor:pointer;font:700 15px/1 var(--disp);color:var(--n7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:background-color .2s,border-color .2s,color .2s}
.cal-g button:hover{border-color:var(--n7)}
.cal-g button i{display:flex;gap:3px}
.cal-g button i::before,.cal-g button.x i::after{content:"";width:7px;height:7px;border-radius:1px;background:var(--teal-d)}
.cal-g button.x i::after{background:var(--amber)}
.cal-g button[aria-pressed="true"]{background:var(--n7);border-color:var(--n7);color:#fff}
.cal-g button[aria-pressed="true"] i::before{background:var(--teal-s)}
.cal-g button.today{border-style:dashed}
.cal-k{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:14px;color:var(--ink2)}
.cal-k span{display:inline-flex;align-items:center;gap:8px}
.cal-k span::before{content:"";width:9px;height:9px;border-radius:1px;background:var(--teal-d)}
.cal-k span.x::before{background:var(--amber)}
.cal-k span.p::before{background:var(--n7);width:12px;height:12px}
.cal-out{margin-top:22px;padding:18px 20px;border-left:3px solid var(--teal-d);background:#fff;min-height:84px}
.cal-out small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-d)}
.cal-out b{display:block;font-family:var(--disp);font-stretch:112%;font-size:21px;color:var(--n7);margin-top:4px}
.cal-out span{display:block;font-size:15px;color:var(--ink2);margin-top:4px}
.stack{position:relative;height:420px}
.stack .sl{position:absolute;left:50%;width:84%;height:62px;margin-left:-42%;border:1px solid var(--line2);border-radius:3px;background:var(--n8);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:14px;color:rgba(255,255,255,.7);box-shadow:0 18px 30px -18px rgba(0,0,0,.8);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.stack .sl b{font-family:var(--disp);font-stretch:112%;color:#fff;font-size:15px;font-weight:700}
.stack .sl.x{border-color:rgba(232,138,42,.5)}
.stack .sl.x b{color:var(--amber)}
.stack .sl.cur{border-color:var(--teal-s);background:var(--n7)}
.stack .sl.cur b{color:var(--teal-s)}
.stack .off{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-s);border-top:1px dashed var(--line2);padding-top:12px}

/* --- WordPress care: care visit log + ten checks --- */
.log{border-radius:4px;border:1px solid var(--line2);background:#06101f;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);overflow:hidden;font-family:var(--mono);font-size:14px}
.log-h{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.55)}
.log-h b{color:#fff;font-weight:600;font-family:var(--mono)}
.log ol{list-style:none;margin:0;padding:10px 0 14px;min-height:330px}
.log li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:6px 16px;color:rgba(255,255,255,.88);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.log li.on{opacity:1;transform:none}
.log li i{color:var(--ok);font-weight:700}
.log li.w i{color:var(--amber)}
.log li small{display:block;color:rgba(255,255,255,.45);font-size:12.5px}
.ten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;counter-reset:t}
.ten li{counter-increment:t;display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--lline)}
.ten li::before{content:counter(t,decimal-leading-zero);font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:22px;line-height:1.1;color:transparent;-webkit-text-stroke:1.2px var(--n7)}
.ten b{display:block;font-size:17px;color:var(--n7)}
.ten span{display:block;font-size:15px;color:var(--ink2);margin-top:2px;line-height:1.45}
.scale{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:15px;color:var(--ink2)}
.scale span{display:inline-flex;align-items:center;gap:9px}
.scale span::before{content:"";width:11px;height:11px;border-radius:2px;background:var(--ok)}
.scale span.w::before{background:var(--amber)}
.scale span.f::before{background:#b4510c}
.scale b{color:var(--n7)}

/* --- custom builds: attack surface --- */
.surf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.surf h3{font-size:24px;font-stretch:112%;color:#fff}
.surf .s{font-size:15px;color:rgba(255,255,255,.66);margin-top:6px;min-height:46px}
.surf ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line2)}
.surf li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--body);transition:opacity .4s,transform .4s}
.surf li em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.surf .wp li em{color:var(--amber)}
.surf .wp li em::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 0 rgba(232,138,42,.6);animation:pulse 2.2s infinite}
.surf .us li em{color:var(--ok)}
.surf .us li.no{color:rgba(255,255,255,.45)}
.surf .us li.no span{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.surf .us li.no em{color:rgba(255,255,255,.45)}
.surf .tot{display:flex;align-items:baseline;gap:14px;margin-top:22px}
.surf .tot b{font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:76px;line-height:.9;color:var(--amber)}
.surf .us .tot b{color:var(--teal-s)}
.surf .tot span{font-size:15px;color:rgba(255,255,255,.7);max-width:220px;line-height:1.35}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,138,42,.55)}70%{box-shadow:0 0 0 8px rgba(232,138,42,0)}100%{box-shadow:0 0 0 0 rgba(232,138,42,0)}}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid rgba(15,40,70,.28)}
.ledger li{display:grid;grid-template-columns:200px minmax(0,1fr) 260px;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--lline)}
.ledger .im{aspect-ratio:16/10;overflow:hidden;border-radius:3px;border:1px solid rgba(15,40,70,.14);background:var(--paper)}
.ledger .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.ledger h3{font-size:22px;font-stretch:112%;line-height:1.15}
.ledger small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-d);margin-bottom:6px}
.ledger p{font-size:16px;color:var(--ink2);margin-top:6px}
.mv{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}
.mv s{color:var(--ink2);text-decoration-color:rgba(232,138,42,.7);font-weight:600}
.mv svg{width:22px;height:22px;color:var(--teal-d);flex:none}
.mv b{color:var(--n7)}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.paths div{padding-top:22px;border-top:2px solid var(--teal-b)}
.paths div + div{border-top-color:rgba(255,255,255,.35)}
.paths small{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-s)}
.paths h3{font-size:26px;font-stretch:112%;margin-top:8px}
.paths p{font-size:16.5px;color:var(--body);margin-top:10px;line-height:1.6}
/* hero: layered build diagram */
.lyr{position:relative;display:grid;gap:10px}
.lyr div{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border:1px solid var(--line2);border-radius:3px;background:rgba(11,29,54,.8);font-size:15px;color:rgba(255,255,255,.8);transition:opacity .5s,transform .5s,border-color .4s}
.lyr div b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:#fff;font-size:16px}
.lyr div em{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--amber)}
.lyr div.keep em{color:var(--ok)}
.lyr div.keep{border-color:rgba(122,217,227,.45)}
.lyr.cut div:not(.keep){opacity:.18;transform:translateX(18px)}
.lyr.cut div:not(.keep) em{color:rgba(255,255,255,.5)}
.lyr-k{display:flex;justify-content:space-between;margin-top:14px;font-size:14px;color:rgba(255,255,255,.6)}
.lyr-k b{color:var(--teal-s)}

/* hero dial for the security hub (sizes) */
.sh .dial{width:560px}
.sh .dial-core b{font-size:96px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .sh-in,.sh-in.wide{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px}
  .sh .dial{width:440px}
  .sh .dial-core b{font-size:76px}
  .sx li{grid-template-columns:56px minmax(0,1fr) 210px}
  .sx .go{grid-column:2/-1;justify-self:start}
  .ledger li{grid-template-columns:170px minmax(0,1fr);}
  .ledger .mv{grid-column:2}
  .rl{--c:2 !important}
  .signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
}
@media (max-width:900px){
  .sh-in,.sh-in.wide{grid-template-columns:1fr;padding-top:112px;padding-bottom:40px;gap:40px}
  .sh .dial{width:100%;max-width:520px;margin:0 auto}
  .sh .dial-core b{font-size:clamp(60px,16vw,96px)}
  .sh-vis{max-width:560px}
  .sh-bar .wrap{grid-template-columns:1fr 1fr;padding:0}
  .sh-bar .since{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);padding:16px var(--gut)}
  .sh-bar a.ch{padding:16px var(--gut);border-bottom:1px solid var(--line)}
  .sh-bar a.ch:nth-child(odd){border-right:0}
  .sh-bar a.ch:last-child:nth-child(even){grid-column:1/-1}
  .split,.split.r,.sec-h,.lead-sec{grid-template-columns:1fr;gap:32px}
  .lead-sec figure{max-width:260px}
  .ours,.sort,.surf,.paths,.ten{grid-template-columns:1fr;gap:36px}
  .ten{gap:0}
  .gauge-track{grid-template-columns:1fr;border-top:0}
  .gauge-track::before{display:none}
  .gauge button{padding:18px 0 18px 20px;border-left:3px solid var(--line2)}
  .gauge button[aria-pressed="true"]{border-left-color:var(--teal-b)}
  .recs li{grid-template-columns:1fr;gap:12px}
  .qt{grid-template-columns:1fr;gap:6px}
  .qt .mk{font-size:90px}
  .nx{grid-template-columns:1fr}
  .nx a + a{padding-left:0;border-left:0}
}
@media (max-width:700px){
  .crumbs{margin-bottom:20px}
  .sh h1{font-size:clamp(36px,10.4vw,50px)}
  .sh-bar .wrap{grid-template-columns:1fr}
  .sh-bar a.ch{border-right:0!important}
  .sh-bar a.ch:last-child{grid-column:auto}
  .rl{--c:1 !important}
  .signs{grid-template-columns:1fr}
  .sx li{grid-template-columns:minmax(0,1fr);gap:0;padding:22px 0 24px}
  .sx .n{display:block;margin-bottom:6px}
  .sx .how{margin-top:12px}
  .sx .go{grid-column:auto;justify-self:stretch;margin-top:14px}
  .sx .go .btn{width:100%}
  .faq summary{font-size:18px}
  .faq .a{padding-right:0}
  .nx a{padding-right:56px}
  .cl{padding:84px 0 80px}
  .cl::before{font-size:200px;right:-30px;top:auto;bottom:-40px;transform:none}
  .cl h2{font-size:36px}
  .cl p{font-size:17px}
  .ab .wrap{flex-wrap:wrap}
  .ab a.call{width:100%;justify-content:center}
  .scan th:nth-child(2),.scan td:nth-child(2){display:none}
  .scan td,.scan th{padding:12px 14px}
  .scan-h{padding:14px}
  .score{padding:24px 20px}
  .score .big b{font-size:88px}
  .bars li{grid-template-columns:120px minmax(0,1fr)}
  .ledger li{grid-template-columns:1fr;gap:12px}
  .ledger .mv{grid-column:auto}
  .ledger .im{max-width:340px}
  .term pre{min-height:0;font-size:12.5px}
  .recs code{font-size:12.5px;white-space:pre-wrap;word-break:break-all}
  .log ol{min-height:0}
  .log{font-size:12.5px}
  .probe li{grid-template-columns:48px minmax(0,1fr) 60px;font-size:12.5px;padding:6px 12px}
  .surf .tot b{font-size:60px}
  .cal-g{gap:5px}
  .cal-g button{font-size:13px;gap:4px}
  .cal-g button i::before,.cal-g button.x i::after{width:5px;height:5px}
  .stack{height:360px}
  .lead-sec figure{max-width:220px}
}
@media (prefers-reduced-motion:reduce){
  .sort li,.log li{opacity:1!important;transform:none!important}
  .surf .wp li em::before{animation:none}
}

/* small label above headings */
.kk{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-s);margin-bottom:14px}
.lt .kk{color:var(--teal-d)}
.kk.am,.lt .kk.am{color:#b4510c}
.n8 .kk.am,.n9 .kk.am{color:var(--amber)}
.h2x{font-size:clamp(32px,3.2vw,44px);font-stretch:115%}
.fact code,.body code{font-family:var(--mono);font-size:.9em;background:rgba(15,40,70,.07);padding:1px 5px;border-radius:2px}
.readout a.rp{pointer-events:auto;text-decoration:none}
.readout a.rp:hover{background:#fff}
.js .sh .ld{opacity:0;transform:translateY(22px);animation:ld .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .sh .ld1{animation-delay:.05s}.js .sh .ld2{animation-delay:.18s}.js .sh .ld3{animation-delay:.32s}.js .sh .ld4{animation-delay:.46s}.js .sh .ld5{animation-delay:.6s}
.js .sh .sh-vis{opacity:0;animation:ld 1.1s cubic-bezier(.2,.8,.2,1) .35s forwards}
@media (prefers-reduced-motion:reduce){.js .sh .ld,.js .sh .sh-vis{opacity:1!important;transform:none!important}}
.lt .ch-count{color:var(--ink2)}
.lt .ch-count b{color:var(--teal-d)}
.sh h1.md{font-size:clamp(40px,4vw,62px)}
.stk{position:sticky;top:110px}
.ch-count.l{text-align:left}
.brw-tag.lk-ok{display:none;color:var(--ok);border-color:rgba(47,181,122,.5)}
.brw.clean .brw-tag.lk-ok{display:block}
/* clean-site mock inside the browser frame */
.mock{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column}
.mk-nav{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e6ebf0}
.mk-nav i{width:26px;height:26px;border-radius:4px;background:var(--n7)}
.mk-nav s{width:48px;height:7px;border-radius:2px;background:#d7dee6;text-decoration:none}
.mk-nav s:first-of-type{margin-left:auto}
.mk-nav b{width:74px;height:26px;border-radius:3px;background:var(--teal-b)}
.mk-hero{flex:1;padding:8% 9%;background:linear-gradient(135deg,#eaf3f7,#f7fafc)}
.mk-hero p{font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:clamp(22px,2.4vw,34px);color:var(--n7);line-height:1}
.mk-hero span{display:block;height:9px;width:78%;border-radius:2px;background:#cdd7e1;margin-top:16px}
.mk-hero span.s{width:56%;margin-top:9px}
.mk-hero u{display:block;width:120px;height:32px;border-radius:3px;background:var(--n7);margin-top:20px}
.mk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 18px 18px}
.mk-row i{height:44px;border-radius:3px;background:#eef2f6}
@media (max-width:900px){.stk{position:static}}
.steps-s.white{background:#fff}
.nx.gap{margin-top:56px}
.h2x + .body,h2 + .body{margin-top:16px}
/* spoofed email mock */
.mail{background:#fff;border:1px solid rgba(15,40,70,.16);border-radius:4px;box-shadow:0 30px 60px -40px rgba(7,20,38,.5);overflow:hidden}
.mail-r{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:14px 20px;border-bottom:1px solid rgba(15,40,70,.1);font-size:15px}
.mail-r span{color:var(--ink2)}
.mail-r b{color:var(--n7);font-weight:600;overflow-wrap:anywhere}
.mail-b{padding:24px 20px 26px}
.mail-b i{display:block;height:9px;border-radius:2px;background:#dfe5ec;width:88%;margin-bottom:10px}
.mail-b i.s{width:60%}
.mail-b u{display:inline-block;margin-top:10px;width:130px;height:36px;border-radius:3px;background:var(--n7);text-decoration:none;color:#fff;font:700 14px/36px var(--sans);text-align:center}
.mail-t{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;background:#fff7ee;border-top:1px solid rgba(232,138,42,.35);font-size:14px;color:var(--ink2)}
.mail-t b{color:#b4510c;font-size:13px;letter-spacing:.06em;white-space:nowrap}
/* the hidden trap field explainer */
.trap{padding:28px 0 0;border-top:2px solid var(--amber)}
.trap h3{font-size:26px;font-stretch:112%;color:var(--n7)}
.trap > p:not(.kk){font-size:17px;line-height:1.6;color:var(--ink2);margin-top:10px}
.trap-f{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:22px;padding:14px 16px;border:1px dashed rgba(180,81,12,.55);border-radius:3px;background:#fffaf4;font-size:14px}
.trap-f span{font-family:var(--mono);color:var(--ink2)}
.trap-f b{font-family:var(--mono);color:var(--n7);font-weight:600;background:#fff1c9;padding:2px 6px;border-radius:2px;justify-self:start}
.trap-f em{font-style:normal;font-weight:700;font-size:12.5px;letter-spacing:.05em;color:#b4510c}
.trap .trap-n{font-weight:600;color:var(--n7)!important}
@media (max-width:700px){.trap-f{grid-template-columns:1fr;gap:6px}}
.stack .sl:nth-child(1){top:0;transform:scale(.82);opacity:.45}
.stack .sl:nth-child(2){top:46px;transform:scale(.86);opacity:.55}
.stack .sl:nth-child(3){top:92px;transform:scale(.9);opacity:.75}
.stack .sl:nth-child(4){top:138px;transform:scale(.94);opacity:.85}
.stack .sl:nth-child(5){top:184px}
.stack .off{top:276px;bottom:auto;border-top:1px dashed var(--line2);border-bottom:0;padding:12px 0 0}
.stack .srv{position:absolute;left:8%;right:8%;bottom:0;height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border:1px solid rgba(255,255,255,.25);border-radius:3px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px),#0a1a31;font-size:14px;color:rgba(255,255,255,.6)}
.stack .srv b{font-family:var(--disp);font-stretch:112%;color:#fff;font-size:15px}
@media (max-width:700px){.stack .sl{width:94%;margin-left:-47%;padding:0 14px}.stack .off{top:262px;font-size:12px}.stack .srv{left:3%;right:3%;height:64px}}
.steps-s .kk{color:var(--teal-d)}
@media (max-width:700px){
  .scan thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .scan table,.scan tbody,.scan tr,.scan td{display:block}
  .scan tr{padding:14px 14px 12px;border-bottom:1px solid rgba(15,40,70,.08)}
  .scan td{padding:0;border:0}
  .scan td:nth-child(2){display:none}
  .scan td:last-child{margin-top:8px}
  .st{white-space:normal}
  .sh h1,.sh h1.md{font-size:clamp(34px,9.4vw,46px)}
}

/* ================= round 2 (Josh, 2026-11-04) ================= */
/* form spam hero: a picture of a customer's form, not a form */
.fx{position:relative;border-radius:6px;overflow:hidden;background:#0d2140;border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.fx-k{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(232,138,42,.12);border-bottom:1px solid rgba(232,138,42,.35);font-size:13px;color:rgba(255,255,255,.8)}
.fx-k b{font-size:11px;font-weight:800;letter-spacing:.1em;color:#1b0f02;background:var(--amber);padding:3px 7px;border-radius:2px}
.fx-page{position:relative;padding:26px 24px 30px 24px;background:linear-gradient(135deg,#eaf3f7,#f7fafc);min-height:330px}
.fx-form{width:min(300px,78%);background:#fff;border:1px solid rgba(15,40,70,.14);border-radius:4px;padding:16px 16px 14px;box-shadow:0 20px 40px -30px rgba(7,20,38,.5);transform:rotate(-1.2deg);transform-origin:left top}
.fx-form h3{font-size:17px;font-stretch:112%;color:var(--n7)}
.fx-form .f{position:relative;margin-top:10px;padding:16px 10px 6px;border:1px solid rgba(15,40,70,.18);border-radius:3px;font-size:12.5px;line-height:1.35;color:var(--ink2);background:#fff}
.fx-form .f span{position:absolute;left:10px;top:3px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d)}
.fx-form .tv{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 10px;border:1px dashed rgba(15,40,70,.25);border-radius:3px;font-size:11.5px;line-height:1.3;color:var(--ink2)}
.fx-form .tv b{color:var(--n7);font-weight:700}
.fx-form .tv i{position:relative;width:18px;height:18px;flex:none;border-radius:50%;border:2px solid rgba(15,40,70,.2);border-top-color:var(--teal-d);animation:spin .9s linear infinite}
.fx-form .tv i::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s}
.fx.ok .fx-form .tv i{animation:none;border-color:var(--ok);background:var(--ok)}
.fx.ok .fx-form .tv i::after{transform:rotate(45deg) scale(1)}
.fx-form .send{margin-top:10px;padding:10px;border-radius:3px;background:var(--n7);color:#fff;font:700 12.5px/1 var(--disp);text-align:center;transition:background-color .3s}
.fx.ok .fx-form .send{background:var(--teal-d)}
.fx-ok{position:absolute;right:18px;top:26px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:var(--n9);color:#fff;border:1px solid rgba(47,181,122,.5);border-radius:4px;box-shadow:0 18px 30px -18px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s}
.fx-ok i{width:24px;height:24px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.fx-ok i::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fx-ok b{display:block;font-size:13px;font-weight:700}
.fx-ok span{display:block;font-size:12px;color:rgba(255,255,255,.62)}
.fx.ok .fx-ok{opacity:1;transform:none}
.fx-bot{position:absolute;right:18px;bottom:26px;width:min(250px,60%);padding:12px 14px;background:#fff;border:1px solid rgba(232,138,42,.45);border-radius:4px;box-shadow:0 18px 30px -18px rgba(7,20,38,.5);font-size:12.5px;color:var(--ink2);line-height:1.35;opacity:0;transform:translateX(30px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.fx-bot em{display:inline-block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;color:#b4510c;border:1px solid rgba(180,81,12,.45);padding:2px 6px;border-radius:2px;margin-bottom:6px}
.fx-bot span{display:block;text-decoration:line-through;text-decoration-color:rgba(232,138,42,.7)}
.fx-bot b{position:absolute;right:-8px;top:-10px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;background:#b4510c;padding:5px 8px;border-radius:2px;transform:rotate(6deg)}
.fx.bot .fx-bot{opacity:1;transform:none}

/* phones: every hero visual gets a compact version (Josh: the hero animations looked wonky on mobile) */
@media (max-width:700px){
  .sh-in{gap:30px;padding-bottom:36px}
  .sh-vis{max-width:100%}
  /* hacked: shorter frame */
  .brw-v{aspect-ratio:16/10}
  .mk-hero{padding:7% 8%}
  .mk-hero p{font-size:20px}
  .mk-hero u{width:96px;height:26px;margin-top:14px}
  .mk-row{display:none}
  /* insurance: number beside the bars */
  .score{padding:20px 18px 18px}
  .score .big{margin-top:12px;gap:12px}
  .score .big b{font-size:72px}
  .score .big span{font-size:15px}
  .bars{margin-top:18px;gap:8px}
  .bars li{grid-template-columns:118px minmax(0,1fr);font-size:13px}
  /* email auth: fewer, shorter lines */
  .term pre{padding:14px 14px 18px;font-size:12px;line-height:1.55}
  /* form spam */
  .fx-page{padding:18px 16px 22px;min-height:0}
  .fx-form{width:min(260px,74%);padding:12px 12px 10px}
  .fx-form .f.t{display:none}
  .fx-ok{right:12px;top:16px;padding:8px 10px 8px 8px}
  .fx-ok span{display:none}
  .fx-bot{right:12px;bottom:16px;width:min(210px,58%);font-size:12px;padding:10px 12px}
  /* backups: a plain stack, no perspective */
  .stack{height:auto;padding-bottom:0}
  .stack .sl{position:static;width:100%;margin:0 0 8px;transform:none!important;opacity:1!important;height:52px;padding:0 14px}
  .stack .sl:nth-child(1),.stack .sl:nth-child(2){display:none}
  .stack .off{position:static;top:auto;margin:14px 0 10px;padding-top:12px}
  .stack .srv{position:static;height:56px;margin-top:0}
  /* WordPress care: shorter log */
  .log ol{padding:6px 0 10px}
  .log li{padding:5px 12px}
  .log li small{display:none}
  /* custom builds: crossed out instead of faded */
  .lyr{gap:7px}
  .lyr div{padding:11px 14px;font-size:14px}
  .lyr div b{font-size:14px}
  .lyr div:nth-child(3){display:none}
  .lyr.cut div:not(.keep){opacity:.6;transform:none}
  .lyr.cut div:not(.keep) b{text-decoration:line-through;text-decoration-color:rgba(232,138,42,.8);color:rgba(255,255,255,.7)}
  .lyr.cut div:not(.keep) em{color:var(--amber)}
  .lyr.cut div:not(.keep) em::after{content:" \2192 GONE"}
  .lyr-k{font-size:13px}
}
@media (max-width:700px){
  .stack{display:flex;flex-direction:column}
  .stack .off{order:1;margin:10px 0 10px}
  .stack .srv{order:2}
  .lyr.cut div:not(.keep) em{display:none}
  .lyr.cut div:not(.keep)::after{content:"GONE";font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--amber);white-space:nowrap}
  .fx-page{display:flex;flex-direction:column;gap:10px}
  .fx-form{width:100%;transform:none}
  .fx-ok,.fx-bot{position:static;width:auto;transform:none;right:auto;top:auto;bottom:auto}
  .fx-ok span{display:block}
  .fx-bot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .fx-bot em{margin:0}
  .fx-bot span{flex:1 1 120px}
  .fx-bot b{position:static;transform:none;margin-left:auto}
}

/* ================= marketing hub ================= */
.serp{position:relative;border-radius:6px;overflow:hidden;background:#fff;color:var(--ink);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);font-family:var(--sans)}
.serp-q{display:flex;align-items:center;gap:10px;margin:14px 16px 10px;padding:10px 14px;border:1px solid rgba(15,40,70,.2);border-radius:999px;font-size:14px;color:var(--n7)}
.serp-q .mg{width:14px;height:14px;border:2px solid var(--teal-d);border-radius:50%;position:relative;flex:none}
.serp-q .mg::after{content:"";position:absolute;right:-5px;bottom:-5px;width:6px;height:2px;background:var(--teal-d);transform:rotate(45deg)}
.serp-b{position:relative;margin:0 16px 10px;padding:10px 12px;border-radius:4px;border:1px solid transparent;transition:background-color .4s,border-color .4s}
.serp-b small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink2);margin-bottom:4px}
.serp-b b{display:block;font-size:14px;color:#1a3b8c;line-height:1.3}
.serp-b p{font-size:12.5px;color:var(--ink2);line-height:1.4;margin-top:2px}
.serp-b.ai{border-left:3px solid var(--teal-b);background:#f2fbfc}
.serp-b.ai p{font-size:13px;color:var(--ink)}
.serp-b.ai p b{display:inline;color:var(--n7);font-size:13px}
.serp-map{height:54px;border-radius:3px;background:linear-gradient(135deg,#e8efe9,#dfe8f2);position:relative;overflow:hidden;margin:4px 0 8px}
.serp-map i{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--amber)}
.serp-map i:nth-child(1){left:28%;top:40%;background:var(--n7)}
.serp-map i:nth-child(2){left:58%;top:22%}
.serp-map i:nth-child(3){left:72%;top:56%}
.serp-b ol{list-style:none;margin:0;padding:0}
.serp-b ol li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(15,40,70,.08);font-size:12.5px}
.serp-b ol li b{display:inline;color:var(--n7);font-size:13px}
.serp-b ol li span{color:var(--ink2);white-space:nowrap}
.serp-tag{position:absolute;right:10px;top:-10px;font:800 11px/1 var(--sans);letter-spacing:.06em;color:#1b0f02;background:var(--amber);padding:6px 9px;border-radius:2px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.serp-b.on{background:#fff7ee;border-color:rgba(232,138,42,.6)}
.serp-b.ai.on{background:#fff7ee;border-left-color:var(--amber)}
.serp-b.on .serp-tag{opacity:1;transform:none}
.jr-h.lt-h{color:var(--n7)}
.jr-h.lt-h span{color:var(--ink2)}
.jl.jl-lt li i{color:rgba(15,40,70,.5)}
.jl.jl-lt li.lit i{color:var(--teal-d)}
.jl.jl-lt li::before{background:rgba(15,40,70,.12)}
.jl.jl-lt li::after{background:var(--n7)}
.jl.jl-lt b{color:var(--n7)}
.jl.jl-lt span{color:var(--ink2)}
.ledger.one{border-top:0}
.ledger.one li{border-bottom:0;grid-template-columns:300px minmax(0,1fr) auto;padding:0}
.ledger.one h3{font-size:28px}
.plan-price{text-align:right}
.plan-price small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-s)}
.plan-price{font-family:var(--disp);font-stretch:115%;font-weight:800;font-size:30px;color:#fff;line-height:1.1}
.plan-price span{display:block;font-family:var(--sans);font-weight:400;font-size:14.5px;color:rgba(255,255,255,.66);margin-top:8px;max-width:380px;margin-left:auto}
.n9 .ctas,.n8 .ctas{margin-top:34px}
.sx li .btn-primary.btn-sm{color:var(--n9)}
@media (max-width:900px){.plan-price{text-align:left}.plan-price span{margin-left:0}.ledger.one li{grid-template-columns:1fr}.ledger.one .im{max-width:420px}.ledger.one .mv{grid-column:auto}}
@media (max-width:700px){
  .serp-q{margin:12px 12px 8px;font-size:13px}
  .serp-b{margin:0 12px 8px;padding:8px 10px}
  .serp-b.org{display:none}
  .serp-map{height:40px}
  .serp-b ol li:nth-child(n+3){display:none}
  .plan-price{font-size:26px}
}

/* ================= single service heroes ================= */
/* custom websites: a real site with the path marked */
.path{position:relative;border-radius:6px;overflow:hidden;background:#0d2140;border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.path-v{position:relative;aspect-ratio:1000/720;background:#fff}
.path-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.hs{position:absolute;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.hs i{width:30px;height:30px;border-radius:50%;background:var(--amber);color:#1b0f02;font:800 14px/30px var(--disp);text-align:center;flex:none;box-shadow:0 0 0 0 rgba(232,138,42,.5)}
.hs b{font:700 13px/1.2 var(--sans);color:#fff;background:var(--n9);padding:7px 10px;border-radius:3px;white-space:nowrap}
.hs.on{opacity:1;transform:none}
.hs.on i{animation:pulse 1.8s infinite}
.h1p{left:5%;top:26%}.h2p{left:34%;top:9%}.h3p{left:52%;top:46%}
.path-k{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;color:rgba(255,255,255,.75)}
.path-k b{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--teal-s)}
/* managed care: a day */
.day{border-radius:6px;background:rgba(11,29,54,.8);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);padding:18px 22px 20px}
.day-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.day-h b{font-family:var(--disp);font-stretch:112%;font-size:17px;color:#fff}
.day-h span{font-size:13px;color:rgba(255,255,255,.55)}
.day ol{list-style:none;margin:0;padding:6px 0 0;position:relative}
.day ol::before{content:"";position:absolute;left:84px;top:14px;bottom:14px;width:1px;background:var(--line2)}
.day li{display:grid;grid-template-columns:70px 14px minmax(0,1fr);gap:0 14px;align-items:start;padding:11px 0;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s}
.day li.on{opacity:1;transform:none}
.day time{font:700 13px/1.5 var(--mono);color:var(--teal-s);text-align:right}
.day li::before{content:"";grid-column:2;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--amber);border:2px solid var(--n9);box-shadow:0 0 0 1px var(--amber)}
.day li.ok::before{background:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.day li b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.35}
.day li span{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:2px}
/* business email: address */
.addr{border-radius:6px;background:rgba(11,29,54,.8);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);padding:26px 28px 22px}
.addr small{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal-s)}
.addr-l{margin-top:10px;font-family:var(--mono);font-size:clamp(20px,2.2vw,30px);color:#fff;padding:14px 16px;border:1px solid var(--line2);border-radius:4px;background:var(--n9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr-l b{color:var(--teal-s);font-weight:600;border-right:2px solid var(--teal-s);padding-right:2px}
.addr-l span{color:rgba(255,255,255,.85)}
.addr ul{list-style:none;margin:18px 0 0;padding:0}
.addr li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:start}
.addr li i{width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--ok);position:relative}
.addr li i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.addr li b{display:block;font-size:15px;color:#fff}
.addr li span{display:block;font-size:13.5px;color:rgba(255,255,255,.62)}
/* email security: flow */
.flow{position:relative;border-radius:6px;background:rgba(11,29,54,.8);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);padding:24px 22px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.flow-c{position:relative;padding:14px 14px 16px;border:1px solid var(--line2);border-radius:4px;background:var(--n9);min-height:118px}
.flow-c.mid{border-color:var(--teal-s);background:rgba(31,168,184,.12)}
.flow-c small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--teal-s)}
.flow-c b{display:block;font-family:var(--disp);font-stretch:112%;font-size:17px;color:#fff;margin-top:6px}
.flow-c span{display:block;font-size:12.5px;color:rgba(255,255,255,.62);margin-top:4px;line-height:1.4}
.flow-track{grid-column:1/-1;position:relative;height:26px;margin:4px 0 0}
.flow-track::before{content:"";position:absolute;left:4%;right:4%;top:12px;height:1px;background:var(--line2)}
.flow-track .m{position:absolute;left:0;top:7px;width:16px;height:12px;border-radius:2px;background:var(--teal-s);animation:fly 5.2s linear infinite;opacity:0}
.flow-track .m::after{content:"";position:absolute;left:3px;top:3px;width:10px;height:5px;border-top:1.5px solid var(--n9);border-left:1.5px solid var(--n9);border-right:1.5px solid var(--n9);transform:skew(0) ;clip-path:polygon(0 0,100% 0,50% 100%)}
.flow-track .m2{animation-delay:1.3s}.flow-track .m3{animation-delay:2.6s}.flow-track .m4{animation-delay:3.9s}
.flow-track .m.bad{background:var(--amber);animation-name:flybad}
@keyframes fly{0%{left:4%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(96% - 16px);opacity:0}}
@keyframes flybad{0%{left:4%;opacity:0}6%{opacity:1}46%{left:45%;top:7px;opacity:1}60%{left:45%;top:34px;opacity:0}100%{left:45%;top:34px;opacity:0}}
.flow-q{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border:1px solid rgba(232,138,42,.45);border-radius:3px;font-size:13px;color:rgba(255,255,255,.85)}
.flow-q b{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#1b0f02;background:var(--amber);padding:3px 6px;border-radius:2px}
.flow-q span{margin-left:auto;font-size:12px;color:var(--amber);font-weight:700;white-space:nowrap}
/* seo: report */
.rep{border-radius:6px;background:#fff;color:var(--ink);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);padding:20px 22px 18px}
.rep-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(15,40,70,.12)}
.rep-h b{font-family:var(--disp);font-stretch:112%;font-size:17px;color:var(--n7)}
.rep-h span{font-size:13px;color:var(--ink2)}
.rep ul{list-style:none;margin:6px 0 0;padding:0}
.rep li{display:grid;grid-template-columns:140px minmax(0,1fr) 36px 110px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(15,40,70,.08);font-size:14px;color:var(--ink2)}
.rep li i{height:10px;background:rgba(15,40,70,.08);border-radius:1px;position:relative;overflow:hidden}
.rep li i::after{content:"";position:absolute;inset:0;background:var(--teal-d);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.6,.1,.3,1)}
.rep.in li i::after{transform:scaleX(var(--w,1))}
.rep li b{font-family:var(--disp);font-stretch:118%;font-size:22px;color:var(--n7);text-align:right}
.rep li em{font-style:normal;font-size:12.5px;color:var(--ink2);text-align:right}
.rep-f{font-size:13px;color:var(--ink2);margin-top:12px;line-height:1.5}
/* ai: audit */
.aud{border-radius:6px;background:rgba(11,29,54,.8);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);padding:20px 22px 18px}
.aud-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.aud-h b{font-family:var(--disp);font-stretch:112%;font-size:17px;color:#fff}
.aud-h span{font-size:13px;color:rgba(255,255,255,.55)}
.aud ol{list-style:none;margin:0;padding:0}
.aud li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.aud li.on{opacity:1;transform:none}
.aud li i{width:12px;height:12px;border-radius:2px;background:var(--ok)}
.aud li.w i{background:var(--amber)}
.aud li.o i{background:var(--teal-s)}
.aud li b{display:block;font-size:15px;color:#fff}
.aud li span{display:block;font-size:13px;color:rgba(255,255,255,.6)}
.aud li em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--ok);white-space:nowrap}
.aud li.w em{color:var(--amber)}
.aud li.o em{color:var(--teal-s)}
.aud-f{font-size:13px;color:rgba(255,255,255,.6);margin-top:12px;line-height:1.5}
/* redirect map */
.rmap{border:1px solid var(--line2);border-radius:4px;background:rgba(11,29,54,.7);padding:18px 20px}
.rmap-h{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:10px;font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.55);padding-bottom:10px;border-bottom:1px solid var(--line)}
.rmap-r{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rmap-r code{font-family:var(--mono);font-size:13.5px;color:rgba(255,255,255,.7);overflow-wrap:anywhere}
.rmap-r code:last-child{color:var(--teal-s)}
.rmap-r i{height:1px;background:var(--teal-s);position:relative}
.rmap-r i::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid var(--teal-s);border-right:1px solid var(--teal-s);transform:rotate(45deg)}
.rmap-f{font-size:14px;color:rgba(255,255,255,.66);margin-top:12px;line-height:1.5}
.lt .ten{--x:1}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr 1fr;gap:8px;padding:16px 14px}.flow-c{padding:10px;min-height:0}.flow-c b{font-size:14px}.flow-c span{display:none}}
@media (max-width:700px){
  .path-k{font-size:12px}.hs b{font-size:11.5px;padding:5px 8px}.hs i{width:24px;height:24px;font-size:12px;line-height:24px}
  .day{padding:14px 14px 12px}.day li{grid-template-columns:58px 12px minmax(0,1fr);gap:0 10px;padding:9px 0}.day ol::before{left:66px}.day time{font-size:12px}
  .addr{padding:18px 16px 14px}.addr-l{font-size:18px;padding:12px}
  .rep{padding:16px 14px 14px}.rep li{grid-template-columns:96px minmax(0,1fr) 30px;font-size:13px}.rep li em{display:none}.rep li b{font-size:19px}
  .aud{padding:16px 14px 14px}.aud li{gap:10px}
  .flow-q{font-size:12px}
}
.day li::before{grid-column:2;grid-row:1}
.day time{grid-column:1;grid-row:1}
.day li > div{grid-column:3;grid-row:1}
.addr li span{grid-column:2}
@media (max-width:380px){.flow{grid-template-columns:1fr;gap:8px}.flow-track{display:none}.flow-c span{display:block}.flow-c.mid{border-width:2px}}

/* ======================================================================
   Homepage, option A (2026-11-04). Hero: the launch wall of real client
   sites (not the dial). Film kept as the closing band. Three well-made
   service cards, Pest-Tec before/after, facts, Google reviews, people,
   three plans, four steps.
   ====================================================================== */

/* ---------- hero ---------- */
.hm{position:relative;background:radial-gradient(700px 520px at 78% 40%, rgba(31,168,184,.14), transparent 70%),radial-gradient(900px 600px at 6% 120%, rgba(15,40,70,.9), transparent 70%),var(--n9);overflow:hidden}
.hm::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(122,217,227,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(122,217,227,.045) 1px, transparent 1px);background-size:80px 80px;mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);-webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);pointer-events:none}
.hm-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:48px;align-items:center;padding-top:124px;padding-bottom:36px;min-height:640px}
.hm h1{font-size:clamp(46px,5.2vw,82px);font-stretch:122%;line-height:.96}
.hm h1 .l{display:block}
.hm h1 .l2{color:var(--teal-s)}
.hm .kicker{margin-bottom:22px}
.js .hm .ld{opacity:0;transform:translateY(22px);animation:ld .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .hm .ld1{animation-delay:.05s}.js .hm .ld2{animation-delay:.18s}.js .hm .ld3{animation-delay:.32s}.js .hm .ld4{animation-delay:.46s}.js .hm .ld5{animation-delay:.6s}
.js .hm .wall.ld,.js .hm .duo.ld{transform:none;animation-delay:.3s;animation-duration:1.2s}
.hm-bar .ch{display:flex;align-items:center;gap:14px;padding:18px 22px;border-right:1px solid var(--line);text-decoration:none;color:#fff;transition:background-color .25s}
.hm-bar a.ch:hover{background:rgba(122,217,227,.08)}
.hm-bar .ch:last-child{border-right:0}
.hm-bar .ch i{font-family:var(--disp);font-stretch:122%;font-weight:800;font-size:24px;color:var(--teal-s);letter-spacing:-.02em;flex:none;white-space:nowrap}
.hm-bar .ch i.gs::after{content:"";display:inline-block;width:15px;height:15px;margin:0 0 2px 5px;vertical-align:middle;background:var(--amber);clip-path:polygon(50% 2%,62% 36%,98% 38%,69% 60%,80% 96%,50% 75%,20% 96%,31% 60%,2% 38%,38% 36%)}
.hm-bar .ch > span{font-weight:600;font-size:14.5px;line-height:1.25}
.hm-bar .ch small{display:block;font-size:13px;color:rgba(255,255,255,.58);font-weight:400;margin-top:2px}
.hm-bar .since{padding-right:26px}

/* the launch wall: two columns of real client sites drifting in opposite directions, slightly turned */
.wall{position:relative;min-width:0}
.wall-hero{height:560px;margin-right:-150px;padding-right:150px;perspective:1600px;perspective-origin:30% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* transform-style stays flat: with preserve-3d Chrome hit-tests the receding (right) column as the column, not its cards (Josh, 2026-11-04) */
.wall-hero .wall-in{position:absolute;left:4%;right:150px;top:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:22px;transform:rotateX(8deg) rotateY(-16deg) rotateZ(3deg);transform-origin:50% 50%;transform-style:flat}
.wall-col{position:relative;overflow:hidden;height:100%}
.wall-col .wall-trk{display:flex;flex-direction:column;gap:22px;animation:wallUp var(--dur,46s) linear infinite}
.wall-col[data-dir="down"] .wall-trk{animation-name:wallDown}
.wall:hover .wall-trk,.wall:focus-within .wall-trk,.wall.paused .wall-trk{animation-play-state:paused}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall-card{position:relative;flex:none;width:100%;aspect-ratio:1000/733;margin:0;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--n7);box-shadow:0 30px 50px -26px rgba(0,0,0,.85);outline:1px solid rgba(122,217,227,.2);cursor:pointer;font:inherit;color:inherit;text-align:left;transition:outline-color .2s,transform .3s}
.wall-card img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;pointer-events:none;-webkit-user-drag:none}
.wall-card .cap{position:absolute;left:0;bottom:0;background:var(--n9);color:var(--teal-s);font-size:13px;font-weight:600;padding:5px 9px;border-radius:0 3px 0 0;display:flex;align-items:center;gap:7px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall-card .cap i{color:rgba(255,255,255,.55);font-weight:500}
.wall-card:hover{outline-color:var(--teal-s);transform:scale(1.025)}
.wall-card:hover .cap i{color:var(--amber)}
.wall-card:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wall-hint{position:absolute;right:0;bottom:-30px;font-size:13px;color:rgba(255,255,255,.55)}
/* chapter 02 band variant: two full-bleed rows */
.wall-band{margin-top:6px;padding:10px 0 4px;overflow:hidden}
.wall-band .wall-in{display:grid;gap:18px}
.wall-band .wall-row{overflow:hidden}
.wall-band .wall-trk{display:flex;gap:18px;width:max-content;will-change:transform;animation:wallLeft var(--dur,70s) linear infinite}
.wall-band .wall-row[data-dir="right"] .wall-trk{animation-name:wallRight}
@keyframes wallLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wallRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.wall-band .wall-card{width:340px;aspect-ratio:1000/733}
.wall-band .wall-card:hover{transform:translateY(-3px)}
.wall-band + .wrap .ctas{margin-top:34px}

/* ---------- 01 service cards (navy on paper) ---------- */
.hm-svc .ch-count{max-width:480px}
/* the three cards share one row grid (subgrid), so the divider, the starting point and the button sit at the same height on all three (Josh, 2026-11-04) */
.svc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto auto;gap:22px;margin-top:8px}
.svc{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 5;background:var(--n8);color:#fff;border-radius:4px;overflow:hidden;border:1px solid rgba(15,40,70,.14);box-shadow:0 30px 50px -36px rgba(7,20,38,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.svc > *{min-width:0}
.svc > :not(.svc-img){margin-left:24px;margin-right:24px}
.svc-h{position:relative;z-index:1}
@supports not (grid-template-rows:subgrid){.svc{display:flex;flex-direction:column}.svc .svc-p{margin-top:auto}}
.svc::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--teal-b);z-index:2}
.svc:hover{transform:translateY(-4px);box-shadow:0 40px 60px -34px rgba(7,20,38,.75)}
.svc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--n7)}
.svc-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc-img img{transform:scale(1.07)}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,54,0) 50%,rgba(11,29,54,.92) 100%)}
.svc-img span{position:absolute;left:18px;bottom:12px;z-index:1;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7)}
.svc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:-10px}
.svc-k{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--teal-s);padding-bottom:6px}
.svc-n{font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:64px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(122,217,227,.55);letter-spacing:-.04em}
.svc h3{font-size:28px;font-stretch:115%;color:#fff;margin-top:12px}
.svc-d{font-size:15.5px;line-height:1.55;color:var(--body);margin-top:10px}
.svc-l{list-style:none;margin:18px 24px 0;padding:0;border-top:1px solid var(--line2);align-self:start}
.svc-l a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:#fff;font-weight:600;font-size:15px;transition:color .2s}
.svc-l li:last-child a{border-bottom:0}
.svc-l a svg{width:16px;height:16px;margin-left:auto;color:var(--teal-s);transition:transform .25s}
.svc-l a:hover{color:var(--teal-s)}
.svc-l a:hover svg{transform:translateX(5px)}
.svc-l b{font:800 10.5px/1 var(--sans);letter-spacing:.1em;color:#1b0f02;background:var(--amber);padding:4px 5px;border-radius:2px}
.svc-p{margin-top:18px;padding-top:16px;border-top:1px solid var(--line2);font-family:var(--disp);font-stretch:108%;font-weight:700;font-size:16px;color:#fff;align-self:end}
.svc-p small{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:rgba(255,255,255,.58);margin-bottom:3px}
.svc .btn{margin-top:16px;margin-bottom:26px;justify-self:start;align-self:start}
.svc-all{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid rgba(15,40,70,.22);font-size:17px;color:var(--ink2)}
.svc-all b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--n7);font-size:20px}
.svc-all a{display:inline-flex;align-items:center;gap:10px;color:var(--n7);font-weight:700;text-decoration:none}
.svc-all a svg{width:20px;height:20px;transition:transform .25s}
.svc-all a:hover svg{transform:translateX(5px)}

/* ---------- 02 selected work (three sites) ---------- */
.sel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.sel-img{display:block;width:100%;aspect-ratio:1000/680;margin:0;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--n7);cursor:pointer;position:relative;outline:1px solid var(--line2);box-shadow:0 30px 50px -30px rgba(0,0,0,.8);transition:outline-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.sel-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.sel-img::after{content:"+";position:absolute;right:12px;top:12px;width:32px;height:32px;display:grid;place-items:center;border-radius:3px;background:rgba(7,20,38,.85);color:var(--teal-s);font:700 19px/1 var(--sans);border:1px solid var(--line2)}
.sel li:hover .sel-img{outline-color:var(--teal-s);transform:translateY(-4px)}
.sel li:hover .sel-img img{transform:scale(1.05)}
.sel-img:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sel-b{padding:18px 0 0}
.sel-b small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--teal-s)}
.sel-b small span{display:block;color:rgba(255,255,255,.55);font-weight:600;margin-top:3px}
.sel-b h3{font-size:24px;font-stretch:112%;color:#fff;margin-top:10px;line-height:1.1}
.sel-b p{font-size:16px;color:var(--body);margin-top:6px}
.sel-b a{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 0;font-weight:700;font-size:15px;color:#fff;text-decoration:none;border-bottom:2px solid rgba(122,217,227,.5)}
.sel-b a svg{width:16px;height:16px;color:var(--teal-s);transition:transform .25s}
.sel-b a:hover{color:var(--teal-s);border-bottom-color:var(--teal-s)}
.sel-b a:hover svg{transform:translateX(4px)}
.hm-work .ctas{margin-top:40px}
.hm-work .ch-count{max-width:520px}
/* hero B: headline, then a full-width double row */
.hm-in.one{grid-template-columns:minmax(0,760px);min-height:0;padding-bottom:8px}
.wall-hero-b{margin-top:10px;padding-bottom:30px}
.wall-hero-b .wall-card{width:320px}
.h3x{font-size:clamp(28px,2.8vw,38px);font-stretch:115%;line-height:1.08;color:#fff}

/* ---------- 03 facts + layers ---------- */
.facts{list-style:none;margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--line2)}
.facts li{padding:26px 0 24px;border-bottom:1px solid var(--line)}
.facts b.t{font-size:clamp(40px,4vw,56px);padding-top:.18em;padding-bottom:.1em}
.facts b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(54px,5.4vw,78px);line-height:.9;letter-spacing:-.03em;color:#fff}
.facts span{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:19px;color:var(--teal-s);margin-top:12px}
.facts small{display:block;font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.5;color:var(--body);margin-top:8px;max-width:320px}
.hm-conn .ch-count{max-width:560px}
.hm-conn .ctas{margin-top:34px}

/* ---------- reviews ---------- */
.rev-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:34px}
.rev-head p{font-size:17px;color:var(--ink2);margin-top:12px;max-width:560px}
.gscore{display:grid;grid-template-columns:auto auto;gap:4px 14px;align-items:center;text-decoration:none;color:var(--n7);padding:18px 22px;border:1px solid rgba(15,40,70,.2);border-radius:4px;transition:border-color .2s,background-color .2s}
.gscore:hover{border-color:var(--n7);background:#fff}
.gscore b{grid-row:1/3;font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:56px;line-height:.9;letter-spacing:-.03em}
.gscore .stars{display:flex;gap:2px}
.gscore .stars svg,.stars svg{width:17px;height:17px;fill:var(--amber)}
.gscore small{font-size:14px;font-weight:600;color:var(--ink2)}
.rvws{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rvw{display:flex;flex-direction:column;padding:26px 26px 24px;background:var(--paper);border-radius:4px;border:1px solid rgba(15,40,70,.1);border-top:3px solid var(--teal-b);color:var(--ink)}
.rvw-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rvw-h .stars{display:inline-flex;gap:2px}
.rvw-h small{font-size:13px;font-weight:600;color:var(--ink2)}
.rvw blockquote{margin:18px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.rvw blockquote p + p{margin-top:12px}
.rvw footer{margin-top:auto;padding-top:18px;font-size:15px}
.rvw footer b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--n7);font-size:17px}
.rvw footer span{display:block;color:var(--ink2);margin-top:2px}
.rvw .more{display:inline-block;margin-top:10px;font-weight:700;font-size:15px;color:var(--n7);text-decoration:none;border-bottom:2px solid var(--teal-b);padding-bottom:1px}
.rvw .more:hover{color:var(--teal-d)}
.rev-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.rev-foot p{font-size:14px;color:var(--ink2)}
.js .rvw.swap{animation:rvIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rvIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- people ---------- */
.hm-people .pp{grid-template-columns:380px minmax(0,1fr);gap:56px}
.hm-people .kk{margin-bottom:12px}
.team.hm-team{grid-template-columns:repeat(2,minmax(0,280px));justify-content:start;gap:24px;align-items:start}
.team .role{font-size:14px;color:var(--ink2);line-height:1.35;margin-top:3px}
.team.hm-team li.big .ph{aspect-ratio:3/4}
.team.hm-team li:not(.big) .ph{aspect-ratio:3/3.6}
.team.hm-team li:not(.big) .nm{font-size:15.5px}
.team.hm-team li:not(.big) .role{font-size:13.5px}

/* ---------- plans ---------- */
.hm-plans .sec-h{margin-bottom:28px}
.plans3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;gap:0 36px;border-top:1px solid var(--line2)}
.plans3 > li{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 4;align-items:start;padding:26px 0 30px;border-bottom:1px solid var(--line)}
.plans3 > li .ph{display:block}
@supports not (grid-template-rows:subgrid){.plans3 > li{display:flex;flex-direction:column}}
.plans3 > li + li::before{content:"";position:absolute;left:-18px;top:26px;bottom:30px;width:1px;background:var(--line)}
.plans3 .pn{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--teal-s)}
.plans3 .pk{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--amber);margin-top:6px}
.plans3 h3{font-size:30px;font-stretch:115%;color:#fff;margin-top:10px}
.plans3 .pd{font-size:16px;color:var(--body);margin-top:8px}
.pp-price{margin-top:20px;display:block;color:#fff}
.pp-price small{display:block;font-size:13px;color:rgba(255,255,255,.6)}
.pp-price b{font-family:var(--disp);font-stretch:122%;font-weight:800;font-size:54px;line-height:.95;letter-spacing:-.03em}
.pp-price span{font-size:16px;color:rgba(255,255,255,.75);margin-left:6px;white-space:nowrap}
.pp-price em{display:block;font-size:14px;color:rgba(255,255,255,.62);margin-top:6px}
.plans3 ul{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line2)}
.plans3 ul li{padding:9px 0 9px 22px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--body);position:relative}
.plans3 ul li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;background:var(--teal-b)}
.plans3 ul{margin-bottom:22px;align-self:start}
.plans3 .btn{margin-top:auto;align-self:end;justify-self:start}
.plans3 li.full h3{color:var(--teal-s)}
.hm-plans .fine{margin-top:22px;font-size:15px;color:rgba(255,255,255,.62);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.hm-plans .fine a{display:inline-flex;align-items:center;gap:8px;padding:10px 0;color:#fff;font-weight:600;text-decoration:none}
.hm-plans .fine a svg{width:16px;height:16px;transition:transform .25s}
.hm-plans .fine a:hover svg{transform:translateX(4px)}

/* ---------- steps (four) ---------- */
.hm-steps .sec-h{margin-bottom:30px}
.hm-steps .sec-h p{color:var(--ink2)}
.steps.four{grid-template-columns:repeat(4,1fr);gap:32px}
.steps.four .rail{right:calc(25% - 24px)}
.steps.four.in li:nth-of-type(2) .sn{transition-delay:.5s}
.steps.four.in li:nth-of-type(3) .sn{transition-delay:1s}
.steps.four.in li:nth-of-type(4) .sn{transition-delay:1.5s}
.steps.four h3{font-size:20px}

/* ---------- closing film ---------- */
.hm-close .kk{color:var(--teal-s);margin-bottom:18px}
.hm-close .alt{margin-top:26px;font-size:15px;color:rgba(255,255,255,.66);max-width:520px}

/* ---------- hero C: the two of them ---------- */
.duo{position:relative;height:560px}
.duo figure{position:absolute;margin:0;width:54%;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--n7);outline:1px solid var(--line2);box-shadow:0 40px 60px -30px rgba(0,0,0,.9)}
.duo figure img{width:100%;height:100%;object-fit:cover;object-position:top center}
.duo .duo-a{left:0;top:0}
.duo .duo-b{right:0;bottom:0}
.duo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(180deg,rgba(7,20,38,0),rgba(7,20,38,.95))}
.duo figcaption b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:#fff}
.duo figcaption span{display:block;font-size:13px;color:var(--teal-s);font-weight:600;margin-top:2px}
.duo-k{position:absolute;right:0;top:8%;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:15px;line-height:1.3;letter-spacing:.06em;color:var(--teal-s);text-align:right}

/* design-options switch (shared with the options pages) */
.switch{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 14px;background:rgba(7,20,38,.94);border:1px solid rgba(122,217,227,.3);border-radius:6px;font:600 13px/1 var(--sans);color:rgba(255,255,255,.7);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.switch a{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:4px;color:#fff;text-decoration:none}
.switch a:hover{background:rgba(122,217,227,.14)}
.switch a[aria-current]{background:var(--teal-b);color:var(--n9)}
.switch .lbl{margin-right:4px}

/* labels on light backgrounds: a teal that reads (4.5:1 on white and paper) */
:root{--teal-t:#0a6b78}
.lt .kk,.on-light .kk,.steps-s .kk,.lt .nx small,.lt .rl li::before,.lt .ch-count b,.ch1 .ch-count b,.lt .grp h3,.ppl-r,.plans3.lt-plans .pn,.lt .ledger small{color:var(--teal-t)}
.hm-bar .since b{font-size:16px}
/* footer tap targets */
.wx-fbot .legal a,.wx-ftop .top{display:inline-block;padding:11px 0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hm-in{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px}
  .wall-hero{height:500px}
  .svc3{gap:16px}
  .svc h3{font-size:26px}
  .hm-people .pp{grid-template-columns:320px minmax(0,1fr);gap:40px}
  .rvws{gap:16px}
  .plans3{gap:0 28px}
  .plans3 > li + li::before{left:-14px}
  .pp-price b{font-size:46px}
  .steps.four{gap:22px}
  .hm-bar .ch{padding:14px 16px}
  .hm-bar .ch i{font-size:20px}
  .hm-bar .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hm-bar .since{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;border-right:0;border-bottom:1px solid var(--line);padding:12px 0}
  .hm-bar .ch:nth-child(5){border-right:0}
}
@media (max-width:700px){.hm-plans .fine,.rmap-f{font-size:16px}}
@media (max-width:1000px){
  .sel{grid-template-columns:1fr 1fr;gap:22px}
  .sel li:last-child{grid-column:1/-1;max-width:560px}
  .svc3{grid-template-columns:1fr 1fr}
  .svc3 .svc:last-child{grid-column:1/-1}
  .facts{grid-template-columns:1fr 1fr}
  .rvws{grid-template-columns:1fr 1fr}
  .rvws-home .rvw:last-child{grid-column:1/-1}
  .plans3{grid-template-columns:1fr 1fr}
  .plans3 > li.full{grid-column:1/-1}
  .plans3 > li.full::before{display:none}
  .steps.four{grid-template-columns:1fr 1fr;gap:28px 32px}
  .steps.four .rail{display:none}
}
@media (max-width:900px){
  .hm-in{grid-template-columns:1fr;padding-top:112px;padding-bottom:30px;gap:30px;min-height:0}
  .hm .lead{max-width:none}
  /* the wall becomes one full-bleed row of sites under the headline */
  .wall-hero{height:auto;perspective:none;margin:0 calc(-1 * var(--gut));padding-right:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .wall-hero .wall-in{position:static;display:block;transform:none;overflow:hidden;padding:6px 0 10px}
  .wall-hero .wall-row{overflow:hidden}
  .wall-hero .wall-trk{display:flex;flex-direction:row;gap:14px;width:max-content;animation:wallLeft var(--dur,60s) linear infinite}
  .wall-hero .wall-card{width:210px}
  .wall-hero .wall-card:hover{transform:none}
  .hm-bar .wrap{grid-template-columns:1fr 1fr;padding:0}
  .hm-bar .since{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);padding:14px var(--gut)}
  .hm-bar .ch{padding:14px var(--gut);border-bottom:1px solid var(--line)}
  .hm-bar .ch:nth-child(odd){border-right:0}
  .wall-band .wall-card{width:260px}
  .hm-people .pp{grid-template-columns:1fr;gap:30px}
  .team.hm-team{grid-template-columns:1fr 1fr;gap:18px 14px}
  .rev-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .gscore{justify-self:start}
  .duo{height:auto;aspect-ratio:1/0.92;max-width:520px;margin:0 auto;width:100%}
  .duo figcaption{padding:26px 12px 10px}
  .duo figcaption b{font-size:15px}
  .duo-k{display:none}
}
@media (max-width:700px){
  .hm h1{font-size:clamp(32px,10vw,54px)}
  .hm .kicker{font-size:14px}
  .hm-in{padding-top:104px}
  .wall-hero .wall-card{width:176px}
  .hm-bar .wrap{grid-template-columns:1fr}
  .hm-bar .ch{border-right:0 !important;padding:12px var(--gut)}
  .hm-bar .ch:last-child{border-bottom:0}
  .hm-bar .ch i{min-width:58px}
  .svc3{grid-template-columns:1fr;gap:16px}
  .sel{grid-template-columns:1fr;gap:26px}
  .sel li:last-child{grid-column:auto;max-width:none}
  .hm-work .ctas .btn{width:100%;justify-content:center}
  .wall-hero-b .wall-card{width:230px}
  .svc3 .svc:last-child{grid-column:auto}
  .svc3{grid-template-rows:none}
  .svc{display:flex;flex-direction:column}
  .svc-l,.svc-p,.svc-top,.svc h3,.svc-d{align-self:stretch}
  .svc-p{margin-top:auto}
  .svc-top{margin-top:2px}
  .svc > :not(.svc-img),.svc-l{margin-left:18px;margin-right:18px}
  .svc h3{font-size:26px}
  .svc .btn{justify-self:stretch;align-self:stretch;justify-content:center;margin-bottom:22px}
  .svc-all{font-size:16px}
  .facts{grid-template-columns:1fr;margin-bottom:34px}
  .facts li{padding:20px 0 18px}
  .facts b{font-size:56px}
  .facts small{max-width:none}
  .rvws{grid-template-columns:1fr}
  .rvws-home .rvw:last-child{grid-column:auto}
  .rvw{padding:20px 18px 18px}
  .gscore{grid-template-columns:auto 1fr;padding:14px 16px}
  .gscore b{font-size:44px}
  .rev-foot .btn{width:100%;justify-content:center}
  .plans3{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .plans3 > li + li::before{display:none}
  .plans3 > li{display:flex;flex-direction:column;align-items:stretch;padding:22px 0 26px}
  .plans3 > li > *{align-self:stretch}
  .plans3 .btn{align-self:stretch;justify-content:center}
  .pp-price b{font-size:44px}
  .steps.four{grid-template-columns:1fr;gap:26px}
  .steps.four .rail{display:block}
  .hm-close .alt{font-size:14px}
  .wall-band .wall-card{width:220px}
  .wall-band .wall-in{gap:12px}
  .wall-band .wall-trk{gap:12px}
  .switch{left:10px;transform:none;padding-left:8px}
  .switch .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wall-trk{animation:none !important}
  .wall-col{overflow:auto}
  .js .hm .ld,.js .hm .wall.ld,.js .hm .duo.ld{opacity:1 !important;transform:none !important}
  .svc-img img,.svc{transition:none}
}

/* ======================================================================
   Round 4 (Josh, 2026-11-04): reviews as a ruled ledger beside the score,
   the two managers with Tank and Sarge, plans as a rate card, the service
   member discount as a panel in the plans chapter.
   ====================================================================== */
/* ---------- reviews ledger ---------- */
.rev2{display:grid;grid-template-columns:340px minmax(0,1fr);gap:64px;align-items:start}
.rev2-side{position:sticky;top:96px}
.rev2-side p{font-size:17px;color:var(--ink2);margin-top:14px;line-height:1.6}
.gscore2{display:flex;flex-direction:column;align-items:flex-start;margin-top:30px;padding:26px 0 0;border-top:1px solid rgba(15,40,70,.22);text-decoration:none;color:var(--n7)}
.gscore2 b{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(84px,8vw,118px);line-height:.82;letter-spacing:-.04em}
.gscore2 .stars{display:flex;gap:3px;margin-top:16px}
.gscore2 .stars svg{width:22px;height:22px;fill:var(--amber)}
.gscore2 small{display:block;font-size:15px;font-weight:600;color:var(--ink2);margin-top:12px}
.gscore2 i{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 0;font-style:normal;font-weight:700;font-size:15px;color:var(--n7);border-bottom:2px solid var(--teal-b);transition:color .2s}
.gscore2 i svg{width:16px;height:16px;transition:transform .25s}
.gscore2:hover i{color:var(--teal-t)}
.gscore2:hover i svg{transform:translateX(4px)}
.rev-note{font-size:14px;color:var(--ink2);margin-top:22px}
.rvl{list-style:none;margin:0;padding:0;border-top:1px solid rgba(15,40,70,.22)}
.rvl .rvw{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 44px;padding:30px 0 32px;background:none;border:0;border-bottom:1px solid rgba(15,40,70,.14);border-radius:0;color:var(--ink);position:relative}
.rvl .rvw::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--n7);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.rvl .rvw.in::before,.rvl .rvw.swap::before{width:44px}
.rvl .rvw-h{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:8px}
.rvl .rvw-h .stars svg{width:15px;height:15px}
.rvl .rvw-h small{font-size:13px;color:var(--ink2)}
.rvl .rvw footer{grid-column:1;grid-row:2;margin:0;padding-top:14px;align-self:start}
.rvl .rvw footer b{font-size:18px}
.rvl .rvw blockquote{grid-column:2;grid-row:1/3;margin:0;position:relative;padding-left:0;font-family:var(--disp);font-stretch:106%;font-weight:600;font-size:21px;line-height:1.4;color:var(--n7)}
.rvl .rvw blockquote p + p{margin-top:12px}
.rvl .rvw .more{font-family:var(--sans);font-size:15px;margin-top:12px}
.js .rvl .rvw.swap{animation:rvIn .6s cubic-bezier(.2,.8,.2,1) both}

/* ---------- the two of them ---------- */
.pp2{display:grid;grid-template-columns:minmax(0,1fr) 300px 300px;gap:48px;align-items:start}
.pp2-txt .kk{margin-bottom:12px}
.pp2-txt h2{font-size:42px;color:var(--n7);font-stretch:115%}
.pp2-txt p{font-size:18px;line-height:1.65;color:var(--ink2);margin-top:18px;max-width:420px}
.pp2-txt .btn{margin-top:28px}
.duo2{display:contents;list-style:none;margin:0;padding:0}
.duo2 li:last-child{margin-top:56px}
.duo2 figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--paper);box-shadow:0 40px 60px -40px rgba(7,20,38,.7)}
.duo2 img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.duo2 li:hover img{transform:scale(1.0)}
.duo2 figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(180deg,rgba(7,20,38,0),rgba(7,20,38,.94))}
.duo2 figcaption b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:19px;line-height:1.15;color:#fff}
.duo2 figcaption span{display:block;font-size:13.5px;font-weight:600;color:var(--teal-s);margin-top:4px}
.duo2 figcaption::before{content:"";position:absolute;left:18px;top:30px;width:28px;height:2px;background:var(--teal-b)}

/* ---------- rate card ---------- */
.rate{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.rate > li{display:grid;grid-template-columns:48px minmax(0,1.05fr) minmax(0,1fr) 250px auto;gap:0 32px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.rate .pn{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--teal-s);align-self:start;padding-top:8px}
.rate .pk{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--amber);margin-bottom:6px}
.rate h3{font-size:30px;font-stretch:115%;color:#fff}
.rate .rt-n p{font-size:16px;color:var(--body);margin-top:6px}
.rt-l{list-style:none;margin:0;padding:0 0 0 24px;border-left:1px solid var(--line)}
.rt-l li{position:relative;padding:4px 0 4px 18px;font-size:15.5px;color:var(--body)}
.rt-l li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:var(--teal-b)}
.rt-p{margin:0;color:#fff}
.rt-p small{display:block;font-size:13px;color:rgba(255,255,255,.6)}
.rt-p b{font-family:var(--disp);font-stretch:122%;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em}
.rt-p span{font-size:15px;color:rgba(255,255,255,.75);margin-left:4px;white-space:nowrap}
.rt-p em{display:block;font-style:normal;font-size:13.5px;color:rgba(255,255,255,.62);margin-top:4px}
.rate .btn{justify-self:end}
.rate > li.full{background:var(--n7);margin:0 -28px;padding:30px 28px;border-radius:4px;border-bottom:0;box-shadow:inset 3px 0 0 var(--teal-b)}
.rate > li.full h3{color:var(--teal-s)}
.rate > li.full .rt-l{border-left-color:var(--line2)}
.rate > li.full + li{border-top:1px solid var(--line)}
.hm-plans .fine{margin-top:26px}

/* ---------- service member discount panel ---------- */
.vet-only{padding:0 0 64px}
.vet-only .vet{margin-top:0}
.vet{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:32px;align-items:center;margin-top:40px;padding:30px 32px;border:1px solid rgba(232,138,42,.45);border-radius:4px;background:rgba(7,20,38,.5)}
.vet-n b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:84px;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px var(--amber)}
.vet-n b i{font-style:normal;font-size:.55em;vertical-align:top;margin-left:2px}
.vet-n small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--amber);margin-top:10px}
.vet-t .kk{color:var(--amber);margin-bottom:8px}
.vet-t h3{font-size:24px;font-stretch:112%;color:#fff;line-height:1.15}
.vet-t p{font-size:15.5px;line-height:1.55;color:var(--body);margin-top:8px;max-width:620px}
.vet .btn{white-space:normal;text-align:center}

@media (max-width:1180px){
  .rev2{grid-template-columns:300px minmax(0,1fr);gap:44px}
  .rvl .rvw{grid-template-columns:170px minmax(0,1fr);gap:6px 30px}
  .rvl .rvw blockquote{font-size:19px}
  .pp2{grid-template-columns:minmax(0,1fr) 260px 260px;gap:32px}
  .rate > li{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 200px auto;gap:0 22px}
  .rate h3{font-size:26px}
  .rt-p b{font-size:38px}
  .vet{grid-template-columns:160px minmax(0,1fr) auto;gap:24px}
  .vet-n b{font-size:68px}
}
@media (max-width:1000px){
  .rate > li.full{margin:0 calc(-1 * var(--gut));padding:24px var(--gut);border-radius:0}
  .rate > li{grid-template-columns:40px minmax(0,1fr) 210px;grid-template-rows:auto auto auto;gap:14px 22px}
  .rate .pn{grid-row:1}
  .rate .rt-n{grid-column:2;grid-row:1}
  .rt-p{grid-column:3;grid-row:1;justify-self:end;text-align:right}
  .rt-l{grid-column:2/-1;grid-row:2;border-left:0;padding-left:0;display:flex;flex-wrap:wrap;gap:4px 22px}
  .rate .btn{grid-column:2/-1;grid-row:3;justify-self:start}
  .vet{grid-template-columns:140px minmax(0,1fr)}
  .vet .btn{grid-column:2;justify-self:start}
}
@media (max-width:900px){
  .rev2{grid-template-columns:1fr;gap:30px}
  .rev2-side{position:static}
  .gscore2{margin-top:20px;padding-top:20px}
  .gscore2 b{font-size:72px}
  .pp2{grid-template-columns:1fr 1fr;gap:28px 20px}
  .pp2-txt{grid-column:1/-1}
  .pp2-txt p{max-width:none}
  .duo2 li:last-child{margin-top:0}
}
@media (max-width:700px){
  .rvl .rvw{grid-template-columns:1fr;grid-template-rows:auto;gap:12px;padding:24px 0 26px}
  .rvl .rvw-h{grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between}
  .rvl .rvw blockquote{grid-column:1;grid-row:auto;font-size:18px}
  .rvl .rvw footer{grid-column:1;grid-row:auto;padding-top:0}
  .rvl .rvw footer b{font-size:16px}
  .rev-note{font-size:16px}
  .pp2{grid-template-columns:1fr}
  .pp2-txt h2{font-size:34px}
  .duo2 figure{max-width:420px}
  .duo2 figcaption b{font-size:17px}
  .rate > li{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .rate .pn,.rate .rt-n,.rt-p,.rt-l,.rate .btn{grid-column:1;grid-row:auto}
  .rt-p{justify-self:start;text-align:left}
  .rt-l{flex-direction:column;gap:2px}
  .rate .btn{justify-self:stretch;justify-content:center}
  .rate > li.full{margin:0 calc(-1 * var(--gut));padding:24px var(--gut);border-radius:0}
  .vet{grid-template-columns:1fr;gap:18px;padding:22px 20px;margin-top:30px}
  .vet-n{display:flex;align-items:center;gap:14px}
  .vet-n b{font-size:56px}
  .vet-n small{margin-top:0}
  .vet .btn{grid-column:1;justify-self:stretch}
  .vet-t h3{font-size:22px}
  .vet-t p{font-size:16px}
}



/* ======================================================================
   Company pages, option A (2026-11-04): Reviews, Our work, The team,
   Plans & pricing, Contact. Shares the subpage hero, chapters, ruled
   lists and closing from sub.css; the pieces below are page signatures.
   ====================================================================== */

/* ---------- reviews: big Google score in the hero ---------- */
.gbig{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:#fff;padding:34px 36px 30px;background:rgba(7,20,38,.6);border:1px solid var(--line2);border-radius:4px;max-width:420px;margin-left:auto;transition:border-color .2s,background-color .2s}
.gbig:hover{border-color:var(--teal-s);background:rgba(11,29,54,.9)}
.gbig small{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--teal-s)}
.gbig b{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(96px,10vw,150px);line-height:.85;letter-spacing:-.04em;margin-top:14px}
.gbig .stars{display:flex;gap:3px;margin-top:14px}
.gbig .stars svg{width:26px;height:26px;fill:var(--amber)}
.gbig em{font-style:normal;font-size:15.5px;color:rgba(255,255,255,.75);margin-top:12px;line-height:1.45}
.gbig i{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:15px;color:#fff;border-bottom:1px solid rgba(122,217,227,.5);padding-bottom:2px}
.gbig i svg{width:16px;height:16px;color:var(--teal-s);transition:transform .25s}
.gbig:hover i svg{transform:translateX(4px)}
.rvws-all{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.rvws-all .rvw blockquote{font-size:16px}
.ch-count a{color:inherit;font-weight:600;display:inline-block;padding:10px 0;margin:-10px 0}
.ch-count a svg{width:16px;height:16px;vertical-align:middle;margin-left:4px}

/* client logo strip, full bleed, drifting */
.logos{overflow:hidden;padding:10px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-trk{display:flex;align-items:center;gap:64px;width:max-content;padding:0 32px;animation:wallLeft 60s linear infinite}
.logos:hover .logos-trk{animation-play-state:paused}
.logos-trk img{height:44px;width:auto;opacity:.85;flex:none}
.logos-trk img[alt="TradesPeople"],.logos-trk img[alt=""]:nth-child(11){height:30px}
.logos + .wrap .nx{margin-top:40px}
.nx.dk{border-top-color:var(--line2)}
.nx.dk a{color:#fff;border-bottom-color:var(--line)}
.nx.dk a + a{border-left-color:var(--line)}
.nx.dk small{color:var(--teal-s)}
.nx.dk span{color:var(--body)}
.nx.dk svg{color:#fff}
.nx.dk a:hover strong{color:var(--teal-s)}

/* ---------- our work: fanned sites in the hero ---------- */
.fan{position:relative;height:460px}
.fan-c{position:absolute;margin:0;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--n7);outline:1px solid var(--line2);box-shadow:0 40px 60px -30px rgba(0,0,0,.9);cursor:pointer;font:inherit;color:inherit;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fan-c img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;pointer-events:none}
.fan-c span{position:absolute;left:0;bottom:0;background:var(--n9);color:var(--teal-s);font-size:13px;font-weight:600;padding:5px 9px;border-radius:0 3px 0 0}
.fan .f1{left:0;bottom:0;width:72%;aspect-ratio:1000/733;z-index:3}
.fan .f2{right:0;top:0;width:60%;aspect-ratio:1000/625;z-index:2;transform:rotate(3deg)}
.fan .f3{left:18%;top:8%;width:52%;aspect-ratio:1000/625;z-index:1;transform:rotate(-4deg);opacity:.85}
.fan:hover .f2{transform:rotate(3deg) translateY(-6px)}
.fan:hover .f1{transform:translateY(-4px)}
.js .sh .fan .f1,.js .sh .fan .f2,.js .sh .fan .f3{animation:ld 1s cubic-bezier(.2,.8,.2,1) both}
.js .sh .fan .f3{animation-delay:.3s}.js .sh .fan .f2{animation-delay:.45s}.js .sh .fan .f1{animation-delay:.6s}
/* before and after, two up */
.ba2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:28px;align-items:end;margin-bottom:34px}
.ba2 figure{margin:0;position:relative}
.ba2 img{width:100%;height:auto;border-radius:4px;border:1px solid rgba(15,40,70,.2);box-shadow:0 30px 50px -36px rgba(7,20,38,.6);display:block}
.ba2 figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15px;color:var(--ink2)}
.ba2 figcaption b{font:700 12px/1 var(--sans);letter-spacing:.1em;padding:6px 8px;border-radius:2px;background:var(--n7);color:#fff}
.ba2-a figcaption b{background:var(--teal-b);color:var(--n9)}
.ba2-b img{filter:saturate(.8)}
/* project cards */
.pjs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pjc{display:flex;flex-direction:column;background:var(--n9);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.pjc:hover{transform:translateY(-4px);border-color:var(--line2)}
.pjc-img{display:block;width:100%;aspect-ratio:1000/733;margin:0;padding:0;border:0;background:var(--n7);cursor:pointer;overflow:hidden;position:relative}
.pjc-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pjc:hover .pjc-img img{transform:scale(1.05)}
.pjc-img::after{content:"+";position:absolute;right:10px;top:10px;width:30px;height:30px;display:grid;place-items:center;border-radius:3px;background:rgba(7,20,38,.85);color:var(--teal-s);font:700 18px/1 var(--sans);border:1px solid var(--line2)}
.pjc-img:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}
.pjc-b{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.pjc-b small{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--amber)}
.pjc-b h3{font-size:22px;font-stretch:112%;color:#fff;margin-top:8px;line-height:1.12}
.pjc-b p{font-size:15px;line-height:1.5;color:var(--body);margin-top:8px}
.pjc-go{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.pjc-go a,.pjc-go button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:3px;font:700 14px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s}
.pjc-go a{background:var(--teal-b);color:var(--n9);border:1px solid var(--teal-b)}
.pjc-go a:hover{background:var(--teal-s);border-color:var(--teal-s)}
.pjc-go a svg{width:14px;height:14px}
.pjc-go button{background:transparent;color:#fff;border:0;border-bottom:2px solid rgba(122,217,227,.5);border-radius:0;padding:0 2px;font-weight:600}
.pjc-go button:hover{color:var(--teal-s);border-bottom-color:var(--teal-s)}
.js .pjc{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s}
.js .pjc.in{opacity:1;transform:none}
.js .pjc.in:hover{transform:translateY(-4px)}
/* three quotes in a row */
.qt3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;border-top:1px solid rgba(15,40,70,.22)}
.qt3 li{position:relative;padding:28px 0 26px;border-bottom:1px solid rgba(15,40,70,.14)}
.qt3 li::before{content:"\201C";position:absolute;left:-4px;top:14px;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:90px;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(15,40,70,.4)}
.qt3 blockquote{margin:36px 0 0;font-family:var(--disp);font-stretch:106%;font-weight:600;font-size:20px;line-height:1.35;color:var(--n7)}
.qt3 cite{display:block;font-style:normal;font-size:15px;color:var(--ink2);margin-top:18px}
.qt3 cite b{display:block;color:var(--ink);font-weight:700}

/* ---------- the team ---------- */
.ppl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:36px 40px}
.ppl > li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start}
.ppl-ph{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--paper)}
.ppl-ph img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ppl-ph span{position:absolute;left:0;bottom:0;padding:6px 9px;background:var(--n9);color:var(--teal-s);font:700 12px/1 var(--sans);letter-spacing:.08em;border-radius:0 3px 0 0}
.ppl .kk{margin-bottom:8px}
.ppl h3{font-size:clamp(28px,2.6vw,36px);font-stretch:115%;line-height:1.02}
.ppl-r{font-size:15px;font-weight:600;color:var(--teal-t);margin-top:6px}
.ppl.dk .ppl-r{color:var(--teal-s)}
.ppl .body{font-size:16px;margin-top:14px;line-height:1.6}
.ppl-t{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ppl-t li{position:relative;padding-left:14px;font-size:14px;font-weight:600;color:var(--n7)}
.ppl-t li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--teal-b)}
.ppl.dk .ppl-t li{color:#fff}
.ppl.dk h3{color:#fff}
.dogs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:56px;padding-top:40px;border-top:1px solid var(--line2)}
.dogs h3{font-size:30px;font-stretch:115%;color:#fff}
.dogs .body{margin-top:12px}
.dogs-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.dogs-l li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.dogs-l b{font-family:var(--disp);font-stretch:110%;font-weight:700;color:#fff}
.dogs-l span{color:var(--body)}

/* ---------- plans ---------- */
.tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:460px;margin-left:auto}
.tiers li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:center;padding:18px 22px;border:1px solid var(--line2);border-radius:4px;background:rgba(11,29,54,.75)}
.tiers li i{grid-row:1/3;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:30px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--teal-s)}
.tiers li b{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:21px;color:#fff;line-height:1.1}
.tiers li span{font-size:14px;color:rgba(255,255,255,.72);line-height:1.4}
.tiers .t1{margin-left:0}
.tiers .t2{margin-left:28px}
.tiers .t3{margin-left:56px;border-color:var(--teal-b);background:var(--n7)}
.tiers .t3 b{color:var(--teal-s)}
.js .sh .tiers li{opacity:0;transform:translateY(16px);animation:ld .8s cubic-bezier(.2,.8,.2,1) both}
.js .sh .tiers .t1{animation-delay:.35s}.js .sh .tiers .t2{animation-delay:.5s}.js .sh .tiers .t3{animation-delay:.65s}
.plans3.lt-plans{border-top-color:rgba(15,40,70,.28)}
.plans3.lt-plans > li{border-bottom-color:rgba(15,40,70,.14)}
.plans3.lt-plans > li + li::before{background:rgba(15,40,70,.14)}
.plans3.lt-plans .pn{color:var(--teal-t)}
.plans3.lt-plans .pk{color:#b4510c}
.plans3.lt-plans h3{color:var(--n7)}
.plans3.lt-plans li.full h3{color:var(--n7)}
.plans3.lt-plans .pd{color:var(--ink2)}
.plans3.lt-plans .pp-price{color:var(--n7)}
.plans3.lt-plans .pp-price small,.plans3.lt-plans .pp-price span,.plans3.lt-plans .pp-price em{color:var(--ink2)}
.plans3.lt-plans ul{border-top-color:rgba(15,40,70,.22)}
.plans3.lt-plans ul li{border-bottom-color:rgba(15,40,70,.1);color:var(--ink2)}
.plans3.lt-plans ul li::before{background:var(--teal-d)}
.plans3.lt-plans li.full{background:var(--n8);color:#fff;margin:-1px -22px 0;padding:26px 22px 30px;border-radius:4px;border-bottom:0}
.plans3.lt-plans li.full .pn,.plans3.lt-plans li.full .pp-price small,.plans3.lt-plans li.full .pp-price span,.plans3.lt-plans li.full .pp-price em{color:rgba(255,255,255,.7)}
.plans3.lt-plans li.full .pk{color:var(--amber)}
.plans3.lt-plans li.full h3{color:var(--teal-s)}
.plans3.lt-plans li.full .pd,.plans3.lt-plans li.full ul li{color:var(--body)}
.plans3.lt-plans li.full .pp-price{color:#fff}
.plans3.lt-plans li.full ul{border-top-color:var(--line2)}
.plans3.lt-plans li.full ul li{border-bottom-color:var(--line)}
.plans3.lt-plans li.full ul li::before{background:var(--teal-b)}
.plans3.lt-plans li.full::before{display:none}
.plans3.lt-plans + .fine{color:var(--ink2)}
.chap.lt .fine{margin-top:24px;font-size:14px;color:var(--ink2);max-width:900px}
.ledger2{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.ledger2 li{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.ledger2 h3{font-size:22px;font-stretch:112%;color:#fff}
.ledger2 h3 a{text-decoration:none;color:inherit;transition:color .2s}
.ledger2 h3 a:hover{color:var(--teal-s)}
.ledger2 p{font-size:15.5px;color:var(--body);margin-top:6px;max-width:720px}
.ledger2 b{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:20px;color:var(--teal-s);text-align:right}

/* ---------- contact ---------- */
.hrs{margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;max-width:560px}
.hrs div{padding-top:12px;border-top:1px solid var(--line2)}
.hrs dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--teal-s)}
.hrs dd{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--body)}
.sh-contact .sh-in{align-items:start}
.cx-inline{background:var(--n85);border:1px solid var(--line2);border-radius:4px;padding:28px 28px 24px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);scroll-margin-top:90px}
.cx-h{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:28px;line-height:1.1;color:#fff;margin:8px 0 14px}
.cx-inline .cx-done .cx-lead a{color:#fff}
.bigtel{display:inline-block;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:clamp(34px,3.8vw,52px);line-height:1;letter-spacing:-.02em;color:var(--n7);text-decoration:none;margin:8px 0 18px;border-bottom:3px solid var(--teal-b);padding-bottom:6px}
.bigtel:hover{color:var(--teal-d)}
.chap.lt .body a{color:var(--n7);font-weight:600;display:inline-block;padding:8px 0}
.area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:center;padding:28px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line)}
.area h3{font-size:14px;font-family:var(--sans);font-weight:700;letter-spacing:.08em;color:var(--teal-s);grid-column:1/-1}
.area p{font-size:17px;line-height:1.65;color:#fff;max-width:760px}
.area + .nx{margin-top:40px}

.sh h1.sm{font-size:clamp(36px,3.9vw,58px)}
.ch-count a svg{display:inline-block}
@media (max-width:700px){.sh h1.sm{font-size:clamp(32px,9.6vw,46px)}}
/* tap targets and phone type sizes */
.crumbs a,.crumbs span{display:inline-block;padding:10px 0;margin:-10px 0}
@media (max-width:700px){.rev-foot p,.hm-close .alt,.chap .fine,.chap.lt .fine{font-size:16px}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .rvws-all{grid-template-columns:1fr 1fr}
  .pjs{grid-template-columns:1fr 1fr}
  .ppl{grid-template-columns:1fr;gap:30px}
  .ppl > li{grid-template-columns:180px minmax(0,1fr)}
  .fan{height:400px}
}
@media (max-width:900px){
  .gbig{margin:0 auto 0 0}
  .fan{height:auto;aspect-ratio:1/0.8;max-width:560px}
  .ba2{grid-template-columns:1fr;gap:22px}
  .qt3{grid-template-columns:1fr;gap:0}
  .qt3 li{padding:22px 0}
  .qt3 li::before{font-size:70px}
  .qt3 blockquote{margin-top:26px;font-size:19px}
  .dogs{grid-template-columns:1fr;gap:20px}
  .tiers{margin:0 auto 0 0}
  .tiers .t2{margin-left:12px}
  .tiers .t3{margin-left:24px}
  .tiers li{padding:14px 16px}
  .ledger2 li{grid-template-columns:1fr;gap:10px}
  .ledger2 b{text-align:left}
  .plans3.lt-plans li.full{margin:14px 0 0;padding:22px 20px 26px}
  .area{grid-template-columns:1fr}
  .sh-contact .sh-vis{max-width:none}
  .hrs{max-width:none}
}
@media (max-width:700px){
  .rvws-all{grid-template-columns:1fr}
  .gbig{padding:24px 22px 22px;max-width:none;width:100%}
  .gbig b{font-size:84px}
  .logos-trk{gap:40px}
  .logos-trk img{height:34px}
  .pjs{grid-template-columns:1fr;gap:16px}
  .pjc-go a{flex:1;justify-content:center}
  .ppl > li{grid-template-columns:1fr;gap:16px}
  .ppl-ph{max-width:240px}
  .ppl h3{font-size:30px}
  .hrs{grid-template-columns:1fr}
  .cx-inline{padding:20px 16px 18px}
  .cx-h{font-size:24px}
  .bigtel{font-size:32px}
}

/* ---------- city, state and region pages (geo.py) ---------- */
.sh h1.geo{font-size:clamp(34px,3.4vw,52px);font-stretch:115%;line-height:1.05}
.sh h1 .hl{color:var(--teal-s)}
.place{position:relative;padding:30px 32px 28px;background:rgba(7,20,38,.6);border:1px solid var(--line2);border-radius:4px;max-width:440px;margin-left:auto}
.place .pin{position:absolute;right:24px;top:24px;width:40px;height:40px;color:var(--teal-s)}
.place small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--teal-s)}
.place h2{font-size:clamp(30px,3vw,42px);font-stretch:120%;color:#fff;margin-top:12px;padding-right:48px}
.place p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.75);margin-top:10px}
.areas{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line2)}
.areas li{padding:9px 0 9px 20px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:#fff;position:relative}
.areas li::before{content:"";position:absolute;left:2px;top:16px;width:7px;height:7px;background:var(--teal-b)}
.geo-bar .since{flex-direction:column;align-items:flex-start;gap:4px}
.geo-bar .since b{font-size:14px;font-family:var(--sans);font-weight:600;line-height:1.5}
.geo-bar .since a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(122,217,227,.5)}
.geo-bar .since a:hover{color:var(--teal-s)}
.geo-bar .ch i{font-size:22px}
.geo-bar .ch > span{font-weight:500;font-size:14px;color:rgba(255,255,255,.8)}
/* the story: the text as a two-column band (heading left, paragraph right), the who-we-build-for list full width in three columns.
   Replaces the old split that left a tall empty column beside a short story (Josh, 2026-11-04). */
.geo-story-t{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 64px;align-items:start;padding-bottom:36px;border-bottom:1px solid var(--line)}
.lt .geo-story-t{border-bottom-color:rgba(15,40,70,.18)}
.geo-story-t .kk{grid-column:1/-1;margin-bottom:0}
.geo-story-t h2{font-size:clamp(30px,3vw,44px);font-stretch:115%;line-height:1.02}
.geo-story-t .body{font-size:17.5px;line-height:1.65;margin:0}
.geo-story-t .body + .body{margin-top:14px}
.geo-story-t .body:nth-of-type(1){grid-column:2;grid-row:2}
.geo-story-t .body:nth-of-type(n+2){grid-column:2}
.geo-card{padding:34px 0 0}
.geo-card h3{font-size:24px;font-stretch:112%;line-height:1.15;margin-bottom:18px}
.geo-card .kk{margin-bottom:8px}
.geo-card .rl li{padding:16px 0 18px}
.geo-card .rl h4{font-size:18px;font-stretch:112%;font-family:var(--disp);font-weight:700;color:#fff}
.lt .geo-card .rl h4{color:var(--n7)}
.geo-card .rl p{font-size:15.5px;margin-top:4px}
@media (max-width:900px){.geo-story-t{grid-template-columns:1fr;gap:12px}.geo-story-t .body:nth-of-type(1),.geo-story-t .body:nth-of-type(n+2){grid-column:1;grid-row:auto}.geo-card .rl{--c:2 !important}}
@media (max-width:700px){.geo-card .rl{--c:1 !important}.geo-story-t .body{font-size:16.5px}}
.geo-card .rl li::before{display:none}
.geo-card .body{margin-top:16px;font-size:16px}
.sx.geo-sx li{grid-template-columns:64px minmax(0,1fr) 200px}
.sx.geo-sx h3{font-size:23px}
.towns{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--line2)}
.lt .towns{border-top-color:rgba(15,40,70,.22)}
.towns li{border-bottom:1px solid var(--line)}
.lt .towns li{border-bottom-color:rgba(15,40,70,.12)}
.towns a,.towns div{position:relative;display:block;padding:20px 40px 20px 0;text-decoration:none;color:inherit}
.towns small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--teal-s)}
.lt .towns small{color:var(--teal-t)}
.towns b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:21px;line-height:1.15;margin-top:6px;color:#fff}
.lt .towns b{color:var(--n7)}
.towns span{display:block;font-size:15px;line-height:1.5;color:var(--body);margin-top:6px}
.lt .towns span{color:var(--ink2)}
.towns em{display:block;font-size:13px;color:rgba(255,255,255,.55);margin-top:8px}
.lt .towns em{color:var(--ink2)}
.towns a svg{position:absolute;right:6px;top:24px;width:22px;height:22px;color:var(--teal-s);transition:transform .25s}
.lt .towns a svg{color:var(--n7)}
.towns a:hover svg{transform:translateX(5px)}
.towns a:hover b{color:var(--teal-s)}
.lt .towns a:hover b{color:var(--teal-d)}
.chap .sec-h + .body{margin-top:-10px}
.chap.n8 .body,.chap.n9 .body{color:var(--body)}
@media (max-width:1180px){.sx.geo-sx li{grid-template-columns:56px minmax(0,1fr) 190px}.towns{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.place{margin:0 auto 0 0}.geo-split{grid-template-columns:1fr}.geo-bar .since{grid-column:1/-1}.sx.geo-sx li{grid-template-columns:56px minmax(0,1fr)}.sx.geo-sx .go{grid-column:2}}
@media (max-width:700px){.towns{grid-template-columns:1fr}.place{padding:22px 20px}.place h2{font-size:30px}.sh h1.geo{font-size:clamp(28px,8.6vw,40px)}.geo-card{padding:20px 18px}.sx.geo-sx li{grid-template-columns:minmax(0,1fr)}.sx.geo-sx .go{grid-column:auto}}
.towns.stl{grid-template-columns:repeat(3,minmax(0,1fr))}
.towns.cl3{grid-template-columns:repeat(2,minmax(0,1fr))}
.towns.stl span b,.towns span b{color:inherit;display:inline;font:inherit;font-weight:700;margin:0}
.towns em{font-style:normal}
@media (max-width:1180px){.towns.stl{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.towns.stl,.towns.cl3{grid-template-columns:1fr}}
.towns div b a{color:inherit;text-decoration:none;border-bottom:2px solid rgba(122,217,227,.5)}
.towns div b a:hover{color:var(--teal-s)}
.lt .towns div b a:hover{color:var(--teal-d)}
.towns em a{color:inherit;text-decoration:underline;text-decoration-color:rgba(122,217,227,.5);text-underline-offset:3px;display:inline-block;padding:4px 0}
.towns em a:hover{color:var(--teal-s)}
.lt .towns em a:hover{color:var(--teal-d)}
@media (max-width:700px){.ctas .btn{white-space:normal;text-align:center;line-height:1.2}}
.lt .sx .n{color:rgba(15,40,70,.72)}
.towns div b a{display:inline-block;padding:6px 0;margin:-6px 0}
/* steps on a navy chapter */
.n8 .steps h3,.n9 .steps h3{color:#fff}
.n8 .steps p,.n9 .steps p{color:var(--body)}
.n8 .steps .rail,.n9 .steps .rail{background:var(--line)}
.n8 .steps .rail i,.n9 .steps .rail i{background:var(--teal-b)}
.n8 .steps .sn,.n9 .steps .sn{background:var(--n8);border-color:var(--line2);color:#fff}
.n9 .steps .sn{background:var(--n9)}
.n8 .steps.in .sn,.n9 .steps.in .sn{background:var(--teal-b);border-color:var(--teal-b);color:var(--n9)}

/* ---------- legal pages ---------- */
.sh-legal .sh-in.one{grid-template-columns:minmax(0,760px);padding-bottom:40px;min-height:0}
.prose{max-width:760px;color:var(--ink);font-size:17px;line-height:1.7}
.prose h2{font-size:26px;font-stretch:112%;color:var(--n7);margin:38px 0 12px;padding-top:22px;border-top:1px solid rgba(15,40,70,.18)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:20px;font-stretch:112%;color:var(--n7);margin:24px 0 8px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:6px 0}
.prose a{color:var(--n7);font-weight:600}
.prose strong{font-weight:700}

/* ---------- reviews page, round 8 (Josh, 2026-11-05): reskin. Star chart hero, editorial spread, register by year, mentions ---------- */
.sh-rx .sh-in{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:end}
.rx-google{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:30px;text-decoration:none;color:#fff;font-size:15px;font-weight:600}
.rx-google b{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.03em}
.rx-google .stars{display:flex;gap:2px;flex:none}
.rx-google .stars svg{width:16px;height:16px;fill:var(--amber);flex:none}
.rx-gt{white-space:nowrap;border-bottom:1px solid rgba(122,217,227,.5);padding-bottom:2px}
.rx-google > svg{width:15px;height:15px;color:var(--teal-s);transition:transform .25s;flex:none}
.rx-google:hover > svg{transform:translateX(4px)}
/* the chart: one star per review, columns by year, oldest at the bottom */
.rx-chart{margin:0;padding:0 0 4px}
.rx-cols{list-style:none;margin:0;padding:0 0 0 2px;display:grid;grid-template-columns:repeat(var(--c,9),minmax(0,1fr));gap:0 6px;align-items:end;border-bottom:1px solid var(--line2);position:relative}
.rx-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.rx-stk{display:flex;flex-direction:column-reverse;gap:2px;padding-bottom:10px}
.rx-st{appearance:none;background:none;border:0;padding:3px;margin:0;cursor:pointer;line-height:0;position:relative;border-radius:3px;transform-origin:center;transition:transform .2s}
.rx-st svg{width:30px;height:30px;fill:var(--amber);filter:drop-shadow(0 2px 6px rgba(232,138,42,.25))}
.js .rx-st{opacity:0;transform:scale(.4);animation:rxStar .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.5s + var(--i) * 45ms)}
@keyframes rxStar{to{opacity:1;transform:scale(1)}}
.rx-st:hover,.rx-st:focus-visible{transform:scale(1.22);z-index:2}
.rx-st::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--n9);font:600 13px/1.2 var(--sans);padding:7px 10px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.rx-st:hover::after,.rx-st:focus-visible::after{opacity:1}
.rx-col:first-child .rx-st::after,.rx-col:nth-child(2) .rx-st::after{left:0;transform:none}
.rx-col:last-child .rx-st::after,.rx-col:nth-last-child(2) .rx-st::after{left:auto;right:0;transform:none}
.rx-yr .s{display:none}
.rx-yr{display:block;padding:10px 0 0;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:14px;color:var(--teal-s);border-top:1px solid transparent;margin-bottom:-11px;padding-bottom:12px}
.rx-chart figcaption{font-size:14px;color:rgba(255,255,255,.7);margin-top:20px;max-width:440px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.js .rx-st{animation:none;opacity:1;transform:none}}
/* 01 the spread */
.rx-spread{border-top:1px solid var(--lline)}
.rx-f{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:center;margin:0;padding:52px 0;border-bottom:1px solid var(--lline)}
.rx-f.img-l{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.rx-f.img-l .rx-q{order:2}
.rx-bq{margin:0}
.rx-pull{font-family:var(--disp);font-stretch:108%;font-weight:600;font-size:clamp(21px,1.9vw,26px);line-height:1.3;color:var(--n7);hanging-punctuation:first}
.rx-rest{font-size:17px;line-height:1.65;color:var(--ink2);margin-top:18px;max-width:600px}
.rx-f figcaption,.rx-f2 figcaption{margin-top:22px;font-size:15px;color:var(--ink2);display:grid;grid-template-columns:auto;gap:2px}
.rx-f figcaption b,.rx-f2 figcaption b{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:17px;color:var(--ink)}
.rx-f figcaption small,.rx-f2 figcaption small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13.5px;margin-top:6px}
.rx-f figcaption .stars,.rx-f2 figcaption .stars,.rx-meta .stars{display:inline-flex;gap:1px}
.rx-f figcaption .stars svg,.rx-f2 figcaption .stars svg,.rx-meta .stars svg{width:14px;height:14px;fill:var(--amber)}
.rx-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:15px;color:var(--n7);text-decoration:none;border-bottom:1.5px solid rgba(15,40,70,.35);padding-bottom:3px;transition:border-color .2s,color .2s}
.rx-go svg{width:16px;height:16px;transition:transform .25s}
.rx-go:hover{color:var(--teal-d);border-color:var(--teal-d)}
.rx-go:hover svg{transform:translateX(4px)}
.rx-shot{position:relative;margin:0 14px 14px 0}
.rx-shot::before{content:"";position:absolute;inset:16px -14px -14px 16px;background:var(--n8);border-radius:4px}
.rx-shot img{position:relative;width:100%;height:auto;border-radius:4px;box-shadow:0 18px 44px rgba(7,20,38,.22)}
.rx-shot span{position:absolute;left:14px;bottom:0;transform:translateY(50%);background:#fff;color:var(--n7);font-size:13px;font-weight:600;padding:7px 12px;border-radius:3px;box-shadow:0 4px 14px rgba(7,20,38,.14);z-index:1}
.rx-f.img-l .rx-shot{margin:0 0 14px 14px}
.rx-f.img-l .rx-shot::before{inset:16px 16px -14px -14px}
.rx-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;border-bottom:1px solid var(--lline)}
.rx-f2{position:relative;margin:0;padding:52px 0 48px 0}
.rx-f2 + .rx-f2{padding-left:72px;margin-left:-72px;border-left:1px solid var(--lline)}
.rx-f2 .rx-pull{font-size:clamp(20px,1.7vw,23px);font-weight:600}
.rx-f2 .rx-pull::before{content:"\201C";display:block;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:90px;line-height:.6;height:40px;color:transparent;-webkit-text-stroke:1.2px rgba(15,40,70,.4);margin-bottom:10px}
.rx-f2 .rx-rest{font-size:16px}
/* 02 the register */
.rx-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.rx-g{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 40px;border-bottom:1px solid var(--line2)}
.rx-gy{padding:28px 0 24px;position:sticky;top:80px;align-self:start}
.rx-gy h3{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:40px;line-height:.9;letter-spacing:-.03em;color:#fff}
.rx-gy small{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--teal-s)}
.rx-rows{list-style:none;margin:0;padding:0}
.rx-row{display:grid;grid-template-columns:96px minmax(0,1fr) 220px;grid-template-rows:auto auto;gap:0 32px;align-items:start;padding:20px 0;border-top:1px solid var(--line)}
.rx-row:first-child{border-top:0}
.rx-meta{display:flex;flex-direction:column;gap:4px;padding-top:4px;grid-row:1}
.rx-meta small{font-size:12.5px;color:rgba(255,255,255,.55);font-weight:600;letter-spacing:.03em}
.rx-row blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--body);position:relative;grid-row:1;grid-column:2}
.rx-row blockquote p + p{margin-top:10px}
.rx-row blockquote p.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rx-row .rv-more{grid-column:2;grid-row:2;justify-self:start;margin-top:6px;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:14.5px;color:var(--teal-s);cursor:pointer;border-bottom:1.5px solid rgba(122,217,227,.5);line-height:1.3}
.rx-row .rv-more:hover{color:#fff;border-color:#fff}
.rx-row footer{padding-top:2px;grid-row:1;grid-column:3}
.rx-row footer b{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:16px;color:#fff;line-height:1.25}
.rx-row footer span{display:block;font-size:14px;color:rgba(255,255,255,.62);margin-top:3px}
.rx-row.flash,.rx-f.flash,.rx-f2.flash{animation:rxFlash 1.6s ease-out}
@keyframes rxFlash{0%{background:rgba(232,138,42,.22)}100%{background:transparent}}
.rx-all .rev-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:40px}
.rx-all .rev-foot p{font-size:14px;color:rgba(255,255,255,.7)}
/* 03 mentions */
.rx-ment{list-style:none;margin:0 0 56px;padding:0;border-top:1px solid rgba(15,40,70,.22);counter-reset:m}
.rx-ment li{display:grid;grid-template-columns:260px minmax(0,1fr) 120px;gap:0 32px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(15,40,70,.16)}
.rx-mk{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:19px;color:var(--n7)}
.rx-mb{display:block;height:14px;background:rgba(15,40,70,.08);border-radius:2px;overflow:hidden}
.rx-mb i{display:block;height:100%;width:0;background:var(--teal);border-radius:2px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.rx-ment.in .rx-mb i{width:calc(var(--p) * 100%)}
.rx-ment b{font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:30px;line-height:1;color:var(--n7);text-align:right;display:flex;align-items:baseline;justify-content:flex-end;gap:6px}
.rx-ment b small{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink2)}
@media (max-width:1100px){
  .rx-row{grid-template-columns:84px minmax(0,1fr) 180px;gap:0 22px}
  .rx-ment li{grid-template-columns:220px minmax(0,1fr) 100px}
}
@media (max-width:900px){
  .sh-rx .sh-in{grid-template-columns:1fr;align-items:start}
  .rx-st svg{width:26px;height:26px}
  .rx-f,.rx-f.img-l{grid-template-columns:1fr;gap:36px;padding:48px 0}
  .rx-f.img-l .rx-q{order:0}
  .rx-shot{margin:0 14px 24px 0}
  .rx-pair{grid-template-columns:1fr}
  .rx-f2{padding:48px 0 44px}
  .rx-f2 + .rx-f2{padding-left:0;margin-left:0;border-left:0;border-top:1px solid var(--lline)}
  .rx-g{grid-template-columns:1fr;gap:0}
  .rx-gy{position:static;display:flex;align-items:baseline;gap:14px;padding:26px 0 6px}
  .rx-gy h3{font-size:32px}
  .rx-gy small{margin:0}
  .rx-row{grid-template-columns:1fr;grid-template-rows:auto;gap:10px 0;padding:18px 0}
  .rx-meta{flex-direction:row;align-items:center;gap:10px;padding-top:0;grid-row:auto}
  .rx-row blockquote,.rx-row footer{grid-row:auto;grid-column:1}
  .rx-row .rv-more{grid-column:1;grid-row:auto}
  .rx-ment li{grid-template-columns:minmax(0,1fr) 90px;gap:8px 20px}
  .rx-mb{grid-column:1/-1;order:3}
}
@media (max-width:700px){
  .rx-cols{gap:0 2px}
  .rx-st{padding:2px}
  .rx-st svg{width:22px;height:22px}
  .rx-yr{font-size:12px}
  .rx-yr .l{display:none}
  .rx-yr .s{display:inline}
  .rx-chart figcaption{font-size:13px}
  .rx-google{margin-top:24px}
  .rx-pull{font-size:21px}
  .rx-rest,.rx-row blockquote{font-size:16px}
  .rx-shot span{font-size:12px;left:10px}
  .rx-mk{font-size:17px}
  .rx-ment b{font-size:26px}
  .rx-all .rev-foot .btn{width:100%;justify-content:center}
}
@media (max-width:380px){.rx-st svg{width:19px;height:19px}.rx-st{padding:1px}}

/* ---------- our work, round 4 (Josh, 2026-11-04): contact sheet hero, numbered project index, wide popup ---------- */
.sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transform:perspective(1400px) rotateY(-6deg) rotateX(3deg);transform-origin:70% 50%}
.sheet-c{position:relative;display:block;margin:0;padding:0;border:0;aspect-ratio:1000/733;border-radius:3px;overflow:hidden;background:var(--n7);outline:1px solid var(--line2);box-shadow:0 30px 50px -28px rgba(0,0,0,.9);cursor:pointer;font:inherit;color:inherit;text-align:left;transition:transform .35s cubic-bezier(.2,.8,.2,1),outline-color .25s}
.sheet-c:nth-child(2),.sheet-c:nth-child(5){transform:translateY(18px)}
.sheet-c img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sheet-c span{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:30px 10px 9px;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(180deg,rgba(7,20,38,0),rgba(7,20,38,.92) 55%,rgba(7,20,38,.98));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-c span i{font-family:var(--disp);font-stretch:120%;font-weight:800;font-style:normal;color:var(--teal-s);font-size:12px}
.sheet-c:hover{outline-color:var(--teal-s);transform:translateY(-6px);z-index:2}
.sheet-c:nth-child(2):hover,.sheet-c:nth-child(5):hover{transform:translateY(12px)}
.sheet-c:hover img{transform:scale(1.05)}
.sheet-c:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.js .sh .sheet-c{animation:ld .9s cubic-bezier(.2,.8,.2,1) both}
.js .sh .sheet-c:nth-child(1){animation-delay:.25s}.js .sh .sheet-c:nth-child(2){animation-delay:.35s}.js .sh .sheet-c:nth-child(3){animation-delay:.45s}.js .sh .sheet-c:nth-child(4){animation-delay:.55s}.js .sh .sheet-c:nth-child(5){animation-delay:.65s}.js .sh .sheet-c:nth-child(6){animation-delay:.75s}
.sheet-k{margin-top:34px;font-size:14px;color:rgba(255,255,255,.66);text-align:right}
.sheet-k b{color:#fff;font-weight:600}
/* the index */
.pjx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line2);counter-reset:none}
.pjr{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;padding:28px 0;border-bottom:1px solid var(--line);background:none;border-top:0;border-left:0;border-right:0;border-radius:0;overflow:visible}
.pjr:hover{transform:none;border-color:var(--line)}
.pjr-img{display:block;width:100%;aspect-ratio:1000/733;margin:0;padding:0;border:0;border-radius:3px;background:var(--n7);cursor:pointer;overflow:hidden;position:relative;outline:1px solid var(--line);transition:outline-color .25s}
.pjr-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pjr:hover .pjr-img{outline-color:var(--teal-s)}
.pjr:hover .pjr-img img{transform:scale(1.05)}
.pjr-img::after{content:"+";position:absolute;right:8px;top:8px;width:28px;height:28px;display:grid;place-items:center;border-radius:3px;background:rgba(7,20,38,.85);color:var(--teal-s);font:700 17px/1 var(--sans);border:1px solid var(--line2)}
.pjr-img:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}
.pjr-b{display:flex;flex-direction:column;min-width:0}
.pjr-k{display:flex;align-items:baseline;gap:12px;margin:0}
.pjr-k i{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:13px;color:var(--teal-s);font-style:normal}
.pjr-k small{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--amber)}
.pjr-k small span{color:rgba(255,255,255,.5);margin-left:8px;font-weight:600}
.pjr-b h3{font-size:23px;font-stretch:112%;color:#fff;margin-top:8px;line-height:1.12}
.pjr-b > p{font-size:15px;line-height:1.5;color:var(--body);margin-top:8px}
.pjr-go{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.pjr-go a,.pjr-go button{display:inline-flex;align-items:center;gap:7px;padding:6px 0;border:0;border-bottom:2px solid rgba(122,217,227,.5);border-radius:0;background:transparent;font:700 14.5px var(--sans);color:#fff;text-decoration:none;cursor:pointer;transition:color .2s,border-color .2s}
.pjr-go a svg{width:14px;height:14px;color:var(--teal-s)}
.pjr-go button b{font-weight:700;color:var(--teal-s)}
.pjr-go a:hover,.pjr-go button:hover{color:var(--teal-s);border-bottom-color:var(--teal-s)}
.pjr-go a:focus-visible,.pjr-go button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.pjx .pjc.in:hover{transform:none}
/* the popup, wide and two-pane */
.pj-box{width:min(1060px,100%);grid-template-columns:minmax(0,1.3fr) 380px;max-height:calc(100vh - 40px)}
.pj-img{min-height:420px;background:var(--n9);border-right:1px solid var(--line)}
.pj-img img{object-position:top left}
.pj-body{padding:32px 30px 28px}
.pj-n{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--teal-s)}
.pj-n i{flex:none;width:28px;height:1px;background:var(--line2)}
.pj-n .pj-of{font-family:var(--sans);font-weight:600;color:rgba(255,255,255,.5)}
.pj-body h3{font-size:28px;margin:8px 0 12px}
.pj-body > p#pjP{margin-bottom:18px}
.pj-dl{margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.pj-dl div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.pj-dl dt{font-weight:700;letter-spacing:.06em;font-size:12px;color:var(--teal-s);padding-top:2px}
.pj-dl dd{margin:0;color:var(--body);word-break:break-word}
.pj-nav{margin-top:12px;gap:8px}
.pj-nav button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pj-nav button svg{width:16px;height:16px;color:var(--teal-s)}
/* custom websites hero: one site on two screens */
.pair{position:relative;padding-bottom:40px}
.pair-d{position:relative;border-radius:5px;overflow:hidden;background:var(--n7);outline:1px solid var(--line2);box-shadow:0 40px 60px -30px rgba(0,0,0,.9);width:88%}
.pair-d img{display:block;width:100%;height:auto}
.pair-m{position:absolute;right:0;bottom:0;width:27%;border-radius:18px;padding:6px;background:#0a1a31;outline:1px solid var(--line2);box-shadow:0 40px 60px -24px rgba(0,0,0,.95)}
.pair-m img{display:block;width:100%;height:auto;border-radius:13px}
.js .sh .pair-d{animation:ld 1s cubic-bezier(.2,.8,.2,1) .3s both}
.js .sh .pair-m{animation:ld 1s cubic-bezier(.2,.8,.2,1) .55s both}
.pair-k{margin-top:16px;font-size:14px;color:rgba(255,255,255,.66)}
.pair-k b{font-family:var(--sans);font-weight:700;letter-spacing:.08em;color:var(--teal-s);margin-right:8px}
@media (max-width:1180px){
  .pjx{gap:0 32px}
  .pjr{grid-template-columns:200px minmax(0,1fr);gap:18px}
  .pjr-b h3{font-size:21px}
  .pj-box{grid-template-columns:minmax(0,1.2fr) 340px}
}
@media (max-width:1000px){.pjx{grid-template-columns:1fr}.pjr{grid-template-columns:280px minmax(0,1fr)}}
@media (max-width:900px){
  .sheet{transform:none;gap:10px;max-width:600px}
  .sheet-c:nth-child(2),.sheet-c:nth-child(5){transform:none}
  .sheet-c:nth-child(2):hover,.sheet-c:nth-child(5):hover{transform:translateY(-6px)}
  .sheet-k{text-align:left;margin-top:16px}
  .pj-box{grid-template-columns:1fr}
  .pj-img{min-height:0;height:240px;border-right:0;border-bottom:1px solid var(--line)}
  .pj-body{padding:22px 20px 20px}
  .pj-body h3{font-size:24px}
  .pair-d{width:100%}
  .pair-m{width:24%}
}
@media (max-width:700px){
  .sheet{gap:8px}
  .sheet-c span{padding:18px 8px 6px;font-size:12px}
  .sheet-c span i{display:none}
  .pjr{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .pjr-go{gap:8px 18px}
  .pj-img{height:200px}
  .pj-dl div{grid-template-columns:64px minmax(0,1fr)}
  .pair{padding-bottom:30px}
  .pair-m{width:26%}
  .pair-k,.sheet-k{font-size:16px}
}

/* ---------- the team, round 5 (Josh, 2026-11-04): Roger and Joshua each get a full spread ---------- */
.bio{display:grid;grid-template-columns:400px minmax(0,1fr);gap:56px;align-items:start;padding:48px 0 56px;border-top:1px solid rgba(15,40,70,.18)}
.bio + .bio{border-top:1px solid rgba(15,40,70,.18)}
.bio-flip{grid-template-columns:minmax(0,1fr) 400px}
.bio-flip .bio-ph{order:2}
.bio-ph{position:sticky;top:96px}
.bio-ph figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--paper);box-shadow:0 40px 60px -40px rgba(7,20,38,.7)}
.bio-ph img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.bio-ph figcaption{position:absolute;left:0;bottom:0;padding:7px 10px;background:var(--n9);color:var(--teal-s);font:700 12px/1 var(--sans);letter-spacing:.08em;border-radius:0 3px 0 0}
.bio-facts{margin:18px 0 0;padding:0;border-top:1px solid rgba(15,40,70,.18)}
.bio-facts div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid rgba(15,40,70,.12);font-size:14.5px}
.bio-facts dt{font-weight:700;letter-spacing:.06em;font-size:12px;color:var(--teal-t);padding-top:2px}
.bio-facts dd{margin:0;color:var(--ink)}
.bio-facts a{color:var(--n7);font-weight:700;text-decoration:none;border-bottom:2px solid var(--teal-b)}
.bio-facts a:hover{color:var(--teal-t)}
.bio-b .kk{margin-bottom:10px}
.bio-b h3{font-size:clamp(34px,3.4vw,48px);font-stretch:115%;line-height:1;color:var(--n7)}
.bio-r{font-size:16px;font-weight:600;color:var(--teal-t);margin-top:8px}
.bio-lead{font-family:var(--disp);font-stretch:106%;font-weight:600;font-size:22px;line-height:1.4;color:var(--n7);margin-top:22px;padding-top:22px;border-top:2px solid var(--n7)}
.bio-b > p:not(.bio-lead):not(.bio-r){font-size:17px;line-height:1.7;color:var(--ink2);margin-top:16px;max-width:66ch}
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(15,40,70,.18)}
.bio-grid .kk{margin-bottom:6px}
.bio-grid .ppl-t{flex-direction:column;gap:6px;margin-top:8px}
.bio-b .ctas{margin-top:30px}
.ppl-long > li{grid-template-columns:220px minmax(0,1fr)}
.ppl-long .body + .body{margin-top:12px}
@media (max-width:1180px){.bio,.bio-flip{grid-template-columns:320px minmax(0,1fr);gap:40px}.bio-flip{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:900px){
  .bio,.bio-flip{grid-template-columns:1fr;gap:28px;padding:36px 0 40px}
  .bio-flip .bio-ph{order:0}
  .bio-ph{position:static;display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}
  .bio-facts{margin-top:0}
  .ppl-long > li{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:700px){
  .ppl-long > li{grid-template-columns:1fr}
  .bio-ph{grid-template-columns:1fr}
  .bio-ph figure{max-width:320px}
  .bio-b h3{font-size:34px}
  .bio-lead{font-size:19px}
  .bio-b > p:not(.bio-lead):not(.bio-r){font-size:16px}
  .bio-grid{grid-template-columns:1fr;gap:18px}
  .bio-b .ctas .btn{width:100%;justify-content:center}
  .bio-facts div{grid-template-columns:100px minmax(0,1fr)}
}

/* ---------- before and after you can drag (Our work, featured redesign) ---------- */
.ba-f{position:relative;aspect-ratio:1000/640;border-radius:4px;overflow:hidden;background:var(--n7);outline:1px solid var(--line2);box-shadow:0 40px 60px -30px rgba(0,0,0,.9);touch-action:pan-y;user-select:none}
.ba-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block;pointer-events:none}
.ba-old{filter:saturate(.75)}
.ba-new{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x));-webkit-clip-path:inset(0 0 0 var(--x))}
.ba-h{position:absolute;top:0;bottom:0;left:var(--x);width:0;border-left:2px solid #fff;box-shadow:0 0 0 1px rgba(7,20,38,.4);pointer-events:none}
.ba-h i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--teal-b);box-shadow:0 10px 24px -8px rgba(0,0,0,.9)}
.ba-h i::before,.ba-h i::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid var(--n9);border-width:0 0 2px 2px;margin-top:-4px}
.ba-h i::before{left:12px;transform:rotate(45deg)}
.ba-h i::after{right:12px;transform:rotate(-135deg)}
.ba-l{position:absolute;top:12px;font:700 12px/1 var(--sans);letter-spacing:.1em;padding:7px 9px;border-radius:2px;pointer-events:none}
.ba-l.b{left:12px;background:rgba(7,20,38,.85);color:#fff}
.ba-l.a{right:12px;background:var(--teal-b);color:var(--n9)}
.ba-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-f:focus-within{outline:2px solid var(--amber);outline-offset:3px}
.ba-k{margin-top:14px;font-size:14px;color:rgba(255,255,255,.66)}
.ba-k b{font-family:var(--sans);font-weight:700;letter-spacing:.08em;color:var(--teal-s);margin-right:8px}
.js .ba.sweep .ba-f{animation:baSweep 1.6s cubic-bezier(.2,.8,.2,1) .4s both}
@keyframes baSweep{from{--x:18%}to{--x:50%}}
@property --x{syntax:"<percentage>";inherits:true;initial-value:50%}
.ba-wk .ba-f{aspect-ratio:1600/933;outline-color:rgba(15,40,70,.2);box-shadow:0 40px 60px -40px rgba(7,20,38,.6)}
.ba-wk .ba-old{filter:none}
.ba-wk .ba-k{color:var(--ink2);font-size:15px}
.ba-wk .ba-k b{color:var(--teal-t)}
.ba-wk + .rl{margin-top:40px}
@media (max-width:700px){.ba-wk .ba-f{aspect-ratio:1/2;max-width:420px;margin:0 auto}.ba-wk .ba-k{font-size:16px}}
@media (prefers-reduced-motion:reduce){.js .ba.sweep .ba-f{animation:none}}

/* contact hero: who picks up, fills the column beside the long form (Josh, 2026-11-04) */
.who{margin-top:30px;padding-top:24px;border-top:1px solid var(--line2)}
.who .kk{margin-bottom:12px}
.who ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.who li{display:flex;align-items:center;gap:12px}
.who img{width:56px;height:56px;border-radius:3px;object-fit:cover;object-position:top center;flex:none;outline:1px solid var(--line2)}
.who b{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:16px;color:#fff}
.who li span{font-size:13.5px;color:rgba(255,255,255,.62)}
.who > a{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 0;font-weight:700;font-size:15px;color:#fff;text-decoration:none;border-bottom:2px solid var(--teal-b)}
.who > a svg{width:16px;height:16px;transition:transform .25s}
.who > a:hover{color:var(--teal-s)}
.who > a:hover svg{transform:translateX(4px)}
.hrs a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid var(--teal-b)}
@media (max-width:700px){.who ul{grid-template-columns:1fr}}

/* ---------- industry pages (DentalMedia360, LawMedia360), converted by industry.py ---------- */
.pg-ind .kick{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-s);margin-bottom:18px}
.pg-ind .kick::before{content:"";width:28px;height:1px;background:var(--teal-s)}
.ind-path{padding:28px 30px;border:1px solid var(--line2);border-radius:4px;background:rgba(7,20,38,.55)}
.ind-path .kk{margin-bottom:10px}
.ind-path h2{font-size:28px;font-stretch:112%;line-height:1.1;color:#fff;margin-bottom:18px}
.ind-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.ind-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.ind-steps i{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:13px;font-style:normal;color:var(--teal-s);padding-top:3px}
.ind-steps b{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:17px;color:#fff}
.ind-steps span{display:block;font-size:14.5px;line-height:1.5;color:var(--body);margin-top:3px}
.ind-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 0;font-weight:700;font-size:15px;color:#fff;text-decoration:none;border-bottom:2px solid var(--teal-b)}
.ind-go svg{width:16px;height:16px;transition:transform .25s}
.ind-go:hover svg{transform:translateX(4px)}
.pg-ind .sh-bar span.ch{display:flex;align-items:center;gap:14px;padding:20px 24px;border-right:1px solid var(--line)}
.pg-ind .sh-bar span.ch:last-child{border-right:0}
@media (max-width:900px){.pg-ind .sh-bar span.ch{padding:16px var(--gut);border-bottom:1px solid var(--line)}.pg-ind .sh-bar span.ch:nth-child(odd){border-right:0}.pg-ind .sh-bar span.ch:last-child:nth-child(even){grid-column:1/-1}}
@media (max-width:700px){.pg-ind .sh-bar span.ch{border-right:0 !important}.pg-ind .sh-bar span.ch:last-child{grid-column:auto;border-bottom:0}}
.pg-ind .sh-bar .ch i{font-size:22px}
.pg-ind .sh-bar .ch > span{font-weight:500;font-size:14px;color:rgba(255,255,255,.8)}
.ind-work{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.ind-sites{list-style:none;margin:0;padding:0;border-top:1px solid rgba(15,40,70,.18)}
.ind-sites > li{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 0;border-bottom:1px solid rgba(15,40,70,.12)}
.ind-site-h small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--teal-t)}
.ind-site-h h3{font-size:24px;font-stretch:112%;line-height:1.1;margin-top:6px}
.ind-sites .ppl-t{margin-top:0}
.ind-sites .ppl-t li{font-weight:500;color:var(--ink2)}
.ind-note{padding:26px 28px;background:var(--n8);color:#fff;border-radius:4px;position:sticky;top:96px}
.ind-note .kk{color:var(--teal-s);margin-bottom:8px}
.ind-note h3{font-size:24px;font-stretch:112%;line-height:1.15;color:#fff;margin-bottom:12px}
.ind-note .body{color:var(--body);font-size:16px}
.ind-note .body + .body{margin-top:12px}
.rl small{display:block;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--teal-s)}
.lt .rl small{color:var(--teal-t)}
.ind-right{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;border-top:1px solid rgba(15,40,70,.18)}
.ind-right li{padding:22px 0 24px;border-bottom:1px solid rgba(15,40,70,.12)}
.ind-right small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--teal-t)}
.ind-right h3{font-size:20px;font-stretch:112%;line-height:1.2;margin-top:8px;color:var(--n7)}
.ind-right p{font-size:15.5px;line-height:1.55;color:var(--ink2);margin-top:8px}
.ind-offers{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto auto auto}
.ind-offers > li{grid-row:span 7}
.ind-offers .pk{margin-top:18px}
.ind-offers .pp-price b{font-size:34px}
.ind-offers .ctas{margin-top:auto;padding-top:6px}
.ind-get .ch-band{margin-bottom:10px}
.ind-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.ind-chips li div{padding:14px 0}
.ind-chips b{font-size:17px;margin-top:0}
.ind-local{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start;margin-top:56px;padding-top:40px;border-top:1px solid rgba(15,40,70,.18)}
.ind-local h3{font-size:28px;font-stretch:112%;line-height:1.1;margin:8px 0 12px;color:var(--n7)}
.ind-local .body{font-size:16.5px;color:var(--ink2)}
.ind-local .body + .body{margin-top:12px}
.ind-towns{grid-template-columns:repeat(3,minmax(0,1fr))}
.ind-one{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.ind-inc{flex-direction:column;gap:0;margin-top:14px;border-top:1px solid var(--line2)}
.ind-inc li{padding:12px 0 12px 20px;border-bottom:1px solid var(--line);font-size:16px;font-weight:500;color:var(--body)}
.ind-inc li::before{top:19px}
.ind-rates{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.ind-rates li{padding:18px 0;border-bottom:1px solid var(--line)}
.ind-rates small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--teal-s)}
.ind-rates b{display:block;font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:30px;line-height:1.05;color:#fff;margin-top:6px}
.ind-rates span{display:block;font-size:15px;color:var(--body);margin-top:6px;line-height:1.5}
.ind-one .ctas{margin-top:22px}
@media (max-width:1180px){.ind-right{gap:0 24px}.ind-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.ind-work{grid-template-columns:1fr}.ind-note{position:static}.ind-right{grid-template-columns:1fr 1fr}.ind-local,.ind-one{grid-template-columns:1fr;gap:28px}.ind-offers{grid-template-columns:1fr;grid-template-rows:none}.ind-offers > li{display:flex;flex-direction:column}}
@media (max-width:700px){.ind-right{grid-template-columns:1fr}.ind-chips,.ind-towns{grid-template-columns:1fr 1fr}.ind-path{padding:22px 20px}.ind-path h2{font-size:24px}.ind-site-h h3{font-size:21px}.ind-note{padding:20px}}

/* ---------- landing pages: the free WordPress check, the Greenville ads page ---------- */
.pg-lp .sh-in.wide{align-items:start}
.lp-trust{list-style:none;margin:28px 0 0;padding:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;border-top:1px solid var(--line2)}
.lp-trust li{display:grid;gap:3px;align-content:start}
.lp-trust b{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:17px;color:var(--teal-s)}
.lp-trust span{font-size:14px;line-height:1.4;color:var(--body)}
.cx-f select{width:100%;box-sizing:border-box;font:16px/1.4 var(--sans);color:#fff;background:var(--n9);border:1px solid var(--line2);border-radius:4px;padding:11px 36px 11px 12px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ad9e3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 12px center}
.cx-f select:focus{outline:none;border-color:var(--teal-s);box-shadow:0 0 0 3px rgba(122,217,227,.18)}
.cx-f select option{color:#111;background:#fff}
.lp-radios{margin-top:4px}
.lp-cost{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.lp-cost li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.5;color:#fff}
.lp-cost li::before{content:"";position:absolute;left:2px;top:22px;width:11px;height:11px;background:var(--amber);border-radius:2px}
.rl-ten > li h3{font-size:19px}
.lp-sig{display:flex;align-items:center;gap:14px;margin:22px 0 26px}
.lp-sig img{width:56px;height:56px;object-fit:cover;object-position:top;border-radius:50%;outline:1px solid var(--line2)}
.lp-sig span{display:block;font-size:14.5px;color:var(--body)}
.lp-sig b{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:17px;color:#fff}
.lp-fine{font-size:14.5px;line-height:1.6;color:var(--body);padding-top:6px}
.lp-fine p{margin:0 0 12px}
.lp-fine a{color:var(--teal-s)}
.lp-fine .kk{display:block;margin-bottom:10px}
.lp-close .ctas{margin-top:22px}
.steps-s .sec-h p{color:var(--ink2)}
.steps-s .sec-h .kk{color:var(--teal-t)}
/* the slim chrome: logo, phone, one button */
.lp-hdr .wrap{justify-content:space-between}
.lp-hdr-r{display:flex;align-items:center;gap:20px}
.lp-tel{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:15px}
.lp-tel svg{width:18px;height:18px;color:var(--teal-s)}
.lp-tel b{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:17px;letter-spacing:.01em}
.lp-ftr{padding:40px 0 36px}
.lp-ftr-row{display:grid;gap:14px;justify-items:start}
.lp-ftr-row img{height:30px;width:auto;display:block}
.lp-ftr-row p{margin:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.lp-ftr-row a{color:var(--teal-s)}
.lp-ftr-legal{font-size:13px}
.lp-ftr-legal a{margin-left:12px}
/* the work recordings, in a carousel */
.lp-works{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.lp-car{position:relative}
.lp-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;padding:6px 0 10px;margin:0 calc(-1*var(--gut));padding-left:var(--gut);padding-right:var(--gut);scroll-padding-left:var(--gut)}
.lp-track::-webkit-scrollbar{display:none}
.lp-track > li{flex:0 0 clamp(300px,34vw,440px);scroll-snap-align:start;min-width:0}
.lp-car-nav{display:flex;align-items:center;gap:10px;justify-self:end;align-self:end}
.lp-car-k{margin:0 10px 0 0;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--teal-t)}
.lp-car-k b{color:var(--n7);font-size:16px}
.lp-car-b{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(15,40,70,.3);border-radius:4px;background:#fff;color:var(--n7);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.lp-car-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lp-car-b:hover{background:var(--n7);color:#fff;border-color:var(--n7)}
.lp-car-b[disabled]{opacity:.35;cursor:default;background:#fff;color:var(--n7);border-color:rgba(15,40,70,.3)}
.lp-car-b:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.lp-area{margin:26px 0 0;font-size:15px;line-height:1.55;color:var(--ink2);max-width:72ch}
.lp-trust-dk{border-top-color:var(--line2);margin-top:0;padding-top:0;border-top:0;grid-template-columns:1fr;gap:16px}
.lp-trust-dk li{padding-top:16px;border-top:1px solid var(--line)}
.lp-play{display:block;width:100%;padding:0;border:0;background:var(--n7);border-radius:4px;overflow:hidden;position:relative;cursor:pointer;aspect-ratio:16/10;outline:1px solid rgba(15,40,70,.14);box-shadow:0 30px 50px -36px rgba(7,20,38,.6)}
.lp-play video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lp-pl{position:absolute;left:14px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(7,20,38,.88);color:#fff;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;transition:opacity .25s}
.lp-pl::before{content:"";width:0;height:0;border-left:8px solid var(--teal-s);border-top:5px solid transparent;border-bottom:5px solid transparent}
.lp-play.on .lp-pl{opacity:0}
.lp-play:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.lp-wt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;margin-top:14px;align-items:baseline}
.lp-wt i{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:13px;font-style:normal;color:var(--teal-t);grid-row:span 4}
.lp-wt b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:20px;line-height:1.2;color:var(--n7)}
.lp-wt span{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--teal-t)}
.lp-wt p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--ink2)}
.lp-wt a,.lp-dom{margin-top:10px;font-size:14px;font-weight:700;color:var(--n7);text-decoration:none;border-bottom:2px solid var(--teal-b);justify-self:start}
.lp-rated{display:block;margin:22px 0 0;font-size:15px;line-height:1.5;color:var(--body)}
.lp-rated b{color:#fff}
.lp-rated .stars{display:inline-block;vertical-align:-3px;margin-right:6px}
.lp-rated .stars svg{width:17px;height:17px;fill:var(--amber);display:block}
.steps-s .ctas.rv{margin-top:34px}
.gscore2:not(a) i{color:var(--ink2);border:0}
.n8 .ctas.rv{margin-top:34px}
/* the sticky bar on phones */
.lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut);background:#071426;border-top:1px solid rgba(122,217,227,.2);transform:translateY(100%);transition:transform .3s}
.lp-bar.on{transform:none}
.lp-bar-tel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;font-size:15px;white-space:nowrap}
.lp-bar-tel svg{width:18px;height:18px;color:var(--teal-s)}
@media (max-width:360px){.lp-bar-tel span{display:none}.lp-bar-tel{width:40px;height:40px;justify-content:center;border:1px solid var(--line2);border-radius:4px}}
@media (max-width:1180px){.lp-works{gap:32px 22px}}
@media (max-width:900px){.lp-works{grid-template-columns:1fr 1fr}.lp-trust{grid-template-columns:1fr 1fr}.lp-track > li{flex-basis:min(440px,72vw)}.lp-car-nav{justify-self:start}}
@media (max-width:700px){
  .lp-works{grid-template-columns:1fr;gap:30px}
  .lp-track{gap:16px}
  .lp-track > li{flex-basis:84vw}
  .lp-trust{grid-template-columns:1fr;gap:10px}
  .lp-bar{display:flex}
  .pg-lp .ftr{padding-bottom:70px}
  .lp-hdr-r{gap:12px}
  .lp-hdr-r .btn{display:none}
  .lp-tel b{display:none}
  .lp-tel{width:40px;height:40px;justify-content:center;border:1px solid var(--line2);border-radius:4px}
  .lp-hdr-r .lp-tel svg{width:20px;height:20px}
  .lp-sig{margin:18px 0 22px}
}
/* Google Business Profile setup */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:720px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid rgba(15,40,70,.14)}
.cmp thead th{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-t);border-bottom:2px solid var(--n7);padding-top:0}
.cmp thead th.us{color:var(--n7)}
.cmp tbody th{font-weight:700;color:var(--n7);width:19%}
.cmp td{color:var(--ink2);width:27%}
.cmp td:last-child{color:var(--n7);font-weight:600;background:rgba(10,107,120,.06);padding-left:14px}
.cmp-note{margin:22px 0 0;font-size:16px;color:var(--ink2);max-width:62ch}
.gbp-note{margin:28px 0 0;font-size:15.5px;line-height:1.55;color:var(--body);max-width:70ch}
.gbp-note a{color:var(--teal-s)}
.gbp-cl{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid rgba(15,40,70,.22)}
.gbp-cl li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(15,40,70,.12)}
.gbp-cl b{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:17px;color:var(--n7)}
.gbp-cl span{font-size:14px;color:var(--ink2);text-align:right}
.pg-gbp .sh .sub{margin-top:18px;font-size:15px;color:var(--body)}
@media (max-width:700px){.gbp-cl li{flex-direction:column;gap:2px}.gbp-cl span{text-align:left}}

/* ---------- the project planner (the carried form, styled in option A) ---------- */
.pl-notes{list-style:none;margin:0;padding:24px 26px;background:var(--n85);border:1px solid var(--line2);border-radius:4px;display:grid;gap:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.pl-notes li{display:grid;gap:4px;padding-top:18px;border-top:1px solid var(--line)}
.pl-notes li:first-child{padding-top:0;border-top:0}
.pl-notes b{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:17px;color:var(--teal-s)}
.pl-notes span{font-size:15px;line-height:1.5;color:var(--body)}
.pl-notes a{color:#fff}
.progress-bar-container{position:sticky;top:84px;z-index:40;background:#071426;border-bottom:1px solid rgba(122,217,227,.16)}
.progress-bar-inner{display:flex;align-items:center;gap:22px;height:52px}
.progress-steps{display:flex;gap:4px;flex:1;min-width:0}
.progress-step{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background-color .3s}
.progress-step.completed{background:var(--teal-s)}
.progress-step.active{background:var(--amber)}
.progress-label{display:flex;align-items:center;gap:16px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.06em;color:#fff;white-space:nowrap}
.save-status{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.55);padding-left:16px;border-left:1px solid var(--line)}
.save-status.saved{color:var(--teal-s)}
.pl-sec{padding-top:56px}
.pl-wrap{max-width:860px}
.pl-err{margin:0 0 20px;color:#b4510c;font-weight:600}
.form-container{display:block}
.required-notice{font-size:14px;color:var(--ink2);margin:0 0 28px}
.required-notice .required,.field .required,.req-mark{color:#b4510c}
.resume-banner{display:none;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;margin:0 0 30px;background:var(--n8);color:#fff;border-radius:4px}
.resume-banner.active{display:flex}
.resume-banner-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--teal-s);margin-bottom:4px}
.resume-banner-text{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:17px}
.resume-banner-sub{display:block;font-size:14px;color:rgba(255,255,255,.7);margin-top:2px}
.btn-clear-progress{flex:none;background:none;border:1px solid var(--line2);color:#fff;font:600 14px var(--sans);padding:10px 14px;border-radius:4px;cursor:pointer}
.btn-clear-progress:hover{border-color:var(--teal-s);color:var(--teal-s)}
.section{padding:40px 0 44px;border-top:1px solid rgba(15,40,70,.22)}
.section-header{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;margin-bottom:28px;align-items:start}
.section-number{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--teal-t);padding-top:8px}
.section-title{font-family:var(--disp);font-stretch:115%;font-weight:700;font-size:clamp(26px,2.6vw,32px);line-height:1.1;color:var(--n7);letter-spacing:-.01em}
.section-desc{margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink2)}
.subsection-title{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:19px;color:var(--n7);margin:26px 0 4px}
.subsection-desc{font-size:14.5px;color:var(--ink2);margin:0 0 14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.field{margin:0 0 18px;min-width:0}
.field > label{display:block;font-size:14.5px;font-weight:700;color:var(--n7);margin-bottom:6px}
.field-hint{font-size:13.5px;color:var(--ink2);margin:-2px 0 8px;line-height:1.45}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field input[type="url"],.field input[type="number"],.field select,.field textarea{width:100%;box-sizing:border-box;font:16px/1.4 var(--sans);color:var(--n7);background:#fff;border:1px solid rgba(15,40,70,.28);border-radius:4px;padding:11px 12px}
.field select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6b78' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 12px center}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:rgba(15,40,70,.4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-t);box-shadow:0 0 0 3px rgba(10,107,120,.16)}
.field .invalid,.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#b4510c;box-shadow:0 0 0 3px rgba(180,81,12,.14)}
.tip-box{padding:18px 20px 18px 22px;margin:0 0 24px;background:rgba(10,107,120,.06);border-left:3px solid var(--teal-t);font-size:15px;line-height:1.55;color:var(--ink)}
.tip-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--teal-t);margin-bottom:6px}
.slider-group{padding:16px 0 18px;border-bottom:1px solid rgba(15,40,70,.12)}
.slider-title{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:16px;color:var(--n7);margin-bottom:8px}
.slider-value{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.04em}
.slider-group input[type="range"]{width:100%;accent-color:var(--teal-t);margin:4px 0 6px;cursor:pointer}
.slider-labels{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--ink2)}
.slider-labels .label-mid{color:rgba(15,40,70,.45)}
.color-ref{margin:18px 0 0;padding:18px 20px;border:1px solid rgba(15,40,70,.14);border-radius:4px;background:#fff}
.ref-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--teal-t);margin-bottom:12px}
.color-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;font-size:13.5px;color:var(--ink2)}
.swatch{display:flex;align-items:center;gap:10px}
.swatch b{color:var(--n7)}
.swatch-dot{width:14px;height:14px;border-radius:3px;flex:none;border:1px solid rgba(15,40,70,.2)}
.model-site{padding:14px 0 6px;border-top:1px solid rgba(15,40,70,.12)}
.model-site-label{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:16px;color:var(--n7);margin:0 0 12px}
.file-upload-area{display:grid;justify-items:center;gap:8px;padding:34px 20px;border:2px dashed rgba(15,40,70,.28);border-radius:4px;background:#fff;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s}
.file-upload-area:hover,.file-upload-area.dragover{border-color:var(--teal-t);background:rgba(10,107,120,.05)}
.file-upload-icon{width:28px;height:28px;color:var(--teal-t)}
.file-upload-text{font-weight:700;color:var(--n7)}
.file-upload-text .underline{color:var(--teal-t);text-decoration:underline}
.file-upload-hint{font-size:13.5px;color:var(--ink2)}
#fileList{margin-top:10px;font-size:14px;color:var(--ink2)}
#fileList div,#fileList li{padding:6px 0;border-bottom:1px solid rgba(15,40,70,.1)}
.pre-submit{margin-top:40px;padding-top:34px;border-top:1px solid rgba(15,40,70,.22)}
.pre-submit p{font-size:17px;line-height:1.55;color:var(--ink);max-width:62ch;margin:0 0 22px}
.btn-submit{display:inline-flex;align-items:center;gap:12px;font:700 16px var(--sans);color:var(--n9);background:var(--teal-b);border:0;border-radius:4px;padding:16px 26px;cursor:pointer;transition:background-color .2s}
.btn-submit:hover{background:var(--teal-s)}
.btn-submit svg{width:18px;height:18px}
.submit-note{margin-top:14px;font-size:13.5px;color:var(--ink2)}
.pl-done{max-width:680px;padding:8px 0 20px}
.pl-done h2{font-size:clamp(30px,3.2vw,40px);color:var(--n7);margin:10px 0 16px}
.pl-done p{font-size:16.5px;line-height:1.65;color:var(--ink);margin:0 0 14px;max-width:56ch}
.pl-done a{color:var(--teal-t)}
.pl-done .kk{color:var(--teal-t)}
.pl-done-next{margin:26px 0 30px;padding-top:22px;border-top:1px solid rgba(15,40,70,.22)}
.pl-done .btn{margin-top:4px}
@media (max-width:900px){.section-header{grid-template-columns:1fr;gap:6px}.three-col{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  .two-col,.three-col{grid-template-columns:1fr;gap:0}
  .progress-bar-container{top:70px}
  .progress-bar-inner{height:48px;gap:14px}
  .progress-label{font-size:12px;gap:10px}
  .save-status{padding-left:10px}
  .color-swatches{grid-template-columns:1fr 1fr}
  .resume-banner{flex-direction:column;align-items:flex-start}
  .btn-submit{width:100%;justify-content:center}
  .pl-sec{padding-top:40px}
}
@media (hover:hover){.lp-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}.lp-track.drag *{pointer-events:none}}
/* the landing page reviews: one featured review at full size, then a carousel of cards with a read more */
.lp-rv-s .sec-h{align-items:end}
.lp-chat-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink2);font-size:15.5px}
.lp-chat-score > b{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--n7)}
.lp-chat-score .stars{display:inline-flex;gap:2px}
.lp-chat-score .stars svg{width:17px;height:17px;fill:var(--amber)}
.lp-chat-score span b{color:var(--n7)}
.rv-feat{margin:0;padding:30px 0 36px 32px;border-top:1px solid rgba(15,40,70,.22);border-bottom:1px solid rgba(15,40,70,.14);position:relative;max-width:980px}
.rv-feat::before{content:"";position:absolute;left:0;top:30px;bottom:36px;width:3px;background:var(--teal-b)}
.rv-feat-meta{margin:0 0 18px;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--ink2)}
.rv-feat-k{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#0a6b78}
.rv-feat-meta time{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;color:var(--n7)}
.rv-feat-src{display:inline-flex;align-items:center;gap:8px}
.rv-feat-src .stars{display:inline-flex;gap:2px}
.rv-feat-src .stars svg{width:14px;height:14px;fill:var(--amber)}
.rv-feat blockquote{margin:0;font-size:20px;line-height:1.6;color:var(--ink);max-width:70ch;hanging-punctuation:first}
.rv-feat blockquote p:first-child{text-indent:-.45em}
.rv-feat blockquote p + p{margin-top:14px}
.rv-feat figcaption{margin-top:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--ink2)}
.rv-feat figcaption b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:var(--n7)}
.rv-feat figcaption span:not(:empty)::before{content:"";display:inline-block;width:18px;height:1px;background:var(--ink2);vertical-align:middle;margin-right:10px;opacity:.6}
@supports (hanging-punctuation:first){.rv-feat blockquote p:first-child{text-indent:0}}
.lp-rv-more{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:34px 0 18px}
.lp-rv-k{margin:0;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:19px;color:var(--n7)}
.lp-rvs{list-style:none;margin:0;padding:0 0 10px;display:flex;gap:16px;align-items:flex-start}
.lp-rvs .rvw{flex:0 0 340px;scroll-snap-align:start;padding:22px 22px 20px;background:#fff;border:1px solid rgba(15,40,70,.12);border-top:3px solid var(--teal-b);border-radius:4px;box-shadow:0 10px 30px -24px rgba(7,20,38,.5)}
.lp-rvs .rvw-h{justify-content:flex-start;gap:10px}
.lp-rvs .rvw-h .stars svg{width:14px;height:14px}
.lp-rvs .rvw blockquote{margin:12px 0 0;font-size:15.5px;line-height:1.6}
.lp-rvs .rvw blockquote.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.lp-rvs .rvw blockquote.clamp p + p{margin-top:0}
.lp-rvs .rvw.open blockquote.clamp{display:block;-webkit-line-clamp:unset;overflow:visible}
.lp-rvs .rvw.open blockquote.clamp p + p{margin-top:12px}
.lp-rvs .rv-more{display:inline-block;align-self:flex-start;margin-top:8px;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:15px;color:var(--teal-d);cursor:pointer;border-bottom:2px solid var(--teal-b);line-height:1.3}
.lp-rvs .rv-more:hover{color:var(--n7)}
.lp-rvs .rvw footer{margin-top:0;padding-top:14px;font-size:14.5px}
.lp-rvs .rvw footer b{font-size:16px}
.lp-rvs .rvw footer span:empty{display:none}
@media (max-width:700px){
  .rv-feat{padding:20px 0 24px 18px}
  .rv-feat::before{top:20px;bottom:24px}
  .rv-feat blockquote{font-size:17.5px}
  .rv-feat figcaption{margin-top:14px;flex-direction:column;gap:2px}
  .rv-feat figcaption span:not(:empty)::before{display:none}
  .rv-feat figcaption b{font-size:16px}
  .lp-rv-more{flex-direction:column;align-items:flex-start;gap:10px;margin:26px 0 14px}
  .lp-rv-more .lp-car-nav{align-self:stretch}
  .lp-rv-more .lp-car-b:first-of-type{margin-left:auto}
  .lp-rvs{gap:12px}
  .lp-rvs .rvw{flex:0 0 84%;padding:18px 16px 16px}
  .lp-rvs .rvw blockquote.clamp{-webkit-line-clamp:7}
  .lp-chat-score > b{font-size:36px}
}
/* the 404 page */
.sh-404 .sh-in.wide{grid-template-columns:minmax(0,1fr) 420px;align-items:center;min-height:0;padding-bottom:56px}
.nf-vis{display:flex;flex-direction:column;align-items:center;gap:18px;justify-self:end}
.nf-code{display:flex;align-items:flex-end;gap:10px;font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(96px,11vw,160px);line-height:.85;letter-spacing:-.05em;color:#fff}
.nf-ring{width:.82em;height:.82em;margin:0 .02em;transform:translateY(-.02em)}
.nf-ring circle{fill:var(--teal-b);opacity:.18;animation:nfDot 1.8s linear infinite;animation-delay:calc(var(--k) * -.15s)}
@keyframes nfDot{0%,70%,100%{opacity:.18;transform:scale(1)}8%{opacity:1;transform:scale(1.25)}}
.nf-ring circle{transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:reduce){.nf-ring circle{animation:none;opacity:.7}}
.nf-note{margin:0;font-size:14.5px;font-weight:600;color:var(--body);letter-spacing:.02em}
.nf-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(15,40,70,.22);max-width:860px}
.nf-list li{border-bottom:1px solid rgba(15,40,70,.14)}
.nf-list a{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:8px 28px;align-items:center;padding:18px 0;text-decoration:none;color:var(--ink)}
.nf-list a b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:18px;color:var(--n7)}
.nf-list a span{font-size:15.5px;color:var(--ink2)}
.nf-list a svg{width:18px;height:18px;stroke:var(--teal-d);transition:transform .25s}
.nf-list a:hover b{color:var(--teal-d)}
.nf-list a:hover svg{transform:translateX(4px)}
@media (max-width:900px){.sh-404 .sh-in.wide{grid-template-columns:1fr}.nf-vis{justify-self:start;align-items:flex-start}}
@media (max-width:700px){.nf-list a{grid-template-columns:minmax(0,1fr) auto;padding:14px 0}.nf-list a span{grid-column:1}.nf-list a svg{grid-row:1/3}.nf-list a b{font-size:17px}}

/* ---------- ad pages, round 8 (Josh, 2026-11-05): each page in its own order with a section of its own ---------- */
/* four phones (web design page) */
.lp-phones{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.lp-ph{position:relative;border-radius:22px;padding:8px;background:var(--n9);box-shadow:0 24px 48px -28px rgba(7,20,38,.65),inset 0 0 0 1px rgba(255,255,255,.08)}
.lp-ph::before{content:"";position:absolute;left:50%;top:8px;width:84px;height:18px;margin-left:-42px;border-radius:0 0 12px 12px;background:var(--n9);z-index:1}
.lp-ph img{width:100%;height:auto;aspect-ratio:780/1267;object-fit:cover;object-position:top;border-radius:15px;display:block}
.lp-phones b{display:block;margin-top:18px;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:19px;color:var(--n7);line-height:1.2}
.lp-phones span{display:block;font-size:13.5px;font-weight:600;color:var(--teal-d);margin-top:3px}
.lp-phones p{font-size:15px;line-height:1.5;color:var(--ink2);margin-top:8px}
@media (max-width:1000px){.lp-phones{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}}
/* what's in every build (development page) */
.lp-spec-l{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--line2)}
.lp-spec-l li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 0;padding:20px 0 18px;border-bottom:1px solid var(--line)}
.lp-spec-l i{grid-row:1/3;font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:15px;color:var(--teal-s);padding-top:4px}
.lp-spec-l b{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:19px;color:#fff;line-height:1.2}
.lp-spec-l span{font-size:15.5px;line-height:1.5;color:var(--body)}
/* the company (design company page) */
.lp-facts{margin-bottom:8px}
.lp-co-k{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-s);margin:28px 0 6px}
.lp-co .logos{padding:10px 0 0}
/* one team (small business page) */
.lp-one-g{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(15,40,70,.22);border-bottom:1px solid rgba(15,40,70,.22)}
.lp-one-g li{display:grid;grid-template-rows:auto auto 1fr;gap:12px;padding:28px 28px 30px 0;border-right:1px solid rgba(15,40,70,.14)}
.lp-one-g li + li{padding-left:28px}
.lp-one-g li:last-child{border-right:0;padding-right:0}
.lp-one-g svg{width:34px;height:34px;color:var(--teal-d)}
.lp-one-g b{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:20px;color:var(--n7);line-height:1.2}
.lp-one-g span{font-size:15.5px;line-height:1.55;color:var(--ink2)}
@media (max-width:1000px){
  .lp-one-g{grid-template-columns:1fr 1fr}
  .lp-one-g li{padding:24px 24px 26px 0}
  .lp-one-g li + li{padding-left:24px}
  .lp-one-g li:nth-child(2n){border-right:0;padding-right:0}
  .lp-one-g li:nth-child(2n+1){padding-left:0}
  .lp-one-g li:nth-child(-n+2){border-bottom:1px solid rgba(15,40,70,.14)}
}
@media (max-width:900px){
  .lp-spec-l{grid-template-columns:1fr;gap:0}
}
@media (max-width:700px){
  .lp-phones{grid-template-columns:1fr 1fr;gap:28px 16px}
  .lp-ph{padding:5px;border-radius:14px}
  .lp-ph::before{width:54px;height:12px;margin-left:-27px;top:5px}
  .lp-ph img{border-radius:10px}
  .lp-phones b{font-size:16px;margin-top:12px}
  .lp-phones p{font-size:14px}
  .lp-one-g{grid-template-columns:1fr;border-bottom:0}
  .lp-one-g li,.lp-one-g li + li,.lp-one-g li:nth-child(2n+1){padding:20px 0;border-right:0;border-bottom:1px solid rgba(15,40,70,.14)}
  .lp-one-g li{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 16px}
  .lp-one-g svg{grid-row:1/3;width:28px;height:28px;margin-top:2px}
  .lp-spec-l b{font-size:18px}
}

/* ======================================================================
   Insights (blog) in the option A style: the index and the post template.
   Post bodies arrive as the house HTML from blog/AUTHOR-GUIDE.md (takeaways,
   mn, term, check, steps, pullquote, callout, stat-callout, faq-q, tables).
   ====================================================================== */

/* ---------- post hero ---------- */
.sh-post .sh-in{grid-template-columns:minmax(0,1fr) 380px;align-items:center}
.post-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 18px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.66)}
.post-k .tag{font-family:var(--sans);font-weight:700;letter-spacing:.1em;font-size:12px;color:var(--teal-s);padding-right:18px;border-right:1px solid var(--line2)}
.sh-post h1.sm{font-size:clamp(32px,3.6vw,50px);line-height:1.04}
.byline{display:flex;align-items:center;gap:14px;margin-top:26px}
.byline img{width:52px;height:52px;border-radius:3px;object-fit:cover;object-position:top center;outline:1px solid var(--line2)}
.byline b{display:block;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:16px;color:#fff}
.byline span{display:block;font-size:13.5px;color:rgba(255,255,255,.62);margin-top:2px}
.cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;padding:28px;border:1px solid var(--line2);border-radius:4px;background:linear-gradient(160deg,rgba(31,168,184,.12),rgba(7,20,38,0) 60%);overflow:hidden}
.cover-w{font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(40px,3.6vw,54px);line-height:.95;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--teal-s);overflow-wrap:normal;hyphens:none}
.cover-w::after{content:"";display:block;width:64px;height:4px;background:var(--amber);margin-top:22px}
.cover-n{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.cover-n b{color:var(--teal-s);font-weight:700}

/* ---------- post body with the rail ---------- */
.post-wrap{padding:64px 0 72px}
.post-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;align-items:start}
.post-rail{min-width:0;max-width:100%}
.toc a span{min-width:0;overflow-wrap:anywhere}
.post-rail{position:sticky;top:96px}
.post-rail .kk{margin-bottom:12px}
.toc{display:flex;flex-direction:column;border-top:1px solid rgba(15,40,70,.18)}
.toc a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid rgba(15,40,70,.12);font-size:14px;font-weight:600;line-height:1.35;color:var(--ink2);text-decoration:none;transition:color .2s}
.toc a i{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:12px;font-style:normal;color:var(--teal-t);padding-top:2px}
.toc a:hover,.toc a.on{color:var(--n7)}
.toc a.on{box-shadow:inset 3px 0 0 var(--teal-b);padding-left:10px}
.rail-acts{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:18px}
.rail-acts button,.rail-acts a{display:inline-flex;align-items:center;gap:8px;padding:7px 0;border:0;border-bottom:2px solid var(--teal-b);background:none;font:700 14.5px var(--sans);color:var(--n7);text-decoration:none;cursor:pointer}
.rail-acts button:hover,.rail-acts a:hover{color:var(--teal-t)}
.rail-acts svg{width:15px;height:15px}
.rail-acts .ok{font-size:13px;color:var(--teal-t);font-weight:600;min-height:18px}

.post{max-width:72ch;font-size:18px;line-height:1.72;color:var(--ink)}
.post > p{margin:0 0 22px}
.post h2{font-family:var(--disp);font-stretch:115%;font-weight:700;font-size:30px;line-height:1.1;color:var(--n7);margin:46px 0 16px;padding-top:26px;border-top:1px solid rgba(15,40,70,.18);scroll-margin-top:90px}
.post h2 .num{display:block;font-size:13px;font-stretch:120%;font-weight:800;color:var(--teal-t);letter-spacing:.06em;margin-bottom:8px}
.post h3{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:22px;line-height:1.2;color:var(--n7);margin:30px 0 10px}
.post h3.faq-q{padding-top:16px;border-top:1px solid rgba(15,40,70,.14);font-size:20px}
.post h3.faq-q + p{margin-top:8px}
.post p strong{color:var(--n7)}
.post p > strong:first-child{color:var(--teal-t)}
.post a{color:var(--n7);font-weight:600;text-decoration:none;border-bottom:2px solid var(--teal-b)}
.post a:hover{color:var(--teal-t)}
.post ul:not(.check):not(.takeaways ul),.post ol:not(.steps){margin:0 0 22px;padding-left:22px}
.post ul:not(.check) > li,.post ol:not(.steps) > li{margin:6px 0}
.post hr{border:0;height:1px;background:rgba(15,40,70,.18);margin:36px 0}
.post em{font-style:normal;font-weight:600}
.post img{max-width:100%;height:auto;border-radius:4px}
.post blockquote:not(.pullquote){margin:0 0 22px;padding:0 0 0 22px;border-left:3px solid var(--teal-b);color:var(--ink2)}

/* key takeaways */
.takeaways{margin:0 0 34px;padding:26px 28px;background:var(--n8);color:#fff;border-radius:4px;box-shadow:inset 3px 0 0 var(--amber)}
.tk-head{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.tk-head svg{width:16px;height:16px;fill:var(--amber)}
.takeaways ul{list-style:none;margin:0;padding:0;counter-reset:tk}
.takeaways li{position:relative;padding:12px 0 12px 44px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.55;color:var(--body);counter-increment:tk}
.takeaways li::before{content:"0" counter(tk);position:absolute;left:0;top:13px;font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:13px;color:var(--teal-s)}
.takeaways li strong{color:#fff}

/* margin note */
.mn{margin:0 0 24px;padding:16px 20px;border-left:3px solid var(--teal-b);background:rgba(15,40,70,.05);font-family:var(--disp);font-stretch:106%;font-weight:600;font-size:17px;line-height:1.5;color:var(--n7)}
.mn::before{content:"BY THE WAY";display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--teal-t);margin-bottom:6px}

/* plain-English term */
.post .term{position:relative;display:inline;border:0;border-bottom:2px dotted var(--teal-t);border-radius:0;background:none;box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;overflow:visible;cursor:help;font-weight:600;color:var(--n7)}
.post .term::after{content:attr(data-def);position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;width:min(320px,70vw);padding:12px 14px;background:var(--n9);color:#fff;font-size:14px;font-weight:500;line-height:1.5;border-radius:4px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);display:none}
.post .term:hover::after,.post .term:focus::after,.post .term.on::after{display:block}
.pg-post{overflow-x:clip}

/* checklists and steps */
.post ul.check{list-style:none;margin:0 0 24px;padding:0}
.post ul.check > li{position:relative;padding:10px 0 10px 34px;border-top:1px solid rgba(15,40,70,.12)}
.post ul.check > li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:14px;border:2px solid var(--teal-t);border-radius:2px}
.post ul.check > li::after{content:"";position:absolute;left:7px;top:17px;width:5px;height:9px;border:solid var(--teal-t);border-width:0 2px 2px 0;transform:rotate(45deg)}
.post ol.steps{display:block;grid-template-columns:none;gap:0;list-style:none;margin:0 0 24px;padding:0;counter-reset:st}
.post ol.steps > li,.post ol.steps > li:first-child{display:block;grid-template-columns:none;position:relative;margin:0;padding:12px 0 12px 54px;border-top:1px solid rgba(15,40,70,.12);counter-increment:st}
.post ol.steps > li > p{margin:0 0 8px}.post ol.steps > li > p:last-child{margin:0}
.post ol.steps .rail{display:none}
.post ol.steps > li::before{content:counter(st);position:absolute;left:0;top:12px;width:36px;height:36px;display:grid;place-items:center;background:var(--n7);color:var(--teal-s);font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:15px;border-radius:3px}

/* pull quote */
.pullquote{margin:34px 0;padding:6px 0 6px 26px;border-left:4px solid var(--amber);font-family:var(--disp);font-stretch:108%;font-weight:700;font-size:26px;line-height:1.3;color:var(--n7)}
.pullquote small{display:block;margin-top:10px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink2)}

/* callouts, stats, inline form */
.callout{margin:34px 0;padding:26px 28px;background:var(--n8);color:#fff;border-radius:4px}
.callout h3{color:#fff;margin-top:0}
.callout p{color:var(--body);font-size:16.5px}
.callout a{color:#fff;border-bottom-color:var(--teal-s)}
.inline-form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.inline-form input[type="email"]{flex:1 1 240px;min-width:0;padding:12px 14px;border:1px solid var(--line2);border-radius:3px;background:rgba(255,255,255,.06);color:#fff;font:500 16px var(--sans)}
.inline-form input[type="email"]::placeholder{color:rgba(255,255,255,.45)}
.inline-form input[type="email"]:focus{outline:2px solid var(--teal-b);outline-offset:1px}
.inline-form button{padding:12px 20px;border:0;border-radius:3px;background:var(--teal-b);color:var(--n9);font:700 15px var(--sans);cursor:pointer}
.inline-form button:hover{background:var(--teal-s)}
.inline-form .form-result{width:100%;margin:6px 0 0;font-size:14.5px;color:var(--teal-s)}
.inline-ok{display:none}
.stat-callout{margin:34px 0;display:grid;gap:0;border-top:1px solid rgba(15,40,70,.18)}
.stat-callout p{margin:0;padding:16px 0;border-bottom:1px solid rgba(15,40,70,.12);font-size:16.5px}
.stat-callout p strong{display:block;font-family:var(--disp);font-stretch:122%;font-weight:800;font-size:36px;line-height:1;color:var(--n7);margin-bottom:6px}
.post .sn{font-family:var(--disp);font-stretch:122%;font-weight:800;font-size:44px;line-height:1;color:var(--n7);width:auto;height:auto;border:0;background:none;display:block}
.post .sl{font-size:14px;font-weight:600;color:var(--ink2)}

/* tables */
.tbl-wrap{margin:0 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.post table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.post table:not(.tbl-wrap table){display:block;max-width:100%;overflow-x:auto}
.post th{text-align:left;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-t);padding:10px 12px 10px 0;border-bottom:2px solid var(--n7)}
.post td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(15,40,70,.14);vertical-align:top}
.post td:first-child{font-weight:600;color:var(--n7)}

/* ---------- after the post: author, more ---------- */
.post-after .author{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:28px;align-items:center;padding:30px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line)}
.post-after .author img{width:120px;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top center;border-radius:4px;outline:1px solid var(--line2)}
.post-after .author .kk{margin-bottom:6px}
.post-after .author h3{font-size:26px;font-stretch:112%;color:#fff}
.post-after .author p{font-size:15.5px;line-height:1.6;color:var(--body);margin-top:8px;max-width:60ch}
.post-after .nx{margin-top:40px}

/* ---------- the index ---------- */
.sh-blog .sh-in{grid-template-columns:minmax(0,1fr) 440px;align-items:center}
.feat{display:grid;grid-template-columns:1fr;gap:14px;padding:26px 28px;border:1px solid var(--line2);border-radius:4px;background:rgba(7,20,38,.5);text-decoration:none;color:#fff;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.feat:hover{border-color:var(--teal-s);transform:translateY(-3px)}
.feat .kk{color:var(--amber)}
.feat h2{font-size:26px;font-stretch:112%;line-height:1.15;color:#fff}
.feat p{font-size:15.5px;line-height:1.55;color:var(--body)}
.feat .meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6)}
.feat .meta b{color:var(--teal-s)}
.feat .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;padding:6px 0;border-bottom:2px solid var(--teal-b);justify-self:start}
.feat .go svg{width:16px;height:16px;color:var(--teal-s)}
.tags{display:flex;flex-wrap:wrap;gap:0 26px;margin:0 0 8px;padding:0;list-style:none;border-bottom:1px solid rgba(15,40,70,.18)}
.tags button{padding:12px 0;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font:700 14px var(--sans);letter-spacing:.02em;color:var(--ink2);cursor:pointer;transition:color .2s,border-color .2s}
.tags button:hover{color:var(--n7)}
.tags button[aria-pressed="true"]{color:var(--n7);border-bottom-color:var(--teal-b)}
.posts{list-style:none;margin:0;padding:0}
.posts li{display:grid;grid-template-columns:64px minmax(0,1fr) 220px;gap:10px 32px;align-items:start;padding:26px 0;border-bottom:1px solid rgba(15,40,70,.14)}
.posts li[hidden]{display:none}
.posts .no{font-family:var(--disp);font-stretch:120%;font-weight:800;font-size:14px;color:var(--teal-t);padding-top:6px}
.posts h3{font-size:24px;font-stretch:112%;line-height:1.15}
.posts h3 a{color:var(--n7);text-decoration:none}
.posts h3 a:hover{color:var(--teal-t)}
.posts p{font-size:15.5px;line-height:1.55;color:var(--ink2);margin-top:8px;max-width:70ch}
.posts .meta{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2);padding-top:6px}
.posts .meta b{font-size:12px;letter-spacing:.08em;color:var(--teal-t)}
.posts .more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:700;font-size:14.5px;color:var(--n7);text-decoration:none;border-bottom:2px solid var(--teal-b);padding:4px 0}
.posts .more svg{width:15px;height:15px;color:var(--teal-t);transition:transform .25s}
.posts .more:hover svg{transform:translateX(4px)}
.posts-empty{padding:30px 0;color:var(--ink2)}

@media (max-width:1180px){
  .sh-post .sh-in{grid-template-columns:minmax(0,1fr) 320px}
  .post-grid{grid-template-columns:220px minmax(0,1fr);gap:40px}
  .sh-blog .sh-in{grid-template-columns:minmax(0,1fr) 380px}
}
@media (max-width:1000px){
  .posts li{grid-template-columns:48px minmax(0,1fr)}
  .posts .meta{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:6px 18px;padding-top:0}
}
@media (max-width:900px){
  .sh-post .sh-in,.sh-blog .sh-in{grid-template-columns:1fr}
  .cover{min-height:0;padding:22px}
  .cover-w{font-size:48px}
  .post-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .post-rail{position:static}
  .post-wrap{padding:44px 0 56px}
  .post{font-size:17px}
  .post-after .author{grid-template-columns:96px minmax(0,1fr);gap:20px}
  .post-after .author .btn{grid-column:2;justify-self:start}
}
@media (max-width:700px){
  .post{font-size:16.5px;line-height:1.7}
  .post h2{font-size:26px;margin-top:38px}
  .post h3{font-size:20px}
  .pullquote{font-size:22px}
  .takeaways,.callout{padding:20px 18px}
  .takeaways li{font-size:16px}
  .tags{gap:0 18px}
  .posts li{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .posts .no{display:none}
  .posts .meta{grid-column:1}
  .posts h3{font-size:21px}
  .feat{padding:20px}
  .post-after .author{grid-template-columns:1fr}
  .post-after .author img{width:96px;height:auto}
  .post-after .author .btn{grid-column:1}
}