/* ============================================================
   ISLAND PARK SNOW REMOVAL CO. — "NIGHT OPS" design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

/* ---------- TOKENS ---------- */
:root{
  /* night */
  --night:      #060B13;
  --night-2:    #0C1421;
  --slate:      #172233;
  --slate-2:    #1F2E44;
  --line:       #263349;
  --fog:        #93A7C2;
  --fog-2:      #C3D2E5;
  --snow:       #F1F6FD;
  --white:      #FFFFFF;

  /* hi-vis */
  --hiviz:      #FF6B00;
  --hiviz-2:    #FFA51F;
  --hiviz-ink:  #0A0F18;
  --ice:        #58C6F5;
  --go:         #34D399;

  /* type */
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Barlow', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1240px;
  --sect: clamp(4.5rem, 11vw, 9rem);

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;

  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  .45s;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--night);
  color:var(--snow);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

/* grain overlay — adds texture, kills flat-gradient banding */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  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");
}

/* ---------- TYPE ---------- */
h1,h2,h3,h4,.dsp{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}
.h-mega{ font-size:clamp(3.4rem, 13.5vw, 11.5rem); font-weight:900; letter-spacing:-.03em; }
.h1   { font-size:clamp(2.6rem, 7.5vw, 5.6rem); }
.h2   { font-size:clamp(2.1rem, 5.6vw, 4.1rem); }
.h3   { font-size:clamp(1.4rem, 2.7vw, 2rem); }
.lede { font-size:clamp(1.05rem,1.9vw,1.3rem); color:var(--fog-2); line-height:1.62; max-width:62ch; }
p{ margin:0 0 1em; }
strong{ font-weight:600; color:var(--white); }
.num{ font-variant-numeric:tabular-nums; }

.eyebrow{
  font-family:var(--display);
  font-size:.86rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--hiviz-2);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem;
}
.eyebrow::before{
  content:''; width:28px; height:3px; background:var(--hiviz); flex:none;
}

