/* High Voltage Tire — production skin.
   Starlink-family design system shared with sparkyx.ca (near-black canvas,
   full-bleed photo bands dissolving into black, quiet Inter type, white pill
   CTA) with an electric-blue micro-accent reserved for the HVT brand only. */

:root{
  --black:#000;
  --ink:#050505;
  --panel:#101012;
  --panel-2:#161619;
  --white:#fff;
  --white-85:rgba(255,255,255,.85);
  --white-55:rgba(255,255,255,.55);
  --grey:#a7a7ad;
  --grey-2:#6f6f76;
  --line:rgba(255,255,255,.10);
  --amber:#ff6a00;
  --accent:#ff9a52;
  --volt:#4da3ff;
  --volt-dim:rgba(77,163,255,.55);
  --pad:clamp(24px,6vw,96px);
  --measure:1200px;
  --gutter:clamp(24px,4vw,32px);
  --header-h:73px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--font);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(77,163,255,.35)}
a{color:inherit}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:4px}
img{max-width:100%}
h1,h2,h3{font-weight:300;letter-spacing:-.01em;line-height:1.15}
h2{font-size:clamp(30px,4.2vw,46px);margin-bottom:18px}
h3{font-size:20px;font-weight:500;margin-bottom:10px}
p{color:var(--grey)}
strong{color:var(--white);font-weight:600}

