/* Grip Tech Floor Coatings — site styles
   Identity comes from the client's own material: the Nov 2026 logo (Grip blue + black, heavy italic, speed lines,
   the squeegee man), the white box truck, and the safety yellow on their current site. Plain CSS, no build step. */

@view-transition { navigation: auto; }

@property --p { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --fill { syntax: '<number>'; inherits: true; initial-value: 0; }

:root{
  --ink-950:#06070A; --ink-900:#0B0D12; --ink-850:#10131A; --ink-800:#171B24; --ink-700:#242B37; --ink-600:#3B4353;
  --blue:#1450E6; --blue-hi:#2F7BFF; --blue-lo:#0A2C8C; --blue-tint:#A9C2FF;
  --yellow:#FFC61A;
  --paper:#F2F3F5; --concrete:#E2E5EA; --white:#fff;
  --tx:#0B0D12; --tx-2:#4A5163; --tx-3:#6B7385;
  --line-d:rgba(255,255,255,.12); --line-l:rgba(11,13,18,.13);

  --f-d:'Saira', 'Arial Narrow', sans-serif;
  --f-b:'Hanken Grotesk', system-ui, sans-serif;
  --f-m:'IBM Plex Mono', ui-monospace, monospace;

  --t-xs:clamp(.72rem, .7rem + .1vw, .78rem);
  --t-sm:clamp(.88rem, .86rem + .1vw, .94rem);
  --t-md:clamp(1rem, .97rem + .15vw, 1.08rem);
  --t-lg:clamp(1.1rem, 1.03rem + .35vw, 1.3rem);
  --t-h4:clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  --t-h3:clamp(1.4rem, 1.15rem + 1.1vw, 2.15rem);
  --t-h2:clamp(2rem, 1.25rem + 3.4vw, 4.4rem);
  --t-xl:clamp(2.9rem, 1.2rem + 7.6vw, 8.4rem);

  --r1:8px; --r2:14px; --r3:22px;
  --gut:clamp(16px, 4vw, 44px);
  --max:1320px;
  --sec:clamp(64px, 9vw, 128px);
  --skew:-9deg;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --dock:0px;
}
@media (max-width:760px){ :root{ --dock:74px; } }
@media (min-width:1600px){ :root{ --max:1480px; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;interpolate-size:allow-keywords}
body{margin:0;background:var(--ink-900);color:#fff;font:500 var(--t-md)/1.6 var(--f-b);-webkit-font-smoothing:antialiased;padding-bottom:var(--dock);overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-hi);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);padding-inline:var(--gut);margin-inline:auto}
.wrap > *, .grid > *{min-width:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:var(--tx);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:8px}
.light{background:var(--paper);color:var(--tx)}
.white{background:#fff;color:var(--tx)}

/* ---------- type ---------- */
.d, h1, .h2, .h3, .h4{font-family:var(--f-d);font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:var(--t-xl);line-height:.86}
.h2{font-size:var(--t-h2);line-height:.92;margin-bottom:.4em}
.h3{font-size:var(--t-h3);line-height:.96;margin-bottom:.45em}
.h4{font-size:var(--t-h4);line-height:1;font-weight:800;margin-bottom:.4em}
.hl{color:var(--blue-hi)}
.light .hl,.white .hl{color:var(--blue)}
.lead{font-size:var(--t-lg);line-height:1.55;margin:0;max-width:60ch;color:rgba(255,255,255,.76);text-wrap:pretty}
.light .lead,.white .lead{color:var(--tx-2)}
.lead a{font-weight:800}
p{text-wrap:pretty}
.tag{display:block;margin:0 0 16px;font:600 var(--t-xs)/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-tint)}
.light .tag,.white .tag{color:var(--blue)}
.tag b{font-weight:600;color:var(--yellow);margin-right:.35em}
.light .tag b,.white .tag b{color:var(--blue-lo)}
.speed{display:grid;gap:5px;width:min(300px,64%)}
.speed i{height:5px;transform:skewX(var(--skew));background:linear-gradient(90deg,var(--blue-hi),transparent)}
.speed i:nth-child(2){width:76%;background:linear-gradient(90deg,currentColor,transparent);opacity:.9}
.speed i:nth-child(3){width:50%;opacity:.55}
.stars{color:var(--yellow);letter-spacing:.08em;font-style:normal}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:var(--r1);font:800 var(--t-sm)/1 var(--f-b);letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;transition:transform .25s var(--spring),box-shadow .25s var(--ease),background-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 14px 30px -14px rgba(20,80,230,.95)}
.btn--blue::before{content:"";position:absolute;inset:0 auto 0 -30%;width:30%;z-index:-1;background:var(--blue-hi);transform:skewX(var(--skew));transition:inset .5s var(--ease),width .5s var(--ease)}
.btn--blue:hover::before{inset:0 -10% 0 -10%;width:120%}
.btn--blue:hover{transform:translateY(-2px)}
.btn--line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.06)}
.light .btn--line,.white .btn--line,.btn--line.dark{color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line-l)}
.light .btn--line:hover,.white .btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--tx)}
.btn--yellow{background:var(--yellow);color:var(--tx)}
.btn--lg{min-height:58px;padding:0 28px;font-size:var(--t-md)}
.btn--sm{min-height:42px;padding:0 16px}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
a:hover .arrow,button:hover .arrow{transform:translateX(4px)}
.link{font-weight:800;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}

