/* ==========================================================================
   Snow Removal Canada — Design System (palette sampled from the logo)
   --------------------------------------------------------------------------
   1  Tokens            8  Hero              15 Pricing          22 Footer
   2  Reset             9  Marquee           16 Estimator        23 FAB
   3  Typography       10  Stats             17 Trigger gauge    24 Lightbox
   4  Ambient layers   11  Storm reel        18 Gallery          25 Reveal
   5  Preloader        12  Services          19 Testimonials     26 Responsive
   6  Buttons          13  Versus / results  20 FAQ              27 A11y / motion
   7  Nav              14  Why / process     21 Quote form
   ========================================================================== */

/* ---------- 0. FONT FALLBACK METRICS ----------
   Sora and Inter arrive after first paint. These fallbacks are scaled to
   occupy the same space as the real faces, so the swap moves nothing.     */
@font-face{
  font-family:'Sora Fallback';
  src:local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust:109%;
  ascent-override:89%;
  descent-override:26.5%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust:104%;
  ascent-override:93%;
  descent-override:23%;
  line-gap-override:0%;
}

/* ---------- 1. TOKENS ----------
   Every colour below is sampled from the logo: the maple-leaf red, the
   deep navy of the truck and base plate, the chrome of the lettering,
   the icy rim-light, and the amber of the beacon and salt spreader.
   Discipline: RED is only ever an action or a claim we are making.
   ICE/CHROME carries information. AMBER means "running right now".      */
:root{
  /* surfaces — the logo's night-navy base */
  --ink:        #060c16;
  --ink-2:      #0a1220;
  --ink-3:      #0e1a2c;
  --surface:    rgba(190,214,240,.045);
  --surface-2:  rgba(190,214,240,.075);
  --line:       rgba(150,186,228,.16);
  --line-2:     rgba(150,186,228,.28);

  /* type — the chrome lettering */
  --frost:      #eef4fc;
  --frost-2:    #c3d3e6;
  --frost-3:    #90a3bd;
  --frost-4:    #71839f;

  /* accents */
  --red:        #d81324;   /* maple leaf + plow blade */
  --red-hot:    #ff3a46;
  --red-deep:   #8f0d16;
  --ice:        #8fc4ef;   /* the icy rim-light       */
  --ice-bright: #cfe3f7;
  --glacier:    #4d7fb5;   /* mid-blue of the skyline */
  --aurora:     #2f5f96;
  --ember:      #f0943d;   /* beacon + salt spreader  */
  --ember-soft: rgba(240,148,61,.14);

  /* the signature: chrome type, exactly like the wordmark */
  --grad-ice:   linear-gradient(118deg, #ffffff 0%, #e3eefa 26%, #a8cdf0 58%, #6ea9dd 100%);
  --grad-btn:   linear-gradient(135deg, #ff3a46 0%, #d81324 52%, #a30f1c 100%);
  --grad-red:   linear-gradient(135deg, #ff3a46 0%, #d81324 52%, #a30f1c 100%);
  --grad-steel: linear-gradient(135deg, #cfe3f7 0%, #8fc4ef 50%, #4d7fb5 100%);
  --glow-ice:   0 0 0 1px rgba(143,196,239,.2), 0 18px 50px -12px rgba(45,95,150,.5);
  --glow-red:   0 12px 34px -12px rgba(216,19,36,.75);

  /* geometry */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --container: 1280px;
  --gut: clamp(20px, 4vw, 52px);
  --sec-y: clamp(84px, 9vw, 148px);
  --nav-h: 100px;

  /* motion */
  --ease:      cubic-bezier(.22,.68,.24,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  /* fonts */
  --f-display: 'Sora', 'Sora Fallback', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --f-serif:   'Instrument Serif', Georgia, serif;

  /* photography grade — every photo shares one winter-night look */
  --ph-grade:  saturate(.82) contrast(1.04) brightness(.95);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
}
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--frost-2);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* scroll lock that iOS Safari actually honours: the body is pinned in place
   (JS sets `top:-scrollY`) so the page behind a menu or viewer cannot drift */
body.is-locked{ overflow:hidden; position:fixed; left:0; right:0; }

img,svg,canvas,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* taps respond instantly and never zoom the page on a double tap */
a, button, .btn{ touch-action:manipulation; }
ul,ol{ list-style:none; }
address{ font-style:normal; }
:where(h1,h2,h3,h4,h5,h6){ text-wrap:balance; }
:where(p,li){ text-wrap:pretty; }
::selection{ background:rgba(216,19,36,.45); color:#fff; }

/* atmospheric background field */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(45,95,150,.2), transparent 62%),
    radial-gradient(900px 600px at 8% 8%,   rgba(216,19,36,.075), transparent 58%),
    radial-gradient(1000px 800px at 50% 108%, rgba(143,196,239,.08), transparent 60%),
    linear-gradient(180deg, #060c16 0%, #08111e 45%, #060c16 100%);
}

.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gut);
  /* iPhone notch / Dynamic Island in landscape: never let content sit under it */
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
}
.section{ position:relative; z-index:3; padding:var(--sec-y) 0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* the scrollbar is part of the frame — navy track, steel thumb, red when held */
html{ scrollbar-width:thin; scrollbar-color:#2f5f96 #0a1220; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#0a1220; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#4d7fb5,#2f5f96); border-radius:10px;
  border:3px solid #0a1220;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#ff3a46,#a30f1c); }

.skip-link{
  position:fixed; top:12px; left:12px; z-index:400;
  padding:12px 20px; border-radius:100px;
  background:var(--grad-red); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:14px;
  transform:translateY(-160%);
  transition:transform .3s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{ transform:none; }

/* ---------- 3. TYPOGRAPHY ---------- */
.sec-head{ max-width:44rem; margin-bottom:clamp(44px,5.5vw,76px); }
.sec-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ice); margin-bottom:20px;
}
.eyebrow i{
  width:22px; height:1px; flex:none; display:block;
  background:linear-gradient(90deg,var(--ice),transparent);
}
.sec-head--center .eyebrow{
  padding:7px 17px; border-radius:100px;
  border:1px solid var(--line); background:var(--surface);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.sec-head--center .eyebrow i{ display:none; }

.sec-title{
  font-family:var(--f-display);
  font-size:clamp(2.1rem, 1.35rem + 3.15vw, 3.7rem);
  font-weight:700; line-height:1.06; letter-spacing:-.035em;
  color:var(--frost);
}
.sec-title .serif{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  letter-spacing:-.005em;
}
.sec-title .serif,
.sec-title .grad,
.stat__num,
.result b,
.inf{
  background:var(--grad-ice);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sec-sub{
  margin-top:20px;
  font-size:clamp(1rem, .955rem + .2vw, 1.09rem);
  color:var(--frost-3); max-width:58ch;
}
.sec-head--center .sec-sub{ margin-inline:auto; }

.inf{ display:inline-block; font-weight:400; line-height:.8; }

/* ---------- 4. AMBIENT LAYERS ---------- */
.snow-canvas{
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.8;
}
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:rgba(255,255,255,.04);
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:var(--grad-red);
  box-shadow:0 0 14px rgba(255,58,70,.75);
}

/* custom cursor */
.cursor{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; mix-blend-mode:screen; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--ice); transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(143,196,239,.9);
}
.cursor__ring{
  position:absolute; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(150,210,255,.45); transform:translate(-50%,-50%);
  transition:width .28s var(--ease), height .28s var(--ease), border-color .28s, background .28s;
}
.cursor.is-hot .cursor__ring{
  width:54px; height:54px;
  border-color:rgba(143,196,239,.75);
  background:rgba(143,196,239,.06);
}
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ---------- 4b. THE MARK, PLACED ----------
   Six considered placements. Each one is either a signature on our own
   work or a reassurance at a decision point — never decoration.        */

/* the mobile drawer opens with the brand, the way an app would */
.nav__panel-brand{ display:none; }
.nav__panel-logo{ width:150px; height:auto; margin-bottom:22px; }

/* broadcast-style bug on the storm stage: this footage is ours */
.storm__bug{
  position:absolute; right:clamp(14px,2vw,22px); bottom:clamp(12px,1.8vw,18px);
  width:92px; z-index:3; pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.75));
}
.storm__bug img{ width:100%; height:auto; }

/* the conversion point — the brand stands behind the quote */
.quote-form__brand{ display:block; width:132px; flex:none; }
.quote-form__brand img{ width:100%; height:auto; }
.quote-form__title{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex:1; min-width:0;
}

/* the viewer signs the photography */
.lb__brand{
  position:absolute; left:clamp(14px,3vw,30px); bottom:clamp(12px,2.5vw,26px);
  width:96px; z-index:2; opacity:.72; pointer-events:none;
}
.lb__brand img{ width:100%; height:auto; }

/* an embossed seal behind the closing pitch — presence, not noise */
.cta__seal{
  position:absolute; z-index:-1; pointer-events:none;
  left:-7%; bottom:-9%;
  width:min(540px,86vw);
  opacity:.11;
  filter:grayscale(.2);
  -webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 50%, #000 26%, transparent 80%);
  mask-image:radial-gradient(ellipse 64% 64% at 50% 50%, #000 26%, transparent 80%);
}
.cta__seal img{ width:100%; height:auto; }

/* the dispatch badge on the night scene */
.why__badge-logo{ display:block; width:56px; margin-bottom:3px; }
.why__badge-logo img{ width:100%; height:auto; }

/* ---------- 5. PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:300;
  display:flex; flex-direction:column; justify-content:center;
  background:#04070e;
  transition:transform .95s cubic-bezier(.76,0,.24,1);
}
.preloader::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%, rgba(45,95,150,.12), transparent 65%);
}
.preloader.is-gone{ transform:translateY(-101%); }
.preloader.is-gone .preloader__inner,
.preloader.is-gone .preloader__status,
.preloader.is-gone .preloader__line{ opacity:0; transition:opacity .3s ease; }

.preloader__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:clamp(8px,2vh,22px);
}
/* the artwork is on black, so `screen` dissolves its background into the
   curtain and the icy rim-light becomes a real bloom. The radial mask
   feathers the vignette so no rectangle ever shows.                     */
.preloader__logo{
  width:min(420px,72vw); height:auto;
  animation:logoIn 1.2s var(--ease-out) both;
}
@keyframes logoIn{
  from{ opacity:0; transform:scale(.94) translateY(16px); }
  to  { opacity:1; transform:none; }
}
.preloader__count{
  display:flex; align-items:flex-start; gap:4px;
  font-family:var(--f-display); font-weight:300;
  color:var(--frost); line-height:.82;
  font-variant-numeric:tabular-nums;
}
.preloader__count span{
  font-size:clamp(1.5rem,4vw,2.2rem); letter-spacing:-.04em;
  min-width:2.7ch; text-align:right;
}
.preloader__count i{
  font-style:normal; font-size:clamp(.7rem,1.4vw,.95rem);
  color:var(--red-hot); padding-top:.3em;
}
.preloader__status{
  position:absolute; left:0; right:0; bottom:38px; z-index:1; text-align:center;
  font-family:var(--f-display); font-size:.66rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--frost-3);
}
.preloader__line{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.07);
}
.preloader__line i{
  display:block; height:100%; width:0%;
  background:var(--grad-red);
  box-shadow:0 0 16px rgba(255,58,70,.85);
}

/* ---------- 6. BUTTONS & LINKS ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:15px 27px; border-radius:100px;
  min-height:48px;
  font-family:var(--f-display); font-weight:600; font-size:.9rem;
  letter-spacing:-.01em; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease), color .3s;
  overflow:hidden; isolation:isolate;
}
.btn > span{ position:relative; z-index:1; }
.btn svg{ flex:none; position:relative; z-index:1; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--sm{ padding:11px 20px; min-height:42px; font-size:.845rem; }
.btn--full{ width:100%; }
.btn--grow{ flex:1 1 auto; }

.btn--primary{
  background:var(--grad-red); color:#fff;
  box-shadow:var(--glow-red), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,#ff5f68,#e0202f 60%,#c01423);
  opacity:0; transition:opacity .35s var(--ease);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(255,58,70,.7); }
/* a single pass of light across the face — once, on entry */
.btn--primary::before{
  content:''; position:absolute; top:-20%; bottom:-20%; left:-45%; width:34%; z-index:2;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .1s;
}
.btn--primary:hover::before{ left:125%; transition:left .7s var(--ease); }
.btn--primary:hover::after{ opacity:1; }