/* outlined display word — the signature move */
.outline{
  color:transparent;
  -webkit-text-stroke:2px var(--hiviz);
  paint-order:stroke fill;
}
@supports not (-webkit-text-stroke: 1px red){ .outline{ color:var(--hiviz); } }

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.sect{ padding-block:var(--sect); position:relative; }
.grid{ display:grid; gap:clamp(1rem,2.4vw,1.75rem); }
@media(min-width:820px){
  .g-2{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(3,1fr); }
  .g-4{ grid-template-columns:repeat(4,1fr); }
}
@media(min-width:560px) and (max-width:819px){ .g-4{ grid-template-columns:repeat(2,1fr); } }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:56px; padding:0 1.9rem;
  font-family:var(--display); font-size:1.12rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  border:2px solid transparent; border-radius:var(--r);
  transition:transform var(--dur) var(--ease), background .2s, box-shadow .25s, color .2s;
  will-change:transform;
}
.btn:focus-visible{ outline:3px solid var(--ice); outline-offset:3px; }
.btn-go{
  background:var(--hiviz); color:var(--hiviz-ink);
  box-shadow:0 8px 0 -2px #B84B00, 0 16px 34px -10px rgba(255,107,0,.6);
}
.btn-go:hover{ background:var(--hiviz-2); transform:translateY(-3px); box-shadow:0 11px 0 -2px #B84B00, 0 22px 44px -10px rgba(255,107,0,.75); }
.btn-go:active{ transform:translateY(1px); box-shadow:0 4px 0 -2px #B84B00; }
.btn-ghost{ border-color:var(--line); color:var(--snow); background:rgba(255,255,255,.03); }
.btn-ghost:hover{ border-color:var(--hiviz); color:var(--hiviz-2); transform:translateY(-3px); }
.btn-dark{ background:var(--hiviz-ink); color:var(--white); }
.btn-dark:hover{ transform:translateY(-3px); background:#000; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* ---------- DOT LED TICKER ---------- */
.ticker{
  background:var(--hiviz-ink);
  border-block:1px solid #2A1B06;
  overflow:hidden; position:relative; z-index:60;
}
.ticker__track{
  display:flex; width:max-content;
  animation:slide 42s linear infinite;
}
.ticker__grp{ display:flex; }
.ticker__i{
  font-family:var(--display); font-weight:700; font-size:.9rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--hiviz-2);
  padding:.62rem 0; white-space:nowrap;
  display:flex; align-items:center; gap:.85rem;
}
.ticker__i::after{ content:'◆'; color:var(--hiviz); font-size:.6rem; margin-inline:1.5rem; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(6,11,19,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }
.nav__links{ display:none; gap:1.75rem; margin-left:auto; }
@media(min-width:1000px){ .nav__links{ display:flex; } }
.nav__links a{
  font-family:var(--display); font-weight:700; font-size:1rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--fog-2);
  padding:.4rem 0; border-bottom:2px solid transparent; transition:.2s;
}
.nav__links a:hover{ color:var(--white); border-color:var(--hiviz); }
.nav__cta{ margin-left:auto; }
@media(min-width:1000px){ .nav__cta{ margin-left:0; } }
.nav .btn{ min-height:46px; padding:0 1.15rem; font-size:.95rem; }

/* ---------- LOGO ---------- */
.logo{ display:flex; align-items:center; gap:.8rem; flex:none; }
.logo__mark{ width:44px; height:44px; flex:none; }
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__a{
  font-family:var(--display); font-weight:900; font-size:1.16rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--white);
}
.logo__b{
  font-family:var(--display); font-weight:700; font-size:.62rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--hiviz);
  margin-top:3px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative; isolation:isolate;
  padding-top:clamp(3rem,7vw,5.5rem);
  padding-bottom:clamp(9rem,17vw,15rem);
  background:
    radial-gradient(120% 85% at 82% -5%, rgba(88,198,245,.16), transparent 58%),
    radial-gradient(100% 70% at 8% 105%, rgba(255,107,0,.14), transparent 62%),
    linear-gradient(180deg,#060B13 0%,#0B1420 55%,#0E1A29 100%);
  overflow:hidden;
}
/* contour topo lines */
.hero__topo{
  position:absolute; inset:0; z-index:-2; opacity:.4;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 58px, rgba(88,198,245,.055) 58px 59px);
}
/* falling snow */
.snowfall{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.flake{
  position:absolute; top:-8vh; border-radius:50%;
  background:#fff; opacity:.55;
  animation:fall linear infinite;
  will-change:transform;
}
@keyframes fall{
  0%  { transform:translate3d(0,-10vh,0); }
  100%{ transform:translate3d(var(--dx,20px),112vh,0); }
}
.hero__in{ position:relative; z-index:2; }
.hero__head{ margin:0 0 1.6rem; }
.hero__head span{ display:block; }
.hero__l1{ font-size:clamp(2.9rem,10.5vw,8.4rem); font-weight:900; letter-spacing:-.032em; line-height:.85; }
.hero__l2{ font-size:clamp(2.9rem,10.5vw,8.4rem); font-weight:900; letter-spacing:-.032em; line-height:.85; }
.hero__l3{
  font-size:clamp(1.5rem,3.8vw,3rem); font-weight:700; line-height:1;
  color:var(--hiviz-2); letter-spacing:-.01em; margin-top:.5rem;
}
.hero__sub{ max-width:56ch; font-size:clamp(1.05rem,1.85vw,1.3rem); color:var(--fog-2); margin:0 0 2.2rem; }
.hero__sub b{ color:var(--white); font-weight:600; }

/* trust strip */
.trust{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.7rem 2.2rem;
}
.trust__i{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:600; font-size:.94rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fog);
}
.trust__i svg{ width:17px; height:17px; color:var(--go); flex:none; }

/* drift at bottom of hero */
.drift{
  position:absolute; left:0; right:0; bottom:-1px; z-index:3;
  width:100%; height:auto; color:var(--night);
}