/* ---------- top bar (truck panel wording) ---------- */
.truckbar{background:var(--blue);color:#fff;font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;height:34px;overflow:hidden;display:flex;align-items:center}
.truckbar__track{display:flex;gap:26px;padding-left:26px;white-space:nowrap;animation:marquee 40s linear infinite}
.truckbar__track span{display:flex;align-items:center;gap:26px}
.truckbar__track span::after{content:"";width:14px;height:4px;background:var(--yellow);transform:skewX(var(--skew))}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);color:var(--tx);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line-l);transition:translate .35s var(--ease);view-transition-name:hdr}
.hdr.is-up{translate:0 -100%}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.brand{flex:none;display:block}
.brand img{height:48px;width:auto}
.nav{display:none;gap:clamp(16px,1.8vw,28px);font:700 var(--t-sm)/1 var(--f-b)}
.nav a{text-decoration:none;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);transform:scaleX(0) skewX(var(--skew));transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1) skewX(var(--skew))}
.hdr__cta{display:flex;align-items:center;gap:12px}
.hdr__tel{display:none;font-weight:800;text-decoration:none;font-size:var(--t-sm);white-space:nowrap}
.hdr__cta .btn{display:none}
.menu-btn{width:48px;height:48px;border-radius:10px;border:1px solid var(--line-l);background:#fff;display:grid;place-content:center;gap:6px;cursor:pointer}
.menu-btn span{width:22px;height:2.5px;border-radius:2px;background:var(--tx)}
@media (min-width:600px){ .hdr__cta .btn{display:inline-flex} }
@media (min-width:1180px){ .nav{display:flex} .menu-btn{display:none} .hdr__tel{display:inline} .brand img{height:52px} }

/* phone menu: popover sheet */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:92svh;border:0;padding:12px 22px calc(22px + env(safe-area-inset-bottom));background:var(--ink-850);color:#fff;border-radius:24px 24px 0 0;border-top:3px solid var(--blue);box-shadow:0 -24px 60px rgba(0,0,0,.55);overflow:auto;transition:translate .42s var(--ease),display .42s allow-discrete,overlay .42s allow-discrete}
.sheet:popover-open{translate:0 0}
@starting-style{ .sheet:popover-open{translate:0 100%} }
.sheet:not(:popover-open){translate:0 100%}
.sheet::backdrop{background:rgba(3,4,6,.6)}
.sheet__grab{width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.25);margin:0 auto 10px}
.sheet nav a{display:flex;align-items:baseline;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line-d);text-decoration:none;font:italic 900 1.3rem/1.1 var(--f-d);font-stretch:118%;text-transform:uppercase}
.sheet nav a span{font:600 .72rem/1 var(--f-m);font-style:normal;color:var(--blue-hi)}
.sheet__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.sheet__row .btn{padding:0 8px;min-height:54px}
.sheet__close{position:absolute;right:14px;top:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);cursor:pointer;font-size:1.1rem}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-900)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 85% 20%,rgba(20,80,230,.28),transparent 70%),radial-gradient(50% 40% at 10% 100%,rgba(20,80,230,.14),transparent 70%)}
.hero__grid{display:grid;gap:0;min-height:calc(100svh - 104px)}
.hero__copy{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding-block:28px 34px;position:relative;z-index:2}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .14em .06em 0;margin-bottom:-.04em}
.hero h1 .ln > span{display:inline-block;clip-path:inset(0 100% 0 0);animation:wipe .95s var(--ease) .15s forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:.42s;color:var(--blue-hi)}
@keyframes wipe{to{clip-path:inset(0 -12% 0 0)}}
.hero__sub{margin:0;max-width:44ch;font-size:var(--t-lg);color:rgba(255,255,255,.84)}
.hero__sub b{color:#fff}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero__ctas .btn{flex:1 1 220px}
.proof{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-d)}
.proof li{padding:14px 12px 0 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.proof b{font:italic 900 clamp(1.05rem,.95rem + .5vw,1.4rem)/1.05 var(--f-d);font-stretch:112%;text-transform:uppercase}
.proof span{font-size:var(--t-xs);font-weight:600;color:rgba(255,255,255,.62)}

/* the film strips (slanted like the logo) */
.reel{position:relative}
.reel__strips{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:12px;transform:skewX(var(--skew));margin-inline:6% -10%}
.strip{position:relative;overflow:hidden;background:var(--ink-800);border-radius:6px}
.strip:nth-child(2){margin-top:12%;margin-bottom:-6%}
.strip:nth-child(3){margin-top:-4%;margin-bottom:10%}
.strip__media{position:absolute;inset:-2% -26%;transform:skewX(9deg)}
.strip__media img,.strip__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strip__media video{opacity:0;transition:opacity .8s var(--ease)}
.strip__media video.is-on{opacity:1}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.05) 50%,rgba(11,13,18,.55))}
.strip__label{position:absolute;left:14px;bottom:14px;z-index:2;transform:skewX(9deg);font:600 10.5px/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:6px 8px;background:rgba(11,13,18,.6);border-radius:4px;max-width:calc(100% - 28px)}
.strip__label i{display:block;font-style:normal;color:var(--yellow)}
.film-ctl{position:absolute;z-index:3;right:var(--gut);bottom:18px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-d);background:rgba(11,13,18,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.film-ctl[hidden]{display:none}
.film-ctl i{width:10px;height:12px;border-inline:3px solid #fff}
.film-ctl[aria-pressed="true"] i{border:0;border-left:10px solid #fff;border-block:6px solid transparent;width:0;height:0}
.reel--phone{display:block}
.reel--desk{display:none}
.reel--phone .phone-film{position:relative;height:min(118vw,74svh,640px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.reel--phone img,.reel--phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.reel--phone video{opacity:0;transition:opacity .8s var(--ease)}
.reel--phone video.is-on{opacity:1}
.reel--phone .strip__label{transform:none;top:14px;bottom:auto;left:var(--gut)}
.reel--phone .film-ctl{top:12px;bottom:auto}
@media (max-width:899px){
  .hero__copy{margin-top:max(-30vw,-190px)}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
  .reel--phone{display:none}
  .reel--desk{display:block;min-height:620px}
  .hero__copy{padding-block:64px 56px;padding-right:20px}
}
@media (min-width:1300px){ .proof{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:900px){ .hero h1{font-size:clamp(3rem,min(5.4vw,10.5vh),7.6rem)} }

/* ---------- client marquee ---------- */
.clients{background:var(--ink-950);border-block:1px solid var(--line-d);display:flex;align-items:center;overflow:hidden}
.clients__label{flex:none;padding:0 18px;height:60px;display:flex;align-items:center;font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-tint);background:var(--ink-950);box-shadow:18px 0 18px var(--ink-950);position:relative;z-index:1}
.clients__rail{display:flex;overflow:hidden;flex:1;min-width:0}
.clients ul{display:flex;gap:30px;padding:0 30px 0 0;margin:0;list-style:none;flex:none;animation:marquee 56s linear infinite}
.clients li{white-space:nowrap;font:italic 800 clamp(.95rem,.9rem + .3vw,1.1rem)/60px var(--f-d);font-stretch:112%;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;gap:30px;align-items:center}
.clients li::after{content:"";width:8px;height:8px;background:var(--blue-hi);transform:skewX(var(--skew))}
.clients:hover ul{animation-play-state:paused}

/* ---------- section scaffolding ---------- */
.sec{padding-block:var(--sec);position:relative}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head .h2{margin:0;max-width:18ch}
@media (min-width:960px){ .sec-head--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;column-gap:60px} }
.cut{clip-path:polygon(0 0,100% 3.2vw,100% 100%,0 100%);margin-top:-3.2vw;padding-top:calc(var(--sec) + 3.2vw)}
.cut--r{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%)}

/* ---------- Floor Lab (signature) ---------- */
.lab{background:radial-gradient(60% 50% at 85% 0%,rgba(20,80,230,.24),transparent 70%),linear-gradient(180deg,var(--ink-900),var(--ink-850))}
.lab__grid{display:grid;gap:22px}
.lab__stage{position:relative;aspect-ratio:4/5;border-radius:var(--r3);overflow:hidden;background:#20242c;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px var(--line-d);touch-action:pan-y;user-select:none;-webkit-user-select:none;container-type:inline-size}
.lab__photo,.lab__coat{position:absolute;inset:0;width:100%;height:100%}
.lab__photo{object-fit:cover;object-position:50% 100%}
.lab__coat{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.lab__edge{position:absolute;top:0;bottom:0;left:var(--p);width:0;pointer-events:none}
.lab__edge::before{content:"";position:absolute;top:33%;bottom:0;left:-2px;width:4px;background:linear-gradient(180deg,transparent,#fff 14%);box-shadow:0 0 20px rgba(47,123,255,.95),0 0 3px #fff}
.lab__edge::after{content:"";position:absolute;top:33%;bottom:0;left:-30px;width:28px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22));mix-blend-mode:screen}
.lab__handle{position:absolute;top:66%;left:0;translate:-50% -50%;width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 12px 28px rgba(0,0,0,.5);transition:scale .25s var(--spring)}
.lab__stage:active .lab__handle{scale:1.1}
.lab__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.lab__stage:has(.lab__range:focus-visible){outline:3px solid var(--blue-hi);outline-offset:4px}
.lab__chip{position:absolute;top:14px;padding:7px 10px;border-radius:5px;font:600 10.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;background:rgba(11,13,18,.74);pointer-events:none;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab__chip--l{left:14px} .lab__chip--r{right:14px;background:var(--blue)}
.lab__hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;margin:0;padding:10px 14px;border-radius:999px;background:#fff;color:var(--tx);font:800 var(--t-xs)/1 var(--f-b);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.4);transition:opacity .4s}
.lab.is-touched .lab__hint{opacity:0}
.lab__panel{background:rgba(255,255,255,.035);border:1px solid var(--line-d);border-radius:var(--r3);padding:clamp(18px,2.4vw,30px)}
.lab__step{margin:0 0 10px;font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lab__step b{color:var(--yellow);margin-right:6px}
.sys{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut)*-1) 20px;padding:2px var(--gut) 4px}
.sys::-webkit-scrollbar{display:none}
.sys button{flex:none;min-height:48px;padding:0 16px;border-radius:var(--r1);border:1.5px solid var(--line-d);background:rgba(255,255,255,.03);font:italic 800 var(--t-sm)/1 var(--f-d);font-stretch:115%;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,scale .2s var(--spring)}
.sys button:hover{border-color:rgba(255,255,255,.4)}
.sys button[aria-checked="true"]{background:var(--blue);border-color:var(--blue)}
.sys button:active{scale:.95}
.sw{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0 0 22px;padding-bottom:18px}
@media (max-width:420px){ .sw button{width:48px!important;height:48px!important} .sw{gap:16px 10px} }
.sw button{width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;background-size:cover;box-shadow:0 0 0 2px var(--line-d);position:relative;transition:scale .25s var(--spring),box-shadow .2s}
.sw button:hover{scale:1.06}
.sw button[aria-checked="true"]{box-shadow:0 0 0 3px var(--ink-850),0 0 0 6px var(--blue-hi)}
.sw button span{position:absolute;left:50%;top:calc(100% + 7px);translate:-50% 0;font:600 10px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s}
.sw button[aria-checked="true"] span{opacity:1}
.spec{border-top:1px solid var(--line-d);padding-top:18px}
.spec__code{margin:0 0 8px;font:600 var(--t-xs)/1.3 var(--f-m);letter-spacing:.1em;color:var(--blue-tint)}
.spec__name{margin:0 0 10px;font:italic 900 clamp(1.45rem,1.15rem + 1.3vw,2.3rem)/1 var(--f-d);font-stretch:125%;text-transform:uppercase}
.spec__desc{margin:0 0 12px;color:rgba(255,255,255,.78)}
.spec dl{margin:0}
.spec dl div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px dashed var(--line-d)}
.spec dt{font:600 var(--t-xs)/1.5 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.spec dd{margin:0;font-size:var(--t-sm);font-weight:600}
.lab__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lab__ctas .btn{flex:1 1 210px}
.lab__fine{margin:12px 0 0;font-size:var(--t-xs);color:rgba(255,255,255,.52)}
@media (min-width:1000px){
  .lab__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head head" "stage panel";column-gap:clamp(30px,4vw,60px);row-gap:36px;align-items:start}
  .lab__head{grid-area:head}
  .lab__stage{grid-area:stage;position:sticky;top:96px}
  .lab__panel{grid-area:panel}
  .sys{flex-wrap:wrap;overflow:visible;margin:0 0 22px;padding:0}
}

/* ---------- two doors (home / business) ---------- */
.doors{display:grid;gap:16px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(380px,52vw,640px);border-radius:var(--r3);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;container-type:inline-size}
.door > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:scale 1.1s var(--ease)}
.door::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,13,18,0) 25%,rgba(11,13,18,.9) 82%)}
.door:hover > img{scale:1.05}
.door__body{padding:clamp(20px,3vw,34px)}
.door__body .h3{margin-bottom:.3em}
.door .tag{color:#fff}
.door .tag b{color:var(--yellow)}
.door__body p{margin:0 0 14px;max-width:44ch;color:rgba(255,255,255,.85)}
.door__list{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.door__list li{font:600 11px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.door__go{display:inline-flex;align-items:center;gap:10px;font-weight:800}
.door__go b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);transition:background .2s,translate .3s var(--ease)}
.door:hover .door__go b{background:var(--blue-hi);translate:4px 0}
@container (min-width:520px){ .door__body .h3{font-size:clamp(2rem,1.4rem + 1.6vw,3rem)} }
@media (min-width:860px){ .doors{grid-template-columns:1fr 1fr} .door:nth-child(2){margin-top:60px} }

/* ---------- systems spec list ---------- */
.specs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:4px var(--gut) 12px;scrollbar-width:none}
.specs::-webkit-scrollbar{display:none}
.specs > .srow{flex:0 0 80%;scroll-snap-align:center}
@media (min-width:600px) and (max-width:899px){ .specs{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0} .specs > .srow{flex:none} }
.srow{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-radius:var(--r2);overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--line-l),0 24px 50px -40px rgba(11,13,18,.5);text-decoration:none;color:var(--tx)}
.srow__img{aspect-ratio:16/10;overflow:hidden}
.srow__img img{width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease)}
.srow:hover .srow__img img{scale:1.05}
.srow__body{padding:20px 20px 22px;display:grid;gap:8px}
.srow__no{font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.1em;color:var(--blue)}
.srow h3{font:italic 900 clamp(1.45rem,1.2rem + 1vw,2.3rem)/1 var(--f-d);font-stretch:125%;text-transform:uppercase;margin:0}
.srow p{margin:0;color:var(--tx-2)}
.srow__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.srow__meta span{font:600 11px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;padding:7px 9px;border-radius:5px;background:var(--paper);color:var(--tx-2)}
@media (min-width:900px){
  .specs{display:grid;gap:0;border-top:2px solid var(--tx);overflow:visible;margin:0;padding:0}
  .specs > .srow{flex:none}
  .srow{grid-template-columns:90px minmax(0,1.1fr) minmax(0,1fr) 220px;align-items:center;border-radius:0;box-shadow:none;background:transparent;border-bottom:1px solid var(--line-l);padding:22px 0;transition:background .3s}
  .srow__body{display:contents}
  .srow__no{order:0;padding-left:6px}
  .srow h3{order:1}
  .srow p{order:2;padding-right:20px}
  .srow__meta{display:none}
  .srow__img{order:3;aspect-ratio:16/10;border-radius:var(--r1);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);transition:clip-path .5s var(--ease)}
  .srow:hover{background:#fff}
  .srow:hover .srow__img{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .srow:hover h3{color:var(--blue)}
}

/* ---------- process (their own video captions) ---------- */
.process{display:grid;gap:34px}
.steps{list-style:none;margin:0;padding:0 0 0 36px;position:relative;display:grid;gap:14px}
.steps::before,.steps::after{content:"";position:absolute;left:12px;top:12px;bottom:12px;width:4px;border-radius:4px;background:var(--line-d)}
.steps::after{background:linear-gradient(180deg,var(--blue-hi),var(--yellow));transform-origin:top;transform:scaleY(var(--fill))}
.step{position:relative;padding:18px 20px;border-radius:var(--r2);background:var(--ink-800);border:1px solid var(--line-d);display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:14px;align-items:center}
.step::before{content:"";position:absolute;left:-31px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--ink-900);border:3px solid var(--blue-hi)}
.step__t{font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.step h3{font:italic 900 var(--t-h4)/1.05 var(--f-d);font-stretch:118%;text-transform:uppercase;margin:8px 0 6px}
.step p{margin:0;font-size:var(--t-sm);color:rgba(255,255,255,.74)}
.step img{width:96px;height:96px;object-fit:cover;border-radius:var(--r1)}
.quote-big{margin:0;display:grid;gap:12px}
.quote-big blockquote{margin:0;font:italic 900 clamp(2.2rem,1.4rem + 3.6vw,5rem)/.9 var(--f-d);font-stretch:125%;text-transform:uppercase}
.quote-big figcaption{font:600 var(--t-xs)/1.4 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.crew{position:relative;margin:24px 0 0;border-radius:var(--r2);overflow:hidden;max-width:440px;aspect-ratio:1}
.crew img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.crew figcaption{position:absolute;left:12px;bottom:12px;padding:8px 11px;border-radius:5px;background:#fff;color:var(--tx);font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase}
@media (min-width:960px){ .process{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start} .process__head{position:sticky;top:110px} }
@supports (animation-timeline: view()){
  .steps.sd::after{animation:fill linear both;animation-timeline:view();animation-range:entry 30% cover 70%}
  @keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ---------- before / after ---------- */
.ba-grid{display:grid;gap:18px}
.ba-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ba-tabs button,.tabs button{min-height:46px;padding:0 16px;border-radius:var(--r1);border:1.5px solid var(--line-l);background:#fff;font-weight:800;font-size:var(--t-sm);cursor:pointer;color:var(--tx)}
.ba-tabs button[aria-selected="true"],.tabs button[aria-selected="true"]{background:var(--tx);color:#fff;border-color:var(--tx)}
.ba{position:relative;aspect-ratio:4/5;max-height:760px;border-radius:var(--r3);overflow:hidden;background:#222;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba > img,.ba__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ba__b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.ba__line b{position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(0,0,0,.4)}
.ba__chip{position:absolute;top:14px;padding:7px 10px;border-radius:5px;font:600 10.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;background:rgba(11,13,18,.74);color:#fff;pointer-events:none}
.ba__chip--l{left:14px} .ba__chip--r{right:14px;background:var(--blue)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.ba:has(input:focus-visible){outline:3px solid var(--blue-hi);outline-offset:4px}
.ba-side{display:grid;gap:16px;align-content:end}
.stat{border-radius:var(--r3);padding:clamp(22px,3vw,34px);background:var(--blue);color:#fff;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:120px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 6px,transparent 6px 18px);transform:skewX(var(--skew))}
.stat b{display:block;font:italic 900 clamp(2.6rem,2rem + 2.4vw,4.4rem)/.9 var(--f-d);font-stretch:125%}
.stat p{margin:10px 0 16px;max-width:36ch;color:rgba(255,255,255,.9)}
@media (min-width:900px){ .ba-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end} .ba{aspect-ratio:4/4.4} }

/* ---------- reviews ---------- */
.rv{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:4px var(--gut) 12px;scrollbar-width:none;scroll-timeline:--rv x}
.rv::-webkit-scrollbar{display:none}
.card{flex:0 0 84%;scroll-snap-align:center;margin:0;padding:24px;border-radius:var(--r3);background:var(--ink-800);border:1px solid var(--line-d);display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.card__k{margin:0;font:600 10.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-tint)}
.card blockquote{margin:0;flex:1;font-size:var(--t-md);line-height:1.55;color:rgba(255,255,255,.9)}
.card figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line-d);font-weight:800}
.rv-progress{height:3px;margin-top:12px;background:var(--line-d);border-radius:3px;overflow:hidden}
.rv-progress i{display:block;height:100%;width:100%;background:var(--blue-hi);transform-origin:left;transform:scaleX(.18)}
@supports (animation-timeline: scroll()){ .rv-progress i{animation:prog linear both;animation-timeline:--rv} @keyframes prog{from{transform:scaleX(.18)}to{transform:scaleX(1)}} }
.gbadge{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:var(--r2);background:#fff;color:var(--tx);text-decoration:none;transition:translate .25s var(--spring)}
.gbadge:hover{translate:0 -2px}
.gbadge__g{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:900 1.25rem/1 var(--f-b);color:#fff;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.gbadge b{font:italic 900 1.45rem/1 var(--f-d)}
.gbadge small{font-weight:700;color:var(--tx-2)}
@media (min-width:880px){
  .rv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .card{flex:none}
  .card:nth-child(3n+2){translate:0 28px}
  .rv-progress{display:none}
}

/* ---------- projects / gallery ---------- */
.proj{display:grid;gap:14px}
.pcard{position:relative;display:block;border-radius:var(--r3);overflow:hidden;min-height:340px;color:#fff;text-decoration:none;isolation:isolate}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:scale 1s var(--ease)}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(11,13,18,.88))}
.pcard:hover img{scale:1.05}
.pcard__b{position:absolute;left:0;right:0;bottom:0;padding:20px}
.pcard__k{margin:0 0 6px;font:600 10.5px/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.pcard h3{font:italic 900 clamp(1.3rem,1.1rem + .8vw,1.9rem)/1 var(--f-d);font-stretch:120%;text-transform:uppercase;margin:0 0 6px}
.pcard p{margin:0;font-size:var(--t-sm);color:rgba(255,255,255,.82)}
@media (min-width:860px){ .proj{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:300px} .pcard{min-height:0} .pcard:nth-child(1){grid-column:span 7;grid-row:span 2} .pcard:nth-child(2){grid-column:span 5} .pcard:nth-child(3){grid-column:span 5} .pcard:nth-child(4){grid-column:span 6} .pcard:nth-child(5){grid-column:span 6} }

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut)*-1) 22px;padding:2px var(--gut)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:46px;padding:0 16px;border-radius:var(--r1);border:1.5px solid var(--line-l);background:#fff;font-weight:800;font-size:var(--t-sm);cursor:pointer;color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--tx);color:#fff;border-color:var(--tx)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:46vw;gap:10px;grid-auto-flow:dense}
.g{position:relative;border:0;padding:0;border-radius:var(--r2);overflow:hidden;cursor:zoom-in;background:var(--concrete)}
.g img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease)}
.g:hover img{scale:1.05}
.g span{position:absolute;left:8px;right:8px;bottom:8px;text-align:left;padding:6px 8px;border-radius:5px;background:rgba(11,13,18,.74);color:#fff;font:600 10px/1.3 var(--f-m);letter-spacing:.04em;text-transform:uppercase}
.g--tall{grid-row:span 2} .g--wide{grid-column:span 2}
.g.is-out{display:none}
@media (min-width:760px){ .gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:12px} .g span{opacity:0;translate:0 6px;transition:opacity .3s,translate .3s} .g:hover span,.g:focus-visible span{opacity:1;translate:0 0} }
@media (min-width:1300px){ .gallery{grid-auto-rows:270px} }
.lb{border:0;padding:0;background:transparent;width:100vw;height:100svh;max-width:none;max-height:none;color:#fff}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(4,5,7,.93)}
.lb img{max-width:min(92vw,1200px);max-height:80svh;border-radius:var(--r2);object-fit:contain}
.lb__cap{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));margin:0;text-align:center;font:600 var(--t-xs)/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.2rem;cursor:pointer}
.lb button:hover{background:var(--blue)}
.lb [data-lb=close]{top:16px;right:16px} .lb [data-lb=prev]{left:12px;top:50%;translate:0 -50%} .lb [data-lb=next]{right:12px;top:50%;translate:0 -50%}
.lb[open]{animation:lbIn .3s var(--ease)}
@keyframes lbIn{from{opacity:0}}

/* ---------- trust: award + area ---------- */
.trust{display:grid;gap:16px}
.panel{background:#fff;border-radius:var(--r3);padding:clamp(22px,3vw,36px);box-shadow:0 1px 0 var(--line-l),0 30px 60px -44px rgba(11,13,18,.5);color:var(--tx)}
.award{display:grid;gap:18px;align-items:center}
.award img{width:140px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}
.award p{margin:0;color:var(--tx-2)}
.pills{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pills li{font:600 11px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;padding:8px 10px;border-radius:5px;background:var(--paper);border:1px solid var(--line-l)}
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.towns li{padding:9px 12px;border-radius:var(--r1);background:var(--paper);font-weight:700;font-size:var(--t-sm)}
.towns li.hq{background:var(--blue);color:#fff}
.towns a{text-decoration:none}
@media (min-width:900px){ .trust{grid-template-columns:1fr 1fr} .award{grid-template-columns:140px minmax(0,1fr)} }

/* ---------- FAQ (animated details) ---------- */
.faq{display:grid;gap:10px}
.faq details{border-radius:var(--r2);border:1px solid var(--line-d);background:rgba(255,255,255,.035);transition:background .3s,border-color .3s}
.light .faq details,.white .faq details{border-color:var(--line-l);background:#fff}
.faq details[open]{border-color:rgba(47,123,255,.55);background:rgba(47,123,255,.08)}
.light .faq details[open]{background:#fff;border-color:var(--blue)}
.faq summary{list-style:none;cursor:pointer;min-height:58px;padding:18px 58px 18px 20px;font-weight:800;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:6px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900;transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0;padding:0 20px 20px;color:rgba(255,255,255,.78)}
.light .faq details p,.white .faq details p{color:var(--tx-2)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq-grid{display:grid;gap:30px}
@media (min-width:960px){ .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:70px} }

/* ---------- estimate ---------- */
.est{position:relative;background:radial-gradient(70% 60% at 100% 100%,rgba(20,80,230,.38),transparent 70%),var(--ink-900)}
.est::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 16px,var(--ink-900) 16px 32px)}
.est__grid{display:grid;gap:30px}
.contact-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.contact-list li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line-d)}
.contact-list b{font:600 var(--t-xs)/1.8 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-tint)}
.contact-list a{font-weight:800;text-decoration:none}
.quiz{background:#fff;color:var(--tx);border-radius:var(--r3);padding:clamp(20px,3vw,34px);box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
.quiz__top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.quiz__count{font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap}
.quiz__bar{flex:1;height:6px;border-radius:6px;background:var(--concrete);overflow:hidden}
.quiz__bar i{display:block;height:100%;width:33.4%;background:linear-gradient(90deg,var(--blue),var(--blue-hi));transition:width .5s var(--ease)}
fieldset.qs{border:0;margin:0;padding:0;min-width:0;display:none}
fieldset.qs.is-on{display:block;animation:up .4s var(--ease)}
@keyframes up{from{opacity:0;translate:0 12px}}
fieldset.qs legend{padding:0;margin-bottom:18px;font:italic 900 clamp(1.35rem,1.15rem + 1vw,2rem)/1 var(--f-d);font-stretch:120%;text-transform:uppercase}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt input,.pick input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:12px;border-radius:var(--r2);border:2px solid var(--line-l);font-weight:800;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,scale .2s var(--spring)}
.opt svg{width:34px;height:34px;color:var(--blue)}
.opt:hover span{border-color:rgba(20,80,230,.5)}
.opt input:checked + span{border-color:var(--blue);background:rgba(20,80,230,.07);scale:.98}
.opt input:focus-visible + span,.pick input:focus-visible + span{outline:3px solid var(--blue-hi);outline-offset:2px}
.opts .opt:last-child{grid-column:span 2}
@media (min-width:560px){ .opts{grid-template-columns:repeat(3,minmax(0,1fr))} .opts .opt:last-child{grid-column:auto} }
.q{margin:4px 0 10px;font-weight:800;font-size:var(--t-sm)}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pick{position:relative}
.pick span{display:inline-flex;align-items:center;min-height:46px;padding:0 15px;border-radius:var(--r1);border:2px solid var(--line-l);font-weight:700;font-size:var(--t-sm);cursor:pointer;transition:border-color .2s,background .2s}
.pick input:checked + span{border-color:var(--blue);background:var(--blue);color:#fff}
.quiz__note{margin:-8px 0 16px;font:600 var(--t-xs)/1.4 var(--f-m);color:var(--blue)}
.fields{display:grid;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:var(--t-sm)}
.field i{font-style:normal;font-weight:600;color:var(--tx-3)}
.field input,.field textarea{font:600 16px/1.4 var(--f-b);color:var(--tx);padding:13px 14px;border-radius:var(--r1);border:2px solid var(--line-l);background:var(--paper);min-height:52px;width:100%}
.field textarea{field-sizing:content;min-height:96px;max-height:260px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.field input:user-invalid{border-color:#C8102E}
@media (min-width:560px){ .fields{grid-template-columns:1fr 1fr} .field--full{grid-column:span 2} }
.quiz__err{min-height:1.4em;margin:12px 0 0;color:#C8102E;font-weight:700;font-size:var(--t-sm)}
.quiz__nav{display:flex;gap:10px;margin-top:6px}
.quiz__nav .btn--blue{flex:1}
.quiz__done{text-align:center;padding:8px 0}
.quiz__ok{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:2rem;font-weight:900}
.quiz__done h3{font:italic 900 1.8rem/1 var(--f-d);font-stretch:120%;text-transform:uppercase;margin:0 0 10px}
.quiz__done p{color:var(--tx-2);margin:0 0 10px}
.quiz__sum{font:600 var(--t-xs)/1.5 var(--f-m);background:var(--paper);border-radius:var(--r1);padding:10px 12px;text-align:left}
@media (min-width:960px){ .est__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:70px;align-items:start} .est__copy{position:sticky;top:110px} }

/* ---------- inner page hero ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-900);min-height:clamp(440px,62svh,640px);display:flex;align-items:flex-end}
.phero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;view-transition-name:phero}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,13,18,.92),rgba(11,13,18,.55) 55%,rgba(11,13,18,.25)),linear-gradient(0deg,rgba(11,13,18,.85),transparent 50%)}
.phero__b{padding-block:120px 48px;display:grid;gap:18px}
.phero__b > *{max-width:900px}
.phero h1{font-size:clamp(2.4rem,1.3rem + 5vw,6rem);line-height:.88}
.crumbs{font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.crumbs a{text-decoration:none;color:#fff}
.crumbs span{margin:0 8px;color:var(--blue-hi)}

/* content blocks for inner pages */
.split{display:grid;gap:clamp(24px,4vw,60px);align-items:center}
.split__img{border-radius:var(--r3);overflow:hidden;aspect-ratio:4/5;max-height:680px}
.split__img img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--flip .split__img{order:2} }
.checks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:34px}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:5px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.prose{max-width:68ch}
.prose p{margin:0 0 1em}
.prose h3{margin-top:1.4em}
.cards3{display:grid;gap:14px}
.icard{background:#fff;color:var(--tx);border-radius:var(--r2);padding:22px;box-shadow:0 1px 0 var(--line-l),0 20px 40px -34px rgba(11,13,18,.5);container-type:inline-size}
.dark-cards .icard{background:var(--ink-800);color:#fff;border:1px solid var(--line-d);box-shadow:none}
.icard__no{font:600 var(--t-xs)/1 var(--f-m);letter-spacing:.1em;color:var(--blue)}
.dark-cards .icard__no{color:var(--yellow)}
.icard h3{font:italic 900 var(--t-h4)/1.05 var(--f-d);font-stretch:118%;text-transform:uppercase;margin:10px 0 8px}
.icard p{margin:0;color:var(--tx-2);font-size:var(--t-sm)}
.dark-cards .icard p{color:rgba(255,255,255,.74)}
@media (min-width:760px){ .cards3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .cards3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.table-wrap{overflow-x:auto;border-radius:var(--r2);border:1px solid var(--line-l);background:#fff}
.cmp{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px;color:var(--tx)}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-l);vertical-align:top}
.cmp thead th{font:600 var(--t-xs)/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase;background:var(--tx);color:#fff}
.cmp tbody th{font:italic 900 1rem/1.1 var(--f-d);font-stretch:115%;text-transform:uppercase}
.case{display:grid;gap:22px;padding-block:clamp(30px,4vw,48px);border-top:1px solid var(--line-l)}
.case:first-child{border-top:0}
.case__imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.case__imgs img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r2)}
.case__imgs img:first-child{grid-column:span 2;aspect-ratio:16/10}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.facts li{font:600 11px/1 var(--f-m);letter-spacing:.05em;text-transform:uppercase;padding:8px 10px;border-radius:5px;background:var(--paper);border:1px solid var(--line-l)}
@media (min-width:900px){ .case{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center} .case:nth-child(even) .case__imgs{order:2} }
.band{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-60px;top:0;bottom:0;width:260px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 8px,transparent 8px 24px);transform:skewX(var(--skew))}
.band__in{display:grid;gap:20px;padding-block:clamp(44px,6vw,72px);position:relative;z-index:1}
.band .h2{margin:0;max-width:20ch}
@media (min-width:900px){ .band__in{grid-template-columns:minmax(0,1fr) auto;align-items:center} }

/* ---------- footer ---------- */
.ftr{background:var(--ink-950);border-top:1px solid var(--line-d);padding:60px 0 calc(28px + var(--dock))}
.ftr__grid{display:grid;gap:30px}
.ftr__brand img{width:230px;margin-bottom:14px}
.ftr p{margin:0 0 10px;color:rgba(255,255,255,.7);font-size:var(--t-sm)}
.ftr a{text-decoration:none;font-weight:700;color:#fff}
.ftr a:hover{color:var(--blue-tint)}
.ftr__h{font:600 var(--t-xs)/1 var(--f-m)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-tint)!important;margin-bottom:14px!important}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--t-sm)}
.ftr__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line-d);font-size:var(--t-xs);color:rgba(255,255,255,.5)}
.ftr .ftr__word{font:italic 900 clamp(3rem,1rem + 10vw,11rem)/.8 var(--f-d);font-stretch:125%;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);margin:36px 0 0;white-space:nowrap;overflow:hidden;user-select:none}
@media (min-width:640px){ .ftr__grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1fr} }

/* ---------- phone dock ---------- */
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:6px;padding:6px;border-radius:16px;background:rgba(11,13,18,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-d);box-shadow:0 18px 40px rgba(0,0,0,.5);transition:translate .4s var(--ease),opacity .3s}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:11px;text-decoration:none;font:800 11px/1 var(--f-b);letter-spacing:.03em}
.dock svg{width:20px;height:20px}
.dock .dock__main{background:var(--blue);font-size:14px;flex-direction:row}
.dock.is-tucked{translate:0 140%;opacity:0}
@media (min-width:761px){ .dock{display:none} }