.btn--ghost{
  color:var(--frost);
  border:1px solid var(--line-2);
  background:var(--surface);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{
  border-color:rgba(143,196,239,.5);
  background:rgba(143,196,239,.08);
  transform:translateY(-2px);
}

.ghost-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.875rem; font-weight:500; color:var(--frost-2);
  transition:color .3s;
}
a.ghost-link:hover{ color:var(--ice); }
.ghost-link svg{ opacity:.7; flex:none; }
.ghost-link--static{ cursor:default; color:var(--frost-3); }

/* glass base */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- 6b. SPOTLIGHT RING ----------
   A 1px ring of light that follows the pointer around a card's edge.
   JS sets --px/--py; the mask keeps only the border of the pseudo.     */
.spot{ position:relative; --spot-c:rgba(207,227,247,.6); }
.spot::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; z-index:4;
  background:radial-gradient(280px circle at var(--px,50%) var(--py,50%), var(--spot-c), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease);
}
.spot:hover::after{ opacity:1; }
.plan--featured.spot, .storm__steps button.is-on.spot{ --spot-c:rgba(255,58,70,.75); }
.nocap.spot{ --spot-c:rgba(244,176,116,.7); }

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  padding:18px 0;
  padding-top:calc(18px + env(safe-area-inset-top)); /* status bar when saved to the home screen */
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s;
}
.nav.is-stuck{
  padding:9px 0;
  padding-top:calc(9px + env(safe-area-inset-top));
  border-bottom-color:var(--line);
}
/* the frosted glass lives on a pseudo-element, NOT on .nav itself: a backdrop-filter
   on .nav would turn it into the containing block of the fixed mobile drawer, which
   then gets clipped to the header's height the moment the page has been scrolled */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(6,12,22,.74);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  opacity:0; transition:opacity .4s var(--ease);
}
.nav.is-stuck::before{ opacity:1; }
.nav__inner{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }

/* every instance of the artwork keeps its full 3:2 canvas — `contain`
   means it can never be cropped or stretched, whatever box it lands in */
.brand__logo, .footer__logo, .preloader__logo, .nav__panel-logo,
.storm__bug img, .quote-form__brand img, .lb__brand img,
.cta__seal img, .why__badge-logo img{
  object-fit:contain; aspect-ratio:3/2;
}

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
/* the artwork itself, at the smallest size where "SNOW" still reads.
   The wordmark beside it carries the rest of the name, because the
   lettering inside the illustration is unreadable below ~120px.        */
.brand__logo{
  height:50px; width:auto; flex:none;
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.brand:hover .brand__logo{
  transform:scale(1.05);
  filter:brightness(1.12) drop-shadow(0 0 16px rgba(216,19,36,.45));
}

.brand__text{
  display:flex; flex-direction:column; gap:3px;
  font-family:var(--f-display); line-height:1;
}
.brand__text b{
  font-size:.95rem; font-weight:800; letter-spacing:.1em;
  background:var(--grad-ice);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.brand__text em{
  display:flex; align-items:center; gap:7px;
  font-style:normal; font-size:.68rem; font-weight:600;
  letter-spacing:.28em; color:var(--frost-3); text-transform:uppercase;
}
/* the flag, reduced to a single red stroke */
.brand__text em i{
  width:14px; height:2px; border-radius:2px; flex:none;
  background:var(--grad-red);
  box-shadow:0 0 8px rgba(216,19,36,.7);
}

.nav__links{ display:flex; gap:2px; margin-inline:auto; position:relative; }
.nav__ind{
  position:absolute; left:0; bottom:5px; height:2px; width:0;
  border-radius:2px; background:var(--grad-red);
  box-shadow:0 0 12px rgba(255,58,70,.8);
  opacity:0; pointer-events:none;
  transition:transform .55s var(--ease), width .55s var(--ease), opacity .3s;
}
.nav__links > a{
  position:relative; padding:9px 15px; border-radius:100px;
  font-size:.875rem; font-weight:500; color:var(--frost-3);
  transition:color .3s, background .3s;
}
.nav__links > a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:5px; height:1px;
  background:var(--ice); opacity:.85;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links > a:hover{ color:var(--frost); }
.nav__links > a:hover::after{ transform:scaleX(1); }
.nav__links > a.is-active{ color:var(--frost); }
.nav__links > a.is-active::after{ display:none; }
.nav__panel-foot{ display:none; }

.nav__cta{ display:flex; align-items:center; gap:16px; flex:none; position:relative; z-index:106; }

.burger{
  display:none; width:44px; height:44px; border-radius:12px; /* Apple HIG tap size, matches the phone button */
  border:1px solid var(--line); background:var(--surface);
  flex-direction:column; justify-content:center; align-items:center; gap:4.5px;
  transition:border-color .3s, background .3s;
}
.burger:hover{ border-color:var(--line-2); }
.burger i{
  display:block; width:16px; height:1.6px; background:var(--frost);
  border-radius:2px; transition:transform .4s var(--ease), opacity .3s;
}
.burger.is-open i:nth-child(1){ transform:translateY(6.1px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-6.1px) rotate(-45deg); }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative; z-index:3;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(130px,16vh,170px) 0 clamp(76px,10vh,110px);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:-8% 0 0; z-index:-2;
  overflow:hidden; will-change:transform;
}
.hero__media img{
  width:100%; height:116%; object-fit:cover; object-position:50% 46%;
  filter:saturate(.82) contrast(1.14) brightness(1.45);
  transform:scale(1.06);
  animation:kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-1.5%,-1.5%,0); }
}
/* `scale` composes with the kenburns transform, so the entrance can ride
   on top of it without either animation fighting the parallax writes */
body.is-ready .hero__media img{
  animation:kenburns 28s ease-in-out infinite alternate, heroSettle 1.9s var(--ease-out) both;
}
@keyframes heroSettle{
  from{ scale:1.16; opacity:.2; }
  to  { scale:1;    opacity:1;  }
}
.hero__veil{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,12,22,.97) 2%, rgba(6,12,22,.87) 27%, rgba(6,12,22,.34) 55%, rgba(6,12,22,.5) 100%),
    linear-gradient(180deg, rgba(6,12,22,.72) 0%, rgba(6,12,22,.1) 34%, rgba(6,12,22,.4) 74%, #060c16 100%),
    radial-gradient(120% 80% at 74% 32%, rgba(45,95,150,.22), transparent 62%);
}
.hero__aurora{ position:absolute; inset:0; z-index:-1; opacity:.4; contain:layout style paint; }
.blob{ position:absolute; border-radius:50%; will-change:transform; }
.blob--1{ width:62vw; height:62vw; top:-24%; right:-16%;
  background:radial-gradient(circle closest-side, rgba(45,95,150,.55), rgba(45,95,150,.18) 46%, transparent 74%);
  animation:drift 22s ease-in-out infinite; }
.blob--2{ width:54vw; height:54vw; bottom:-28%; left:-18%;
  background:radial-gradient(circle closest-side, rgba(216,19,36,.3), rgba(216,19,36,.09) 46%, transparent 74%);
  animation:drift 28s ease-in-out infinite reverse; }
.blob--3{ width:46vw; height:46vw; top:26%; left:32%;
  background:radial-gradient(circle closest-side, rgba(143,196,239,.26), rgba(143,196,239,.08) 46%, transparent 74%);
  animation:drift 34s ease-in-out infinite; }
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(4%,-5%) scale(1.12); }
  66%{ transform:translate(-4%,4%) scale(.93); }
}

.hero__inner{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(40px,5vw,76px); align-items:center;
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px 8px 14px; border-radius:100px;
  border:1px solid var(--line-2); background:var(--surface);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:.79rem; font-weight:500; color:var(--frost-2);
}
.pill__dot{
  position:relative; flex:none;
  width:7px; height:7px; border-radius:50%; background:var(--ember);
}
.pill__dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(240,148,61,.55);
  animation:pulse 2.2s cubic-bezier(.22,.7,.3,1) infinite;
}
@keyframes pulse{
  0%  { transform:scale(1);   opacity:.55; }
  70%,100%{ transform:scale(3.6); opacity:0; }
}

.hero__title{
  margin:26px 0 24px;
  font-family:var(--f-display);
  font-size:clamp(3rem, 1.5rem + 6.4vw, 6.4rem);
  font-weight:800; line-height:.95; letter-spacing:-.05em;
  color:var(--frost);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .grad{
  background:var(--grad-ice); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.hero__title .dot{ color:var(--ice); }

.hero__lede{
  max-width:50ch; font-size:clamp(1.02rem,.97rem + .22vw,1.14rem);
  color:var(--frost-3);
}
.hero__lede strong{ color:var(--frost); font-weight:600; }
.price-inline{
  color:var(--ice); font-family:var(--f-display);
  font-weight:700; letter-spacing:-.02em;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:38px;
  padding-top:26px; border-top:1px solid var(--line);
}
.hero__trust li{
  display:flex; align-items:center; gap:8px;
  font-size:.83rem; color:var(--frost-3); font-weight:500;
}
.hero__trust svg{ width:15px; height:15px; color:var(--ember); flex:none; }

/* hero panel */
.hero__panel{ position:relative; }
.hero__panel .glass{
  background:linear-gradient(160deg, rgba(11,18,32,.86), rgba(7,12,22,.76));
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  border-color:rgba(150,186,228,.2);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.09);
}
.card-live{ padding:26px; position:relative; margin:72px 0 64px; }
.card-live__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-display); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; color:var(--ember); white-space:nowrap;
}
.live i{
  width:6px; height:6px; border-radius:50%; background:var(--ember);
  position:relative; flex:none;
}
.live i::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(240,148,61,.55); animation:pulse 2s infinite;
}
.card-live__time{
  font-family:var(--f-display); font-size:.78rem; color:var(--frost-3);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; white-space:nowrap;
}
.card-live__temp{ display:flex; align-items:center; gap:20px; padding:22px 0; }
.temp{
  font-family:var(--f-display); font-size:3.4rem; font-weight:300;
  line-height:1; letter-spacing:-.05em; color:var(--frost);
}
.temp sup{ font-size:1.15rem; vertical-align:super; color:var(--ice); }
.temp__meta{ display:grid; gap:3px; }
.temp__meta strong{ font-size:.875rem; color:var(--frost); font-weight:600; }
.temp__meta span{ font-size:.78rem; color:var(--frost-3); line-height:1.5; }