.measure{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.85);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
}
.header-inner{
  min-height:var(--header-h);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:0 var(--gutter);
}
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none;line-height:0}
.brand-logo{height:42px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.site-nav a{text-decoration:none;font-size:14px;color:var(--grey)}
.site-nav a:hover{color:var(--white)}
.header-actions{display:flex;gap:.4rem;align-items:center}
.header-call{
  display:inline-flex;align-items:center;min-height:44px;padding:.55rem .5rem;
  color:var(--white);text-decoration:none;font-weight:500;white-space:nowrap;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.header-call:hover{color:var(--grey)}

/* ---------- mobile navigation (hamburger) ---------- */
/* Same implementation as sparkyx.ca: two quiet bars that turn into an X,
   and a full-viewport panel that is a SIBLING of the header in the markup,
   never a child — the header's backdrop-filter would make it the containing
   block for fixed descendants and trap the panel inside the header band.
   The panel sits UNDER the header (z 15 vs 20), so the logo, the one-line
   phone and the toggle (now an X) stay visible and tappable above it. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;min-height:48px;padding:0;cursor:pointer;color:#fff;
  background:none;border:0;border-radius:0;position:relative;
}
.nav-toggle-bars{display:contents}
.nav-toggle-bars span{
  position:absolute;left:13px;width:22px;height:1.5px;background:#fff;
  transition:transform .3s ease,top .3s ease;
}
.nav-toggle-bars span:nth-child(1){top:20px}
.nav-toggle-bars span:nth-child(2){top:27px}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1){top:23px;transform:rotate(45deg)}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2){top:23px;transform:rotate(-45deg)}
.mobile-nav{
  position:fixed;inset:0;z-index:15;
  background:#000;
  padding:104px var(--gutter) 40px;overflow-y:auto;
  overscroll-behavior:contain;
  animation:navfade .25s ease both;
}
.mobile-nav[hidden]{display:none}
@media(min-width:901px){.mobile-nav{display:none}}
.mobile-nav>a{
  display:flex;align-items:center;min-height:56px;padding:14px 0;
  color:#fff;text-decoration:none;font-weight:300;font-size:26px;letter-spacing:.01em;
  border-bottom:1px solid var(--line);
}
.mobile-nav>a:hover{color:var(--grey)}
.mobile-nav-actions{display:flex;flex-direction:column;gap:.9rem;margin-top:2rem}
.mobile-nav-actions .btn{width:100%;text-align:center}
@keyframes navfade{from{opacity:0}to{opacity:1}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:15px;
  padding:14px 30px;border-radius:999px;transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn-pill{background:var(--white);color:#000}
.btn-pill:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:var(--white);background:rgba(0,0,0,.25)}
.btn-ghost:hover{border-color:var(--white)}
.btn-small{padding:9px 20px;font-size:14px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(110px,16vh,170px) var(--gutter) clamp(100px,13vh,140px);
  background:var(--ink);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-shade{
  position:absolute;inset:0;
  /* Sparky X fade (owner, Oct 29 2026): full edge-to-edge black wash,
     deepening to solid black at the bottom. No colour glow. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.44) 0%, rgba(0,0,0,.36) 30%,
    rgba(0,0,0,.34) 55%, rgba(0,0,0,.55) 76%,
    rgba(0,0,0,.80) 90%, rgba(0,0,0,.95) 97%, #000 100%);
}
.hero-inner{position:relative;z-index:2;max-width:860px;margin:0 auto}
.eyebrow{
  font-size:12px;letter-spacing:.32em;font-weight:600;color:var(--accent);
  text-transform:uppercase;margin-bottom:26px;
}
.eyebrow-blue{color:var(--volt)}
.eyebrow-bolt{color:var(--volt);letter-spacing:0}
.hero h1{font-size:clamp(42px,6.4vw,72px);margin-bottom:24px;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-sub{font-size:clamp(17px,2vw,20px);max-width:680px;margin:0 auto 38px;color:#d7d7db}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-trust{margin-top:34px;font-size:14px;color:#c9c9ce;letter-spacing:.04em}
.hero-trust strong{color:var(--white)}
/* Trust row — cloned from sparkyx.ca (owner, Oct 29 2026): same styles,
   honest items only. No ratings, no stars, no review counts on HVT, ever. */
.trust-row{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:0;margin:1.6rem 0 0;
  color:var(--white-55);font-size:12.5px;letter-spacing:.05em;font-weight:400;
}
.trust-row strong{color:var(--white-85);font-weight:500}
.hero:not(.hero-subpage) .trust-row{justify-content:center}

/* ---------- bands & cards ---------- */
.band{padding:clamp(70px,10vh,110px) 0;border-top:1px solid var(--line)}
.band-alt{background:linear-gradient(180deg,#08080a,#050505)}
.section-lede{max-width:720px;font-size:17px;margin-bottom:44px}
.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;display:flex;flex-direction:column;
  transition:transform .15s ease,border-color .15s ease;
}
.card p{font-size:15px;flex:1}
.card-media{
  display:block;width:calc(100% + 56px);max-width:none;height:210px;object-fit:cover;
  margin:-30px -28px 22px;border-radius:19px 19px 0 0;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.card-cta-wide{grid-column:1/-1}
@media (min-width:641px){
  .card-cta-wide{flex-direction:row;align-items:center;gap:28px}
  .card-cta-wide .btn{margin-top:0;flex:none}
}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.card-link{
  margin-top:18px;font-size:14px;font-weight:500;color:var(--accent);
  text-decoration:none;
}
.card-link:hover{color:var(--white)}
.card-cta{background:var(--panel-2);border-color:var(--volt-dim)}
.card-cta .btn{align-self:flex-start;margin-top:18px}

.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature{
  border:1px solid var(--line);border-radius:20px;padding:32px 30px;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(77,163,255,.07), transparent 60%),
    var(--panel);
}
.feature p{font-size:15px}
.feature .card-link{display:inline-block}

/* ---------- photo band ---------- */
.photo-band{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.photo-band>img{
  display:block;width:100%;height:clamp(340px,52vh,540px);
  object-fit:cover;object-position:center;
}
.photo-band-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, transparent 26%, transparent 52%, rgba(5,5,5,.88) 88%, var(--ink) 100%);
}
.photo-band-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-bottom:clamp(30px,5vh,52px);text-align:left;
}
.photo-band-caption .eyebrow{margin-bottom:12px}
.photo-band-line{
  color:var(--white);font-size:clamp(20px,2.6vw,30px);font-weight:300;
  max-width:640px;margin-bottom:20px;line-height:1.3;
}

/* ---------- intel ---------- */
.intel-cat{
  font-size:11px;letter-spacing:.26em;font-weight:600;color:var(--volt);
  text-transform:uppercase;margin-bottom:12px;flex:none!important;
}
.intel-card h3{font-size:19px}
.intel-card h3 a{text-decoration:none}
.intel-card h3 a:hover{color:var(--accent)}
.intel-more{margin-top:30px}

/* ---------- trust ---------- */
.trust{text-align:center}
.trust .section-lede{margin:0 auto 38px}
.trust-stars{color:var(--amber);font-size:26px;letter-spacing:.3em;margin-bottom:16px}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:56px 0 44px;text-align:center;
  background:#050505;
}
.footer-logo{height:56px;width:auto;margin-bottom:22px}
.footer-brand-line{font-size:19px;color:var(--white);font-weight:400;margin-bottom:18px}
.footer-contact{font-size:14px;margin-bottom:26px}
.footer-contact a{color:var(--accent);text-decoration:none}
.footer-policies{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.footer-policies a{font-size:13px;color:var(--grey);text-decoration:none}
.footer-policies a:hover{color:var(--white)}
.footer-fine{font-size:12px;color:var(--grey-2)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .card-grid{grid-template-columns:1fr 1fr}
  .feature-list{grid-template-columns:1fr}
  /* header collapses the sparkyx.ca way: text nav away, actions pushed
     right, the Book pill leaves the bar (it lives in the menu panel),
     the one-line phone and the hamburger stay */
  .site-nav{display:none}
  .header-inner{flex-wrap:nowrap;gap:.5rem}
  .header-actions{margin-left:auto}
  .header-actions .header-book{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:640px){
  .card-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;text-align:center}
  .footer-logo{height:46px}
  .photo-band-caption{text-align:center}
  .photo-band-line{margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  /* small phones, sparkyx.ca block: logo down a step, the header phone
     ("CALL (647) 819-0490") on ONE line, nothing in the actions cluster
     or the brand may shrink */
  .brand{flex:none}
  .brand-logo{height:32px}
  .header-actions{flex:none}
  .header-call{font-size:11px;letter-spacing:.08em;padding:.5rem .25rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card{transition:none}
}

/* Cookie consent bar (owner, Oct 28 2026): floating card in brand
   orange (#FF5400) with black text; shown once until accepted or
   closed via the corner X (localStorage). */
.cookie-bar{
  position:fixed;left:24px;right:24px;bottom:24px;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  background:#FF5400;border:1px solid rgba(0,0,0,.28);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  padding:14px 52px 14px 20px;
}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;font-size:14px;line-height:1.45;color:#000;max-width:760px}
.cookie-bar p a{color:#fff;font-weight:600;text-decoration:underline}
.cookie-accept{
  background:#000;color:#fff;border:0;border-radius:999px;
  padding:10px 26px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.cookie-accept:hover{background:#26262a}
.cookie-close{
  position:absolute;top:4px;right:8px;background:none;border:0;color:#000;
  font-size:24px;line-height:1;padding:6px;cursor:pointer;
}
@media(max-width:768px){
  .cookie-bar{left:16px;right:16px;bottom:16px;gap:10px;padding:12px 44px 12px 16px;justify-content:flex-start}
  .cookie-bar p{font-size:13px}
}