/* ---------- reveal (scroll-driven where supported, IntersectionObserver otherwise) ---------- */
.rv-in{opacity:0;translate:0 24px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.rv-in.in{opacity:1;translate:0 0}
@supports (animation-timeline: view()){
  .rv-in{opacity:1;translate:0 0;transition:none;animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes reveal{from{opacity:0;translate:0 30px}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv-in{opacity:1;translate:0 0;animation:none}
  .hero h1 .ln > span{clip-path:none;animation:none}
  .truckbar__track,.clients ul{animation:none}
  @view-transition { navigation: none; }
}

/* small film panels on inner pages */
.clip{position:absolute;inset:0}
.clip img,.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip video{opacity:0;transition:opacity .8s var(--ease)}
.clip video.is-on{opacity:1}

/* phone length: projects swipe, crew photo hidden (Jake is on the About page) */
@media (max-width:859px){
  .proj{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:4px var(--gut) 12px;scrollbar-width:none}
  .proj::-webkit-scrollbar{display:none}
  .proj > .pcard{flex:0 0 78%;scroll-snap-align:center;min-height:360px}
}
@media (max-width:759px){ .process .crew{display:none} .quote-big blockquote{font-size:clamp(1.9rem,1.4rem + 3vw,2.6rem)} }
.hdr__tel{min-height:44px;align-items:center}
@media (min-width:1180px){ .hdr__tel{display:inline-flex} }
@media (max-width:899px){ .hero__grid{min-height:0} }
@media (max-width:999px){ .lab__stage{width:100%;max-width:560px;margin-inline:auto} }