.card-live__bars{
  display:grid; gap:14px; padding:20px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.bar{ display:grid; grid-template-columns:1fr minmax(3rem,5.5rem) auto; align-items:center; gap:12px; }
.bar span{ font-size:.78rem; color:var(--frost-3); }
.bar i{
  height:4px; border-radius:4px; background:rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}
.bar i::after{
  content:''; position:absolute; inset:0; width:var(--v);
  background:var(--grad-ice); border-radius:4px;
  box-shadow:0 0 12px rgba(143,196,239,.5);
  transform-origin:left; animation:grow 1.4s var(--ease-out) both;
}
@keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.bar b{ font-family:var(--f-display); font-size:.75rem; color:var(--frost); font-variant-numeric:tabular-nums; }

.card-live__foot{ display:flex; align-items:center; gap:14px; padding-top:18px; flex-wrap:wrap; }
.avatars{ display:flex; }
.avatars span{
  width:28px; height:28px; border-radius:50%; margin-left:-8px;
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:.6rem; font-weight:600;
  color:var(--frost); background:linear-gradient(140deg,#1c3050,#111f33);
  border:1px solid rgba(150,186,228,.28);
}
.avatars span:first-child{ margin-left:0; }
.card-live__note{ font-size:.78rem; color:var(--frost-3); }

/* the two stat chips sit above and below the live card — they overlap its
   corners by a few pixels for depth, never its content */
.card-float{
  position:absolute; padding:15px 19px; border-radius:var(--r);
  min-width:9.5rem;
}
.card-float--a{ top:0; left:-2.4rem; animation:float 6s ease-in-out infinite; }
.card-float--b{ bottom:0; right:-1.6rem; animation:float 7.5s ease-in-out infinite 1s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
.card-float .kpi{
  font-family:var(--f-display); font-size:1.9rem; font-weight:700;
  letter-spacing:-.03em; color:var(--frost); line-height:1;
}
.card-float .kpi .inf{ font-size:1.4em; }
.card-float > p:last-child{ font-size:.72rem; color:var(--frost-3); margin-top:5px; line-height:1.4; }
.card-float--b p strong{ color:var(--frost); }
.stars{ color:#f0b23d; font-size:.82rem; letter-spacing:2px; line-height:1.4; }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--frost-3);
  transition:opacity .3s linear;
}
.hero__scroll-line{
  width:1px; height:44px; background:linear-gradient(180deg,transparent,var(--ice));
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:12px;
  background:var(--frost); animation:trail 2s var(--ease) infinite;
}
@keyframes trail{ 0%{ transform:translateY(-14px); } 100%{ transform:translateY(48px); } }

/* ---------- 9. MARQUEE ---------- */
.marquee{
  position:relative; z-index:3;
  padding:22px 0; overflow:hidden;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.018);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:scrollx 46s linear infinite; will-change:transform; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.marquee__group{
  display:flex; align-items:center; gap:22px; padding-right:22px;
  transform:skewX(var(--vskew,0deg));
}
.marquee__group span{
  font-family:var(--f-display); font-size:clamp(1rem,2vw,1.3rem); font-weight:600;
  letter-spacing:-.02em; color:var(--frost-2); opacity:.72;
  transition:opacity .3s, color .3s;
}
.marquee__group span:hover{ opacity:1; color:var(--ice); }
.marquee__group i{ color:var(--ice); font-size:.75rem; opacity:.5; font-style:normal; }

/* ---------- 10. STATS ---------- */
.stats{ position:relative; z-index:3; padding:clamp(56px,7vw,86px) 0; }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.stat{
  background:var(--ink-2); padding:clamp(24px,3vw,36px);
  text-align:center; transition:background .4s;
}
.stat:hover{ background:var(--ink-3); }
.stat__num{
  font-family:var(--f-display);
  font-size:clamp(2rem,1.4rem + 1.7vw,2.9rem); font-weight:700;
  letter-spacing:-.045em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat__num .inf{ font-size:1.15em; }
.stat > p:last-child{ margin-top:11px; font-size:.82rem; color:var(--frost-3); line-height:1.5; }

/* ---------- 11. STORM TIMELINE ----------
   Four frames of one storm. No scroll hijacking: every frame is on screen
   as a thumbnail, one plays large, and the rail advances itself. The
   progress bar IS the timer — JS advances on its animationend, so pausing
   the animation pauses the sequence with no drift.                        */
.storm__grid{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(26px,3.4vw,54px); align-items:start;
}

.storm__stage{
  position:relative; aspect-ratio:4/3;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line-2);
  background:#0a141f;
  box-shadow:0 50px 100px -48px rgba(0,0,0,.95), var(--glow-ice);
}
.storm__frames{ position:absolute; inset:0; }
.sf{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) contrast(1.05) brightness(.9);
  opacity:0; transform:scale(1.075);
  transition:opacity .85s var(--ease-out), transform .9s var(--ease-out);
}
.sf.is-on{
  opacity:1;
  transform:scale(1);
  transition:opacity .85s var(--ease-out), transform 7.5s linear;
}
.storm__grade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,10,19,.78) 0%, rgba(5,10,19,.1) 34%, rgba(5,10,19,.06) 60%, rgba(5,10,19,.58) 100%),
    radial-gradient(120% 80% at 78% 18%, rgba(45,95,150,.2), transparent 62%);
}
.storm__stamp{
  position:absolute; top:clamp(14px,2.2vw,26px); left:clamp(18px,2.6vw,32px);
  font-family:var(--f-display); font-size:clamp(2.1rem,4.2vw,3.3rem);
  font-weight:300; letter-spacing:-.05em; line-height:1;
  color:var(--frost); font-variant-numeric:tabular-nums;
  text-shadow:0 10px 40px rgba(0,0,0,.85);
}

/* ---- the rail ---- */
.storm__steps{ display:grid; gap:8px; }
.storm__steps button{
  position:relative; width:100%; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  padding:10px 16px 10px 10px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.025);
  text-align:left;
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.storm__steps button:hover{
  border-color:var(--line-2); background:rgba(255,255,255,.055);
  transform:translateX(3px);
}
.storm__steps button.is-on{
  border-color:rgba(216,19,36,.45);
  background:linear-gradient(100deg, rgba(216,19,36,.12), rgba(45,95,150,.05));
}
.storm__thumb{
  width:70px; height:53px; flex:none;
  border-radius:11px; overflow:hidden; position:relative;
  border:1px solid var(--line);
}
.storm__thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) brightness(.95);
  transition:filter .45s var(--ease), transform .6s var(--ease);
}
.storm__steps button:hover .storm__thumb img{ transform:scale(1.06); }
.storm__steps button.is-on .storm__thumb img{ filter:saturate(1.02) brightness(1.1); }
.storm__meta{ display:grid; gap:2px; min-width:0; }
.storm__meta b{
  font-family:var(--f-display); font-size:.74rem; font-weight:700;
  letter-spacing:.12em; color:var(--frost-3);
  font-variant-numeric:tabular-nums; transition:color .4s;
}
.storm__meta em{
  font-style:normal; font-family:var(--f-display);
  font-size:.92rem; font-weight:600; letter-spacing:-.02em;
  color:var(--frost-2); transition:color .4s; line-height:1.35;
}
.storm__steps button.is-on .storm__meta b{ color:var(--red-hot); }
.storm__steps button.is-on .storm__meta em{ color:var(--frost); }

/* the fill bar doubles as the dwell timer */
.storm__tick{ position:absolute; left:0; right:0; bottom:0; height:2px; }
.storm__tick::after{
  content:''; display:block; height:100%; width:0;
  background:var(--grad-red); box-shadow:0 0 12px rgba(255,58,70,.8);
}
.storm__steps button.is-on .storm__tick::after{
  animation:tickFill var(--dwell,5.6s) linear forwards;
}
@keyframes tickFill{ from{ width:0; } to{ width:100%; } }
.storm.is-held .storm__steps button.is-on .storm__tick::after{ animation-play-state:paused; }
/* once someone picks a frame themselves, stop driving it for them */
.storm.is-manual .storm__steps button.is-on .storm__tick::after{
  animation:none; width:100%;
}

/* ---- panels ---- */
.storm__panels{ margin-top:24px; }
.sp[hidden]{ display:none; }
.sp{ animation:spIn .55s var(--ease-out) both; }
@keyframes spIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.sp h3{
  font-family:var(--f-display); font-size:clamp(1.35rem,2.5vw,1.85rem);
  font-weight:700; letter-spacing:-.04em; line-height:1.1;
  color:var(--frost); margin-bottom:12px;
}
.sp p{ font-size:.95rem; color:var(--frost-2); max-width:46ch; }

