/* Utah Vending Service JC Supply Co — cinematic showroom.
   Brand: white, black, red #C20404. Type: Epilogue (the original site's nav face), set big and bold.
   Dark "scenes" carry photos and video; white sections carry the reading. Motion lives in main.js (GSAP). */
:root{
  --white:#fff;
  --mist:#F2F2F0;
  --mist-2:#E7E7E4;
  --steel:#DADAD6;
  --graphite:#5A5A5F;
  --text:#232326;
  --ink:#000;
  --night:#0C0C0D;
  --coal:#151517;
  --line-d:rgba(255,255,255,.14);
  --soft-d:rgba(255,255,255,.66);
  --red:#C20404;
  --red-deep:#9A0303;
  --red-glow:#E3140C;
  --font:'Epilogue',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1280px;
  --gut:32px;
  --sec:112px;
  --hdr:120px;
  --hdr-s:78px;
  --u:4px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3,h4{color:var(--ink);font-family:var(--font);margin:0 0 .5em}
h1{font-weight:700;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.98;letter-spacing:-.04em}
h2{font-weight:700;font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.02;letter-spacing:-.035em}
h3{font-weight:600;font-size:1.28rem;line-height:1.3;letter-spacing:-.01em}
h4{font-weight:600;font-size:1.05rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
li{margin-bottom:.35em}
strong{font-weight:600;color:var(--ink)}
.lead{font-size:1.2rem;line-height:1.6;color:var(--graphite);max-width:60ch}
.small{font-size:.9rem;color:var(--graphite)}
.sr,.skip:not(:focus){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:12px;left:12px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:860px}
.section{padding:var(--sec) 0;position:relative}
.section.tight{padding:80px 0}
.mist{background:var(--mist)}
.black,.dark{background:var(--night);color:var(--soft-d)}
.black h1,.black h2,.black h3,.black strong,.dark h1,.dark h2,.dark h3,.dark strong{color:#fff}
.black a:not(.btn):not(.pill),.dark a:not(.btn):not(.pill):not(.mcard){color:#fff}
.black .lead,.dark .lead{color:var(--soft-d)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.head{max-width:780px;margin-bottom:64px}
.head.center{margin-left:auto;margin-right:auto}
.kicker,.over{display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.dark .over,.black .over,.scene .over,.hx .over,.collage .over,.showroom .over,.path .over{color:#fff;opacity:.8}
.rule{border:0;border-top:1px solid var(--steel);margin:0}

/* Red underline that draws in when a title scrolls into view (JS adds .is-in) */
.uline{background:linear-gradient(var(--red),var(--red)) 0 92% / 0% .09em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.04em;transition:background-size 1.2s var(--ease)}
.uline.is-in,.no-motion .uline,a:hover .uline,a:focus-visible .uline{background-size:100% .09em}

/* ---------- buttons: pills with an arrow disc (reference style) ---------- */
.btn,.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;white-space:nowrap;border-radius:999px;border:1px solid transparent;font:600 .95rem/1 var(--font);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.pill{padding:0 6px 0 28px}
.pill .arr{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;transition:transform .45s var(--ease),background-color .3s}
.pill .arr svg{width:17px;height:17px}
.pill:hover .arr{transform:rotate(-45deg)}
.btn-red,.pill-red{background:var(--red);color:#fff}
.pill-red .arr{background:#fff;color:var(--red)}
.btn-red:hover,.pill-red:hover{background:var(--red-deep);color:#fff}
.btn-line,.pill-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover,.pill-line:hover{background:var(--ink);color:#fff}
.pill-dark{background:var(--ink);color:#fff}
.pill-dark:hover{background:#222;color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--mist);color:var(--ink)}
.btn-ghost-w,.pill-glass{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-ghost-w:hover,.pill-glass:hover{border-color:#fff;background:rgba(255,255,255,.16);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.textlink{font-weight:600;text-decoration:underline}

/* ---------- header (the original utvending.com layout) ---------- */
/* Fixed header with a matching spacer: it can shrink on scroll without shifting the page under it */
body{padding-top:var(--hdr)}
[id]{scroll-margin-top:calc(var(--hdr-s) + 24px)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;border-bottom:1px solid var(--mist-2);transition:box-shadow .3s}
/* red accent runs one third of the way across */
.site-header::after{content:'';position:absolute;left:0;bottom:-1px;width:33.333%;height:4px;background:var(--red)}
.hdr{display:flex;align-items:center;gap:28px;height:var(--hdr);transition:height .4s var(--ease)}
.brand img{width:250px;height:auto;transition:width .4s var(--ease)}
.site-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.site-header.is-scrolled .hdr{height:var(--hdr-s)}
.site-header.is-scrolled .brand img{width:170px}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav>a,.nav .nav-link{position:relative;display:inline-flex;align-items:center;gap:4px;padding:10px 14px;font:400 1rem var(--font);color:var(--red);text-decoration:none;background:none;border:0;cursor:pointer}
.nav>a::after,.nav .nav-link::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav>a:hover::after,.nav .has-menu:hover .nav-link::after,.nav [aria-current="page"]::after,.nav .has-menu.cur .nav-link::after{transform:scaleX(1)}
.nav .nav-link:hover,.nav>a:hover{color:var(--red-deep)}
.nav .caret{width:14px;height:14px;transition:transform .3s}
.has-menu:hover .caret,.has-menu.open .caret{transform:rotate(180deg)}
.has-menu{position:relative}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;border-top:3px solid var(--red);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.has-menu::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px}
.has-menu:hover .menu,.has-menu.open .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:11px 22px;color:var(--red);text-decoration:none;font-size:.98rem}
.menu a:hover{background:var(--mist);color:var(--red-deep)}
.menu-btn{display:none;margin-left:auto;width:50px;height:50px;border:0;border-radius:50%;background:var(--red);color:#fff;align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.mobile-nav{display:none}
@media (max-width:1000px){
  :root{--hdr:92px;--hdr-s:70px}
  .brand img{width:190px}.site-header.is-scrolled .brand img{width:150px}
  .nav{display:none}.menu-btn{display:inline-flex}
  .mobile-nav{display:block;position:fixed;inset:0;top:0;z-index:99;background:#fff;padding:calc(var(--hdr) + 24px) 0 40px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s var(--ease)}
  .mobile-nav.open{opacity:1;visibility:visible;transform:none}
  .mobile-nav a{display:block;padding:8px 0;color:var(--red);text-decoration:none;font-size:clamp(1.9rem,8vw,2.6rem);font-weight:400;letter-spacing:-.02em}
  .mobile-nav .sub a{font-size:1.1rem;padding:8px 0 8px 18px;color:var(--graphite)}
  .mobile-nav .pill{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:60px;margin-top:32px;padding:0 24px;font-size:1.05rem;font-weight:600;letter-spacing:0;color:#fff;text-align:center}
  .mobile-nav .pill .arr{width:38px;height:38px}
  .site-header{z-index:120}
}

/* ---------- breadcrumbs ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 26px;font-size:.84rem;color:var(--graphite)}
.crumbs li{margin:0}
.crumbs li+li::before{content:'/';margin-right:6px;opacity:.5}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--red)}
.scene .crumbs ol{color:rgba(255,255,255,.7)}

/* ---------- home hero: showroom animation built from the machine renders ---------- */
.hx{position:relative;height:calc(100svh - var(--hdr-s));min-height:480px;color:#fff;overflow:hidden;background:radial-gradient(90% 70% at 50% 100%,#2a0303 0%,#0b0606 38%,#000 72%)}
.hx-floor{position:absolute;left:0;right:0;bottom:0;height:var(--floor);background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 60%);border-top:1px solid rgba(255,255,255,.1)}
.hx{--floor:15%}
.hx-glow{position:absolute;left:50%;bottom:calc(var(--floor) - 9vh);width:min(1100px,90vw);height:26vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(194,4,4,.6),rgba(194,4,4,0));filter:blur(18px);pointer-events:none;animation:hxglow 7s ease-in-out infinite}
.hx-beam{position:absolute;left:50%;top:-10%;width:46vw;height:105%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 75%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);pointer-events:none}
@keyframes hxglow{50%{opacity:.6}}
.hx-word{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);display:flex;justify-content:center;gap:.22em;font-weight:800;font-size:12.4vw;line-height:.82;letter-spacing:-.065em;color:#fff;white-space:nowrap;pointer-events:none;user-select:none;opacity:0;z-index:1}
.hx-final{position:absolute;left:0;right:0;top:0;bottom:var(--floor);z-index:2;display:grid;grid-template-columns:.72fr 1.28fr;grid-template-rows:minmax(0,1fr);gap:2.4vw;align-items:end;max-width:var(--wrap);margin:0 auto;padding-top:clamp(16px,4vh,40px)}
/* copy is sized by screen height as well as width so it always fits above the floor */
.hx-copy{align-self:center;min-height:0;padding-bottom:2vh}
.hx-copy h1{color:#fff;margin-bottom:min(20px,2.4vh);font-size:clamp(2rem,min(3.4vw,6.4vh),3.8rem);text-wrap:balance}
.hx-copy .over{letter-spacing:.3em}
@media (min-width:1600px){.hx-final{grid-template-columns:.9fr 1.1fr}}
.hx-copy .lead{color:rgba(255,255,255,.8);font-size:clamp(.95rem,min(1.25vw,2.3vh),1.15rem);max-width:44ch}
.hx-copy .over{margin-bottom:min(18px,1.8vh)}
/* buttons stacked, both as wide as the longer one */
.hx-copy .actions{flex-direction:column;align-items:stretch;width:fit-content;gap:min(12px,1.4vh);margin-top:min(28px,3vh)}
.hx-copy .pill{justify-content:space-between;min-height:min(54px,6.6vh);font-size:clamp(.82rem,1vw,.95rem);padding-left:clamp(18px,1.8vw,28px)}
.hx-copy .pill .arr{width:min(42px,5.2vh);height:min(42px,5.2vh)}
@media (min-width:901px) and (max-height:720px){.hx-copy .over{display:none}}
/* The lineup runs from the copy to the right edge of the screen and sizes itself to that space
   (container units), so the machines are as big as the room allows without reaching the copy */
.hx-lineup{container-type:inline-size;display:flex;align-items:flex-end;justify-content:center;align-self:end;min-width:0;margin-right:calc((min(var(--wrap),100vw) - 100vw) / 2 - var(--gut) + 20px)}
.hx-lineup>*{--lh:min(62vh,calc((100cqw - 24px) / var(--tot)))}
.hx-pad{flex:none;height:1px;width:calc(var(--lh) * var(--pad))}
.hx-pad.pm{display:none}
/* No will-change here: with it, Chrome keeps whatever resolution it first drew the machine at, and the
   O-Max (scaled up ~2x at the start) turned soft after scrolling down and back up */
.hx-m{position:relative;margin:0;height:calc(var(--lh) * var(--h) / 80.4 * var(--k,1));flex:none;transform-origin:50% 100%}
/* showroom depth: side machines tuck behind their neighbour toward the O-Max and sit a little darker */
.hx-m[data-side="l"]{margin-right:calc(var(--lh) * var(--tuck) * -1)}
.hx-m[data-side="r"]{margin-left:calc(var(--lh) * var(--tuck) * -1)}
.hx-m.d-hero{z-index:3}
.hx-m.d-inner{z-index:2}
.hx-m.d-outer{z-index:1}
.hx-m.d-inner img{filter:brightness(.8)}
.hx-m.d-outer img{filter:brightness(.6)}
.hx-m img{height:100%;width:auto;max-width:none;-webkit-box-reflect:below 1px linear-gradient(transparent 72%,rgba(255,255,255,.2))}
.hx-sweep{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%) 0 0/300% 100% no-repeat;animation:sweep 5.5s 1.8s ease-in-out infinite;mix-blend-mode:screen}
@keyframes sweep{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}
.hx-ui{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3}
.hx-ui>*{pointer-events:auto}
.hx-tag{position:absolute;left:var(--gut);top:30px;margin:0}
/* bottom items sit above the fold while the header is still full height */
.hx-note{position:absolute;left:var(--gut);bottom:calc(34px + var(--hdr) - var(--hdr-s));max-width:260px;font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.75);margin:0}
.hx-cta{position:absolute;right:var(--gut);bottom:calc(28px + var(--hdr) - var(--hdr-s))}
.hx-scroll{position:absolute;left:50%;bottom:calc(30px + var(--hdr) - var(--hdr-s));transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hx-scroll i{width:1px;height:46px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hx-scroll i::after{content:'';position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:110%}}

/* ---------- statement (words light up as you scroll) ---------- */
.statement{font-weight:600;font-size:clamp(1.8rem,3.8vw,3.4rem);line-height:1.12;letter-spacing:-.03em;color:var(--ink);max-width:22ch;margin:0}
.statement .w{opacity:1;transition:opacity .2s}
.motion .statement .w{opacity:.14}

/* ---------- two paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:80px}
.path{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:560px;padding:44px;color:#fff;text-decoration:none;overflow:hidden;border-radius:22px;background:var(--ink);isolation:isolate}
.path>img,.path>.path-floor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.path::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.05) 100%)}
.path:hover>img,.path:hover>.path-floor{transform:scale(1.05)}
.path .over{margin-bottom:12px}
.path h3{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:12px}
.path p{color:rgba(255,255,255,.8);max-width:42ch;margin:0}
.path .pill{align-self:flex-start;margin-top:26px}
.path:hover{color:#fff}
.path-floor{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:40px 30px 190px;background:radial-gradient(70% 60% at 50% 40%,#2a2a2d 0%,#0c0c0d 70%)}
.path-floor img{height:62%;width:auto}
.path-floor img:nth-child(2){height:70%}

/* ---------- floating collage over giant type ---------- */
.collage{position:relative;min-height:112vh;background:var(--night);color:#fff;overflow:hidden;display:flex;align-items:center}
.collage-word{position:absolute;left:0;top:auto;bottom:6%;white-space:nowrap;font-weight:800;font-size:17vw;line-height:.8;letter-spacing:-.06em;color:rgba(255,255,255,.08);-webkit-text-stroke:1.5px rgba(255,255,255,.6);pointer-events:none;user-select:none}
.collage-word b{color:rgba(194,4,4,.5);-webkit-text-stroke:1.5px rgba(227,20,12,.9);font-weight:800}
.stats b{color:var(--red)}
.ph-float{position:absolute;margin:0;overflow:hidden;border-radius:16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.ph-float img{width:100%;height:100%;object-fit:cover}
.ph-float.a{left:5%;top:9%;width:21vw;aspect-ratio:3/4}
.ph-float.b{right:6%;top:6%;width:17vw;aspect-ratio:4/5}
.ph-float.c{left:13%;bottom:7%;width:19vw;aspect-ratio:4/3}
.ph-float.d{right:11%;bottom:2%;width:22vw;aspect-ratio:3/4}
.collage-copy{position:relative;z-index:2;max-width:620px;margin:0 auto;text-align:center;padding:0 var(--gut);transform:translateY(-9vh)}
.collage-copy h2{color:#fff}
.collage-copy p{color:var(--soft-d)}
.collage-copy .actions{justify-content:center}

/* ---------- full-screen scenes (services stack, inner heroes) ---------- */
.scene{position:relative;min-height:calc(100svh - var(--hdr-s));display:flex;align-items:flex-end;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.scene-media{position:absolute;inset:0;z-index:-2}
.scene-media img,.scene-media video{width:100%;height:100%;object-fit:cover}
.scene::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.65) 0%,transparent 45%)}
.scene-content{width:100%;padding-top:110px;padding-bottom:clamp(48px,9vh,96px)}
.scene h1,.scene h2{color:#fff;max-width:15ch}
.scene .lead,.scene p{color:rgba(255,255,255,.82)}
.scene-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.glass{border:1px solid rgba(255,255,255,.18);background:rgba(10,10,12,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:18px;padding:28px 30px}
.glass h3{color:#fff;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:14px}
.glass ul{list-style:none;padding:0;margin:0}
.glass li{padding:10px 0;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.86);font-size:.96rem;margin:0}
.scene.page-hero{min-height:min(84svh,860px)}
.scene.page-hero.short{min-height:min(66svh,640px)}
.stack{position:relative;background:var(--ink)}
.stack .scene{position:sticky;top:var(--hdr-s);height:calc(100svh - var(--hdr-s));min-height:560px;transform-origin:50% 0}
.stack .scene+.scene{margin-top:18svh}
/* Phones and tablets: no pinned panels. When the address bar slides back in on the way up, pinned panels
   shift and the page looks like it jumps, so the services simply scroll by as normal full-height panels. */
@media (max-width:900px),(hover:none) and (pointer:coarse){
  .stack .scene{position:relative;top:auto;height:auto;min-height:calc(88svh - var(--hdr-s))}
  .stack .scene+.scene{margin-top:0}
}
.scene-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:5}
.stack-count{position:absolute;right:var(--gut);top:32px;font-size:.78rem;letter-spacing:.3em;color:rgba(255,255,255,.7)}
.stack-count b{color:#fff;font-weight:600}
.scene-floor{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;gap:2vw;padding:0 6vw 14vh;background:radial-gradient(60% 55% at 70% 55%,#2b2b2e 0%,#0b0b0c 70%)}
.scene-floor img{height:54vh;width:auto;-webkit-box-reflect:below 2px linear-gradient(transparent 70%,rgba(255,255,255,.18))}
.scene-floor img:nth-child(odd){height:49vh}
.hero-floor{gap:1vw;padding:0 3vw 13vh 56vw;justify-content:flex-start;background:radial-gradient(40% 40% at 74% 82%,rgba(194,4,4,.38) 0%,rgba(0,0,0,0) 70%),radial-gradient(50% 60% at 74% 55%,#232326 0%,#09090a 72%)}
.hero-floor img,.hero-floor img:nth-child(odd){height:38vh}
.page-hero:has(.hero-floor)::before{background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,0) 62%)}
@media (max-width:900px){.hero-floor{padding:0 4vw 52vh;justify-content:center;align-items:flex-end}.hero-floor img,.hero-floor img:nth-child(odd){height:22vh}.page-hero:has(.hero-floor)::before{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.15) 100%)}}

/* ---------- marquee of client logos ---------- */
.marquee{padding:72px 0;overflow:hidden;border-bottom:1px solid var(--steel)}
.marquee p{text-align:center;color:var(--graphite);margin-bottom:34px;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase}
.marquee-track{display:flex;width:max-content;align-items:center;animation:marq 42s linear infinite;list-style:none;margin:0;padding:0;will-change:transform;backface-visibility:hidden}

.marquee-track li{margin:0 72px 0 0;flex:none}
.marquee-track img{height:46px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.marquee-track img.sq{height:66px}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- showroom (horizontal on desktop) ---------- */
.showroom{position:relative;background:var(--night);color:#fff;overflow:hidden}
.showroom-pin{display:flex;align-items:center;min-height:calc(100svh - var(--hdr-s));padding:80px 0}
.showroom-track{display:flex;gap:28px;padding:0 var(--gut);align-items:stretch;will-change:transform}
.showroom-intro{flex:none;width:min(440px,80vw);display:flex;flex-direction:column;justify-content:center;padding-right:40px}
.showroom-intro h2{color:#fff}
.showroom-intro p{color:var(--soft-d)}
.showroom-track .mcard{flex:none;width:300px}
.showroom-track .plinth{aspect-ratio:1/1;padding:22px 20px 34px}
.showroom-track .mbody{padding:20px 20px 22px}
.showroom-track .qspecs{margin-bottom:16px}
.showroom-end{flex:none;width:320px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:40px;border:1px dashed rgba(255,255,255,.22);border-radius:18px}
.showroom-end h3{color:#fff;font-size:1.6rem;letter-spacing:-.02em}
.showroom-progress{position:absolute;left:var(--gut);right:var(--gut);bottom:40px;height:1px;background:rgba(255,255,255,.16)}
.showroom-progress i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}

/* ---------- brand bubbles: one rounded panel per brand with a moving banner of its models ---------- */
.brands-sec{background:var(--night);color:var(--soft-d)}
.brands-sec h2{color:#fff}
.brands-sec .lead{color:var(--soft-d)}
.brands-sec .over{color:#fff;opacity:.8}
.brands-sec .textlink{color:#fff}
/* shared rows (subgrid) keep logo, intro, chips, banner, machine and button aligned across all three panels */
.brands-sec{overflow-x:clip}
.bubbles{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:0;align-items:stretch}
.bubble{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:20px;justify-items:center;text-align:center;padding:38px 28px 30px;will-change:transform;border-radius:28px;background:linear-gradient(180deg,#18181b 0%,#0d0d0f 100%);border:1px solid rgba(255,255,255,.08);overflow:hidden;isolation:isolate;transition:border-color .4s}
.bubble:hover{border-color:rgba(255,255,255,.22)}
.bubble::before{content:'';position:absolute;left:50%;bottom:6%;width:110%;height:46%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(194,4,4,.42),rgba(194,4,4,0));z-index:-1;pointer-events:none}
.bb-logo{display:flex;align-items:center;justify-content:center;height:46px}
.bb-logo img{max-height:42px;width:auto;max-width:220px}
.bb-intro{margin:0;align-self:start;color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.55;max-width:40ch}
.bb-chips{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-self:center;gap:6px;list-style:none;margin:0;padding:0}
.bb-chips li{margin:0;font-size:.76rem;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);padding:6px 12px;border-radius:999px}
.bb-marquee{width:calc(100% + 56px);margin:0 -28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.bb-track{display:flex;width:max-content;list-style:none;margin:0;padding:4px 0;animation:marq calc(var(--n) * 3.4s) linear infinite}

.bb-track li{margin:0 10px 0 0;flex:none}
.bb-track a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;width:94px;height:122px;padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:rgba(255,255,255,.78);font-size:.68rem;font-weight:500;transition:border-color .3s,background-color .3s}
.bb-track img{height:80px;width:auto;max-width:80px;object-fit:contain}
.bb-track a:hover{border-color:var(--red);background:rgba(194,4,4,.12);color:#fff}
.bb-feature{position:relative;display:flex;justify-content:center;align-items:flex-end;height:330px;width:100%;margin-top:6px;text-decoration:none}
.bb-feature img{height:100%;width:auto;max-width:100%;object-fit:contain;-webkit-box-reflect:below 1px linear-gradient(transparent 80%,rgba(255,255,255,.16));transition:transform .7s var(--ease)}
.bubble:hover .bb-feature img{transform:translateY(-8px)}
.bb-feature span{position:absolute;left:0;top:0;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.bubble .pill{align-self:end;justify-content:space-between}
@media (max-width:1100px){.bubbles{grid-template-columns:1fr;max-width:620px;margin:0 auto}.bubble{margin-bottom:24px}}

/* ---------- areas we serve: city search + county photo cards ---------- */
.areas-head{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;margin-bottom:44px}
.areas-head h2{margin-bottom:14px}
.areas-head .lead{margin:0}
.city-search{background:var(--mist);border-radius:22px;padding:26px}
.city-search label{display:block;font-weight:600;margin-bottom:10px;color:var(--ink)}
.cs-row{display:flex;gap:10px}
.cs-row input{flex:1;min-width:0;min-height:54px;border:1px solid var(--steel);border-radius:999px;padding:0 22px;font:400 1rem var(--font);background:#fff;color:var(--ink)}
.cs-row input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(194,4,4,.15)}
.cs-msg{margin:10px 0 0;font-size:.88rem;color:var(--red);min-height:1.2em}
.county-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:270px;gap:16px}
.ccard{position:relative;border-radius:22px;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;display:flex}
.ccard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.ccard::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.1) 100%)}
.ccard:hover>img{transform:scale(1.06)}
.ccard.c0{grid-column:span 2;grid-row:span 2}
.ccard.c1{grid-column:span 2}
.cc-body{margin-top:auto;padding:22px;width:100%}
.cc-count{display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:6px}
.cc-count b{color:#fff;font-weight:700}
.ccard h3{font-size:1.35rem;margin:0 0 12px;color:#fff;letter-spacing:-.02em}
.ccard.c0 h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.ccard h3 a{color:#fff;text-decoration:none}
.ccard h3 a:hover{text-decoration:underline;text-decoration-color:var(--red)}
.cc-cities{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0}
.cc-cities li{margin:0}
.cc-cities a{display:inline-block;font-size:.76rem;color:#fff;text-decoration:none;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .25s,border-color .25s}
.cc-cities a:hover{background:var(--red);border-color:var(--red);color:#fff}
.cc-all{font-size:.84rem;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.cc-all:hover{color:#fff}
.ccard.statewide{background:radial-gradient(120% 90% at 100% 0%,#3a0505 0%,#120707 45%,#0b0b0c 100%)}
.ccard.statewide .cc-cities{gap:5px}
.ccard.statewide .cc-cities a{font-size:.7rem;padding:4px 9px}
.areas-head>*,.county-grid>*{min-width:0}
@media (max-width:640px){.cs-row{flex-direction:column}.cs-row .pill{width:100%}}
@media (max-width:1100px){.areas-head{grid-template-columns:1fr;gap:28px}.county-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:250px}.ccard.c0{grid-row:span 1}}
@media (max-width:640px){.county-grid{grid-template-columns:1fr;grid-auto-rows:auto}.ccard{min-height:230px}.ccard.c0,.ccard.c1{grid-column:auto}.ccard.statewide{min-height:0}}

/* ---------- Google reviews: the rating on the left, review speech bubbles on the right ---------- */
.stars{--s:15px;--g:3px;display:inline-block;flex:none;width:calc(var(--s) * 5 + var(--g) * 4);height:var(--s);background:var(--red);-webkit-mask:var(--star) 0 0 / var(--s) var(--s) space no-repeat;mask:var(--star) 0 0 / var(--s) var(--s) space no-repeat;--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.35 6.26 6.68.3-5.23 4.18 1.78 6.45L10 14.5l-5.58 3.69 1.78-6.45L.97 7.56l6.68-.3z'/%3E%3C/svg%3E")}
.stars-lg{--s:22px;--g:4px}
.g-mark{display:inline-block;flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E") center / contain no-repeat}
.reviews-band{position:relative;padding:56px 0;background:var(--mist);border-top:1px solid var(--mist-2);border-bottom:1px solid var(--mist-2);overflow:hidden}
.rv{display:grid;grid-template-columns:minmax(300px,350px) minmax(0,1fr);gap:44px;align-items:center}
.rv-score .over{margin-bottom:16px}
.rv-big{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.rv-num{font-weight:800;font-size:clamp(4.6rem,6.6vw,6.2rem);line-height:.8;letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:2.1ch}
.rv-meta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:.88rem;line-height:1.3;color:var(--graphite)}
.rv-meta b{color:var(--ink);font-weight:600}
.motion .rv-big .stars{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease) .25s}
.motion .rv-big.is-in .stars{clip-path:inset(0 0 0 0)}
.rv-score h2{font-size:clamp(1.2rem,1.55vw,1.42rem);line-height:1.22;letter-spacing:-.015em;margin:0 0 24px;max-width:23ch}
.rv-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.rv-actions .pill{min-height:48px;font-size:.88rem}
.rv-actions .pill .arr{width:36px;height:36px}
.rv-write{font-size:.84rem;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
/* arrows for the step-by-step row */
.rv-nav{display:inline-flex;gap:8px}
.rv-nav button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.rv-nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
/* default: slow endless rail that bleeds off the right edge */
.rv-rail{position:relative;min-width:0;margin-right:calc((100vw - min(var(--wrap),100vw)) / -2 - var(--gut));padding:10px 0 6px;overflow:hidden;cursor:default;-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
.rv-track{display:flex;align-items:flex-end;width:max-content;animation:marq var(--dur,200s) linear infinite;will-change:transform;backface-visibility:hidden}
.rv-rail.is-paused .rv-track{animation-play-state:paused}
@media (hover:hover){.rv-rail:hover .rv-track{animation-play-state:paused}}
/* step-by-step row (home and About, under the moving client logos): starts cleanly beside the rating, swipeable */
.rv-rail[data-step]{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
.rv-rail[data-step]::-webkit-scrollbar{display:none}
.rv-rail[data-step] .rv-track{animation:none;will-change:auto}
.rv-rail[data-step] .rcard{scroll-snap-align:start}
/* each review sits in a red speech bubble, the reviewer underneath */
.rcard{flex:none;display:flex;flex-direction:column;width:300px;margin:0 20px 0 0}
.rc-s{width:250px}
.rc-l{width:390px}
.rc-bubble{position:relative;display:flex;flex-direction:column;gap:12px;margin:0 0 18px;padding:18px 22px 20px;background:#fff;border:1.5px solid var(--red);border-radius:22px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rc-bubble::after{content:'';position:absolute;left:25px;bottom:-9px;width:16px;height:16px;background:#fff;border:solid var(--red);border-width:0 1.5px 1.5px 0;border-bottom-right-radius:4px;transform:rotate(45deg)}
.rcard:hover .rc-bubble{transform:translateY(-4px);box-shadow:0 22px 34px -26px rgba(194,4,4,.6)}
.rc-top{display:flex;align-items:center;justify-content:space-between}
.rc-bubble p{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.rcard figcaption{display:flex;align-items:center;gap:12px;padding-left:14px;font-size:.86rem;line-height:1.3}
.rcard figcaption b{display:block;color:var(--ink);font-weight:600}
.rcard time{font-size:.78rem;color:var(--graphite)}
.rc-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--ink);color:#fff;font-weight:600}
@media (max-width:900px){
  .reviews-band{padding:40px 0 36px}
  .rv{grid-template-columns:1fr;gap:26px}
  .rv-rail{margin:0 calc(var(--gut) * -1);-webkit-mask-image:none;mask-image:none}
  .rv-rail[data-step]{scroll-padding-left:var(--gut)}
  .rv-rail[data-step] .rv-track{padding:0 var(--gut)}
  .rcard{width:268px}.rc-s{width:226px}.rc-l{width:312px}
}
@media (max-width:640px){
  .reviews-band{padding:32px 0 28px}
  .rv{gap:20px}
  .rv-score .over{margin-bottom:12px}
  .rv-num{font-size:4.1rem}
  .rv-big{gap:16px;margin-bottom:12px}
  .rv-meta{gap:7px}
  .rv-score h2{font-size:1.12rem;max-width:none;margin-bottom:16px}
  .rv-actions{gap:10px 12px}
  .rv-actions .pill{min-height:44px;font-size:.84rem;padding-left:20px}
  .rv-actions .pill .arr{width:32px;height:32px}
  .rv-nav button{width:42px;height:42px}
  .rc-bubble{padding:15px 18px 16px;gap:10px;margin-bottom:16px}
  .rc-bubble p{font-size:.92rem;-webkit-line-clamp:4}
}
@media (prefers-reduced-motion:reduce){.rv-rail{overflow-x:auto;scroll-snap-type:x mandatory}.rv-track>.rcard{scroll-snap-align:start}.rv-track>.rcard[aria-hidden]{display:none}}
/* ---------- blog posts with portrait photos ---------- */
.post-hero-bg{position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 60%,rgba(194,4,4,.35) 0%,rgba(0,0,0,0) 60%),linear-gradient(135deg,#141416 0%,#060607 100%)}
.post-portrait-hero .scene-grid{align-items:center}
.post-portrait{margin:0;justify-self:end;width:min(300px,100%);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.12)}
.post-portrait img{width:100%;height:auto}
.post-portrait-hero.page-hero.short{min-height:min(78svh,760px)}
@media (max-width:900px){.post-portrait{justify-self:start;width:min(220px,60%)}}
.post .ph img{object-position:50% 40%}
/* ---------- city page service cards ---------- */
.loc-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.loc-svc{background:#fff;border:1px solid var(--steel);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .5s var(--ease)}
.loc-svc:hover{border-color:var(--ink);transform:translateY(-4px)}
.ls-num{font-size:2rem;font-weight:300;color:var(--red);letter-spacing:-.04em;line-height:1}
.loc-svc h3{margin:6px 0 0;font-size:1.25rem}
.loc-svc h3 a{text-decoration:none}
.loc-svc h3 a:hover{color:var(--red)}
.loc-svc p{margin:0;color:var(--graphite);flex:1}
@media (max-width:900px){.loc-svcs{grid-template-columns:1fr}}
/* ---------- locations directory ---------- */
.dir-grid{columns:3;column-gap:16px}
.dir-card{break-inside:avoid;display:inline-block;width:100%;margin:0 0 16px;background:#fff;border:1px solid var(--steel);border-radius:18px;padding:20px 20px 18px;transition:border-color .3s}
.dir-card:hover{border-color:var(--ink)}
.dir-card header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--ink)}
.dir-card h3{margin:0;font-size:1.25rem;letter-spacing:-.02em}
.dir-card h3 a{text-decoration:none}
.dir-card h3 a:hover{color:var(--red)}
.dir-card header span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.dir-card>p{display:none}
.dir-chips{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.dir-chips li{margin:0}
.dir-chips a{display:inline-block;font-size:.8rem;line-height:1.3;color:var(--text);text-decoration:none;padding:4px 10px;border:1px solid var(--steel);border-radius:999px;background:var(--white);transition:.2s}
.dir-chips a:hover{background:var(--red);border-color:var(--red);color:#fff}
.dir-all{display:inline-block;margin-top:12px;font-size:.88rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
@media (max-width:1100px){.dir-grid{columns:2}}
@media (max-width:640px){.dir-grid{columns:1}}

/* ---------- plinth + machine cards ---------- */
.plinth{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/5;padding:30px 24px 40px;background:radial-gradient(110% 75% at 50% 0%,#fff 0%,var(--mist) 58%,var(--mist-2) 100%);overflow:hidden}
.plinth::before{content:'';position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,#DEDEDA,#EBEBE8)}
.plinth::after{content:'';position:absolute;left:22%;right:22%;bottom:32px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.38),transparent);z-index:1}
.plinth img{position:relative;z-index:2;max-height:100%;width:auto;object-fit:contain;transition:transform .6s var(--ease)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--steel);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;position:relative;transition:border-color .3s,transform .5s var(--ease)}
.mcard:hover{border-color:var(--ink);color:inherit;transform:translateY(-4px)}
.mcard:hover .plinth img{transform:translateY(-8px) scale(1.02)}
.mcard .tag{position:absolute;top:16px;left:16px;z-index:3;background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.mcard .tag.new{background:var(--red)}
.mbody{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.mtitle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.mtitle h3{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.code{flex:none;font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--graphite);border:1px solid var(--steel);padding:4px 9px;border-radius:999px;white-space:nowrap}
.price{font-size:1rem;color:var(--graphite);margin:6px 0 14px}
.price b{font-weight:600;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em;margin-right:6px}
.best{font-size:.94rem;margin:0 0 14px}
.best b{font-weight:600}
.qspecs{margin:0 0 20px;padding:0;list-style:none;border-top:1px solid var(--steel)}
.qspecs li{display:flex;justify-content:space-between;gap:16px;margin:0;padding:9px 0;border-bottom:1px solid var(--mist-2);font-size:.92rem}
.qspecs li span:first-child{color:var(--graphite)}
.qspecs li span:last-child{color:var(--ink);font-weight:600;text-align:right}
.mcard .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 6px 0 22px;border:1px solid var(--ink);border-radius:999px;font-weight:600;color:var(--ink);transition:background-color .3s,color .3s}
.mcard .go::after{content:'';width:38px;height:38px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/16px no-repeat}
.mcard:hover .go{background:var(--ink);color:#fff}
/* dark variant */
.dark .mcard,.showroom .mcard{background:var(--coal);border-color:#26262a;color:#fff}
.dark .mcard:hover,.showroom .mcard:hover{border-color:rgba(255,255,255,.5);color:#fff}
.dark .plinth,.showroom .plinth{background:radial-gradient(70% 60% at 50% 32%,#3a3a3f 0%,#1a1a1c 55%,#111113 100%)}
.dark .plinth::before,.showroom .plinth::before{background:linear-gradient(180deg,#1f1f22,#141416)}
.dark .plinth::after,.showroom .plinth::after{background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent)}
.dark .mtitle h3,.showroom .mtitle h3,.dark .price b,.showroom .price b,.dark .qspecs li span:last-child,.showroom .qspecs li span:last-child{color:#fff}
.dark .code,.showroom .code{color:rgba(255,255,255,.7);border-color:#36363b}
.dark .price,.showroom .price,.dark .qspecs li span:first-child,.showroom .qspecs li span:first-child{color:rgba(255,255,255,.6)}
.dark .best,.showroom .best{color:rgba(255,255,255,.8)}
.dark .best b,.showroom .best b{color:#fff}
.dark .qspecs,.showroom .qspecs{border-color:#2c2c30}
.dark .qspecs li,.showroom .qspecs li{border-color:#232327}
.dark .mcard .go,.showroom .mcard .go{border-color:rgba(255,255,255,.4);color:#fff}
.dark .mcard:hover .go,.showroom .mcard:hover .go{background:#fff;color:var(--ink)}
.dark .mcard .tag,.showroom .mcard .tag{background:#fff;color:var(--ink)}
.dark .mcard .tag.new,.showroom .mcard .tag.new{background:var(--red);color:#fff}

/* ---------- lineup to scale ---------- */
.scale{--u:var(--su,4px);position:relative;display:grid;grid-template-columns:64px 1fr;margin-top:12px}
.scale-ruler{position:relative;height:calc(90 * var(--u));border-right:1px solid var(--steel)}
.scale-ruler span{position:absolute;right:0;transform:translateY(50%);font-size:.76rem;color:var(--graphite);padding-right:12px}
.scale-ruler span::after{content:'';position:absolute;right:-1px;top:50%;width:8px;height:1px;background:var(--graphite)}
.scale-lines{position:absolute;left:64px;right:0;top:0;height:calc(90 * var(--u));pointer-events:none}
.scale-lines i{position:absolute;left:0;right:0;border-top:1px dashed var(--steel)}
.scale-floor{position:relative;display:flex;gap:14px;height:calc(90 * var(--u) + 64px);padding:0 18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;background:linear-gradient(var(--ink),var(--ink)) 0 calc(90 * var(--u)) / 100% 1px no-repeat;background-attachment:local}
.scale-item{flex:none;display:flex;flex-direction:column;align-items:center;height:100%;text-decoration:none;color:var(--ink)}
.scale-item img{height:calc(var(--h) * var(--u));margin-top:calc((90 - var(--h)) * var(--u));width:auto;max-width:none;transition:transform .4s var(--ease)}
.scale-item:hover img{transform:translateY(-6px)}
.scale-item span{padding-top:12px;text-align:center;font-size:.8rem;line-height:1.3;color:var(--graphite);white-space:nowrap}
.scale-item span b{display:block;color:var(--ink);font-weight:600;font-size:.86rem}
.scale-item:hover span b{color:var(--red)}
.scale-note{margin-top:18px;font-size:.86rem;color:var(--graphite)}
@media (max-width:1180px){.scale{--u:3px}}

/* ---------- brand panels ---------- */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.brandpanel{display:flex;flex-direction:column;border:1px solid var(--steel);border-radius:22px;overflow:hidden;background:#fff}
.brandpanel .bp-top{padding:44px 44px 0}
.brandpanel .bp-logo{height:44px;width:auto;margin-bottom:22px}
.brandpanel p{color:var(--graphite)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 6px}
.chips li{margin:0;font-size:.84rem;border:1px solid var(--steel);padding:6px 13px;border-radius:999px;color:var(--text)}
.chips a{text-decoration:none;color:inherit}
.chips li:hover{border-color:var(--ink)}
.bp-floor{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:320px;margin-top:28px;padding:0 24px;background:radial-gradient(70% 70% at 50% 45%,#2c2c30 0%,#0e0e0f 75%);overflow:hidden}
.bp-floor img{height:80%;width:auto;-webkit-box-reflect:below 1px linear-gradient(transparent 75%,rgba(255,255,255,.15));transition:transform .6s var(--ease)}
.bp-floor img.tall{height:86%}
.brandpanel:hover .bp-floor img{transform:translateY(-6px)}
.brandpanel .actions{padding:28px 44px 40px;margin:0}

/* ---------- numbered steps (real sequences only) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border-top:1px solid var(--ink)}
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.six{grid-template-columns:repeat(3,1fr)}
.step{counter-increment:s;padding:28px 28px 30px 0;border-bottom:1px solid var(--steel)}
.step+.step{padding-left:28px;border-left:1px solid var(--steel)}
.steps.six .step:nth-child(3n+1){padding-left:0;border-left:0}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-size:2.8rem;font-weight:300;line-height:1;color:var(--red);margin-bottom:18px;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.step h3{font-size:1.15rem}
.step p{margin:0;color:var(--graphite);font-size:.98rem}
.black .step,.dark .step{border-color:#2a2a2d}.black .steps,.dark .steps{border-top-color:#fff}
.black .step p,.dark .step p{color:rgba(255,255,255,.66)}

/* process timeline: the red line fills as you scroll */
.process{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.process-head{position:sticky;top:calc(var(--hdr-s) + 60px)}
.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 64px;counter-reset:t}
.timeline::before,.timeline-fill{content:'';position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--steel)}
.timeline-fill{background:var(--red);transform-origin:top;transform:scaleY(0)}
.no-motion .timeline-fill{transform:none}
.timeline li{position:relative;counter-increment:t;padding:0 0 52px;margin:0}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:counter(t);position:absolute;left:-64px;top:0;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--steel);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;color:var(--graphite);transition:.4s}
.timeline li.is-in::before,.no-motion .timeline li::before{background:var(--red);border-color:var(--red);color:#fff}
.timeline h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:6px}
.timeline p{margin:0;color:var(--graphite)}

/* ---------- tick lists ---------- */
.ticks{list-style:none;padding:0;margin:18px 0 0}
.ticks li{position:relative;padding-left:30px;margin-bottom:11px}
.ticks li::before{content:'';position:absolute;left:0;top:.66em;width:16px;height:2px;background:var(--red)}
.ticks.two{columns:2;column-gap:36px}
.ticks.two li{break-inside:avoid}
.statement.sm{font-size:clamp(1.45rem,2.5vw,2.3rem);max-width:34ch}

/* ---------- feature list (not a sequence) ---------- */
.flist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.flist>div{padding:28px 0;border-top:1px solid var(--steel)}
.flist h3{font-size:1.15rem;margin-bottom:6px}
.flist p{margin:0;color:var(--graphite)}
.flist.three{grid-template-columns:repeat(3,1fr);gap:0 48px}
.black .flist>div,.dark .flist>div{border-color:#2a2a2d}.black .flist p,.dark .flist p{color:rgba(255,255,255,.66)}

/* ---------- up close ---------- */
.closeups{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.closeups.three{grid-template-columns:repeat(3,1fr)}
.closeups figure{margin:0}
.closeups img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#111;border-radius:14px}
.closeups figcaption{padding-top:14px}
.closeups b{display:block;font-weight:600;color:var(--ink)}
.closeups span{font-size:.94rem;color:var(--graphite)}
.black .closeups b,.dark .closeups b{color:#fff}.black .closeups span,.dark .closeups span{color:rgba(255,255,255,.66)}

/* ---------- stats / counters ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--steel);border-bottom:1px solid var(--steel)}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stats div{padding:34px 0}
.stats div+div{padding-left:32px;border-left:1px solid var(--steel)}
.stats b{display:block;font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;color:var(--ink);letter-spacing:-.05em;margin-bottom:8px}
.stats span{color:var(--graphite);font-size:.95rem}
.dark .stats,.dark .stats div+div{border-color:#2a2a2d}.dark .stats b{color:#fff}.dark .stats span{color:rgba(255,255,255,.6)}

/* ---------- compare table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--steel);border-radius:16px}
.ctable{width:100%;border-collapse:collapse;font-size:.94rem;min-width:880px}
.ctable th,.ctable td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--mist-2);vertical-align:top}
.ctable thead th{background:var(--mist);font-weight:600;color:var(--ink);font-size:.82rem;letter-spacing:.04em;border-bottom:1px solid var(--steel);white-space:nowrap}
.ctable tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.ctable tbody th a{text-decoration:none}
.ctable tbody th a:hover{color:var(--red)}
.ctable tr:hover td,.ctable tr:hover th{background:#FAFAF8}
.ctable .brandcell{color:var(--graphite);font-size:.82rem;font-weight:400;display:block}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{font:600 .92rem var(--font);padding:10px 18px;border:1px solid var(--steel);background:#fff;border-radius:999px;cursor:pointer;color:var(--text)}
.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- pricing ---------- */
.pricebox{border:1px solid var(--ink);border-radius:18px;padding:28px 28px 24px;margin:26px 0}
.pricebox .p-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pricebox .p-main b{font-weight:700;font-size:2.4rem;line-height:1;color:var(--ink);letter-spacing:-.04em}
.pricebox .p-main span{color:var(--graphite)}
.pricebox ul{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--steel)}
.pricebox li{display:flex;justify-content:space-between;gap:16px;margin:0;padding:10px 0;border-bottom:1px solid var(--mist-2);font-size:.94rem}
.pricebox li span:first-child{color:var(--graphite)}
.pricebox li span:last-child{font-weight:600;color:var(--ink);text-align:right}
.pricebox .actions{margin-top:20px}
.pricebox .actions .btn,.pricebox .actions .pill{flex:1}
.ship-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ship-card{border:1px solid var(--steel);border-radius:18px;padding:38px;background:#fff}
.ship-card h3{font-size:1.3rem}
.ship-card .amt{display:block;font-weight:700;font-size:2.3rem;line-height:1.1;letter-spacing:-.04em;color:var(--ink);margin:10px 0 12px}
.ship-card p{color:var(--graphite);margin:0}
.ship-card.utah{border-color:var(--ink);border-top:4px solid var(--red)}

/* ---------- model page ---------- */
.model-top{padding:44px 0 104px}
.model-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:start}
.gallery{position:sticky;top:calc(var(--hdr-s) + 24px)}
.gallery .plinth{aspect-ratio:1/1;padding:48px 40px 56px;border-radius:22px;background:radial-gradient(70% 60% at 50% 32%,#3a3a3f 0%,#18181a 58%,#0f0f10 100%)}
.gallery .plinth::before{height:56px;background:linear-gradient(180deg,#1f1f22,#141416)}
.gallery .plinth::after{bottom:46px;background:radial-gradient(closest-side,rgba(0,0,0,.9),transparent)}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.thumbs button{padding:6px;border:1px solid var(--steel);border-radius:12px;background:var(--mist);aspect-ratio:1/1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.thumbs img{max-height:100%;width:auto;object-fit:contain}
.model-info .bl{height:30px;width:auto;margin-bottom:22px}
.model-info h1{font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:10px}
.model-info .sub{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;color:var(--graphite)}
.model-info .summary{font-size:1.1rem;color:var(--text)}
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--steel);border-bottom:1px solid var(--steel);margin-top:6px}
.keyfacts div{padding:16px 0}
.keyfacts div+div{padding-left:18px;border-left:1px solid var(--steel)}
.keyfacts b{display:block;font-weight:700;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink);line-height:1.2}
.keyfacts span{font-size:.84rem;color:var(--graphite)}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{text-align:left;padding:14px 0;border-bottom:1px solid var(--steel);vertical-align:top}
.spec-table th{width:38%;font-weight:400;color:var(--graphite);padding-right:24px}
.spec-table td{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.dims{display:flex;align-items:center;gap:28px;margin-top:28px;padding:24px;border:1px solid var(--steel);border-radius:16px}
.dims svg{width:120px;height:auto;flex:none;color:var(--ink)}
.dims b{font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);display:block;line-height:1.2}
.dims span{color:var(--graphite);font-size:.92rem}

/* ---------- industries list with hover image ---------- */
.ind-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ind-list li{margin:0;border-bottom:1px solid var(--steel)}
.ind-list a{display:grid;grid-template-columns:1fr 1.1fr auto;gap:32px;align-items:center;padding:26px 0;text-decoration:none;color:var(--ink)}
.ind-list .nm{font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.ind-list p{margin:0;color:var(--graphite)}
.ind-list .ar,.svc-rows .ar{width:46px;height:46px;border-radius:50%;border:1px solid var(--steel);display:flex;align-items:center;justify-content:center;transition:.35s var(--ease)}
.ind-list .ar svg,.svc-rows .ar svg{width:18px;height:18px}
.ind-list a:hover .ar,.svc-rows a:hover .ar{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-45deg)}
.pill-white{background:#fff;color:var(--ink)}
.pill-white:hover{background:var(--mist);color:var(--ink)}
.ind-hover{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .3s,transform .3s var(--ease)}
.ind-hover.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ind-hover img{width:100%;height:100%;object-fit:cover}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--steel)}
.ind{display:block;padding:24px 22px 26px 0;border-bottom:1px solid var(--steel);text-decoration:none;color:inherit}
.ind:nth-child(4n+2),.ind:nth-child(4n+3),.ind:nth-child(4n+4){padding-left:22px;border-left:1px solid var(--steel)}
.ind h3{font-size:1.1rem;margin-bottom:4px}
.ind p{margin:0;font-size:.94rem;color:var(--graphite)}
.ind:hover h3{color:var(--red)}
.counties{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 44px}
.county h3{font-size:1.25rem;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.county h3 a{text-decoration:none}
.county h3 small{font-weight:400;font-size:.82rem;color:var(--graphite)}
.linklist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.linklist li{margin:0}
.linklist a{color:var(--text);text-decoration:none;font-size:.96rem}
.linklist a:hover{color:var(--red);text-decoration:underline}
.linklist.cols{display:block;columns:4;column-gap:32px}
.linklist.cols li{margin-bottom:6px;break-inside:avoid}

/* ---------- photo cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pcard{display:block;text-decoration:none;color:inherit}
.pcard .ph{aspect-ratio:3/2;overflow:hidden;background:var(--mist);border-radius:16px}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard h3{margin:18px 0 4px;display:inline}
.pcard p{margin:6px 0 0;color:var(--graphite);font-size:.96rem}
.pcard:hover h3{color:var(--red)}

/* ---------- reviews ---------- */
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.reviews-head h2{margin:0;max-width:18ch}
.widget{min-height:260px}

/* ---------- FAQ ---------- */
/* FAQ: the rules draw in like a ledger as the list arrives (--ln, 0 to 1). On hover the row fills from the left,
   the question slides over behind a red dash and the plus turns red. Answers slide open (main.js). */
.faq{position:relative;--faq-fill:var(--mist)}
.mist .faq{--faq-fill:#fff}
.faq::before,.faq details::after{content:'';position:absolute;left:0;right:0;height:1px;transform:scaleX(var(--ln,1));transform-origin:left}
.faq::before{top:0;background:var(--ink)}
.faq details{position:relative;isolation:isolate}
.faq details::after{bottom:0;background:var(--steel)}
.faq summary{position:relative;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font-weight:600;font-size:1.1rem;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'';position:absolute;left:-18px;right:-18px;top:7px;bottom:7px;border-radius:16px;background:var(--faq-fill);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.faq .q{position:relative;transition:transform .5s var(--ease)}
.faq .q::before{content:'';position:absolute;left:-22px;top:50%;width:12px;height:2px;margin-top:-1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.faq summary::after{content:'+';flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--steel);display:flex;align-items:center;justify-content:center;font-weight:400;font-size:1.3rem;transition:transform .45s var(--ease),background-color .3s,border-color .3s,color .3s}
@media (hover:hover){
  .faq summary:hover::before{transform:scaleX(1)}
  .faq summary:hover .q{transform:translateX(26px)}
  .faq summary:hover .q::before{transform:scaleX(1)}
  .faq summary:hover::after{transform:rotate(90deg);border-color:var(--red);color:var(--red)}
}
.faq details[open] summary::after,.faq details[open] summary:hover::after{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.faq details.closing summary::after{transform:rotate(0);background:transparent;border-color:var(--steel);color:var(--ink)}
.faq .ans{overflow:hidden;padding:0 0 24px;color:var(--graphite);max-width:72ch;transition:height .42s var(--ease)}
.faq .ans p:last-child{margin:0}
.faq details[open] .ans p{animation:ansIn .55s var(--ease)}
.faq details.closing .ans p{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
@keyframes ansIn{from{opacity:0;transform:translateY(-8px)}}
.faq-group h2{font-size:1.6rem;margin:60px 0 16px}
.faq-group:first-child h2{margin-top:0}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--steel);border-radius:22px;padding:38px;color:var(--text)}
.form-card h2{font-size:1.8rem;margin-bottom:6px;color:var(--ink)}
.form-card>p{color:var(--graphite);font-size:.98rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--steel);border-radius:12px;background:#fff;font:400 1rem var(--font);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(194,4,4,.15)}
.req{color:var(--red)}
.hp{position:absolute;left:-9999px}
.form-card .btn,.form-card .pill{width:100%}
.form-status{margin:14px 0 0;font-size:.95rem}
.form-status.ok{color:#1b6b2a}.form-status.err{color:var(--red)}
.form-note{margin:14px 0 0;font-size:.9rem;color:var(--graphite)}
.form-note a{color:var(--ink)!important}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.contact-list{list-style:none;padding:0;margin:28px 0 0}
.contact-list li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--steel);margin:0}
.dark .contact-list li,.black .contact-list li{border-color:#2a2a2d}
.contact-list svg{width:20px;height:20px;color:var(--red);flex:none;margin-top:3px}
.contact-list b{display:block;font-weight:600;color:var(--ink)}
.dark .contact-list b,.black .contact-list b{color:#fff}
.map{aspect-ratio:16/7;border-radius:20px;overflow:hidden;border:1px solid var(--steel);background:var(--mist)}
.map iframe{width:100%;height:100%;border:0}

/* ---------- inner page hero (light fallback) ---------- */
.hero{padding:80px 0 96px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-media .photo{aspect-ratio:4/5;overflow:hidden;background:var(--mist);border-radius:22px}
.hero-media .photo img,.hero-media .photo video{width:100%;height:100%;object-fit:cover}

/* ---------- location page ---------- */
.loc-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border-top:1px solid rgba(255,255,255,.2)}
.loc-facts div{padding:18px 0}
.loc-facts div+div{padding-left:20px;border-left:1px solid rgba(255,255,255,.2)}
.loc-facts b{display:block;font-weight:600;color:#fff}
.loc-facts span{font-size:.86rem;color:rgba(255,255,255,.66)}
.place-note{display:inline-flex;gap:8px;align-items:center;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:18px}
.place-note svg{width:16px;height:16px;color:var(--red-glow)}
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.sectors>div{padding:28px 0;border-top:2px solid var(--ink)}
.sectors h3{font-size:1.2rem}
.sectors p{margin:0;color:var(--graphite)}
.plan{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.plan-card{border:1px solid var(--steel);border-radius:20px;padding:36px;background:#fff}
.plan-card h3{font-size:1.4rem}
.plan-card dl{margin:0}
.plan-card dt{font-weight:600;color:var(--ink);margin-top:16px}
.plan-card dd{margin:4px 0 0;color:var(--graphite)}
.plan-card .small{margin-top:20px}
.svc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.svc-rows li{margin:0;border-bottom:1px solid var(--steel)}
.svc-rows a{display:grid;grid-template-columns:1fr 1.2fr auto;gap:28px;align-items:center;padding:30px 0;text-decoration:none;color:var(--ink)}
.svc-rows .nm{font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.svc-rows p{margin:0;color:var(--graphite)}

/* ---------- article ---------- */
.article{max-width:740px;margin:0 auto}
.article p,.article li{font-size:1.08rem;line-height:1.78}
.article h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:1.8em 0 .5em}
.article h3{font-size:1.25rem;margin:1.6em 0 .4em}
.article a{color:var(--ink)}
.article strong{font-weight:600}
.article-hero{aspect-ratio:2/1;overflow:hidden;background:var(--mist);margin:0 0 48px;border-radius:22px}
.article-hero img{width:100%;height:100%;object-fit:cover}
.meta{font-size:.9rem;color:var(--graphite)}
.scene .meta{color:rgba(255,255,255,.7)}
.related-box{border-top:1px solid var(--ink);border-bottom:1px solid var(--steel);padding:22px 0;margin:48px 0 0}
.related-box p{margin:0 0 8px;font-size:1rem}
.related-box p:last-child{margin:0}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.post{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post .ph{aspect-ratio:3/2;overflow:hidden;background:var(--mist);margin-bottom:16px;border-radius:16px}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post:hover .ph img{transform:scale(1.05)}
.post h3{font-size:1.18rem;margin:6px 0 8px}
.post p{color:var(--graphite);font-size:.95rem;margin:0}
.post:hover h3{color:var(--red)}

/* ---------- partner + CTA bands ---------- */
.partner{display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;padding:56px 0}
.partner h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 8px}
.partner p{margin:0;max-width:64ch}
.cta{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;padding:120px 0}
.cta h2{color:#fff;margin-bottom:14px;font-size:clamp(2.4rem,5vw,4.6rem)}
.cta p{color:rgba(255,255,255,.7);margin:0;max-width:52ch}
.cta .actions{justify-content:flex-end;margin:0}

/* ---------- footer ---------- */
.site-footer{position:relative;background:radial-gradient(70% 55% at 85% 0%,rgba(194,4,4,.18) 0%,rgba(194,4,4,0) 60%),var(--night);color:rgba(255,255,255,.62);font-size:.95rem;padding-top:96px;overflow:hidden}
.site-footer::before{content:'';position:absolute;left:0;top:0;width:33.333%;height:4px;background:var(--red)}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:none;overflow-wrap:anywhere}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0}
/* top: big contact + rotating cube */
.ft-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-bottom:72px;border-bottom:1px solid rgba(255,255,255,.1)}
/* sized to its content so the Google rating badge can sit centered under the phone, email and buttons */
.ft-call{display:grid;justify-items:start;width:fit-content;max-width:100%}
.ft-call .over{color:#fff;opacity:.75}
.ft-phone{display:block;white-space:nowrap;font-weight:800;font-size:clamp(2.4rem,5vw,5.2rem);line-height:.95;letter-spacing:-.05em;color:#fff!important;margin-bottom:12px;background:linear-gradient(var(--red),var(--red)) 0 100% / 0% 4px no-repeat;transition:background-size .6s var(--ease);width:fit-content}
.ft-phone:hover{background-size:100% 4px}
.ft-mail{font-size:clamp(1.05rem,1.6vw,1.35rem);color:rgba(255,255,255,.75)!important}
.ft-mail:hover{color:#fff!important;text-decoration:underline;text-decoration-color:var(--red)}
.ft-call .actions{margin-top:30px}
/* animated logo: the real lettering in front of the turning cube, laid out like the printed logo */
.ft-logo{position:relative;display:block;justify-self:end;width:min(560px,100%);aspect-ratio:861/300;container-type:inline-size}
.ft-wm{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);z-index:2;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.ft-cube{position:absolute;left:51%;top:50%;width:var(--cs);height:var(--cs);--cs:27cqw;margin:calc(var(--cs) / -2) 0 0 calc(var(--cs) / -2);perspective:900px;z-index:1}
.ft-cube,.cube,.cube i{display:block}
.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:cubespin 26s linear infinite}
.cube i{position:absolute;inset:0;border:2px solid rgba(190,190,190,.75);background:rgba(255,255,255,.02)}
.cube .front{transform:translateZ(calc(var(--cs) / 2))}
.cube .back{transform:rotateY(180deg) translateZ(calc(var(--cs) / 2))}
.cube .left{transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2))}
.cube .right{transform:rotateY(90deg) translateZ(calc(var(--cs) / 2))}
.cube .top{transform:rotateX(90deg) translateZ(calc(var(--cs) / 2))}
.cube .bottom{transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2))}
@keyframes cubespin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
/* link columns */
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;padding-top:64px;padding-bottom:48px}
.ft-grid>*{min-width:0}
.ft-brand p{margin:0 0 16px;max-width:36ch}
.flogo{background:#fff;display:inline-block;padding:12px 18px;margin-bottom:22px;border-radius:999px}
.flogo img{width:160px}
.ft-addr{display:flex;gap:10px}
.ft-addr svg{width:18px;height:18px;color:var(--red-glow);flex:none;margin-top:3px}
.ft-col h3{color:#fff;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-col li{margin:0 0 11px}
.ft-col a{position:relative;background:linear-gradient(var(--red),var(--red)) 0 100% / 0% 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease),color .2s}
.ft-col a:hover{background-size:100% 1px}
.social{display:flex;gap:10px;margin-top:22px}
.social a{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:.3s}
.social a:hover{border-color:var(--red);background:var(--red);color:#fff}
.social svg{width:18px;height:18px}
.ft-rating{justify-self:center;display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:9px 20px 9px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;transition:border-color .3s,background-color .3s}
.ft-rating:hover{border-color:var(--red);background:rgba(194,4,4,.14)}
.ft-rating .g-mark{width:38px;height:38px;border-radius:50%;background-color:#fff;background-size:20px}
.ft-rt{display:flex;align-items:center;gap:8px}
.ft-rt b{color:#fff;font-size:1.05rem;font-weight:700}
.ft-rt .stars{--s:13px;--g:2px;background:var(--red-glow)}
.ft-rating small{display:block;font-size:.76rem;color:rgba(255,255,255,.6)}
.ft-areas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:40px}
.ft-areas span{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:8px}
.ft-areas a{font-size:.82rem;padding:6px 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;transition:.25s}
.ft-areas a:hover{border-color:var(--red);background:var(--red)}
/* giant wordmark that assembles from scattered letters as the footer arrives */
.fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;padding-bottom:32px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:rgba(255,255,255,.5)}
.fbottom nav{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:1100px){.ft-grid{grid-template-columns:1fr 1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:900px){.ft-top{grid-template-columns:1fr;gap:20px}.ft-logo{grid-row:1;justify-self:start;width:min(420px,100%)}.ft-call{width:auto;justify-items:stretch}.ft-call>.over,.ft-phone,.ft-mail{justify-self:start}}
@media (max-width:640px){.ft-grid{grid-template-columns:1fr 1fr;gap:32px 20px}.site-footer{padding-top:72px}}
@media (prefers-reduced-motion:reduce){.cube{transform:rotateX(-22deg) rotateY(35deg)}}
.sticky-call{display:none}

/* ---------- motion helpers (an inline script adds .motion to <html> when animations are allowed) ---------- */
.motion [data-r]{opacity:0;transform:translateY(36px)}
.motion .hx-word,.motion .hx-ui{opacity:1}
.motion .hx-copy,.motion .hx-m{opacity:0}
.no-motion .statement .w{opacity:1}
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-mask>span{display:inline-block}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .fgrid>div:first-child{grid-column:1/-1}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .ind:nth-child(n){padding-left:0;border-left:0}
  .ind:nth-child(2n){padding-left:22px;border-left:1px solid var(--steel)}
  .linklist.cols{columns:3}
  .closeups{grid-template-columns:repeat(2,1fr)}
  .ph-float.a{width:26vw}.ph-float.b{width:22vw}.ph-float.c{width:24vw}.ph-float.d{width:26vw}
}
@media (max-width:900px){
  :root{--sec:96px;--gut:22px}
  .hero-grid,.model-grid,.contact-grid,.two-col,.plan,.cta,.partner,.scene-grid,.process{grid-template-columns:1fr;gap:44px}
  .gallery,.process-head{position:static}
  .paths,.brands,.ship-cards{grid-template-columns:1fr}
  .path{min-height:460px}
  .steps,.steps.four,.steps.six{grid-template-columns:1fr}
  .step,.step+.step,.steps.six .step:nth-child(n){padding:24px 0;border-left:0}
  .flist,.flist.three,.sectors{grid-template-columns:1fr}
  .counties,.pgrid,.posts{grid-template-columns:1fr 1fr}
  .cta .actions{justify-content:flex-start}
  .stats,.stats.four{grid-template-columns:1fr 1fr}
  .stats div+div{padding-left:0;border-left:0}
  .stats div:nth-child(2n){padding-left:24px;border-left:1px solid var(--steel)}
  .ind-list a,.svc-rows a{grid-template-columns:1fr auto;gap:12px}
  .ind-list p,.svc-rows p{grid-column:1;grid-row:2}
  .ind-list .ar,.svc-rows .ar{grid-column:2;grid-row:1/3}
  .collage-copy{order:1}.collage-photos{order:2}
  .collage-word{position:relative;top:auto;bottom:auto;order:3;margin-top:40px;font-size:22vw;animation:marq 26s linear infinite;width:max-content}
  .collage-copy{transform:none}
  .ind-hover{display:none}
  .collage{min-height:auto;padding:120px 0;flex-direction:column}
  .collage-word{font-size:24vw}
  .ph-float{position:relative;inset:auto!important;width:auto!important}
  .collage-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 var(--gut);margin-top:48px;width:100%}
  .glass{display:none}
  .scene-floor img{height:34vh}.scene-floor img:nth-child(odd){height:31vh}
  .showroom-pin{display:block;padding:96px 0}
  .showroom-intro{width:auto;padding:0 var(--gut) 36px}
  .showroom-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;transform:none!important}
  .showroom-track .mcard,.showroom-end{width:78vw;scroll-snap-align:center}
  .showroom-progress{display:none}
  .hx-word{flex-direction:column;align-items:center;gap:0;font-size:23vw;top:34%}
  .hx{--floor:12%}
  /* Phones: copy on top; the lineup takes whatever height is left under the buttons, so the machines never cover them */
  .hx-final{display:flex;flex-direction:column;align-items:stretch;padding-top:3vh;gap:14px}
  .hx-copy{flex:none;align-self:stretch;padding-bottom:0;position:relative;z-index:2}
  .hx-copy h1{font-size:clamp(1.9rem,8vw,2.7rem);margin-bottom:10px}
  .hx-copy .over{display:none}
  .hx-copy .lead{font-size:.98rem;line-height:1.48}
  .hx-copy .actions{flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;margin-top:16px;gap:8px}
  .hx-copy .pill{justify-content:center;min-height:46px;padding:0 18px;font-size:.84rem}
  .hx-copy .pill .arr{display:none}
  .hx-cta,.hx-scroll{display:none}
  .hx-lineup{flex:1 1 0;min-height:0;margin-right:0;container-type:size;align-self:stretch;align-items:flex-end}
  .hx-lineup>*{--lh:min(42vh,calc(100cqh - 4px),calc((100cqw - 8px) / var(--tot-m)))}
  .hx-pad.pd,.hx-extra{display:none}
  .hx-pad.pm{display:block}
  .hx-beam{width:90vw}
}
/* Short phone screens (browser bars showing): tighter copy leaves the machines more room */
@media (max-width:900px) and (max-height:760px){
  .hx-copy h1{font-size:clamp(1.7rem,7.3vw,2.3rem);margin-bottom:8px}
  .hx-copy .lead{font-size:.9rem;line-height:1.42}
  .hx-copy .actions{margin-top:12px}
  .hx-copy .pill{min-height:42px}
}
@media (max-width:640px){
  :root{--sec:76px;--gut:18px}
  body{font-size:16px}
  .mgrid,.counties,.pgrid,.posts,.closeups,.closeups.three{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .ind:nth-child(n){padding-left:0;border-left:0}
  .field-row{grid-template-columns:1fr;gap:0}
  .form-card,.ship-card,.plan-card{padding:24px}
  .linklist.cols{columns:2}
  .fgrid{grid-template-columns:1fr 1fr}
  .keyfacts,.loc-facts{grid-template-columns:1fr}
  .keyfacts div+div,.loc-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--steel)}
  .loc-facts div+div{border-color:rgba(255,255,255,.2)}
  .brandpanel .bp-top{padding:28px 24px 0}
  .brandpanel .actions{padding:24px}
  .bp-floor{height:230px}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  .site-footer{padding-bottom:110px}
  .sticky-call{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--steel)}
  .sticky-call .btn{min-height:48px;padding:0 12px}
  .scale{grid-template-columns:44px 1fr}
  .scale-lines{left:44px}
  .pricebox .actions{flex-direction:column}
  .dims{flex-direction:column;align-items:flex-start;gap:16px}
  .dims svg{width:90px}
  .actions .btn,.actions .pill{flex:1 1 auto}
  .hx-note{display:none}
  .scene::before{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.3) 100%)}
  .hx-cta{left:var(--gut);right:auto}
  .path{padding:30px 26px}
  .stats,.stats.four{grid-template-columns:1fr}
  .stats div:nth-child(n){padding-left:0;border-left:0;border-top:1px solid var(--steel)}
  .timeline{padding-left:56px}
  .timeline li::before{left:-56px;width:36px;height:36px}
  .timeline::before,.timeline-fill{left:17px}
  .fbig{font-size:18vw}
}

/* ---------- service word band (collage section): its own strip under the floating photos ---------- */
@media (min-width:901px){
  .collage{display:block;min-height:0;padding-bottom:var(--tk-gap,64px)}
  .collage-stage{position:relative;min-height:104vh;display:flex;flex-direction:column;justify-content:center}
  .collage .ticker{margin-top:30px}
}
.ticker{position:relative;z-index:3;overflow:hidden;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.55)}
.ticker-track{display:flex;align-items:center;width:max-content;animation:marq 34s linear infinite;will-change:transform;backface-visibility:hidden}
.ticker-track>*{margin-right:34px}
.ticker-track span{font-weight:700;font-size:clamp(1.3rem,2.4vw,2.2rem);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.ticker-track i{width:12px;height:12px;border-radius:50%;background:var(--red);flex:none}
@media (max-width:900px){.collage-stage{display:contents}.ticker{order:3;margin-top:44px;width:100%}}

/* ---------- industries rows: fill, small photo and red arrow on hover ---------- */
.ind-list li{position:relative;isolation:isolate}
.ind-list a{position:relative}
.ind-list a::before{content:'';position:absolute;left:-16px;right:-16px;top:0;bottom:0;border-radius:16px;background:var(--mist);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:-1}
.ind-list .nm{display:flex;align-items:center}
.ind-thumb{display:block;flex:none;width:0;height:58px;margin-right:0;border-radius:12px;overflow:hidden;opacity:0;transition:width .45s var(--ease),margin-right .45s var(--ease),opacity .3s}
.ind-thumb img{width:84px;height:58px;object-fit:cover;max-width:none}
@media (hover:hover){
  .ind-list a:hover::before{transform:scaleX(1)}
  .ind-list a:hover .ind-thumb{width:84px;margin-right:18px;opacity:1}
}
.ind-hover{display:none}

/* ---------- home statement: headline with media capsules set into the type ---------- */
.kin-sec{overflow-x:clip}
.kin{margin:0 auto;text-align:center;font-weight:700;font-size:clamp(2.3rem,5.9vw,6.2rem);line-height:1.1;letter-spacing:-.05em;color:var(--ink)}
.kin-l{display:block}
.kin-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.kin-w>span{display:inline-block}
/* a capsule sits centered under each line; --cp (0 to 1) opens it out from the center as the headline arrives */
.kin-cap{--cw:4.2em;--ch:1em;position:relative;display:block;width:calc(var(--cw) * var(--cp,1));height:var(--ch);margin:.12em auto .3em;border-radius:999px;overflow:hidden;background:var(--night);transition:transform .6s var(--ease)}
.kin-cap:last-child{margin-bottom:0}
.kin-cap>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kin-cap-m{background:radial-gradient(90% 130% at 50% 115%,#6a0707 0%,#1a0606 48%,#0c0c0d 78%)}
.kin-conv{position:absolute;left:0;bottom:calc(var(--ch) * .04);display:flex;align-items:flex-end;width:max-content;animation:marq 22s linear infinite}
.kin-conv img{height:calc(var(--ch) * .88);width:auto;max-width:none;margin-right:calc(var(--ch) * .2)}
@media (hover:hover){.kin-cap:hover{transform:scale(1.05)}}
/* phones: each line stays on one row, with a wider, taller capsule under it */
@media (max-width:640px){.kin{font-size:8.6vw}.kin-l{white-space:nowrap}.kin-cap{--cw:7.6em;--ch:1.75em;margin:.2em auto .4em}}