/* ---------- STAT SLAB ---------- */
.stats{ background:var(--night); border-bottom:1px solid var(--line); }
.stats__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
@media(min-width:860px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } }
.stat{
  padding:clamp(1.8rem,4vw,3rem) clamp(1rem,2.5vw,2rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media(min-width:860px){ .stat{ border-bottom:0; } .stat:last-child{ border-right:0; } }
.stat__n{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.9rem,6.2vw,4.6rem); line-height:.88;
  color:var(--white); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat__n em{ font-style:normal; color:var(--hiviz); }
.stat__l{
  margin-top:.7rem; font-family:var(--display); font-weight:600;
  font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog);
  line-height:1.4;
}

/* ---------- SECTION HEAD ---------- */
.shead{ max-width:70ch; margin-bottom:clamp(2.5rem,5vw,4rem); }

/* ---------- CARDS ---------- */
.card{
  background:linear-gradient(165deg,var(--night-2),#0A111C);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.3rem);
  position:relative; overflow:hidden;
  transition:transform var(--dur) var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); border-color:#38506F; }
.card__k{
  font-family:var(--display); font-weight:900; font-size:3.6rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--slate-2);
  position:absolute; top:1rem; right:1.3rem;
}
.card h3{ font-size:1.5rem; margin-bottom:.75rem; color:var(--white); }
.card p{ color:var(--fog-2); margin:0; font-size:1rem; }
.card__ic{
  width:52px; height:52px; border-radius:var(--r);
  display:grid; place-items:center; margin-bottom:1.2rem;
  background:rgba(255,107,0,.11); border:1px solid rgba(255,107,0,.3);
}
.card__ic svg{ width:26px; height:26px; color:var(--hiviz-2); }

/* ---------- BAND (contrast flip) ---------- */
.band-viz{ background:var(--hiviz); color:var(--hiviz-ink); }
.band-viz .lede,.band-viz p{ color:#3A2100; }
.band-viz .eyebrow{ color:#7A3D00; }
.band-viz .eyebrow::before{ background:var(--hiviz-ink); }
.band-snow{ background:var(--snow); color:#0A111C; }
.band-snow h2,.band-snow h3{ color:#060B13; }
.band-snow p,.band-snow .lede{ color:#3D4B60; }
.band-snow .eyebrow{ color:#B34B00; }

/* ---------- STEPS ---------- */
.step{
  display:grid; gap:1.2rem; align-items:start;
  grid-template-columns:auto 1fr;
  padding:clamp(1.5rem,3vw,2.2rem) 0;
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{
  font-family:var(--display); font-weight:900; font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:.9; color:var(--hiviz); font-variant-numeric:tabular-nums; min-width:2.4ch;
}
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--fog-2); margin:0; max-width:60ch; }

/* ---------- PRICING ---------- */
.plans{ display:grid; gap:1.4rem; align-items:start; }
@media(min-width:960px){ .plans{ grid-template-columns:repeat(3,1fr); } }
.plan{
  background:linear-gradient(170deg,var(--night-2),#08101B);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.7rem,3vw,2.2rem);
  display:flex; flex-direction:column; position:relative;
  transition:transform var(--dur) var(--ease), border-color .3s;
}
.plan:hover{ transform:translateY(-5px); border-color:#3A5478; }
.plan--hot{
  border-color:var(--hiviz);
  background:linear-gradient(170deg,#1A1207,#0C1421 60%);
  box-shadow:0 0 0 1px var(--hiviz), 0 30px 70px -30px rgba(255,107,0,.55);
}
@media(min-width:960px){ .plan--hot{ transform:scale(1.045); } .plan--hot:hover{ transform:scale(1.045) translateY(-5px); } }
.plan__tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--hiviz); color:var(--hiviz-ink);
  font-family:var(--display); font-weight:800; font-size:.76rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.42rem 1.05rem; border-radius:999px; white-space:nowrap;
}
.plan__name{ font-family:var(--display); font-weight:800; font-size:1.7rem; text-transform:uppercase; letter-spacing:.02em; color:var(--white); }
.plan__for{ font-size:.92rem; color:var(--fog); margin:.3rem 0 1.3rem; }
.plan__price{ display:flex; align-items:baseline; gap:.4rem; padding-bottom:1.3rem; border-bottom:1px solid var(--line); margin-bottom:1.3rem; }
.plan__amt{ font-family:var(--display); font-weight:900; font-size:clamp(2.8rem,5vw,3.7rem); line-height:.9; color:var(--white); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.plan--hot .plan__amt{ color:var(--hiviz-2); }
.plan__per{ font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog); }
.plan__list{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.75rem; flex:1; }
.plan__list li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; font-size:.99rem; color:var(--fog-2); line-height:1.45; }
.plan__list svg{ width:17px; height:17px; color:var(--go); margin-top:.28rem; flex:none; }
.plan__list li.key{ color:var(--white); font-weight:500; }
.plan__list li.key svg{ color:var(--hiviz); }
.plan .btn{ width:100%; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; text-align:left; color:var(--white);
  font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2.2vw,1.5rem);
  text-transform:uppercase; letter-spacing:.005em;
  padding:1.5rem 3rem 1.5rem 0; position:relative; border-bottom:1px solid var(--line);
  transition:color .2s;
}
.faq__q:hover{ color:var(--hiviz-2); }
.faq__q::after{
  content:''; position:absolute; right:.4rem; top:50%; width:14px; height:14px;
  border-right:2.5px solid var(--hiviz); border-bottom:2.5px solid var(--hiviz);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq__q[aria-expanded="true"]::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__a{ display:none; padding:1.3rem 0 1.7rem; border-bottom:1px solid var(--line); }
.faq__a[data-open]{ display:block; animation:fadeUp .35s var(--ease); }
.faq__a p{ color:var(--fog-2); max-width:70ch; margin:0; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------- FORM ---------- */
.form{ display:grid; gap:1.05rem; }
@media(min-width:700px){ .form__2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; } }
.field label{
  display:block; font-family:var(--display); font-weight:700; font-size:.86rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--fog); margin-bottom:.45rem;
}
.field .req{ color:var(--hiviz); }
.field input,.field select,.field textarea{
  width:100%; min-height:54px; padding:.85rem 1rem;
  background:rgba(255,255,255,.045); color:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:16px; transition:.2s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#5E718C; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--hiviz); background:rgba(255,107,0,.06);
  box-shadow:0 0 0 3px rgba(255,107,0,.16);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A7C2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:18px; padding-right:2.8rem; }
.field .hint{ font-size:.85rem; color:var(--fog); margin-top:.4rem; }
.form-note{ font-size:.88rem; color:var(--fog); }

/* ---------- SNOW GAUGE ---------- */
.gauge{ display:flex; align-items:flex-end; gap:clamp(1rem,3vw,2.5rem); }
.gauge__stick{
  width:clamp(64px,9vw,96px); height:clamp(230px,34vw,330px);
  background:linear-gradient(180deg,#0A121E,#111C2C);
  border:1px solid var(--line); border-radius:var(--r);
  position:relative; overflow:hidden; flex:none;
}
.gauge__fill{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#FFFFFF,#C9DEF2);
  border-top:3px solid var(--ice);
  transition:height 1.4s var(--ease);
}
.gauge__tick{ position:absolute; left:0; right:0; border-top:1px dashed rgba(147,167,194,.32); }
.gauge__tick span{ position:absolute; left:calc(100% + 8px); top:-.7em; font-family:var(--display); font-weight:600; font-size:.76rem; letter-spacing:.1em; color:var(--fog); white-space:nowrap; }

/* ---------- FOOTER ---------- */
.foot{ background:#03070D; border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.foot a{ color:var(--fog); transition:.2s; }
.foot a:hover{ color:var(--hiviz-2); }
.foot h4{ font-size:1rem; letter-spacing:.16em; color:var(--white); margin-bottom:1rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.96rem; }
.foot__bar{ margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; font-size:.88rem; color:#5E718C; }

/* ---------- MOBILE CALL BAR ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--line);
}
@media(min-width:1000px){ .callbar{ display:none; } }
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:60px; font-family:var(--display); font-weight:800;
  font-size:1.02rem; letter-spacing:.09em; text-transform:uppercase;
}
.callbar a:first-child{ background:var(--night-2); color:var(--white); }
.callbar a:last-child{ background:var(--hiviz); color:var(--hiviz-ink); }
.callbar svg{ width:19px; height:19px; }
@media(max-width:999px){ body{ padding-bottom:62px; } }

/* ---------- SCROLL REVEAL ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ---------- MISC ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.45rem .95rem; border-radius:999px;
  border:1px solid rgba(52,211,153,.35); background:rgba(52,211,153,.09); color:var(--go);
}
.pill__dot{ width:7px; height:7px; border-radius:50%; background:var(--go); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.35); } }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.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; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .snowfall{ display:none; }
  .rv{ opacity:1; transform:none; }
}

/* ============================================================
   DRIFT RISK CHECK — interactive lead magnet
   ============================================================ */
.tool{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(88,198,245,.13), transparent 60%),
    radial-gradient(90% 80% at 95% 100%, rgba(255,107,0,.13), transparent 60%),
    linear-gradient(175deg,#0A1220,#070D17);
  border:1px solid var(--line); border-radius:20px;
  overflow:hidden; position:relative;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.95);
}
.tool__bar{
  display:flex; align-items:center; gap:.9rem;
  padding:.95rem clamp(1.2rem,3vw,2rem);
  background:rgba(255,255,255,.028); border-bottom:1px solid var(--line);
}
.tool__dot{ width:9px; height:9px; border-radius:50%; background:var(--hiviz); flex:none; animation:pulse 2.2s ease-in-out infinite; }
.tool__title{
  font-family:var(--display); font-weight:800; font-size:.94rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--fog-2);
}
.tool__step{
  margin-left:auto; font-family:var(--display); font-weight:700; font-size:.86rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fog);
  font-variant-numeric:tabular-nums;
}
.tool__prog{ height:3px; background:var(--slate); position:relative; overflow:hidden; }
.tool__prog i{
  position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--hiviz),var(--hiviz-2));
  width:0; transition:width .5s var(--ease);
}
.tool__body{ padding:clamp(1.6rem,4vw,3rem); min-height:398px; display:flex; flex-direction:column; }

.q{ display:none; animation:qIn .45s var(--ease); }
.q[data-active]{ display:block; }
@keyframes qIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.q__k{
  font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--hiviz-2); margin-bottom:.7rem;
}
.q h3{ font-size:clamp(1.5rem,3.4vw,2.2rem); margin-bottom:.6rem; color:var(--white); }
.q__hint{ color:var(--fog); font-size:.98rem; margin:0 0 1.6rem; max-width:52ch; }

.opts{ display:grid; gap:.75rem; }
@media(min-width:680px){ .opts--2{ grid-template-columns:1fr 1fr; } }
.opt{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  padding:1.05rem 1.2rem; min-height:64px;
  background:rgba(255,255,255,.035); color:var(--snow);
  border:1.5px solid var(--line); border-radius:var(--r);
  transition:transform .2s var(--ease), border-color .2s, background .2s;
}
.opt:hover{ border-color:var(--hiviz); background:rgba(255,107,0,.075); transform:translateX(5px); }
.opt:focus-visible{ outline:3px solid var(--ice); outline-offset:2px; }
.opt__ic{
  width:40px; height:40px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; background:rgba(88,198,245,.1); border:1px solid rgba(88,198,245,.25);
}
.opt__ic svg{ width:21px; height:21px; color:var(--ice); }
.opt:hover .opt__ic{ background:rgba(255,107,0,.13); border-color:rgba(255,107,0,.4); }
.opt:hover .opt__ic svg{ color:var(--hiviz-2); }
.opt__t{ display:block; font-family:var(--display); font-weight:700; font-size:1.16rem; text-transform:uppercase; letter-spacing:.03em; line-height:1.1; }
.opt__d{ display:block; font-size:.89rem; color:var(--fog); line-height:1.35; margin-top:.22rem; }
.opt > span:not(.opt__ic){ flex:1; min-width:0; }
.opt__ar{ margin-left:auto; color:var(--fog); flex:none; transition:.2s; }
.opt:hover .opt__ar{ color:var(--hiviz); transform:translateX(4px); }

.tool__back{
  margin-top:1.6rem; background:none; border:0; color:var(--fog);
  font-family:var(--display); font-weight:700; font-size:.88rem;
  letter-spacing:.15em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 0;
}
.tool__back:hover{ color:var(--hiviz-2); }

/* ---- RESULT ---- */
.res{ display:none; }
.res[data-active]{ display:block; animation:qIn .5s var(--ease); }
.res__top{ display:grid; gap:clamp(1.5rem,4vw,2.6rem); align-items:center; }
@media(min-width:760px){ .res__top{ grid-template-columns:auto 1fr; } }

.dial{ position:relative; width:clamp(158px,26vw,208px); height:clamp(158px,26vw,208px); flex:none; margin-inline:auto; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial__bg{ fill:none; stroke:var(--slate); stroke-width:13; }
.dial__fg{
  fill:none; stroke:var(--hiviz); stroke-width:13; stroke-linecap:round;
  stroke-dasharray:440; stroke-dashoffset:440;
  transition:stroke-dashoffset 1.5s var(--ease), stroke .6s;
  filter:drop-shadow(0 0 12px rgba(255,107,0,.55));
}
.dial__c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dial__n{
  font-family:var(--display); font-weight:900; font-size:clamp(3rem,7vw,4.1rem); line-height:.85;
  color:var(--white); font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.dial__l{ font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fog); margin-top:.4rem; }

.res__lvl{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:800; font-size:.86rem;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.45rem 1rem; border-radius:999px; margin-bottom:.9rem;
}
.res h3{ font-size:clamp(1.6rem,3.6vw,2.4rem); margin-bottom:.7rem; color:var(--white); }
.res__p{ color:var(--fog-2); margin:0 0 1.3rem; max-width:54ch; }
.res__facts{ display:grid; gap:.55rem; margin:0 0 1.6rem; padding:0; list-style:none; }
.res__facts li{ display:grid; grid-template-columns:auto 1fr; gap:.65rem; font-size:.97rem; color:var(--fog-2); }
.res__facts svg{ width:16px; height:16px; color:var(--hiviz); margin-top:.3rem; flex:none; }

.res__rec{
  margin-top:clamp(1.6rem,4vw,2.4rem); padding-top:clamp(1.6rem,4vw,2.2rem);
  border-top:1px solid var(--line);
}
.res__recbox{
  background:linear-gradient(160deg,rgba(255,107,0,.13),rgba(255,107,0,.03));
  border:1.5px solid rgba(255,107,0,.42); border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,1.8rem);
  display:grid; gap:1.2rem; align-items:center;
}
@media(min-width:720px){ .res__recbox{ grid-template-columns:1fr auto; } }
.res__reck{ font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hiviz-2); }
.res__recn{ font-family:var(--display); font-weight:900; font-size:clamp(1.7rem,3.6vw,2.3rem); text-transform:uppercase; color:var(--white); line-height:1; margin:.35rem 0 .3rem; }
.res__recp{ font-size:.95rem; color:var(--fog-2); margin:0; }

/* capture */
.cap{ margin-top:clamp(1.5rem,3.5vw,2.1rem); padding-top:clamp(1.5rem,3.5vw,2rem); border-top:1px solid var(--line); }
.cap h4{ font-size:1.28rem; color:var(--white); margin-bottom:.45rem; }
.cap p{ color:var(--fog); font-size:.95rem; margin:0 0 1.15rem; max-width:56ch; }
.cap__row{ display:grid; gap:.7rem; }
@media(min-width:640px){ .cap__row{ grid-template-columns:1fr auto; } }
.cap__row input{
  min-height:56px; padding:.85rem 1.1rem; font-size:16px;
  background:rgba(255,255,255,.05); color:var(--white);
  border:1.5px solid var(--line); border-radius:var(--r); font-family:var(--body);
}
.cap__row input:focus{ outline:none; border-color:var(--hiviz); box-shadow:0 0 0 3px rgba(255,107,0,.18); }
.cap__ok{
  display:none; align-items:center; gap:.8rem; padding:1.15rem 1.3rem;
  background:rgba(52,211,153,.1); border:1.5px solid rgba(52,211,153,.42);
  border-radius:var(--r); color:var(--go);
  font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.05em; text-transform:uppercase;
}
.cap__ok[data-on]{ display:flex; animation:qIn .4s var(--ease); }
.cap__ok svg{ width:22px; height:22px; flex:none; }

/* ============================================================
   PHOTOGRAPHY
   ============================================================ */

/* Hero photo sits behind the gradients at low opacity: it adds real texture
   and proof without competing with the display type sitting on top of it. */
.hero__photo{
  position:absolute; inset:0; z-index:-3;
  background-image:var(--hero-img);
  background-size:cover; background-position:center 62%;
  opacity:.34;
  filter:saturate(.85) contrast(1.05);
}
.hero__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,11,19,.72) 0%,rgba(6,11,19,.45) 40%,rgba(6,11,19,.92) 100%);
}

/* Full-bleed evidence band. */
.shot{ position:relative; width:100%; overflow:hidden; }
/* aspect-ratio reserves the box before the image loads, so nothing jumps. */
.shot img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.shot--tall img{ max-height:min(640px,64vh); }

/* Overlaid captions only work when the image is tall enough to hold them.
   On a phone a 16:9 photo is ~190px tall — the caption would cover the picture
   entirely — so below 760px it sits underneath instead. */
.shot__cap{
  padding:1rem var(--gut) 0;
  background:none;
}
.shot__cap p{ color:#fff; }
@media(min-width:760px){
  .shot__cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:clamp(1.4rem,4vw,2.6rem) var(--gut);
    background:linear-gradient(180deg,transparent,rgba(6,11,19,.94) 65%);
  }
}
.shot__cap p{
  margin:0; max-width:60ch;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.3rem,3.4vw,2.4rem); line-height:1.05;
  text-transform:uppercase; letter-spacing:-.01em; color:#fff;
}
.shot__cap span{
  display:block; margin-top:.6rem;
  font-family:var(--body); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:clamp(.95rem,1.6vw,1.1rem); color:var(--fog-2);
}
.figure{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.figure img{ width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover; }