/* ---------- 12. SERVICES ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.4vw,20px); }
.svc{
  position:relative; overflow:hidden; isolation:isolate;
  padding:32px 30px 30px; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  transform-style:preserve-3d;
}
.svc--wide{ grid-column:span 2; }
.svc:hover{
  border-color:rgba(143,196,239,.34);
  box-shadow:0 34px 70px -34px rgba(45,95,150,.55);
}
.svc__glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(143,196,239,.16), transparent 66%);
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .45s; pointer-events:none; z-index:-1;
}
.svc:hover .svc__glow{ opacity:1; }

.svc__icon{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  color:var(--ice); margin-bottom:22px;
  background:linear-gradient(150deg, rgba(143,196,239,.14), rgba(45,95,150,.04));
  border:1px solid rgba(143,196,239,.2);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.svc:hover .svc__icon{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 12px 30px -10px rgba(143,196,239,.6);
}
.svc__icon svg{ width:24px; height:24px; }

.svc h3{
  font-family:var(--f-display); font-size:1.2rem; font-weight:600;
  letter-spacing:-.028em; color:var(--frost); margin-bottom:11px; line-height:1.25;
}
.svc p{ font-size:.9rem; color:var(--frost-3); max-width:46ch; }
.svc__list{ margin-top:20px; display:grid; gap:9px; }
.svc__list li{ position:relative; padding-left:20px; font-size:.845rem; color:var(--frost-2); }
.svc__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px;
  background:var(--grad-ice); box-shadow:0 0 10px rgba(143,196,239,.6);
}
.svc__num{
  position:absolute; top:26px; right:28px;
  font-family:var(--f-display); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; color:var(--frost-3); opacity:.45;
}
.svc--accent{
  background:linear-gradient(165deg, rgba(47,95,150,.13), rgba(45,95,150,.04));
  border-color:rgba(47,95,150,.24);
}
.svc--accent .svc__icon{
  color:var(--aurora); border-color:rgba(47,95,150,.3);
  background:linear-gradient(150deg, rgba(47,95,150,.18), transparent);
}

/* photo service cards */
.svc--photo{
  padding:0; display:flex; flex-direction:column;
  min-height:clamp(310px,32vw,380px);
}
.svc__ph{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.svc__ph img{
  width:100%; height:100%; object-fit:cover;
  filter:var(--ph-grade);
  transform:scale(1.04);
  transition:transform 1.1s var(--ease-out), filter .6s;
}
.svc--photo::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,12,22,.12) 0%, rgba(6,12,22,.62) 48%, rgba(6,12,22,.94) 100%),
    linear-gradient(120deg, rgba(45,95,150,.14), transparent 62%);
}
.svc--photo:hover .svc__ph img{ transform:scale(1.1); filter:saturate(.95) contrast(1.03) brightness(1.02); }
.svc__body{ margin-top:auto; padding:clamp(24px,2.4vw,30px); }
.svc--photo .svc__icon{
  background:rgba(8,14,26,.6); border-color:rgba(160,215,255,.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.svc--photo .svc__num{ top:24px; right:26px; opacity:.8; color:var(--frost-2); }
.svc--photo h3{ font-size:1.3rem; }
.svc--photo p{ color:var(--frost-2); }

/* ---------- 13. VERSUS + RESULTS ---------- */
.versus{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,28px);
  align-items:stretch;
}
.versus__vs{
  position:absolute; top:50%; left:50%; z-index:5;
  transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#111f33,#0a1422);
  border:1px solid rgba(150,186,228,.3);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.95), 0 0 0 10px rgba(6,12,22,.55);
}
.versus__vs i{
  font-style:normal; font-family:var(--f-serif); font-size:1.35rem;
  background:var(--grad-ice); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.vs{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl); border:1px solid var(--line);
  min-height:clamp(390px,42vw,510px);
  display:flex; flex-direction:column;
  transition:border-color .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
.vs__ph{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.vs__ph img{
  width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transform:scale(1.05);
  transition:transform 1.3s var(--ease-out), filter .7s var(--ease);
}
.vs::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; }

.vs--bad .vs__ph img{ filter:saturate(.32) contrast(1.05) brightness(.78); }
.vs--bad::after{
  background:
    linear-gradient(180deg, rgba(7,13,23,.45) 0%, rgba(7,13,23,.82) 44%, rgba(5,10,19,.97) 100%),
    linear-gradient(140deg, rgba(90,110,140,.18), transparent 65%);
}
.vs--bad{ border-color:rgba(150,186,228,.16); }
.vs--bad .vs__tag{
  color:var(--frost-3); background:rgba(255,255,255,.05);
  border:1px solid rgba(150,186,228,.22);
}
.vs--bad h3{ color:var(--frost-2); }
.vs--bad li{ color:var(--frost-3); }
.vs--bad li::before{
  content:''; width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(180,200,225,.35); background:transparent;
}
.vs--bad li::after{
  content:''; position:absolute; left:4.5px; top:.62em; width:6px; height:6px;
  background:
    linear-gradient(45deg,transparent 42%,rgba(200,215,235,.65) 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,rgba(200,215,235,.65) 42% 58%,transparent 58%);
}

.vs--good .vs__ph img{ filter:saturate(.92) contrast(1.07) brightness(.95); }
.vs--good::after{
  background:
    linear-gradient(180deg, rgba(6,13,24,.28) 0%, rgba(6,13,24,.72) 44%, rgba(5,10,19,.96) 100%),
    linear-gradient(140deg, rgba(45,95,150,.26), rgba(143,196,239,.08) 55%, transparent 75%);
}
.vs--good{ border-color:rgba(143,196,239,.34); box-shadow:0 40px 90px -46px rgba(45,95,150,.8); }
.vs--good .vs__tag{
  color:#08131f; background:var(--grad-steel);
  border:1px solid transparent;
  box-shadow:0 8px 24px -8px rgba(45,95,150,.9);
}
.vs--good h3{ color:var(--frost); }
.vs--good li{ color:var(--frost-2); }
.vs--good li::before{
  content:''; width:14px; height:14px; border-radius:50%;
  background:var(--grad-steel);
  box-shadow:0 0 12px rgba(143,196,239,.55);
}
.vs--good li::after{
  content:''; position:absolute; left:4px; top:.58em;
  width:7px; height:4px; border-left:1.6px solid #08131f; border-bottom:1.6px solid #08131f;
  transform:rotate(-45deg);
}
.vs:hover{ transform:translateY(-5px); }
.vs:hover .vs__ph img{ transform:scale(1.12); }
.vs--good:hover{ box-shadow:0 50px 100px -44px rgba(45,95,150,.95); }

.vs__body{ margin-top:auto; padding:clamp(24px,3vw,34px); }
.vs__tag{
  display:inline-block; margin-bottom:14px;
  padding:6px 15px; border-radius:100px;
  font-family:var(--f-display); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.vs__body h3{
  font-family:var(--f-display); font-size:clamp(1.35rem,2.6vw,1.85rem);
  font-weight:700; letter-spacing:-.04em; line-height:1.08; margin-bottom:20px;
}
.vs__body ul{ display:grid; gap:12px; }
.vs__body li{ position:relative; padding-left:26px; font-size:.885rem; line-height:1.55; }
.vs__body li::before{ position:absolute; left:0; top:.35em; display:block; }

.results__row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(38px,5vw,58px);
}
.result{
  text-align:center; padding:24px 16px; border-radius:var(--r);
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  border:1px solid var(--line);
  transition:border-color .4s, transform .4s var(--ease);
}
.result:hover{ border-color:rgba(143,196,239,.3); transform:translateY(-3px); }
.result b{
  display:block; font-family:var(--f-display); font-size:clamp(1.4rem,2.4vw,1.7rem);
  font-weight:700; letter-spacing:-.04em; line-height:1.15; margin-bottom:8px;
}
.result span{ font-size:.78rem; color:var(--frost-3); line-height:1.5; }

/* ---------- 14. SCRAPE / WHY / PROCESS ---------- */
.scrape::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(800px 500px at 78% 48%, rgba(143,196,239,.1), transparent 66%);
}
.scrape__inner{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,5vw,72px); align-items:center;
}
.scrape__meter{ margin-top:32px; }
.scrape__read{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.scrape__pct{
  display:inline-flex; align-items:baseline;
  font-family:var(--f-display); font-weight:700; letter-spacing:-.05em;
  color:var(--frost); line-height:1; font-variant-numeric:tabular-nums;
}
.scrape__pct b{ font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700; }
.scrape__pct i{ font-style:normal; font-size:1.1rem; color:var(--ice); margin-left:2px; }
.scrape__lbl{
  font-family:var(--f-display); font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--frost-3);
}
.scrape__bar{ height:3px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.09); max-width:22rem; }
.scrape__bar i{
  display:block; height:100%; width:0%;
  background:var(--grad-ice); box-shadow:0 0 14px rgba(143,196,239,.8);
  transition:width .18s linear;
}
.scrape__done{
  margin-top:26px; padding:22px 24px; border-radius:var(--r);
  background:linear-gradient(150deg, rgba(143,196,239,.12), rgba(45,95,150,.05));
  border:1px solid rgba(143,196,239,.3);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.scrape__done.is-on{ opacity:1; transform:none; pointer-events:auto; }
.scrape__done strong{
  display:block; font-family:var(--f-display); font-size:1.05rem;
  font-weight:600; letter-spacing:-.025em; color:var(--frost); margin-bottom:7px;
}
.scrape__done p{ font-size:.875rem; color:var(--frost-2); max-width:44ch; }
.scrape__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

.scrape__stage{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 50px 100px -46px rgba(0,0,0,.95), var(--glow-ice);
  aspect-ratio:3/2;
  touch-action:pan-y;
  cursor:grab;
  background:#0a1220;
}
.scrape__stage:active{ cursor:grabbing; }
.scrape__base{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 58%;
  filter:saturate(.85) contrast(1.06) brightness(.92);
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.scrape__snow{ position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
.scrape__hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:100px;
  background:rgba(6,12,22,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(150,186,228,.3);
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--frost);
  pointer-events:none; white-space:nowrap;
  animation:hintBob 2.6s ease-in-out infinite;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
@keyframes hintBob{
  0%,100%{ transform:translate(-50%,-50%); }
  50%    { transform:translate(-50%,-58%); }
}
.scrape__hint.is-gone{ opacity:0; transform:translate(-50%,-70%); animation:none; }

.why__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,84px); align-items:center; }
.why__frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.9);
  aspect-ratio:4/3.4;
}
.why__scene{
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(180deg,#0b1728 0%,#0d1c33 42%,#101f38 70%,#0a1120 100%);
}
.scene-moon{
  position:absolute; top:13%; right:16%; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%, #f3f9ff, #b9d2ee 58%, #7f9dc4);
  box-shadow:0 0 70px 22px rgba(180,215,255,.2);
}
.scene-hills{ position:absolute; inset:0; }
.scene-hills span{ position:absolute; bottom:26%; border-radius:50% 50% 0 0; }
.scene-hills span:nth-child(1){ width:62%; height:30%; left:-8%; background:linear-gradient(180deg,#243a5c,#152540); }
.scene-hills span:nth-child(2){ width:56%; height:40%; left:30%; background:linear-gradient(180deg,#2c4569,#182a47); }
.scene-hills span:nth-child(3){ width:46%; height:26%; left:64%; background:linear-gradient(180deg,#1e3252,#12213a); }
.scene-road{
  position:absolute; left:0; right:0; bottom:0; height:27%;
  background:linear-gradient(180deg,#b7cbe4 0%,#93abc9 26%,#6f89ab 62%,#4e678c);
  box-shadow:0 -2px 30px rgba(150,190,240,.18);
}
.scene-road::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(9,16,30,.7) 0%, rgba(9,16,30,0) 26%, rgba(9,16,30,0) 74%, rgba(9,16,30,.7) 100%),
    linear-gradient(180deg, rgba(226,240,255,.5) 0 2px, transparent 2px);
}
.scene-road::after{
  content:''; position:absolute; top:52%; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 30px, transparent 30px 72px);
  opacity:.32;
}
.scene-truck{
  position:absolute; bottom:9%; width:39%;
  filter:drop-shadow(0 8px 14px rgba(6,12,24,.55));
  animation:plow 9s linear infinite;
}
@keyframes plow{ 0%{ left:-38%; } 100%{ left:112%; } }
.beacon{ animation:beacon 1s steps(1) infinite; }
@keyframes beacon{ 0%,50%{ opacity:1; } 51%,100%{ opacity:.2; } }
.scene-spray{ position:absolute; inset:0; pointer-events:none; }
.scene-spray i{
  position:absolute; bottom:24%; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.85);
  animation:spray 9s linear infinite;
}
.scene-spray i:nth-child(1){ animation-delay:.1s; }
.scene-spray i:nth-child(2){ animation-delay:.5s; width:3px; height:3px; }
.scene-spray i:nth-child(3){ animation-delay:.9s; }
.scene-spray i:nth-child(4){ animation-delay:1.3s; width:4px; height:4px; }
.scene-spray i:nth-child(5){ animation-delay:1.7s; width:3px; height:3px; }
.scene-spray i:nth-child(6){ animation-delay:2.1s; }
@keyframes spray{
  0%{ left:-30%; transform:translateY(0) scale(1); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translateY(-46px) scale(.6); opacity:.55; }
  75%{ transform:translateY(-10px) scale(.3); opacity:0; }
  100%{ left:120%; opacity:0; }
}
.why__badge{ position:absolute; left:22px; top:22px; padding:14px 18px; border-radius:var(--r); display:grid; gap:4px; }
.why__badge strong{ font-family:var(--f-display); font-size:1.2rem; font-weight:700; color:var(--frost); letter-spacing:-.03em; }
.why__badge p{ font-size:.72rem; color:var(--frost-3); }

.why__copy .sec-sub{ margin-bottom:38px; }
.feat{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.feat__n{ font-family:var(--f-display); font-size:.75rem; font-weight:600; letter-spacing:.14em; color:var(--ice); padding-top:3px; }
.feat h3{ font-family:var(--f-display); font-size:1.02rem; font-weight:600; color:var(--frost); letter-spacing:-.02em; margin-bottom:6px; }
.feat p{ font-size:.875rem; color:var(--frost-3); }
.why__copy .btn{ margin-top:30px; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,26px); position:relative; }
.steps::before{
  content:''; position:absolute; top:31px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 15%,var(--line-2) 85%,transparent);
}
.step{ position:relative; text-align:center; padding:0 6px; display:flex; flex-direction:column; align-items:center; }
.step__ring{
  width:62px; height:62px; margin:0 auto 22px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-2);
  position:relative; transition:border-color .45s, box-shadow .45s, transform .45s var(--ease);
}
.step__ring span{ font-family:var(--f-display); font-size:1.02rem; font-weight:700; color:var(--frost); }
.step__ring::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(143,196,239,.28);
  opacity:0; transform:scale(.85); transition:opacity .45s, transform .45s var(--ease);
}
.step:hover .step__ring{
  border-color:rgba(143,196,239,.6);
  box-shadow:0 0 34px -6px rgba(143,196,239,.6);
  transform:translateY(-3px);
}
.step:hover .step__ring::after{ opacity:1; transform:scale(1); }
.step h3{ font-family:var(--f-display); font-size:1.06rem; font-weight:600; letter-spacing:-.025em; color:var(--frost); margin-bottom:10px; }
.step > p{ font-size:.875rem; color:var(--frost-3); margin-bottom:18px; }
.step__meta{
  display:inline-block; margin-top:auto; padding:5px 13px; border-radius:100px;
  font-size:.72rem; font-weight:500;
  color:var(--ice); background:rgba(143,196,239,.08);
  border:1px solid rgba(143,196,239,.2);
}

/* ---------- COVERAGE ---------- */
.cov{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,4vw,56px); align-items:start; }
.cov__map{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(165deg,#0a1220,#0a1422);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.cov__radar{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.cov__radar > i{
  position:absolute; top:65%; left:47%; width:40px; height:40px;
  border-radius:50%; border:1px solid rgba(143,196,239,.4);
  transform:translate(-50%,-50%) scale(0);
  animation:radar 5s ease-out infinite;
}
.cov__radar > i:nth-of-type(2){ animation-delay:1.66s; }
.cov__radar > i:nth-of-type(3){ animation-delay:3.33s; }
@keyframes radar{
  0%{ transform:translate(-50%,-50%) scale(.2); opacity:.85; }
  100%{ transform:translate(-50%,-50%) scale(11); opacity:0; }
}
.cov__beam{
  position:absolute; left:47%; top:65%;
  width:190%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    rgba(143,196,239,.30) 0deg,
    rgba(143,196,239,.10) 14deg,
    rgba(143,196,239,.03) 26deg,
    transparent 40deg);
  mix-blend-mode:screen;
  animation:beamSpin 7.5s linear infinite;
  will-change:transform;
}
@keyframes beamSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.cov__ring{ position:absolute; left:47%; top:65%; border-radius:50%; border:1px solid rgba(143,196,239,.13); transform:translate(-50%,-50%); }
.cov__ring--1{ width:34%; aspect-ratio:1; }
.cov__ring--2{ width:68%; aspect-ratio:1; }
.cov__ring--3{ width:104%; aspect-ratio:1; border-style:dashed; opacity:.6; }

.cov__svg{ width:100%; height:auto; display:block; }
.cov__land{ fill:rgba(150,186,228,.05); stroke:rgba(150,186,228,.16); stroke-width:1; }
.cov__roads path{ stroke:rgba(150,186,228,.13); stroke-width:1; fill:none; }
.cov__lake-label{ fill:rgba(150,186,228,.34); font-family:'Sora',sans-serif; font-size:11px; letter-spacing:.32em; text-anchor:middle; }
.cov__nodes text{ fill:var(--frost-2); font-family:'Sora',sans-serif; font-size:12.5px; font-weight:600; text-anchor:middle; letter-spacing:-.01em; }
.cov__nodes .node--hq text{ fill:var(--frost); font-size:13.5px; }
.cov__nodes .pin{
  fill:var(--ice); filter:drop-shadow(0 0 7px rgba(143,196,239,.95));
  animation:blip 3.2s ease-in-out infinite; animation-delay:var(--d);
  transform-box:fill-box; transform-origin:center;
}
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:.35; transform:scale(.8); } }
.node{ transition:opacity .3s; }
.cov__map:hover .node{ opacity:.45; }
.cov__map .node:hover{ opacity:1; }

.cov__depots{
  padding:22px 24px; border-radius:var(--r); margin-bottom:34px;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--line);
}
.cov__list :is(h3,h4){
  font-family:var(--f-display); font-size:.75rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--frost-3);
  margin-bottom:15px;
}
.cov__depots ul{ display:grid; gap:11px; }
.cov__depots li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.875rem; color:var(--frost); font-weight:500;
  padding-bottom:11px; border-bottom:1px solid var(--line);
}
.cov__depots li:last-child{ border-bottom:0; padding-bottom:0; }
.cov__depots li i{
  font-style:normal; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ice); padding:3px 9px; border-radius:100px; white-space:nowrap;
  background:rgba(143,196,239,.08); border:1px solid rgba(143,196,239,.18);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  padding:7px 14px; border-radius:100px; font-size:.815rem; color:var(--frost-2);
  background:var(--surface); border:1px solid var(--line);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.chips li:hover{ color:#08131f; background:var(--grad-steel); border-color:transparent; transform:translateY(-2px); }
.cov__note{ margin-top:22px; font-size:.82rem; color:var(--frost-3); }

/* ---------- 15. PRICING ---------- */
.plans .container{ max-width:1360px; }
/* season-only billing — one line that says so, no toggle to get wrong */
.plans__badge{
  display:inline-flex; align-items:center; gap:9px; margin-top:30px;
  padding:9px 20px; border-radius:100px;
  border:1px solid rgba(216,19,36,.32);
  background:linear-gradient(100deg, rgba(216,19,36,.12), rgba(45,95,150,.05));
  font-family:var(--f-display); font-size:.8rem; font-weight:600;
  letter-spacing:-.01em; color:var(--frost);
}
.plans__badge span{ color:var(--red-hot); font-size:.7rem; }

.plan-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.3vw,18px); align-items:stretch;
}
.plan{
  position:relative; padding:28px 24px; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  border:1px solid var(--line);
  transition:border-color .45s, transform .45s var(--ease), box-shadow .45s;
}
.plan:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.plan--featured{
  background:linear-gradient(165deg, rgba(216,19,36,.13), rgba(45,95,150,.07));
  border-color:rgba(216,19,36,.38);
  box-shadow:0 40px 80px -40px rgba(216,19,36,.6);
  padding-top:30px; overflow:visible;
}
.plan--featured::before{
  content:''; position:absolute; inset:-1px; border-radius:var(--r-lg);
  padding:1px; background:linear-gradient(160deg, rgba(255,58,70,.65), transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.plan__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  padding:5px 14px; border-radius:100px;
  background:var(--grad-red); color:#fff;
  box-shadow:0 10px 26px -8px rgba(216,19,36,.95);
}
.plan__unl{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 9px; border-radius:100px; margin-bottom:16px;
  font-family:var(--f-display); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ember); background:var(--ember-soft);
  border:1px solid rgba(240,148,61,.3);
}
.plan__unl i{ font-style:normal; font-size:.95rem; line-height:1; }
.plan__unl--alt{ color:var(--aurora); background:rgba(47,95,150,.13); border-color:rgba(47,95,150,.32); }
.plan--featured .plan__unl{ color:#ffb98a; background:rgba(240,148,61,.18); border-color:rgba(244,176,116,.42); }

.plan header h3{ font-family:var(--f-display); font-size:1.15rem; font-weight:600; letter-spacing:-.03em; color:var(--frost); }
.plan header p{ font-size:.79rem; color:var(--frost-3); margin-top:5px; }
.plan__price{
  display:flex; align-items:baseline; gap:3px; flex-wrap:wrap;
  margin:18px 0; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.plan__price .from{
  font-family:var(--f-display); font-size:.75rem; font-weight:500;
  color:var(--frost-3); margin-right:5px; align-self:flex-end; padding-bottom:.55em;
}
.plan__price .cur{
  font-family:var(--f-display); font-size:1.25rem; font-weight:500;
  color:var(--frost-3); align-self:flex-start; padding-top:.35em;
}
.plan__price .amt{
  font-family:var(--f-display); font-size:clamp(2.3rem,3.2vw,2.7rem); font-weight:700;
  letter-spacing:-.05em; color:var(--frost); line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan__price .amt--txt{
  font-size:clamp(1.9rem,2.6vw,2.2rem);
  background:var(--grad-ice); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.plan__price .per{
  flex:0 0 100%; margin-top:8px;
  font-family:var(--f-display); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--frost-3);
}
.plan__list{ margin-top:22px; display:grid; gap:11px; }
.plan__list li{ position:relative; padding-left:22px; font-size:.83rem; color:var(--frost-2); }
.plan__list li em{ font-style:italic; color:var(--frost); }
.plan__list li::before{
  content:''; position:absolute; left:0; top:.45em; width:11px; height:7px;
  border-left:1.8px solid var(--ice); border-bottom:1.8px solid var(--ice);
  transform:rotate(-45deg); border-radius:1px;
}
.plan__more{ color:var(--frost-3); font-size:.78rem; }
.plan__more::before{ opacity:.35; }
.plan--custom{
  background:linear-gradient(165deg, rgba(47,95,150,.11), rgba(255,255,255,.014));
  border-color:rgba(47,95,150,.24);
}
.plans__foot{ margin-top:34px; text-align:center; font-size:.845rem; color:var(--frost-3); }
.plans__foot a{ color:var(--ice); border-bottom:1px solid rgba(143,196,239,.35); }
.plans__foot a:hover{ border-color:var(--ice); }

/* the no-cap promise */
.nocap{
  margin-top:clamp(30px,4vw,46px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3vw,38px);
  align-items:center; padding:clamp(26px,3.4vw,40px);
  border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(240,148,61,.12), rgba(45,95,150,.09) 52%, rgba(47,95,150,.09));
  border:1px solid rgba(244,176,116,.26);
}
.nocap::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 8% 50%, rgba(240,148,61,.2), transparent 60%);
}
.nocap__mark{
  font-family:var(--f-display); font-size:clamp(3.4rem,7vw,5.4rem);
  line-height:.9; font-weight:400; position:relative;
  background:linear-gradient(150deg,#ffc9a0,#ff8a3d 45%,var(--ice));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 26px rgba(240,148,61,.35));
}
.nocap__copy{ position:relative; }
.nocap__copy h3{
  font-family:var(--f-display); font-size:clamp(1.2rem,2.4vw,1.65rem);
  font-weight:700; letter-spacing:-.035em; color:var(--frost); margin-bottom:12px;
}
.nocap__copy p{ font-size:.915rem; color:var(--frost-2); max-width:72ch; }
.nocap__copy p strong{ color:var(--frost); font-weight:600; }
.nocap__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.nocap__pills li{
  padding:6px 14px; border-radius:100px; font-size:.75rem; font-weight:500;
  color:#ffcaa6; background:rgba(240,148,61,.1);
  border:1px solid rgba(240,148,61,.26);
}

/* ---------- 15b. THE FINE PRINT ---------- */
.cmp{
  margin-top:clamp(30px,4vw,46px);
  border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
}
.cmp__head{ padding:clamp(24px,3vw,36px) clamp(22px,3vw,36px) 6px; }
.cmp__head h3{
  font-family:var(--f-display); font-size:clamp(1.2rem,2.3vw,1.65rem);
  font-weight:700; letter-spacing:-.035em; line-height:1.15;
  color:var(--frost); max-width:32ch;
}
.cmp__scroll{ overflow-x:auto; }
.cmp__table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.cmp__table th, .cmp__table td{
  padding:14px clamp(14px,2vw,24px); text-align:left; vertical-align:middle;
  border-top:1px solid var(--line);
}
.cmp__table thead th{
  font-family:var(--f-display); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--frost-3);
  border-top:0; padding-top:12px; padding-bottom:12px;
}
.cmp__table tbody th{
  font-family:var(--f-display); font-size:.86rem; font-weight:600;
  letter-spacing:-.01em; color:var(--frost); width:34%;
}
.cmp__table td.cmp__them{ color:var(--frost-3); }
.cmp__table td.cmp__them::before{
  content:"\2715" / ""; display:inline-block; margin-right:9px;
  font-size:.7rem; color:var(--frost-4);
}
.cmp__table .cmp__us{
  background:linear-gradient(90deg, rgba(216,19,36,.11), rgba(216,19,36,.03));
  border-left:1px solid rgba(216,19,36,.28);
}
.cmp__table thead th.cmp__us{ color:var(--red-hot); }
.cmp__table td.cmp__us{ color:var(--frost); font-weight:600; }
.cmp__table td.cmp__us::before{
  content:"\2713" / ""; display:inline-block; margin-right:9px;
  font-weight:800; color:var(--red-hot);
}
.cmp__table tbody tr{ transition:background .3s; }
.cmp__table tbody tr:hover{ background:rgba(190,214,240,.035); }

/* ---------- 16. INSTANT ESTIMATOR ---------- */
.est{
  margin-top:clamp(30px,4vw,46px);
  display:grid; grid-template-columns:1.25fr .75fr;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  box-shadow:0 40px 90px -46px rgba(0,0,0,.9);
}
.est__form{ padding:clamp(26px,3.4vw,40px); }
.est__form h3{
  font-family:var(--f-display); font-size:clamp(1.35rem,2.8vw,1.9rem);
  font-weight:700; letter-spacing:-.04em; line-height:1.1;
  color:var(--frost); margin-bottom:28px;
}
.est__field + .est__field{ margin-top:22px; }
.est__label{
  display:block; margin-bottom:11px;
  font-family:var(--f-display); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--frost-3);
}
.est__opts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.est__opts--multi{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.est__opts button,
.est__fixed{
  display:grid; gap:4px; text-align:left;
  padding:13px 15px; border-radius:var(--r-sm); min-height:62px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-family:var(--f-display); font-size:.845rem; font-weight:600;
  letter-spacing:-.015em; color:var(--frost-2);
  transition:border-color .3s var(--ease), background .3s var(--ease),
             color .3s, transform .3s var(--ease);
}
.est__opts button em,
.est__fixed em{
  font-style:normal; font-family:var(--f-body);
  font-size:.72rem; font-weight:400; color:var(--frost-3);
  transition:color .3s;
}
.est__opts button:hover{ border-color:var(--line-2); transform:translateY(-2px); color:var(--frost); }
.est__opts button[aria-checked="true"]{
  color:#08131f; background:linear-gradient(135deg,#cfe3f7,#6ea9dd);
  border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(45,95,150,.95);
}
.est__opts button[aria-checked="true"] em{ color:rgba(4,18,31,.72); }
.est__opts button[aria-pressed="true"]{
  color:var(--frost); background:rgba(143,196,239,.1);
  border-color:rgba(143,196,239,.5);
}
.est__opts button[aria-pressed="true"] em{ color:var(--ice); }
.est__fixed{ opacity:.78; }
.est__fixed em{ color:var(--ember); }

.est__field select{
  width:100%; padding:14px 16px; border-radius:var(--r-sm); min-height:48px;
  background-color:rgba(255,255,255,.035); border:1px solid var(--line);
  color:var(--frost); font-size:.875rem; font-family:var(--f-body);
  appearance:none; cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b9cb8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:40px;
  transition:border-color .3s, background-color .3s;
}
.est__field select:focus-visible{ border-color:rgba(143,196,239,.55); }
.est__field select option{ background:#0e1a2c; color:var(--frost); }

.est__out{
  padding:clamp(26px,3.4vw,36px);
  display:flex; flex-direction:column;
  background:linear-gradient(165deg, rgba(45,95,150,.16), rgba(47,95,150,.06) 55%, rgba(255,255,255,.02));
  border-left:1px solid var(--line-2);
  position:relative;
}
.est__out::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 60% at 70% 0%, rgba(143,196,239,.16), transparent 65%);
}
.est__out > *{ position:relative; }
.est__outHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.est__unl{
  font-family:var(--f-display); font-size:.68rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ember);
  padding:4px 10px; border-radius:100px; white-space:nowrap;
  background:var(--ember-soft); border:1px solid rgba(240,148,61,.3);
}
.est__total{
  display:flex; align-items:flex-start; gap:2px;
  font-family:var(--f-display); font-weight:700; letter-spacing:-.05em;
  color:var(--frost); line-height:.9;
}
.est__total .cur{ font-size:1.5rem; font-weight:500; color:var(--frost-3); padding-top:.28em; }
.est__total .num{ font-size:clamp(3rem,6vw,4.2rem); font-variant-numeric:tabular-nums; transition:opacity .18s; }
.est__total.is-bump .num{ opacity:.35; }
.est__per{
  margin-top:10px;
  font-family:var(--f-display); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--frost-3);
}
.est__per span{ display:block; margin-top:3px; letter-spacing:.1em; opacity:.75; }
.est__lines{
  margin:20px 0; padding-top:18px;
  border-top:1px solid var(--line); display:grid; gap:9px;
  flex:1; align-content:start;
}
.est__lines li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:.815rem; color:var(--frost-2);
  animation:estIn .35s var(--ease-out) both;
}
@keyframes estIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.est__lines li i{ flex:1; border-bottom:1px dotted rgba(150,186,228,.24); font-style:normal; min-width:14px; }
.est__lines li b{
  font-family:var(--f-display); font-size:.78rem; font-weight:600;
  color:var(--frost); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.est__lines li.is-free b{ color:var(--ember); }
.est__fine{ margin-top:14px; font-size:.7rem; line-height:1.55; color:var(--frost-3); }

/* ---------- 17. SERVICE TRIGGER GAUGE ---------- */
.trigger{
  --scale:12;   /* the column spans 0 → 12 cm      */
  --trip:3;     /* our trigger                     */
  --them:8;     /* what most GTA contracts wait for */
  margin-top:clamp(30px,4vw,46px);
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(28px,4vw,56px); align-items:center;
  padding:clamp(26px,3.4vw,40px);
  border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  border:1px solid var(--line);
}
.trigger::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 130% at 12% 50%, rgba(143,196,239,.13), transparent 62%);
}
.trigger__gauge{ position:relative; display:flex; align-items:flex-end; gap:14px; padding-right:6px; }
.trigger__col{
  position:relative; width:clamp(96px,11vw,132px); height:clamp(210px,26vw,280px);
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(7,12,22,.9), rgba(11,18,32,.7));
  border:1px solid var(--line-2);
  box-shadow:inset 0 2px 20px rgba(0,0,0,.6);
}
.trigger__col::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(150,186,228,.12) 0 1px, transparent 1px 25%);
}
.trigger__snow{
  position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg,#eaf4ff 0%,#c3d7ee 34%,#90aacb 100%);
  box-shadow:0 -6px 26px rgba(180,215,255,.4);
  transition:height 1.9s cubic-bezier(.16,1,.3,1) .25s;
}
.trigger.is-in .trigger__snow{ height:calc(var(--trip) / var(--scale) * 100%); }
.trigger__crest{
  position:absolute; left:-6%; right:-6%; top:-9px; height:18px;
  border-radius:50%; background:linear-gradient(180deg,#f4faff,#dceaf9);
}
.trigger__line{
  position:absolute; left:0; right:0;
  height:0; z-index:3;
  opacity:0; transform:translateX(-8px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.trigger.is-in .trigger__line{ opacity:1; transform:none; }
.trigger__line::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
}
.trigger__line span{
  position:absolute; left:8px; bottom:7px;
  font-family:var(--f-display); font-size:.58rem; font-weight:700;
  letter-spacing:.14em;
  text-shadow:0 0 12px rgba(6,12,22,.95);
}

/* where we roll — bright, and low on the column on purpose */
.trigger__line--us{ bottom:calc(var(--trip) / var(--scale) * 100%); }
.trigger.is-in .trigger__line--us{ transition-delay:1.5s; }
.trigger__line--us::before{
  background:linear-gradient(90deg, var(--red-hot), rgba(216,19,36,.25));
  box-shadow:0 0 14px rgba(255,58,70,.95);
}
.trigger__line--us span{ color:var(--red-hot); }

/* where the rest of the industry waits — faint, and visibly higher */
.trigger__line--them{ bottom:calc(var(--them) / var(--scale) * 100%); }
.trigger.is-in .trigger__line--them{ transition-delay:1.9s; }
.trigger__line--them::before{
  height:0; border-top:1px dashed rgba(180,200,225,.42);
}
.trigger__line--them span{ color:rgba(180,200,225,.6); font-weight:600; }
.trigger__ticks{ position:relative; height:clamp(210px,26vw,280px); width:34px; }
.trigger__ticks li{
  position:absolute; right:0; transform:translateY(50%);
  bottom:calc(var(--at) / var(--scale) * 100%);
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-display); font-size:.7rem;
  color:var(--frost-3); font-variant-numeric:tabular-nums;
}
.trigger__ticks li::before{ content:''; width:8px; height:1px; background:rgba(150,186,228,.35); }
.trigger__ticks li.is-key{ color:var(--red-hot); font-weight:700; font-size:.82rem; }
.trigger__ticks li.is-key::before{ width:13px; height:2px; background:var(--red-hot); box-shadow:0 0 10px rgba(255,58,70,.9); }
.trigger__ticks li.is-them{ color:rgba(180,200,225,.62); }
.trigger__ticks li.is-them::before{ width:11px; background:rgba(180,200,225,.45); }
.trigger__unit{
  position:absolute; right:0; top:-26px;
  font-family:var(--f-display); font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--frost-3);
}
.trigger__copy{ position:relative; }
.trigger__copy h3{
  font-family:var(--f-display); font-size:clamp(1.5rem,3.2vw,2.2rem);
  font-weight:700; letter-spacing:-.04em; line-height:1.05;
  color:var(--frost); margin-bottom:14px;
}
.trigger__copy p{ font-size:.915rem; color:var(--frost-2); max-width:60ch; }
.trigger__copy p strong{ color:var(--ice); font-weight:700; }
.trigger__note{
  margin-top:12px; font-size:.84rem; color:var(--frost-3);
  padding-left:14px; border-left:2px solid rgba(143,196,239,.3);
}
.trigger__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.trigger__pills li{
  padding:6px 14px; border-radius:100px; font-size:.75rem; font-weight:500;
  color:var(--frost-2); background:var(--surface); border:1px solid var(--line-2);
}

/* ---------- 18. GALLERY ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:clamp(150px,15.5vw,220px);
  gap:clamp(12px,1.3vw,18px);
}
.gal{ grid-column:span 2; min-width:0; }
.gal--portrait{ grid-column:span 2; grid-row:span 2; }
.gal--hero{ grid-column:span 4; }
.gal--half{ grid-column:span 3; }

.gal__btn{
  position:relative; display:block; width:100%; height:100%;
  overflow:hidden; border-radius:var(--r); isolation:isolate;
  border:1px solid var(--line); background:var(--ink-3);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.gal__btn img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:var(--ph-grade);
  transform:scale(1.03);
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.gal__btn::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,12,22,0) 34%, rgba(6,12,22,.55) 68%, rgba(5,10,19,.93) 100%);
  transition:opacity .5s;
}
.gal__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(14px,1.5vw,20px); display:grid; gap:3px; text-align:left;
  transform:translateY(6px); opacity:.9;
  transition:transform .5s var(--ease), opacity .5s;
}
.gal__cap b{
  font-family:var(--f-display); font-size:clamp(.82rem,1.1vw,.94rem); font-weight:600;
  letter-spacing:-.02em; color:var(--frost); line-height:1.25;
}
.gal__cap span{
  font-size:.69rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ice); line-height:1.4;
}
.gal__zoom{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--frost);
  background:rgba(6,12,22,.6); border:1px solid rgba(150,186,228,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:scale(.8);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s;
}
.gal__zoom svg{ width:17px; height:17px; }
.gal__btn:hover{
  border-color:rgba(143,196,239,.42);
  box-shadow:0 34px 70px -34px rgba(45,95,150,.6);
  transform:translateY(-3px);
}
.gal__btn:hover img{ transform:scale(1.1); filter:saturate(1) contrast(1.02) brightness(1.04); }
.gal__btn:hover .gal__cap{ transform:none; opacity:1; }
.gal__btn:hover .gal__zoom,
.gal__btn:focus-visible .gal__zoom{ opacity:1; transform:none; }

/* ---------- 19. TESTIMONIALS ---------- */
.quotes__viewport{ max-width:900px; margin-inline:auto; }
.quotes__track{
  position:relative;
  display:grid; grid-template-areas:'q';
  padding:clamp(30px,4vw,46px);
}
.quote{
  grid-area:q;
  display:grid; align-content:center; gap:22px;
  opacity:0; transform:translateY(18px) scale(.99);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.quote.is-active{ opacity:1; transform:none; pointer-events:auto; }
.quote:not(.is-active){ visibility:hidden; }
.quote blockquote{
  font-family:var(--f-display);
  font-size:clamp(1.05rem,.9rem + .7vw,1.4rem); font-weight:400;
  line-height:1.55; letter-spacing:-.028em; color:var(--frost);
  text-wrap:pretty;
}
.quote figcaption{ display:flex; align-items:center; gap:14px; }
.quote .ava{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:.82rem; font-weight:600;
  color:#08131f; background:var(--grad-steel);
}
.quote__who{ display:grid; gap:2px; }
.quote__who strong{ font-size:.9rem; color:var(--frost); font-weight:600; }
.quote__who em{ font-style:normal; font-size:.78rem; color:var(--frost-3); line-height:1.45; }

.quotes__nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px; }
.qbtn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:var(--surface); color:var(--frost-2);
  transition:border-color .3s, color .3s, background .3s, transform .3s var(--ease);
}
.qbtn:hover{ border-color:rgba(143,196,239,.55); color:var(--ice); background:rgba(143,196,239,.07); transform:scale(1.06); }
.qbtn svg{ width:18px; height:18px; }
/* the dot is 8px of ink inside a 24x34 hit area — comfortable on touch */
.dots{ display:flex; gap:2px; }
.dots button{ position:relative; width:24px; height:34px; }
.dots button::before{
  content:''; position:absolute; top:50%; left:50%;
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.22);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), background .35s;
}
.dots button:hover::before{ background:rgba(255,255,255,.4); }
.dots button.is-on{ width:40px; }
.dots button.is-on::before{ width:24px; border-radius:100px; background:var(--grad-red); }

/* ---------- 20. FAQ ---------- */
.faq__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:start; }
.faq__head{ position:sticky; top:calc(var(--nav-h) + 24px); }
.faq__head .btn{ margin-top:26px; }
.faq__list{ display:grid; gap:10px; }
.acc{
  border-radius:var(--r); overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--line);
  transition:border-color .4s, background .4s;
}
.acc[open]{ border-color:rgba(143,196,239,.28); background:rgba(143,196,239,.035); }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:21px 24px; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:.95rem; font-weight:500;
  letter-spacing:-.02em; color:var(--frost); line-height:1.45;
  transition:color .3s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--ice); }
.acc summary i{ position:relative; width:15px; height:15px; flex:none; }
.acc summary i::before, .acc summary i::after{
  content:''; position:absolute; top:50%; left:0; width:100%; height:1.6px;
  background:var(--ice); border-radius:2px; transform:translateY(-50%);
  transition:transform .4s var(--ease), opacity .3s;
}
.acc summary i::after{ transform:translateY(-50%) rotate(90deg); }
.acc[open] summary i::after{ transform:translateY(-50%) rotate(0); opacity:0; }
.acc__body{ padding:0 24px 24px; }
.acc__body p{ font-size:.9rem; color:var(--frost-3); max-width:62ch; }
.acc[open] .acc__body{ animation:accIn .45s var(--ease-out) both; }
@keyframes accIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------- 21. CTA / QUOTE FORM ---------- */
.cta{ isolation:isolate; }
.cta::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(900px 520px at 22% 46%, rgba(45,95,150,.14), transparent 66%);
}
.cta__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px); align-items:center; }
.cta__points{
  display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:36px;
  padding-top:28px; border-top:1px solid var(--line);
}
.cta__points li{ display:grid; gap:3px; }
.cta__points b{
  font-family:var(--f-display); font-size:1.6rem; font-weight:700;
  letter-spacing:-.04em; color:var(--frost); line-height:1.1;
}
.cta__points b .inf{ font-size:1.2em; }
.cta__points span{ font-size:.78rem; color:var(--frost-3); }
.cta__contact{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:30px; }

.quote-form{ padding:clamp(28px,3.4vw,40px); position:relative; }
.quote-form__head{
  display:flex; flex-direction:column; align-items:stretch; gap:16px;
  margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.quote-form__head h3{
  font-family:var(--f-display); font-size:1.2rem; font-weight:600;
  letter-spacing:-.03em; color:var(--frost);
}
.step-count{ font-size:.78rem; color:var(--frost-3); font-family:var(--f-display); white-space:nowrap; }
.step-count b{ color:var(--ice); font-weight:600; }

.qf-step{ display:none; }
.qf-step.is-active{ display:grid; gap:17px; animation:accIn .45s var(--ease-out) both; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field{ display:grid; gap:8px; }
.field label, .field__label{ font-size:.78rem; font-weight:500; color:var(--frost-3); letter-spacing:.02em; }
.field .opt{ color:var(--frost-4); font-size:.72rem; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-sm); min-height:50px;
  background-color:rgba(255,255,255,.035);
  border:1px solid var(--line);
  color:var(--frost); font-size:.9rem; font-family:var(--f-body);
  transition:border-color .3s, background-color .3s, box-shadow .3s;
  outline:none; resize:vertical;
}
.field textarea{ min-height:96px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--frost-4); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(143,196,239,.55);
  background-color:rgba(143,196,239,.05);
  box-shadow:0 0 0 3px rgba(143,196,239,.1);
}
.field select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b9cb8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.field select option{ background:#0e1a2c; color:var(--frost); }
.field .err{ display:none; font-size:.72rem; color:#ff8b8b; }
.field.is-bad input{ border-color:rgba(255,122,122,.55); background-color:rgba(255,122,122,.05); }
.field.is-bad .err{ display:block; }

.seg{ display:flex; gap:7px; }
.seg button{
  flex:1; padding:12px 8px; border-radius:var(--r-sm); min-height:46px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-size:.815rem; font-weight:500; color:var(--frost-3);
  transition:color .3s, background .3s, border-color .3s, box-shadow .3s;
}
.seg button:hover{ color:var(--frost); border-color:var(--line-2); }
.seg button.is-on{
  color:#08131f; background:var(--grad-steel); border-color:transparent;
  box-shadow:0 8px 22px -10px rgba(77,127,181,.9);
}
.qf-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.qf-fine{ font-size:.72rem; color:var(--frost-3); text-align:center; }

.qf-done{ display:none; text-align:center; padding:26px 10px 14px; animation:accIn .5s var(--ease-out) both; }
.qf-done.is-active{ display:block; }
.qf-done:focus{ outline:none; }
.qf-done__check{
  width:62px; height:62px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; color:#08131f;
  background:var(--grad-steel);
  box-shadow:0 16px 40px -14px rgba(143,196,239,.7);
}
.qf-done__check svg{ width:28px; height:28px; }
.qf-done h3{
  font-family:var(--f-display); font-size:1.3rem; font-weight:600;
  color:var(--frost); letter-spacing:-.03em; margin-bottom:10px;
}
.qf-done p{ font-size:.875rem; color:var(--frost-3); max-width:42ch; margin-inline:auto; margin-bottom:22px; }
.qf-done a{ color:var(--ice); }
.qf-done .btn span{ color:inherit; }

/* ---------- 22. FOOTER ---------- */
.footer{
  position:relative; z-index:3;
  padding-top:clamp(64px,7vw,96px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.014), transparent);
  overflow:hidden;
}
.footer__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,54px); padding-bottom:56px;
}
.footer__logo{
  width:min(280px,74%); height:auto;
}
.footer__brand > p{ margin:10px 0 20px; font-size:.855rem; color:var(--frost-3); max-width:36ch; }
.footer__badges{ display:flex; flex-wrap:wrap; gap:8px; }
.footer__badges span{
  padding:6px 13px; border-radius:100px; font-size:.72rem; font-weight:500;
  color:var(--frost-2); background:var(--surface); border:1px solid var(--line);
}
.footer__col{ display:grid; gap:11px; align-content:start; }
.footer__col h2{
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--frost);
  margin-bottom:5px;
}
.footer__col a, .footer__addr, .footer__hrs{ font-size:.855rem; color:var(--frost-3); transition:color .3s; }
.footer__col a{ justify-self:start; }
.footer__col a:hover{ color:var(--ice); }
.footer__addr{ line-height:1.7; }
.footer__hrs{ color:var(--ember); font-size:.78rem; }
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; padding:24px 0 30px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--frost-3);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__legal a:hover{ color:var(--ice); }
.footer__wordmark{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(4rem,17vw,15rem); line-height:1; letter-spacing:.01em;
  text-align:center; user-select:none;
  background:linear-gradient(180deg, rgba(216,19,36,.24), rgba(150,186,228,.06) 58%, transparent 84%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:-.14em;
}

/* ---------- 23. FAB ---------- */
.fab{
  position:fixed; right:max(22px, env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom)); z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:14px 21px; border-radius:100px;
  background:var(--grad-red); color:#fff;
  font-family:var(--f-display); font-size:.845rem; font-weight:600;
  box-shadow:0 16px 40px -14px rgba(216,19,36,.95);
  opacity:0; transform:translateY(24px) scale(.9); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.fab.is-in{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ transform:translateY(-3px); }
.fab svg{ width:17px; height:17px; }

/* ---------- 24. LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:320;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,52px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__backdrop{
  position:absolute; inset:0;
  background:rgba(4,9,17,.9);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.lb__figure{
  position:relative; z-index:1;
  display:grid; gap:16px; justify-items:center;
  max-width:min(1180px,100%); max-height:100%;
  transform:scale(.965); opacity:0;
  transition:transform .45s var(--ease-out), opacity .35s var(--ease-out);
}
.lb.is-open .lb__figure{ transform:none; opacity:1; }
.lb__img{
  max-width:100%; max-height:min(74vh, 100%);
  width:auto; height:auto;
  border-radius:var(--r); border:1px solid var(--line-2);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95);
  background:var(--ink-3);
}
.lb__cap{
  font-size:.86rem; color:var(--frost-2); text-align:center;
  max-width:60ch; line-height:1.6;
}
.lb__btn{
  position:absolute; z-index:2;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; color:var(--frost);
  background:rgba(10,17,30,.72); border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.lb__btn svg{ width:21px; height:21px; }
.lb__btn:hover{ background:rgba(143,196,239,.14); border-color:rgba(143,196,239,.5); color:var(--ice); }
.lb__btn--close{ top:max(clamp(14px,3vw,28px), env(safe-area-inset-top)); right:max(clamp(14px,3vw,28px), env(safe-area-inset-right)); }
.lb__btn--prev{ left:clamp(10px,2.5vw,28px); top:50%; transform:translateY(-50%); }
.lb__btn--next{ right:clamp(10px,2.5vw,28px); top:50%; transform:translateY(-50%); }
.lb__btn--prev:hover, .lb__btn--next:hover{ transform:translateY(-50%) scale(1.06); }
.lb__count{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%);
  bottom:clamp(12px,2.5vw,26px);
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; color:var(--frost-3); font-variant-numeric:tabular-nums;
}

/* ---------- 25. REVEAL ---------- */
.reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-anim{ will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }
.hero__title .line.reveal{ transform:translateY(100%); }
.hero__title .line.reveal.is-in{ transform:none; }

/* per-word heading reveal — rotateX is compositor-only */
.sec-title, .vs__body h3, .est__form h3,
.trigger__copy h3, .nocap__copy h3, .qf-done h3{ perspective:820px; }
.w{
  display:inline-block;
  transform-origin:50% 100%;
  opacity:0;
  transform:translate3d(0,.42em,0) rotateX(-42deg);
  transition:opacity .62s var(--ease-out), transform .82s var(--ease-out);
  transition-delay:var(--d,0s);
}
.is-anim .w{ will-change:opacity, transform; }
.is-in .w{ opacity:1; transform:none; }
.reveal.is-in.sec-title > .w{ opacity:1; transform:none; }

/* versus entrance: panels close in on the badge */
.versus.reveal .vs--bad,
.versus.reveal .vs--good{
  opacity:0;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out),
             border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.versus.reveal .vs--bad { transform:translateX(-26px); }
.versus.reveal .vs--good{ transform:translateX(26px); }
.versus.reveal.is-in .vs--bad,
.versus.reveal.is-in .vs--good{ opacity:1; transform:none; }
.versus.reveal .versus__vs{
  opacity:0; transform:translate(-50%,-50%) scale(.5);
  transition:opacity .6s .35s var(--ease-out), transform .6s .35s var(--ease-out);
}
.versus.reveal.is-in .versus__vs{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ==========================================================================
   26. RESPONSIVE
   ========================================================================== */

/* ---- ≤1180px : pricing drops to two-up ---- */
@media (max-width:1180px){
  .plan-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; margin-inline:auto; }
}

/* ---- ≤1100px : mobile navigation takes over ---- */
@media (max-width:1100px){
  .nav__links{
    display:flex; flex-direction:column; gap:2px;
    position:fixed; top:0; right:0; bottom:0; width:min(80vw,340px);
    padding:calc(82px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom)); margin:0;
    overflow-y:auto; overscroll-behavior:contain;
    background:rgba(7,13,23,.97);
    /* no backdrop-filter here: it would re-anchor the fixed ::before overlay to the drawer */
    border-left:1px solid var(--line);
    transform:translateX(101%);
    visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
    z-index:105;
  }
  .nav__links.is-open{
    transform:none; visibility:visible;
    transition:transform .5s var(--ease), visibility 0s linear 0s;
  }
  .nav__links::before{
    content:''; position:fixed; inset:0; right:min(80vw,340px);
    background:rgba(4,9,17,.66); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
  }
  .nav__links.is-open::before{ opacity:1; pointer-events:auto; }
  .nav__links > a{
    padding:16px 12px; font-size:1.02rem; font-family:var(--f-display);
    border-bottom:1px solid var(--line); border-radius:0; color:var(--frost-2);
  }
  .nav__links > a::after{ display:none; }
  .nav__ind{ display:none; }
  .nav__links > a.is-active{ background:transparent; color:var(--ice); }
  .nav__panel-brand{ display:block; }
  .nav__panel-foot{ display:grid; gap:10px; margin-top:26px; }
  .burger{ display:flex; }
  /* the links are out of flow here, so the buttons must push themselves to the right edge */
  .nav__cta{ margin-left:auto; }
  .nav__phone span{ display:none; }
  .brand__logo{ height:44px; }

  .hero__inner{ grid-template-columns:1fr; gap:clamp(44px,6vw,60px); }
  .hero__panel{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px; max-width:540px;
  }
  .card-live{ grid-column:1 / -1; margin-top:0; }
  .card-float{ position:static; animation:none; }

  .svc--wide{ grid-column:span 3; }
  .cov{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

/* ---- ≤1000px : gallery + secondary grids reflow ---- */
@media (max-width:1000px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(140px,22vw,200px); }
  .gal,
  .gal--hero,
  .gal--half{ grid-column:span 1; }
  .gal--portrait{ grid-column:span 1; grid-row:span 2; }
  .gal:last-child{ grid-column:span 2; }
  .results__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nocap{ grid-template-columns:1fr; gap:14px; }
}

/* ---- ≤980px : estimator stacks ---- */
@media (max-width:980px){
  .est{ grid-template-columns:1fr; }
  .est__out{ border-left:0; border-top:1px solid var(--line-2); }
  .est__lines{ flex:none; }
}

/* ---- ≤900px : two-column content becomes single column ---- */
@media (max-width:900px){
  .hero{ min-height:auto; padding-top:clamp(112px,15vh,140px); }
  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc--wide{ grid-column:span 2; }
  .svc--photo{ min-height:300px; }
  .why__inner{ grid-template-columns:1fr; }
  .storm__grid{ grid-template-columns:1fr; gap:26px; }
  .storm__stage{ aspect-ratio:16/10; }
  .scrape__inner{ grid-template-columns:1fr; }
  .scrape__stage{ aspect-ratio:4/3; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 22px; }
  .steps::before{ display:none; }
  .faq__inner{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .cta__inner{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(6,12,22,.86) 0%, rgba(6,12,22,.62) 30%, rgba(6,12,22,.8) 66%, #060c16 100%),
      radial-gradient(120% 70% at 50% 26%, rgba(45,95,150,.24), transparent 62%);
  }
}

/* ---- ≤860px : versus stacks ---- */
@media (max-width:860px){
  .versus{ grid-template-columns:1fr; gap:46px; }
  .vs{ min-height:340px; }
  .versus.reveal .vs--bad { transform:translateY(-18px); }
  .versus.reveal .vs--good{ transform:translateY(18px); }
}

/* ---- ≤820px : trigger gauge stacks ---- */
@media (max-width:820px){
  .trigger{ grid-template-columns:1fr; gap:30px; }
  .trigger__gauge{ justify-content:flex-start; }
}

/* ---- ≤640px : phone layout ---- */
@media (max-width:640px){
  :root{ --nav-h:76px; }
  .svc-grid{ grid-template-columns:1fr; }
  .svc--wide{ grid-column:span 1; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__scroll{ display:none; }
  .hero__panel{ max-width:none; }
  .grid-2{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ padding-bottom:96px; }
  .fab span{ display:none; }
  .fab{ padding:16px; right:16px; }
  .nav__cta .btn--primary{ display:none; }
  .cta__points{ gap:14px 26px; }
  .quotes__nav{ gap:14px; }
  .cmp__table{ font-size:.79rem; }
  .cmp__table th, .cmp__table td{ padding:11px 10px; }
  .cmp__table tbody th{ font-size:.79rem; width:32%; }
  .cmp__table thead th{ font-size:.6rem; letter-spacing:.1em; }
  .cmp__table td::before{ margin-right:6px !important; }
  .est__opts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .est__opts button, .est__fixed{ padding:11px 12px; font-size:.79rem; min-height:58px; }
  .est__opts button em, .est__fixed em{ font-size:.7rem; }
  .storm__stage{ aspect-ratio:4/3; }
  .storm__steps button{ padding:9px 13px 9px 9px; gap:11px; }
  .storm__thumb{ width:60px; height:46px; }
  .storm__meta em{ font-size:.86rem; }
  .storm__panels{ margin-top:20px; }
  .storm__bug{ width:66px; opacity:.85; }
  .lb__brand{ width:74px; }
  .quote-form__brand{ width:112px; }
  .cta__seal{ opacity:.07; left:-24%; bottom:-4%; }
  .gallery{ grid-auto-rows:clamp(128px,31vw,190px); gap:10px; }
  .gal__zoom{ display:none; }
  /* one strong label per frame reads better than two at phone size */
  .gal__cap span{ display:none; }
  .gal__cap{ transform:none; opacity:1; padding:12px 14px; }
  .gal__cap b{ font-size:.85rem; }
  .plan{ padding:26px 22px; }
  .quotes__track{ padding:26px 22px; }
}

/* ---- ≤640px : phone polish — app-style menu, safe areas, lighter glass ---- */
@media (max-width:640px){
  /* the menu fills the screen; the header row (brand · phone · close) stays on top of it */
  .brand{ position:relative; z-index:106; }
  .nav__links{
    width:100%; border-left:0;
    padding:calc(var(--nav-h) + 6px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background:#070d19; /* fully opaque: nothing ghosts through the menu */
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transform:translateY(-10px); opacity:0;
    transition:transform .45s var(--ease-out), opacity .3s var(--ease), visibility 0s linear .45s;
  }
  .nav__links.is-open{
    transform:none; opacity:1;
    transition:transform .5s var(--ease-out), opacity .3s var(--ease), visibility 0s linear 0s;
  }
  .nav__links::before{ display:none; }
  .nav__panel-brand{ display:none; }
  .nav__links > a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:17px 4px; font-size:1.3rem; font-weight:600; letter-spacing:-.02em;
    color:var(--frost); border-bottom:1px solid var(--line);
  }
  .nav__links > a::after{
    content:''; display:block; position:static; left:auto; right:auto; bottom:auto;
    width:18px; height:18px; flex:none; transform:none; opacity:.55;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fc4ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .nav__links > a.is-active{ color:var(--ice); }
  .nav__links > a.is-active::after{ display:block; opacity:1; }
  .nav__panel-foot{ margin-top:auto; padding-top:26px; }
  /* links glide in one after another once the panel is open */
  .nav__links > a, .nav__panel-foot{ opacity:0; transform:translateY(12px); transition:opacity .3s var(--ease), transform .5s var(--ease-out); }
  .nav__links.is-open > a, .nav__links.is-open .nav__panel-foot{ opacity:1; transform:none; }
  .nav__links.is-open > a:nth-of-type(1){ transition-delay:.06s; }
  .nav__links.is-open > a:nth-of-type(2){ transition-delay:.11s; }
  .nav__links.is-open > a:nth-of-type(3){ transition-delay:.16s; }
  .nav__links.is-open > a:nth-of-type(4){ transition-delay:.21s; }
  .nav__links.is-open > a:nth-of-type(5){ transition-delay:.26s; }
  .nav__links.is-open > a:nth-of-type(6){ transition-delay:.31s; }
  .nav__links.is-open .nav__panel-foot{ transition-delay:.38s; }

  /* frosted glass is costly on phone GPUs — a lighter blur looks identical at this size */
  .glass{ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

  /* legibility: nothing below 12px on a phone */
  .eyebrow{ font-size:.76rem; }
  .card-float p{ font-size:.78rem; }
  .live{ font-size:.7rem; }

  .fab{ right:max(16px, env(safe-area-inset-right)); }
}

/* ---- ≤520px : tightest layout ---- */
@media (max-width:520px){
  .stats__grid{ grid-template-columns:1fr; }
  .plan-grid{ grid-template-columns:1fr; max-width:440px; }
  .results__row{ grid-template-columns:1fr 1fr; gap:10px; }
  .card-live__temp{ gap:14px; }
  .temp{ font-size:2.9rem; }
  .est__opts--multi{ grid-template-columns:1fr 1fr; }
  .nocap__pills li, .trigger__pills li{ font-size:.72rem; padding:5px 11px; }
  .qf-actions .btn{ flex:1 1 100%; }
  .lb__btn--prev{ left:8px; }
  .lb__btn--next{ right:8px; }
  .lb__btn{ width:42px; height:42px; }
}

/* ---- ≤400px : iPhone SE / mini — header row must fit without spilling past the gutter ---- */
@media (max-width:400px){
  .nav__inner{ gap:12px; }
  .nav__cta{ gap:10px; }
  .brand{ gap:10px; }
  .brand__text b{ font-size:.86rem; letter-spacing:.08em; }
  .brand__text em{ font-size:.64rem; letter-spacing:.24em; }
}

/* ---- ≤365px : reclaim header width ---- */
@media (max-width:365px){
  .nav__inner{ gap:10px; }
  .nav__cta{ gap:8px; }
  .brand__logo{ height:38px; }
  .brand__text b{ font-size:.76rem; letter-spacing:.04em; }
  .brand__text em{ display:none; }
}

/* ---- ≤360px : ultra-narrow safety ---- */
@media (max-width:360px){
  .est__opts, .est__opts--multi{ grid-template-columns:1fr; }
  .seg{ flex-wrap:wrap; }
  .seg button{ flex:1 1 45%; }
}

/* ---- large screens: let the canvas breathe ---- */
@media (min-width:1600px){
  :root{ --container:1400px; }
  .plans .container{ max-width:1460px; }
}

/* ---- touch devices: inline link rows need a real tap height ---- */
@media (hover:none), (pointer:coarse){
  .footer__col a,
  .cta__contact .ghost-link,
  .plans__foot a,
  .footer__legal a{ padding-block:10px; }
  .plans__foot a{ display:inline-block; }
  .footer__col{ gap:2px; }
  /* testimonial dots: 8px of ink inside a 44px-tall tap area */
  .dots{ gap:0; }
  .dots button{ width:34px; height:44px; }
  .dots button.is-on{ width:48px; }
  /* tactile press feedback instead of stuck hover states */
  .btn:active{ transform:scale(.97); transition-duration:.12s; }
  .nav__links > a:active{ background:rgba(143,196,239,.06); }
  .acc summary:active{ background:rgba(143,196,239,.04); }
  .nav__phone{
    width:44px; height:44px; border-radius:12px;
    justify-content:center;
    border:1px solid var(--line); background:var(--surface);
  }
  .nav__phone svg{ opacity:.9; width:18px; height:18px; }
}

/* ==========================================================================
   27. A11Y / MOTION
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--ice); outline-offset:3px; border-radius:6px;
}
.gal__btn:focus-visible{ outline-offset:4px; }
summary:focus-visible{ outline-offset:-3px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .w{ opacity:1 !important; transform:none !important; }
  .snow-canvas, .cursor{ display:none; }
  .hero__media img, .gal__btn img, .svc__ph img, .vs__ph img{ transform:none; }
  .marquee__group{ transform:none !important; }
  .cov__beam{ opacity:.4; }
  .btn--primary::before, .spot::after{ display:none; }
  body.is-ready .hero__media img{ animation:none; }

  .trigger__snow{ height:calc(var(--trip) / var(--scale) * 100%); }
  .trigger__line{ opacity:1; transform:none; }
  .scrape__done{ opacity:1; transform:none; pointer-events:auto; }

  /* the storm timeline stops advancing itself and stops drifting */
  .storm__steps button.is-on .storm__tick::after{ animation:none; width:100%; }
  .sf{ transform:none; }
  .nav__links > *{ transition-delay:0s !important; }
}

/* ---- phone legibility floor: reading text ≥ 12px, uppercase micro-labels ≥ 11px ---- */
@media (max-width:640px){
  .step__meta, .nocap__pills li, .trigger__pills li, .footer__badges span, .qf-fine, .est__fine,
  .why__badge p, .opt, .est__opts button em, .est__fixed em, .storm__meta b, .card-float p{ font-size:.76rem; }
  .plan__flag, .plan__unl, .plan__price .per, .vs__tag, .scrape__lbl, .est__per, .est__unl, .est__label{ font-size:.7rem; }
  .cmp__table thead th{ font-size:.68rem; }
  .trigger__line span{ font-size:.66rem; }
}

/* ---- touch screens: hover is not a thing, so nothing may stay "hovered" after a tap ---- */
@media (hover:none){
  .btn--primary:hover, .btn--ghost:hover, .qbtn:hover{ transform:none; }
  .btn--primary:hover::after{ opacity:0; }
  .btn--primary:hover::before{ left:-45%; transition:none; }
  .btn:hover svg{ transform:none; }
}

@media (prefers-contrast:more){
  :root{
    --frost-2:#dce6f7;
    --frost-3:#a9b8d0;
    --line:rgba(160,195,240,.28);
    --line-2:rgba(160,195,240,.42);
  }
}