/*
Theme Name: Voltswitch Protect
Theme URI: https://voltswitchprotect.com
Author: VoltSwitch Protect
Description: Custom WordPress theme for VoltSwitch Protect — GPS theft protection marketing site. Single-page design with scroll-driven animations and canvas image-sequence scrubs. Plain CSS/JS, no framework dependencies. v2.4: device scroll sequence re-cut from a 4K master (gold VSP mark).
Version: 2.4.11
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: voltswitch-protect
*/

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Futo Sans';src:url('fonts/FutoSans-Bold.woff2') format('woff2'),url('fonts/FutoSans-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Futo Sans';src:url('fonts/FutoSans-Heavy.woff2') format('woff2'),url('fonts/FutoSans-Heavy.ttf') format('truetype');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Futo Sans';src:url('fonts/FutoSans-Black.woff2') format('woff2'),url('fonts/FutoSans-Black.ttf') format('truetype');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Futo Sans';src:url('fonts/FutoSans-Medium.woff2') format('woff2'),url('fonts/FutoSans-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';src:url('fonts/Poppins-Regular.woff2') format('woff2'),url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';src:url('fonts/Poppins-Medium.woff2') format('woff2'),url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';src:url('fonts/Poppins-SemiBold.woff2') format('woff2'),url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight:600;font-style:normal;font-display:swap;
}
:root{
  /* WHITE THEME: bg-0 is the page white, bg-1..3 step down into light greys */
  --bg-0:#FFFFFF;
  --bg-1:#F7F9FB;
  --bg-2:#EFF3F7;
  --bg-3:#E8EDF2;
  --red:#EDBB1F;
  --red-bright:#F7D45C;
  --red-dark:#C2960F;
  /* TWO gold text tokens, split by WCAG threshold — one value cannot be both bright AND readable.
       --gold-text   #8e701c  = 4.68:1 on white -> passes AA for NORMAL text (small labels, 10-17px)
       --gold-accent #ab8a2b  = 3.28:1 on white -> passes AA for LARGE text (>=24px bold) + icons/borders
     #ab8a2b is about as light as gold gets on white while still passing anything. History: #A8820B
     (3.58:1) was "too mustardy"; #c7a433 (2.39:1) was brighter but failed BOTH thresholds.
     The brand gold #EDBB1F (1.79:1) is FILL-ONLY — never use it for text on white. */
  --gold-text:#8e701c;
  --gold-accent:#ab8a2b;
  --cyan:#EDBB1F;
  --blue:#EDBB1F;
  --cyan-bright:#F7D45C;
  --white:#FFFFFF;
  --text-1:#0A2540;      /* navy body/heading text (was near-white) */
  --text-2:#3A5877;
  --text-3:#6B7C8F;
  --card-bg:#FFFFFF;                    /* cards are solid white + border/shadow to lift off the page */
  --card-border:rgba(10,37,64,0.14);
  --teal:#234d57;      /* solid footer block */
  --navy:#0A2540;
  --navy-2:#3A5877;
  --container:1240px;
  --font-head:'Futo Sans','Helvetica Neue',Arial,system-ui,sans-serif;
  --font-body:'Poppins','Helvetica Neue',Arial,system-ui,sans-serif;
  --font:'Poppins','Helvetica Neue',Arial,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* ⚠️ BOTH html AND body. `body{overflow-x:hidden}` alone does NOT stop a mobile browser widening the
   layout viewport to fit overflowing content and then zooming out to show it — which left a white
   strip down the right of the page (reported 2026-08-07, measured: document 507px in a 390px
   viewport, i.e. everything scaled to 77%). The real overflow sources are clipped below too;
   this is the belt-and-braces guard. */
html{overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--bg-0);
  color:var(--text-1);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 28px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;font-size:12px;cursor:pointer;border:none;
  border-radius:7px;padding:14px 24px;transition:all .25s ease;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,var(--red-bright),var(--red-dark));
  color:#000;box-shadow:0 6px 22px rgba(237,187,31,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(237,187,31,.5);filter:brightness(1.1)}
.btn-primary:active{filter:brightness(.9);transform:translateY(0)}
/* gold OUTLINE variant — same geometry as .btn-primary, no fill */
.btn-outline{
  background:transparent;color:var(--gold-text);
  border:2px solid var(--gold-accent);
  box-shadow:none;
}
.btn-outline:hover{transform:translateY(-2px);background:rgba(199,164,51,.10);box-shadow:0 8px 24px rgba(199,164,51,.22)}
.btn-outline:active{transform:translateY(0);filter:brightness(.92)}
.btn-sm{padding:11px 20px;font-size:11px}

/* ---------- Headline font (Futo Sans Bold) ---------- */
.h2,.hero h1,.prod-left h3,.app h2,.tab-content h3,
.trust h2,.step h4,.threat-card h4,
.num,.logo,.device-box .brand{
  font-family:var(--font-head);
}

/* ---------- Eyebrow / Headings ---------- */
.eyebrow{
  color:var(--gold-text);font-weight:800;text-transform:uppercase;   /* deeper gold — the bright #EDBB1F is unreadable on white */
  letter-spacing:2.5px;font-size:12px;margin-bottom:18px;
}
.h2{
  font-size:clamp(26px,3.4vw,42px);font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;line-height:1.1;color:var(--navy);
}
.section{padding:96px 0;position:relative}
.center{text-align:center}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s ease,background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
  background:transparent;   /* NO white gradient. This — not .hero::after — was the white fade the client
                              kept seeing across the top of the hero video. The scrolled state below
                              still gets a solid white bar, which is where the header actually needs one. */
  transform:translateY(0);opacity:1;
}
header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 4px 24px rgba(10,37,64,.12);backdrop-filter:blur(12px)}
header.nav-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;height:104px;gap:30px;max-width:1500px;margin:0 auto;padding:0 6vw}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{
  height:92px;width:auto;max-width:none;flex-shrink:0;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 8px rgba(10,37,64,.18));   /* light shadow — black-wordmark logo on a white header */
}
/* grow/drop intro applies to the HEADER logo only (gentler than the old wide lockup — this mark is stacked) */
header .logo img{
  transform-origin:left center;transform:translateY(130px) scale(3.60);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
header.scrolled .logo img{transform:translateY(0) scale(1)}
.nav-right{
  position:relative;display:flex;align-items:center;margin-left:auto;
  transform:translateY(26px);transition:transform .45s cubic-bezier(.4,0,.2,1);   /* drop with the enlarged intro logo */
}
header.scrolled .nav-right{transform:translateY(0)}
/* hamburger toggle (permanent, all widths) */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:52px;height:44px;padding:0 12px;cursor:pointer;
  background:rgba(10,37,64,.05);border:1px solid rgba(10,37,64,.20);border-radius:9px;
  transition:border-color .2s,background .2s;
}
.nav-toggle:hover{border-color:var(--red);background:rgba(237,187,31,.16)}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* dropdown */
.nav-drop{
  position:absolute;top:calc(100% + 12px);right:0;min-width:190px;
  background:rgba(255,255,255,.98);border:1px solid rgba(237,187,31,.55);border-radius:12px;
  box-shadow:0 22px 50px rgba(10,37,64,.18),0 0 26px rgba(237,187,31,.16);
  padding:8px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;
}
.nav-drop[hidden]{display:none}
.nav-drop.open{opacity:1;transform:translateY(0)}
.nav-drop a{
  padding:13px 18px;border-radius:8px;
  text-transform:uppercase;font-size:13px;font-weight:600;letter-spacing:1.4px;
  color:var(--navy);font-family:var(--font-head);transition:background .2s,color .2s;
}
.nav-drop a:hover{background:rgba(237,187,31,.18);color:var(--gold-text)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:860px;height:100vh;max-height:1080px;
  display:flex;align-items:center;overflow:hidden;
  background:#FFFFFF url('assets/VoltSwitch-Protect-Hero-Image-v12.jpg') no-repeat;
  background-size:cover;background-position:center right;
}
/* looping background video */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center right;
  transform:scale(1.16) translateX(-5%) translateY(5%);   /* desktop: scale up so the left/down nudge still fully covers the frame (no edge gap).
       Raised 1.12 -> 1.14 -> 1.16 (2026-08-03) to buy top-edge margin: at 1.12 the video cleared the
       hero's top by only ~4px, which is why a white band was painted over it. 1.16 gives ~20px, enough
       that the top fade could be deleted ENTIRELY (client wants the video sharp to the top edge).
       Do NOT lower this — there is no top fade left to hide a gap. */
  /* ⚠️ pointer-events:none REMOVED 2026-08-17 — it was making a blocked autoplay UNRECOVERABLE.
     When iOS declines to autoplay (Low Power Mode, a browser autoplay setting, or a failed source)
     it paints its native centre play button over the poster — and pointer-events:none meant the tap
     never reached the video, so the hero just sat there dead. Nothing is layered behind the video to
     steal taps from: it is z-index:0, .hero-inner is z-index:5 and the header is z-index:100, so the
     only thing this exposes is the video's own bare area, which is exactly where tap-to-play belongs. */
}
/* DARK BOTTOM SCRIM (2026-08-06 redesign). The hero is now WHITE-ON-VIDEO, so the old white
   left-to-right scrim is gone entirely — the video reads edge to edge and full height.
   ⚠️ WHY IT RISES FROM THE BOTTOM AND STOPS AT 66%, rather than being a left-hand ramp:
     - the COPY sits between 17% and 51% up from the bottom, and needs the cover;
     - the LOGO sits from 61% up and is a BLACK wordmark over bright sky — darkening it would
       destroy it. The ramp is fully clear before it reaches the logo.
   ⚠️ 0.60 IS MEASURED, NOT PICKED. Across 30 frames of the Mountain Drive clip, composited at the
   real geometry with a locally-averaged background (the raw per-pixel minimum is meaningless here —
   the footage has thin specular light-streaks that drag it to 1.0 while reading perfectly well):
       no scrim   -> headline 1.38:1, blurb 1.18:1, gold 1.00:1   (9-20% of the copy area failing)
       peak 0.55  -> gold 2.92:1  (just short)
       peak 0.60  -> headline 6.29:1, blurb 6.43:1, gold 3.50:1, ZERO failing area  <-- shipped
   Re-measure after ANY hero video swap — brightness in the copy band is what drives this. */
/* ⚠️ NO SCRIM AT ALL — deliberate, and it only works because of the FOOTAGE.
   A CSS scrim was built here (white lift at the top for the logo + dark rise at the bottom for the
   copy) and the client rejected the look — the fades read as overlays. He instead re-graded the clip
   so the darkening at bottom-left and the lift at top-left are BAKED INTO the video.
   ⚠️ THIS MAKES THE HERO'S LEGIBILITY A PROPERTY OF THE VIDEO FILE, NOT THE CSS. Any future hero
   swap MUST be re-measured before it ships — a clip without that built-in grade will silently drop
   the white copy to ~1:1. Measured figures for the shipped clip are in STATUS.md. */
.hero::before{ content:none }
/* NO ::after. Both the top fade and the bottom white blend are DELETED — the client wants the video
   sharp to the top edge AND a HARD LINE into the white section below, with no blend at all.
   Safe because .hero-video is scaled 1.16 and clears the hero by 20px top / 124px bottom. */
.hero-inner{
  position:relative;z-index:5;width:100%;max-width:1500px;margin:0 auto;padding:0 6vw;
}
/* ⚠️ 351px is SOLVED, not eyeballed. `.hero` centres its content, so the block's own height feeds
   back into where it lands: T = (H - C)/2 + P, with C = P + h1(81) + gap(39) + blurb(91).
   Solving T = 344.5 + P/2 for T=520 gives P=351. That keeps the headline top at exactly 520px —
   the position measured to sit in the clip's graded dark band (gold 3.27:1 PASS, headline 2.73:1
   on 0.6% of area; it was 1.07:1 with 54% failing at the old 441px).
   ⚠️ CHANGING THE GAP OR THE BLURB LENGTH MOVES THE HEADLINE — re-solve this, never nudge it.
   (It was 472px when the gap was 160px.) */
.hero-content{max-width:900px;padding-top:351px}
.hero h1{
  /* Sized so hero line 1 renders the SAME WIDTH as the intro-state header logo (client marked this).
     The logo's intro width is FIXED — 92px tall × 2294/1731 × scale(3.60) = 438.9px — it does NOT
     scale with the viewport, so the headline has to cap at a fixed px to stay matched.
     Line width ≈ 10.4165 × font-size(px), so 438.9px needs 42.14px. The vw term reaches that cap at
     1280px, which is exactly where the logo's scale steps down. ⚠️ If the logo height, its intro
     scale, or line 1's wording changes, re-derive this. */
  font-size:clamp(1.80rem,3.293vw,42.14px);font-weight:700;text-transform:uppercase;
  line-height:1;letter-spacing:-.01em;
  margin-bottom:39px;   /* blurb sits directly under the headline (client's call 2026-08-06).
       ⚠️ This is a KNOWN contrast trade: it parks the blurb in the clip's band of bright light-streaks
       (y620-739). Measured there it drops to ~1.4:1 on ~14% of its area, vs 4.14:1 / 0% when the gap
       was 160px. The client chose the tighter layout after seeing both. Don't "fix" it silently. */
  color:#fff;                                   /* WHITE on video (2026-08-06 redesign) */
  text-shadow:0 2px 18px rgba(0,0,0,.55);       /* dark halo — was a WHITE halo for navy-on-white */
}
.hero h1 .l1{display:block;white-space:nowrap}
.hero h1 .red{white-space:nowrap}
.hero h1 .red{
  color:var(--red);display:block;font-size:.923em;   /* BRAND gold #EDBB1F (2026-08-06). The darkened
       --gold-accent exists for gold-on-WHITE; on the dark scrim that logic inverts — measured over
       the clip, brand gold reads 3.50:1 where --gold-accent manages only ~1.9:1. Same reversal as
       the dealer card. ⚠️ Do NOT "correct" this back to a gold token.
       The em is tuned so BOTH hero lines render the same WIDTH. Was .825 when line 1 read "Theft
       Protection"; "Vehicle Protection" is wider, so line 2 had to grow to match (measured 468px vs
       419px → .825 × 468/419 = .923). Re-measure this if either line's wording changes. */
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero p{
  color:#fff;font-size:1.22rem;max-width:760px;
  margin-bottom:0;line-height:1.55;text-shadow:0 2px 16px rgba(0,0,0,.55);
}
/* the outline button sits on the dark scrim now: white label, brand-gold border (matches the goal) */
/* ---------- Nav actions: About Us (plain label) + Contact Us (gold fill), hard right ---------- */
.nav-actions{display:flex;align-items:center;gap:26px;margin-left:auto;flex-shrink:0}
.nav-toggle,#navDrop{display:none}   /* desktop shows the two buttons; the hamburger is mobile-only */
.nav-cta{padding:14px 30px;font-size:13px}
.nav-link{
  font-family:var(--font-head);text-transform:uppercase;font-size:13px;font-weight:600;
  letter-spacing:1.4px;color:#fff;white-space:nowrap;transition:color .2s;
  /* ⚠️ WHITE + a tight dark shadow, and the shadow is LOAD-BEARING. Measured across the clip, the
     sky behind this corner sits at luminance ~0.20 — squarely BETWEEN the thresholds, so plain white
     (4.15:1) and plain navy (3.6:1) BOTH fail. The background there is uniform blue, so a tight
     shadow works where it couldn't behind the headline. No outline, per the client. */
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.55);
}
.nav-link:hover{color:var(--red)}
/* once the header goes solid white on scroll, the white label would vanish — flip it to navy */
header.scrolled .nav-link{color:var(--navy);text-shadow:none}
header.scrolled .nav-link:hover{color:var(--gold-text)}
/* ---------- Problem section ---------- */
.problem{background:#fff;padding-top:40px;padding-bottom:64px}   /* SOLID white — the old gradient ended on --bg-1 (#F7F9FB) and showed as a grey band + hard line where it met the device artwork. Keep it white. */
.cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:54px}
/* flip-card outer: perspective container + reveal + hover magnify */
.threat-card{
  display:flex;text-align:center;perspective:1400px;
  background:transparent;border:none;padding:0;min-height:240px;
}
.cards-row .threat-card{
  transition:opacity .6s ease, transform .35s cubic-bezier(.34,1.2,.64,1);
}
.cards-row .threat-card:hover{transform:translateY(-8px) scale(1.045)}
/* staggered fade-in (delay on opacity only, so hover/flip stay snappy) */
.cards-row .threat-card:nth-child(2){transition-delay:.12s,0s}
.cards-row .threat-card:nth-child(3){transition-delay:.24s,0s}
.cards-row .threat-card:nth-child(4){transition-delay:.36s,0s}

/* rotating inner */
.flip-inner{
  position:relative;flex:1;min-width:0;display:grid;
  transform-style:preserve-3d;cursor:pointer;
  transition:transform .65s cubic-bezier(.4,.1,.2,1);
}
.threat-card.flipped .flip-inner{transform:rotateY(180deg)}
/* flip on hover (pointer devices only); click/tap still flips on touch */
@media(hover:hover){
  .cards-row .threat-card:hover .flip-inner{transform:rotateY(180deg)}
}
/* faces */
.flip-face{
  grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 26px;border-radius:13px;
  background:var(--card-bg);border:1px solid var(--card-border);
  box-shadow:0 6px 20px rgba(10,37,64,.07);   /* white cards need a real shadow to lift off the white page */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.flip-back{
  transform:rotateY(180deg);
  background:var(--teal);border-color:rgba(255,255,255,.16);   /* teal back, matching the footer block */
  box-shadow:0 10px 26px rgba(10,37,64,.18);
}
.cards-row .threat-card:hover .flip-face{
  border-color:rgba(237,187,31,.75);
  box-shadow:0 22px 50px rgba(10,37,64,.16),0 0 30px rgba(237,187,31,.22);
}
/* front face */
.threat-card .icon{color:var(--red);margin-bottom:22px;display:flex;align-items:center;justify-content:center;min-height:64px}
.threat-card .icon img{
  height:60px;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(237,187,31,.28));   /* red source PNGs, subtle glow */
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);transform-origin:center;
}
.threat-card:hover .icon img{transform:scale(1.08)}
.flip-front h4{text-transform:uppercase;font-size:18px;font-weight:700;letter-spacing:1px;line-height:1.35}
.flip-hint{margin-top:16px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-3);transition:color .3s ease}
.cards-row .threat-card:hover .flip-hint{color:var(--gold-text)}
/* back face */
.flip-back h4{text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:1px;color:#fff;margin-bottom:12px;line-height:1.3}   /* white on teal = 9.25:1 */
.flip-back p{color:rgba(255,255,255,.9);font-size:13.5px;line-height:1.6}

/* ---------- Product intro ---------- */
.product{
  padding-top:30px;
  background:
    radial-gradient(700px 500px at 50% 55%,rgba(237,187,31,.1),transparent 70%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
}
.product-grid{
  display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:40px;align-items:center;margin-top:60px;
}
.product .h2.center{margin-bottom:0}
.prod-left h3{
  font-size:clamp(22px,2.4vw,30px);font-weight:800;text-transform:uppercase;
  line-height:1.15;margin-bottom:20px;
}
.prod-left p{color:var(--text-2);font-size:15px;max-width:300px}
.prod-device{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.radar-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.radar-rings span{
  position:absolute;border:1px solid rgba(237,187,31,.35);border-radius:50%;
  animation:pulse 3s ease-out infinite;
}
.radar-rings span:nth-child(1){width:160px;height:160px;animation-delay:0s}
.radar-rings span:nth-child(2){width:260px;height:260px;animation-delay:.6s}
.radar-rings span:nth-child(3){width:360px;height:360px;animation-delay:1.2s}
@keyframes pulse{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1.15)}}
.device-box{
  position:relative;z-index:2;width:230px;height:150px;border-radius:18px;
  background:linear-gradient(145deg,#1a1f26,#0a0d12);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotate(-8deg) skewY(-2deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 6px,transparent 6px 12px);
}
.device-box .brand{font-style:italic;font-weight:900;font-size:13px;color:#fff}
.device-box .brand b{color:var(--red)}
.device-box .check{
  width:42px;height:42px;border:2px solid var(--cyan);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--cyan);
  box-shadow:0 0 16px rgba(237,187,31,.4);
}
.device-box .model{font-size:9px;letter-spacing:2px;color:var(--text-3)}
.device-box .leds{display:flex;gap:6px}
.device-box .leds i{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.prod-features{display:flex;flex-direction:column;gap:22px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .ic{color:var(--gold-accent);flex-shrink:0;margin-top:1px}
.feat .ftxt strong{display:block;text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:.8px}
.feat .ftxt span{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

/* ---------- Product scroll-scrub image sequence ---------- */
.product-seq{position:relative;background:#fff;padding-bottom:96px}   /* ~1in of breathing room below the device before the vehicles band */
/* DESKTOP: pinned two-stage sequence (client asked for the Apple-style hold, 2026-08-03).
   240vh track = 140vh of actual pinned scrolling. Deliberately shorter than the 360vh vehicles pin
   that had to be reverted — keep it tight or it reads as scroll-lock. Mobile unpins this below. */
/* NO PIN (2026-08-04). The section is a plain 100vh block now. Once the sequence auto-completes there
   was nothing left for the pinned scroll to drive, so it just read as the page refusing to move —
   the client asked for it gone. History: 240vh -> 200vh -> 170vh -> unpinned. */
.seq-track{height:auto}
/* FULL-BLEED pinned stage: the device fills the whole viewport, edge to edge, top to bottom.
   No padding and no heading in here — the heading now lives at the end of .problem above. */
.seq-sticky{position:relative;height:100vh;display:block;padding:0;overflow:hidden}   /* was position:sticky — see .seq-track above. Class name kept so the mobile overrides and the bottom-fade ::after still match. */
/* thin opaque white blend over the artwork's BOTTOM cut, same treatment as the hero's bottom edge.
   (Supersedes the earlier "keep the bottom crisp" call — the hard stop read badly once full-bleed.) */
.seq-sticky::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:78px;z-index:3;pointer-events:none;
  background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.82) 30%,rgba(255,255,255,.35) 62%,transparent 100%);
}
.seq-stage{position:relative;width:100%;height:100%}
/* the lead-in heading now sits at the BOTTOM of the problem section, not in the pinned stage */
.problem .seq-heading{margin:76px 0 0;text-align:center;padding:0 28px}
.seq-br,.prob-br,.trust-br{display:none}   /* mobile-only line breaks in headings */
.seq-stage-row{position:absolute;inset:0}
.seq-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  /* NO opacity fade — the device must already be on screen as you scroll in (client flagged the
     long white gap before it appeared). NO mask — the plum frames are white-on-white already. */
}
/* TOP seam fade: the artwork's top edge is ~#F5F5F5 and the problem section above ends at #F7F9FB —
   a few points apart, which reads as a hard line across a big flat area. This ramps from the section's
   exact colour to transparent so the boundary dissolves. Starts at #F7F9FB (NOT white) — fading to
   pure white here would make the step BIGGER, not smaller. The bottom edge stays crisp on purpose. */
/* TOP seam fade — PERSISTENT (do not fade it out). Two jobs: blends the section boundary at p=0,
   and softens the box LID where the pinned viewport crops it during the opening animation. The client
   showed a screenshot of the lid cut off hard at the top and asked for the fade back. */
/* Mirrors the HERO's bottom fade exactly, flipped to come DOWN over the device (client's reference).
   Hero bottom = `--bg-0 0% -> .38 @5% -> transparent @14%` of a 100vh box; this is the same shape:
   height 14% of the 100vh stage, stops at 0 / 36% (=5/14) / 100%. Very light, just enough to kill the
   hard top edge. Starts on #F7F9FB — the exact colour .problem ends on — so there's no step at the
   section boundary; fading to pure white here would REINTRODUCE one. ALWAYS ON (no --seam ramp). */
.seq-stage-row::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7%;z-index:1;pointer-events:none;   /* halved from 14% — it hung too far over the box */
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.38) 36%,transparent 100%);   /* WHITE, matching .problem above; #F7F9FB read as a grey band */
}
/* RIGHT fade — a SOFT, WIDE ramp matching the client's Photoshop goal. It INTENTIONALLY washes over
   the box's right side so the artwork dissolves into white instead of ending on a hard cut. Tuned so
   the box is ~87% gone by 58% (where the copy starts) while the radar rings stay faintly visible
   behind the text, exactly as in the goal. Removing this wash is what the client rejected. */
.seq-stage-row::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* The stops are GLUED to the drawn image's own right edge, which the JS publishes as --edge (a %).
     A hard-coded 78% left the edge exposed at some window shapes because `dw` moves with aspect ratio.
     Anchoring to --edge means the ramp always finishes 1.5% BEFORE the edge, at any size.
     Ramp width stays ~18 pts (the client's "reduce by 50%"), so it never reaches the box (~50%). */
  /* reaches 4% further left than before (-24% instead of -20%) so it covers more of the blue radar
     rings behind the bullets. The box's right edge is ~50%, the ramp starts ~54% — deliberately kept
     clear of the box itself. */
  background:linear-gradient(90deg,
    transparent            calc(var(--edge,78%) - 24%),
    rgba(255,255,255,.55)  calc(var(--edge,78%) - 15%),
    rgba(255,255,255,.92)  calc(var(--edge,78%) - 7%),
    #fff                   calc(var(--edge,78%) - 1.5%));
  opacity:var(--fade,0);          /* JS ramps this in with the copy */
}
/* STAGE 2 layout: device pans LEFT, all copy stacks in the RIGHT ~44% */
.seq-cols{
  position:absolute;inset:0;z-index:2;
  display:grid;grid-template-columns:58% 42%;grid-template-rows:auto auto;   /* matches the client's Photoshop goal: copy starts ~59% of the viewport */
  align-content:center;justify-items:start;gap:28px 0;
  padding:0 clamp(20px,3vw,48px);
  opacity:0;                      /* hidden through stage 1 — the JS reveals it */
}
.seq-cols .prod-left{grid-column:2;grid-row:1}
.seq-cols .prod-features{grid-column:2;grid-row:2}
.seq-cols .prod-left,.seq-cols .prod-features{text-shadow:0 2px 14px rgba(255,255,255,.95);will-change:opacity,transform}   /* white halo — copy now sits navy-on-white over the plum frames */
/* larger side copy in the sequence section */
/* copy sized up ~17% to match the client's Photoshop goal */
.seq-cols .eyebrow{font-size:16px;letter-spacing:3.2px;color:var(--teal)}   /* device section uses the TEAL accent (same as the footer bar), not gold */
.seq-cols .feat .ic{color:var(--teal)}
.seq-cols .prod-left h3{font-size:clamp(30px,3.1vw,42px);max-width:none}
.seq-cols .prod-left p{font-size:20px;max-width:none;margin:0}   /* was max-width:340px — client said it stacked up too narrow */
.seq-cols .prod-features{gap:32px;width:100%}
.seq-cols .feat{gap:18px}
.seq-cols .feat .ic svg{width:36px;height:36px}
.seq-cols .feat .ftxt strong{font-size:21px}
.seq-cols .feat .ftxt span{font-size:14px}
.seq-cols .prod-left h3{margin-left:0;margin-right:0}

/* ---------- How it works ---------- */
.how{background:#fff;position:relative}
.how-track{height:auto}                   /* compact: no tall pin, boxes fly in during scroll-in */
.how-sticky{position:static;height:auto;display:block;overflow:hidden;padding:76px 0 40px}
.how-sticky .container{width:100%}
.how .steps .step{opacity:0;transform:translateX(160px);will-change:transform,opacity}
.how .eyebrow{
  font-family:var(--font-head);font-size:clamp(16px,2.1vw,30px);
  letter-spacing:1.5px;line-height:1.1;margin-bottom:10px;
}
.how .h2{font-size:clamp(18px,2.7vw,36px);white-space:nowrap;color:var(--navy)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;position:relative}
.steps::before{  /* continuous red line through the card centers, behind the cards */
  content:"";position:absolute;top:50%;left:12.5%;right:12.5%;height:3px;
  transform:translateY(-50%);z-index:0;
  background:linear-gradient(90deg,transparent,var(--red) 6%,var(--red) 94%,transparent);
  box-shadow:0 0 10px rgba(237,187,31,.5);
}
.step{
  background:#fff;border:1px solid rgba(10,37,64,.14);border-radius:13px;
  padding:42px 24px 30px;text-align:center;position:relative;z-index:1;transition:all .3s;
  box-shadow:0 14px 34px rgba(10,37,64,.08);
}
.step:hover{border-color:rgba(237,187,31,.65);transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,37,64,.14)}
.step .num{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(180deg,var(--red-bright),var(--red-dark));
  color:#02070D;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(237,187,31,.5);
}
.step .sic{color:var(--gold-accent);margin:6px 0 16px;display:flex;justify-content:center}
.step h4{text-transform:uppercase;font-size:15px;font-weight:700;letter-spacing:1px;margin-bottom:10px;color:var(--navy)}
.step p{color:var(--navy-2);font-size:13px;line-height:1.5}
.step-connector{
  position:absolute;top:-18px;height:2px;background:linear-gradient(90deg,var(--red),rgba(237,187,31,.2));
  z-index:0;
}

/* ---------- Vehicles (auto-crossfade slideshow — NOT pinned) ---------- */
.vehicles{background:#fff;position:relative}
.veh-band{position:relative;width:100%;height:31.9vw;min-height:360px;max-height:82vh;overflow:hidden;background:#FFFFFF}   /* ratio ≈ image 2930/934 so cover shows the WHOLE vehicle (no roof/wheel crop) */
.veh-slides{position:absolute;inset:0;z-index:0}
.veh-slide{                                                      /* all 4 stacked; the active one fades in, the rest fade out */
  position:absolute;inset:0;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.1s ease;
}
.veh-slide.is-active{opacity:1}
/* NO top/bottom fade on the vehicle band — the client wants a crisp, unfaded band of the photograph.
   (Was a white gradient at both edges.) Don't reintroduce it. */
.veh-tabs-row{position:absolute;top:clamp(20px,4vh,44px);left:0;right:0;z-index:3;display:flex;justify-content:center;padding:0 20px}
/* pill tabs with sliding indicator */
.tabs{
  position:relative;display:flex;background:rgba(255,255,255,.94);
  border:1px solid rgba(10,37,64,.16);border-radius:999px;padding:6px;
  box-shadow:0 10px 30px rgba(10,37,64,.18);backdrop-filter:blur(6px);
}
.tab-indicator{
  position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;
  background:linear-gradient(180deg,var(--red-bright),var(--red-dark));
  box-shadow:0 2px 10px rgba(237,187,31,.4);
  transition:transform .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.tab{
  position:relative;z-index:1;background:none;border:none;color:var(--navy);
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:1.8px;
  padding:16px 52px;border-radius:999px;cursor:pointer;transition:color .25s;white-space:nowrap;
}
.tab:not(:last-child)::after{content:"";position:absolute;right:-1px;top:25%;height:50%;width:1px;background:rgba(10,37,64,.16)}
.tab.is-active{color:#02070D}
.tab.is-active::after,.tab.is-active+.tab::after{display:none}
/* white text card — a wide, squished rectangle that bleeds off the right edge (right side + corners hidden) */
.veh-desc{
  position:absolute;z-index:3;top:50%;left:auto;right:-80px;transform:translateY(-50%);
  width:min(660px,60vw);display:grid;
  background:#fff;border-radius:18px 0 0 18px;padding:26px 116px 26px 46px;   /* extra right padding covers the off-screen bleed */
  box-shadow:0 26px 60px rgba(10,37,64,.22);
}
.veh-desc p{
  grid-area:1/1;color:var(--navy-2);font-size:clamp(15px,1.15vw,18px);line-height:1.7;
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.veh-desc p.is-active{opacity:1;pointer-events:auto}
.veh-desc .veh-title{
  display:block;font-family:var(--font-head);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,2vw,30px);letter-spacing:1px;line-height:1.1;margin-bottom:12px;color:var(--navy);
}
.veh-hint{position:absolute;z-index:3;left:0;right:0;bottom:24px;text-align:center;color:var(--navy);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.65;pointer-events:none}   /* navy: the band's bottom now fades to WHITE */

/* ---------- App section ---------- */
.app{
  position:relative;min-height:820px;display:flex;align-items:center;overflow:hidden;padding:32px 0 96px;   /* 96px bottom = ~1in of white before the teal footer (this is the LAST section now) */
  background:#fff;   /* the full-height phone visual fills the right so there's no blank block */
}
.app::after{   /* soft fade at the very bottom where the hand meets the partner section */
  content:"";position:absolute;left:0;right:0;bottom:0;height:60px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.7));
}
.app .container{position:relative;z-index:2;width:100%}
.app-text{max-width:540px}
.app .eyebrow{font-size:17px;letter-spacing:1.8px;white-space:nowrap;color:var(--gold-text)}   /* deeper accent for contrast on white */
.app h2{font-size:clamp(32px,3.35vw,43px);font-weight:900;text-transform:uppercase;line-height:1.06;margin-bottom:26px;color:var(--navy)}   /* was clamp(40,5vw,64): "for You and Your Customers." pushed it to 5 lines with an orphan. 44px is the largest size that keeps "A Smarter Experience" on ONE line in the 540px column. */
.app p{color:var(--navy-2);font-size:clamp(20px,1.75vw,26px);max-width:540px;margin-bottom:36px;line-height:1.6}
.store-badges{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.store-link{display:inline-block;transition:transform .25s}
.store-link:hover{transform:translateY(-3px)}
.store-link img{height:72px;width:auto;display:block}
/* full-bleed visual anchored to the right — the hand's cut edge bleeds off-screen */
.app-visual{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:1;overflow:hidden;pointer-events:none}   /* full height — the hand extends to the section bottom (no white block, less cut) */
/* pulsating rings behind the phone — rings only (no central glow), fading out radially so nothing clips hard */
.app-radar{
  position:absolute;top:50%;right:14%;transform:translateY(-50%);
  width:min(620px,78%);aspect-ratio:1;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 50%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 50%,transparent 100%);
}
.app-radar span{
  position:absolute;width:100%;height:100%;border-radius:50%;
  border:3px solid rgba(237,187,31,.75);
  animation:radarPulse 3.2s ease-out infinite;
}
.app-radar span:nth-child(2){animation-delay:.8s}
.app-radar span:nth-child(3){animation-delay:1.6s}
.app-radar span:nth-child(4){animation-delay:2.4s}
@keyframes radarPulse{
  0%{opacity:0;transform:scale(.15)}
  12%{opacity:1}
  100%{opacity:0;transform:scale(1)}
}
.app-visual .app-radar{opacity:1}   /* radar visible immediately (entrance animation removed) */
.app-phone{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%) rotate(-15deg);transform-origin:center;
  width:min(880px,102%);z-index:2;   /* large, but sized so it fills the section (no blank) with only a light trim */
  filter:drop-shadow(0 24px 44px rgba(10,37,64,.28));pointer-events:auto;   /* soft navy shadow — the new PNG has no baked glow */
}   /* vertically centered in the full-height visual so the whole hand fits (tilt kept) */
/* entrance animations removed — phone/hand + text are visible as you scroll past, no scroll-lock */
.app-visual .app-phone{opacity:1;transition:scale .35s ease}
.app-visual .app-phone:hover{scale:1.04}   /* slight magnify on hover */

/* ---------- Partner CTA — FULL-WIDTH strip + right-bleeding card (mirrors the vehicles band) --- */
.partner{position:relative;background:#fff;padding:70px 0 40px}
/* edge-to-edge band. Ratio is wide, so `cover` crops sky/pavement top-and-bottom — never the sides.
   TALLER since 2026-08-05 (32vw -> 44vw): at 32vw the band showed only 56.9% of the frame and the
   client said it felt cramped/cut too far in. 44vw shows 78.2% — the crop drops from 21.5% off each
   edge to 10.9%, so much more sky and pavement reads.
   ⚠️ CEILING: the band must never get TALLER than width/1.778, or `cover` flips to cropping the
   SIDES instead (which would cut the cars off). That is why min-height stays 420px — at the 768px
   breakpoint the uncropped height is 432px, so 420 still clears it. If you raise min-height above
   ~430px this breaks on narrow desktop windows. */
.deal-band{position:relative;width:100%;height:44vw;min-height:420px;max-height:82vh;overflow:hidden;background:#fff}
.deal-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* white card bleeding off the RIGHT edge — same device as .veh-desc, so the two sections rhyme */
.deal-card{
  /* Right-justified, VERTICALLY CENTRED. A bottom-right variant was tried on 2026-08-05 and reverted
     the same day — don't re-propose it.
     ⚠️ `translate` PROPERTY, not `transform`: .reveal owns `transform`. */
  position:absolute;z-index:3;top:50%;right:-80px;translate:0 -50%;
  width:min(760px,64vw);
  /* translucent BLACK (2026-08-05 — the teal was tried and rejected). Black darkens every backdrop
     in the clip, so it carries the white copy more comfortably than the teal did AND can run more
     transparent: at 62% the animation still reads through it. Contrast measured over the clip's
     worst backdrops, not guessed — see the figures in STATUS.md. */
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:18px 0 0 18px;padding:34px 116px 34px 48px;   /* big right padding covers the off-screen bleed */
  box-shadow:0 26px 60px rgba(10,37,64,.30);
}
.partner .h2{color:#fff;font-size:clamp(24px,2.5vw,32px);font-weight:900;white-space:normal;text-align:left;line-height:1.16}   /* all-white card copy, headline included */
.deal-card p{color:rgba(255,255,255,.9);font-size:16px;line-height:1.6;margin-top:16px}
.deal-list{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:22px;list-style:none;padding:0}
.deal-list li{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-head);text-transform:uppercase;font-weight:800;
  font-size:14px;letter-spacing:1.1px;color:#fff;white-space:nowrap;
}
.deal-list .dic{display:flex;color:#fff}                 /* white on the navy card (teal would vanish here) */
.deal-list .dic svg{width:26px;height:26px}

/* ---------- Trust strip ---------- */
.trust{background:#fff;padding:64px 0}
.trust h2{text-align:center;font-size:clamp(20px,2.9vw,38px);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:0;color:var(--navy)}
.trust-row{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}
.trust-item{
  display:flex;align-items:center;gap:12px;padding:0 32px;position:relative;
}
.trust-item:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;height:80%;width:1px;background:rgba(255,255,255,.12)}
.trust-item .tic{color:var(--text-2);flex-shrink:0}
.trust-item span{text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--text-1);max-width:150px;line-height:1.3}

/* ---------- Footer ---------- */
/* Sunny-Road photo behind a translucent teal wash (2026-08-07, client's call).
   ⚠️ THE OVERLAY COLOUR IS #033845, NOT --teal (#234d57), AND THAT IS DELIBERATE. Letting 20% of a
   bright photo through LIGHTENS the result, so an overlay of the target colour would read washed-out
   and grey. Starting darker lands the composite back on the teal it replaced: it averages #1f4851
   against the old solid #234d57.
   ⚠️ 0.80 IS THE MEASURED FLOOR. Across the whole image: white 6.94:1, nav links 6.18:1,
   legal 5.82:1, gold hover 4.80:1 — all clear 4.5. Drop the opacity and the gold hover fails first.
   Two companion changes were required and are load-bearing (see below): the 12px legal text went
   .72 -> .88 white, and the nav hover went --red to --red-bright. */
footer{
  background:
    linear-gradient(rgba(3,56,69,.80), rgba(3,56,69,.80)),
    url('assets/Sunny-Road.jpg') center/cover no-repeat;
  /* 40% taller (2026-08-07). Measured 306px -> 428px: the content block is a fixed ~212px, so the
     padding carries the increase (94px -> 216px), split on the original 64:30 ratio.
     ⚠️ A taller footer also changes what `cover` shows of Sunny-Road — the visible band widens from
     source rows 298-651 to 228-721 — so the wash was re-measured against the new crop. */
  padding:147px 0 69px;color:#fff;
}
.footer-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-bottom:40px}   /* logo left · slogan truly centered · hamburger right */
.footer-logo{justify-self:start}
.footer-slogan{justify-self:center;font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:clamp(16px,1.8vw,26px);color:#fff;text-align:center;white-space:nowrap}
.footer-nav{justify-self:end;position:relative;display:flex;align-items:center;gap:12px;z-index:60}   /* above the partner section's overlay/cards */
.footer-nav a{
  font-family:var(--font-head);text-transform:uppercase;font-size:13px;font-weight:600;
  letter-spacing:1.4px;color:rgba(255,255,255,.92);transition:color .2s;
}
.footer-nav a:hover{color:var(--red-bright)}   /* ⚠️ --red-bright, not --red: over the photo the standard gold only reaches 4.02:1; the brighter token measures 4.80:1 */
.footer-nav-sep{color:rgba(255,255,255,.38);font-size:13px;line-height:1}
/* footer hamburger — dark bars on the white footer; dropdown opens upward */
.nav-toggle-dark{background:rgba(10,37,64,.05);border-color:rgba(10,37,64,.25)}
.nav-toggle-dark:hover{border-color:var(--red-dark);background:rgba(237,187,31,.14)}
.nav-toggle-dark span{background:var(--navy)}
.nav-drop-up{top:auto;bottom:calc(100% + 12px)}
.footer-link{
  text-transform:uppercase;font-size:13px;font-weight:600;letter-spacing:1.5px;
  color:var(--navy);transition:color .2s;font-family:var(--font-head);
}
.footer-link:hover{color:var(--gold-text)}
.footer-logo{margin-bottom:0;display:block}
.footer-logo img{width:166px;max-width:100%;height:auto;filter:none}   /* small, lower-left (+~28%) */
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.18);   /* light divider on the teal block */
}
.footer-bottom p{color:rgba(255,255,255,.88);font-size:12px}   /* .72 -> .88: at 12px over the photo the fainter white measured 3.48:1 */
.footer-legal{display:flex;gap:26px}
.footer-legal a{color:rgba(255,255,255,.88);font-size:12px;transition:.2s}   /* .72 -> .88, same reason as .footer-bottom p */
.footer-legal a:hover{color:#fff}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- Modals (About Us / Contact Us) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(2,7,13,.72);backdrop-filter:blur(8px);padding:24px;
  opacity:0;transition:opacity .25s ease;overflow-y:auto;
}
.modal-overlay[hidden]{display:none}
.modal-overlay.open{opacity:1}
.modal{
  position:relative;width:100%;max-width:540px;margin:auto;
  background:#fff;border:1px solid rgba(10,37,64,.10);border-radius:16px;
  padding:44px 42px 40px;
  box-shadow:0 30px 80px rgba(10,37,64,.35),0 0 34px rgba(237,187,31,.30);   /* gold glow */
  transform:translateY(14px);transition:transform .25s ease;
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal h3{font-family:var(--font-head);text-transform:uppercase;font-size:26px;font-weight:800;letter-spacing:.5px;margin-bottom:14px;color:var(--navy)}
.modal p{color:var(--navy-2);font-size:14.5px;line-height:1.75}
.modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;color:rgba(10,37,64,.4);
  font-size:26px;line-height:1;cursor:pointer;transition:color .2s;padding:6px;
}
.modal-close:hover{color:var(--navy)}
/* --- About --- */
#modalAbout{max-width:700px;padding:38px 52px 48px;text-align:center}
#modalAbout p{font-size:16.5px;line-height:1.8;margin-bottom:16px}   /* 5 paragraphs since 2026-08-19 (was one block) */
#modalAbout p:last-child{margin-bottom:0}
.modal-logo{display:block;width:46%;height:auto;margin:0 auto 22px}
/* --- Contact: form (left) + company info (right) --- */
#modalContact{max-width:1020px;padding:40px 44px 44px}
#modalContact h3{text-align:center;margin-bottom:28px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:46px;align-items:start}
.contact-form-panel{background:#EFEFEF;border-radius:12px;padding:32px}
.modal form{display:flex;flex-direction:column;gap:14px;margin-top:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--navy-2)}
.modal input,.modal textarea{
  background:#fff;border:1px solid rgba(10,37,64,.22);border-radius:7px;
  padding:12px 13px;color:var(--navy);font-family:var(--font);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.modal textarea{resize:vertical;min-height:104px;max-height:220px}
.modal input:focus,.modal textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,187,31,.22)}
.modal form .btn{margin-top:8px;align-self:flex-start}
.contact-info{padding-top:6px}
.contact-info img{width:min(276px,92%);height:auto;display:block;margin-bottom:44px}   /* +20% logo, more space before the address/info */
.contact-info p{margin-bottom:15px;font-size:15px;line-height:1.6}
.contact-info strong{color:var(--navy);font-weight:700}
.contact-info a{color:var(--navy-2);text-decoration:none;border-bottom:1px solid rgba(237,187,31,.6)}
.contact-info a:hover{color:var(--navy)}
.contact-hours{color:var(--navy-2);font-size:15px;line-height:1.7}
/* --- Privacy Policy + Terms of Use: long-form document modals. Same overlay/blur as About/Contact; the overlay
   scrolls (overflow-y:auto + .modal{margin:auto}), so no internal scroll area is needed.
   The policy is TYPED INTO the page on purpose — no PDF is hosted, so there is nothing to download. */
#modalPrivacy,#modalTerms{max-width:820px;padding:44px 48px 48px;text-align:left}
.pp-logo{display:block;width:min(440px,82%);height:auto;margin:0 auto 48px}   /* horizontal lockup — wider + flatter than .modal-logo (46% suits the stacked mark, not this one).
   48px below ≈ the "half an inch of breathing room" the client asked for between logo and title (2026-08-19; was 10px, read cramped). */
.pp-date{text-align:center;color:var(--text-3);font-size:12.5px;letter-spacing:.4px;margin-bottom:26px}
#modalPrivacy h3,#modalTerms h3{text-align:center;margin-bottom:6px}
#modalPrivacy h4,#modalTerms h4{
  font-family:var(--font-head);text-transform:uppercase;font-size:14.5px;font-weight:800;
  letter-spacing:.8px;color:var(--navy);margin:24px 0 8px;
}
#modalPrivacy p,#modalTerms p{color:var(--navy-2);font-size:14px;line-height:1.7;margin-bottom:10px}
.pp-list{list-style:none;padding:0;margin:2px 0 10px}
.pp-list li{
  position:relative;color:var(--navy-2);font-size:14px;line-height:1.65;
  padding-left:20px;margin-bottom:7px;
}
.pp-list li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--red)}   /* gold bullet dots — the brand gold is FILL-ONLY on white, which a dot is */
#modalPrivacy a,#modalTerms a{color:var(--navy-2);border-bottom:1px solid rgba(237,187,31,.6)}
#modalPrivacy a:hover,#modalTerms a:hover{color:var(--navy)}

/* ---------- Responsive ---------- */
/* tame the oversized logo intro on narrower screens so it doesn't overlap */
@media(max-width:1280px){
  header .logo img{transform:translateY(95px) scale(2.93)}
  .nav-right{transform:translateY(18px)}
  .hero h1{font-size:clamp(1.70rem,2.679vw,34.29px)}   /* logo scale drops to 2.93 here (width 357.2px) — keep line 1 matched to it */
}
@media(max-width:1024px){
  header .logo img{transform:translateY(56px) scale(2.26)}
  .nav-right{transform:translateY(8px)}
  .product-grid{grid-template-columns:1fr;gap:50px;text-align:center}
  .prod-left p,.tab-content p{margin-left:auto;margin-right:auto}
  .prod-features{max-width:360px;margin:0 auto}
  .feat{text-align:left}
  .cards-row{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .step-connector,.steps::before{display:none}   /* connector line only makes sense in the 4-across row */
  /* 5 vehicle tabs (Powersports added 2026-08-03) are 934px at desktop padding, which overflows
     below ~980px. Tighten them so the pill bar still fits between 769px and 1024px. */
  .tab{padding:14px 26px;font-size:13px;letter-spacing:1.2px}
}
@media(max-width:768px){
  .nav-right{transform:none}
  #modalContact{max-width:100%;padding:34px 22px 30px}
  #modalPrivacy,#modalTerms{max-width:100%;padding:34px 20px 32px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .contact-form-panel{padding:22px}
  .f-row{grid-template-columns:1fr}
  .contact-info img{margin-inline:auto}
  .contact-info{text-align:center}
  .section{padding:64px 0}
  /* bigger threat-card hint on mobile (title size now set in base) */
  .flip-hint{font-size:11px}
  .problem{padding-bottom:24px}   /* pull the device section up tighter under the cards */
  .how .h2{white-space:normal;font-size:clamp(20px,6vw,30px)}
  /* "Vehicle Theft / Is Changing." — two lines, matched to the seq heading size */
  .problem .h2{font-size:clamp(1.5rem,6.8vw,2.4rem);line-height:1.1}
  .prob-br{display:inline}
  /* trust line "Smart. / Secure. / Dealer-Ready." — three lines, matched heading size */
  .trust h2{font-size:clamp(1.5rem,6.8vw,2.4rem);line-height:1.15}
  .trust-br{display:inline}
  /* how it works: unpin & show boxes on mobile */
  .how-track{height:auto}
  .how-sticky{position:static;height:auto;display:block;padding:60px 0}
  .how .steps .step{opacity:1;transform:none}
  /* vehicles mobile: vehicle image on top (shorter band = less zoom, more of the vehicle visible),
     info card stacked BELOW it (no longer overlapping) so the whole vehicle shows */
  .veh-band{height:auto;min-height:0;max-height:none;overflow:hidden}
  .veh-band::after{display:none}   /* full-band fade would darken the card below; use a slide-only fade instead */
  .veh-slides{position:relative;height:60vw;min-height:210px}   /* the image area — shorter shows more of the vehicle */
  /* no mobile slide fade either — the band stays crisp on every size */
  .veh-slide{background-position:5% center}                   /* pan the pano further right to reveal more of the FRONT of each vehicle */
  .veh-tabs-row{top:16px}
  .tab{padding:11px 14px;font-size:clamp(9px,2.6vw,12px);letter-spacing:.5px}
  .veh-desc{position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none;width:100%;max-width:100%;margin:0;border-radius:0;box-shadow:none;background:#fff;padding:26px 22px}
  .veh-hint{display:none}
  .tab{flex:1;padding:11px 4px;font-size:clamp(9px,2.6vw,11px);letter-spacing:.3px;text-align:center;white-space:nowrap}
  .veh-desc p{text-align:center;font-size:15px}
  .partner{padding-top:40px}   /* pull the headline up tighter under the app section */
  .partner .h2{white-space:normal;font-size:clamp(22px,6vw,32px)}
  .app{display:flex;flex-direction:column;min-height:0;padding:54px 0}
  .app .container{order:1}
  .app .eyebrow{white-space:normal;font-size:14px;letter-spacing:1.4px}
  .app h2{font-size:clamp(30px,8vw,44px)}
  .app-text{max-width:100%;text-align:center}
  .store-badges{justify-content:center}
  .app-visual{order:2;position:relative;inset:auto;width:auto;height:auto;display:flex;align-items:center;justify-content:center;min-height:380px;margin-top:22px;overflow:visible}
  .app-radar{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,92%)}
  .app-visual .app-radar{opacity:1}
  .app::after{display:none}   /* stacked layout — the bottom fade would wash over the phone itself */
  .app-phone{position:relative;right:auto;bottom:auto;top:auto;left:9%;width:min(575px,135%)}   /* oversized + shifted right so the image's cut edge bleeds off-screen */
  .app-visual .app-phone{transform:none;translate:0 0;opacity:1}
  .tab-panel.active{grid-template-columns:1fr;gap:30px}
  /* product sequence: unpin, un-full-bleed & stack on mobile (desktop is pinned + absolutely positioned) */
  .product-seq{padding-bottom:0}   /* mobile already has its own 56px via .seq-sticky — don't double up */
  /* stack: band on top at the footage's own ratio, card below it in normal flow */
  .partner{padding:44px 0 40px}
  /* the card is a CHILD of .deal-band, so on mobile the band must stop being a fixed-height,
     overflow:hidden box or the card gets clipped inside it. Canvas goes into normal flow with its
     own aspect, then the card simply follows it. */
  .deal-band{height:auto;min-height:0;max-height:none;aspect-ratio:auto;overflow:visible}
  .deal-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9}
  .deal-card{
    position:static;translate:0;width:auto;right:auto;
    border-radius:0;padding:28px 20px 32px;box-shadow:none;text-align:center;
    background:rgba(0,0,0,.90);backdrop-filter:none;-webkit-backdrop-filter:none;   /* near-solid here — it sits on the white page, not over the artwork, so real transparency would just look washed */
  }
  .partner .h2{text-align:center;font-size:clamp(22px,6vw,30px)}
  .deal-list{justify-content:center;gap:12px 22px}
  .app{padding-bottom:64px}
  .seq-track{height:auto}
  .seq-sticky{position:static;height:auto;display:block;padding:0 0 56px;overflow:visible}   /* padding-top 6px -> 0 so the canvas's top edge IS the section's top edge; the scrub lands p=1 on that edge */
  .seq-stage{position:static;height:auto;gap:20px;overflow:hidden}   /* ⚠️ HISTORICAL GUARD, kept on
       purpose. It used to clip the 160%-wide .seq-canvas — without it that canvas (624px in a 390px
       viewport) widened the whole document and the browser zoomed out, showing white beside the hero.
       The canvas is width:100% since 2026-08-17 so there is nothing left to clip, but the guard costs
       nothing and still catches any future horizontal overflow in this stage. */
  .seq-stage-row{position:static;inset:auto;display:flex;flex-direction:column;align-items:center}
  .seq-stage-row::after,.seq-stage-row::before,.seq-sticky::after{display:none}   /* no right/top/bottom fades on mobile — the device is centred and unpinned */
  .seq-nb{display:none}   /* desktop-only line breaks — mobile is narrower and wraps on its own */
  /* ⚠️ MOBILE STAGE REBUILT 2026-08-17 — TALL + SCROLL-ZOOMED (client: "it runs flat, and you can
     just see the top and bottom edges cut off"). What was wrong: a 160%-wide 16/9 strip, only 387px
     tall at 430px, drawn `cover` + RISE. That framed frame-071 at x 23%->77%, y 13.8%->100% — so it
     CUT THROUGH the lid at the top and the box bottom at the bottom, and the device (a TALL object,
     0.169 wide x 0.508 high of the frame) rendered ~134x229px inside a squat landscape band.
     Now: a BAND at `aspect-ratio:11/10` (430x391 at 430pt) with a gentle scroll zoom onto the device.
     🔥 **TWO TALLER STAGES WERE TRIED AND BOTH REJECTED — DO NOT GO BACK UP.**
       - 3:4 (573px): still showed the section headline above and the copy below when the zoom landed.
       - **100svh (745px, full screen): REJECTED HARDEST.** It filled the screen, which the client
         disliked, and — the real problem — it was VISIBLY PIXELATED. See the sharpness note on
         MOB_END_VW: zooming that far needs a 2.6x upscale of a 1600px source.
     The canvas is deliberately ~HALF the full-screen height so the headline above and copy below are
     visible again, which the client explicitly asked to return to.
     ⚠️ `aspect-ratio` (not svh) is what makes the framing IDENTICAL ON EVERY PHONE: it fixes
     ch/cw at 10/11, so every ratio below is width-independent and no per-device clamp is needed.
     ⚠️ `width:160%` -> `100%`: the old strip relied on being clipped by `.seq-stage{overflow:hidden}`
     to fake a zoom. The zoom is real now, so the overflow no longer has anything to clip (the guard is
     kept below anyway — it costs nothing and still stops any future horizontal overflow).
     🔥 THE TOP/BOTTOM WHITE FADE IS PAINTED INTO THE CANVAS IN draw() (see MOB_FADE) — IT IS NOT CSS.
     A `mask-image` on the canvas was tried and **verified working in Chrome but it did NOT render on
     the client's iPhone**, leaving the artwork meeting the canvas edge on a hard line. Do not "tidy"
     it back into CSS. (A pseudo-element is also wrong here: `.seq-stage-row` is `position:static` on
     mobile and holds the copy as well as the canvas, so an absolute ::before/::after would either
     mis-anchor or wash over the copy.) */
  .seq-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:14/15;max-width:none;margin:6px 0 20px}
  .seq-heading{padding:0 16px;font-size:clamp(1.5rem,6.8vw,2.4rem);line-height:1.1}   /* sized so "Is Evolving With It." stays on one line (2 lines total) */
  .seq-br{display:inline}   /* break "Theft Protection" / "Is Evolving With It." on mobile */
  .seq-cols{position:static;inset:auto;display:flex;flex-direction:column;gap:34px;max-width:100%;margin:0;text-align:center;opacity:1}   /* opacity:1 — the desktop rule hides this for stage 1; mobile has no stages */
  .seq-cols .prod-features{align-items:flex-start;align-self:center;width:fit-content;max-width:100%;text-align:left;translate:0}   /* no right-nudge on mobile (stacked/centered) */
  .seq-cols .prod-left p{margin:0 auto}
  .nav{height:140px;justify-content:center}   /* .logo is the only child since the hamburger was removed — centring it is this one line.
       ⚠️ The nav height MUST clear the logo or it overflows the header box — 122px logo + the 4px
       nudge + breathing room. Raised 88 -> 140 alongside the 2026-08-05 logo bump. */
  .logo{justify-content:center}
  header .logo img{height:122px;transform:translateY(4px) scale(1)}   /* 64 -> 76 -> 122px (+60%, client's call). Width follows at ~162px (2294/1731 aspect) — comfortable inside a 375px screen. */
  /* soft white fade down from the top, BEHIND the logo (mobile only). Deliberately a gradient, not a
     band: the old "white strip across the top" complaint was an OPAQUE block from .hero-video{top:10%},
     which is a different thing. pointer-events:none + z-index under the logo, over the video. */
  header::before{
    content:"";position:absolute;left:0;right:0;top:0;height:230px;z-index:-1;pointer-events:none;   /* grown with the logo (was 170px at 76px tall) so the fade still runs out BELOW the wordmark rather than cutting across it */
    background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 42%,rgba(255,255,255,0) 100%);
  }
  /* ⚠️ THE HERO NOW FILLS THE VIEWPORT BY CONSTRUCTION (2026-08-17). It used to be
     `62.5vh + content + 80px` of CONTENT-DRIVEN height, which only ever APPROXIMATED the viewport —
     measured 743px inside a 745px viewport, i.e. 2px short, and further short on taller phones. That
     shortfall let the white `.problem` section show as a strip under the video (client reported it on
     an iPhone). `100svh` is the SMALL-viewport height (browser toolbars VISIBLE), so the hero can
     never come up short in any toolbar state. ⚠️ The 600px / 100vh / 100svh lines are ORDERED
     FALLBACKS for engines without svh — do not reorder or collapse them.
     ⚠️ THE COPY IS NOW BOTTOM-ANCHORED (`align-items:flex-end` + padding-bottom) instead of being
     pushed down by a vh top-padding. The dark scrim is anchored to the BOTTOM of the hero, so
     anchoring the copy there too keeps it inside the graded band at EVERY device height — the old
     top-padding math drifted relative to the scrim as viewport height changed.
     **padding-bottom is now the single knob for raising/lowering the copy: SMALLER = LOWER.**
     80px -> 52px moved the blurb down ~30px and the headline ~65px, into the darker band as asked.
     padding-top is only a FLOOR so the copy can never ride up under the logo on a short/landscape
     viewport; it has no effect at normal phone heights. */
  .hero{min-height:600px;min-height:100vh;min-height:100svh;height:auto;padding:150px 0 52px;background-position:71% center;align-items:flex-end}
  /* top:0 (was 10%) — that 10% gap left the hero's WHITE background showing as an opaque band across
     the top of the phone view, hiding the video behind the logo/hamburger. The video must start at
     the very top. Lower 25% stays uncovered, sitting under the text + .hero::before white gradient. */
  /* ⚠️ height:100%, NOT 75%. At 75% the video stopped part-way down the hero and the white page
     background showed through beneath it — that was the "half blip of an image" seam, with the lower
     copy stranded on white. The hero is taller than the viewport here, so the video must fill it.
     ⚠️ object-position LEFT, not 70%. A phone-shaped box crops the sides hard, and the clip's graded
     dark area is on the LEFT of the source — at 70% it was cropped away entirely and the copy landed
     on the bright road/car (line 1 measured 1.34:1 with 29% of its area failing). At 0% the same copy
     measures 5.19:1. Measured across 32 frames; re-check if the hero clip changes. */
  .hero-video{object-position:67% center;height:100%;top:0;transform:none}
  /* ⚠️ 67% CENTRES THE CAR (client's call). A portrait box shows only ~35% of this landscape frame
     (667px of 1920), so the car only enters view past ~55% — and that is exactly where the clip's
     graded dark side is cropped away. Bare at 67% the copy measures 1.34:1 / 1.00:1, i.e. invisible.
     Hence the scrim below. Re-derive both together if the hero clip changes. */
  .hero::before{
    content:"";                       /* the base rule is content:none — mobile needs it back */
    background:linear-gradient(0deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.60) 42%,
                                     rgba(0,0,0,.30) 47%, transparent 52%);
  }
  /* lighter overlay up top so the video shows through; heavier WHITE behind the text for legibility */
  /* reaches FULLY opaque by 58% — the copy sits below that, and at the old .95 the gold line 2 was
     only 2.13:1 over the darker footage. Navy always passed, which is why it went unnoticed. */
  /* the old mobile white ramp is GONE — .hero::before is content:none now (video-backed hero) */
  /* ⚠️ MOBILE KEEPS THE OLD NAVY-ON-WHITE HERO — these overrides are LOAD-BEARING.
     The 2026-08-06 redesign made the desktop hero WHITE type on a dark scrim, but mobile has a
     completely different layout: the video only covers the top 75% and the copy sits BELOW it on a
     fully white bed (the ramp above reaches #fff at 58%). Inheriting the white type there would put
     white text on white and make the whole hero invisible. Undo these only if mobile is redesigned
     to put the copy back OVER the video. */
  /* ⚠️ MOBILE NOW MATCHES DESKTOP: white copy over the video. It used to be navy-on-white because the
     copy sat BELOW the video on a white bed — that arrangement is gone (see .hero-video height:100%
     below), so navy would now be dark-on-dark. The white text-shadow HALO is also gone: on video it
     read as a glow around every letter. */
  .hero h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
  .hero h1 .red{color:var(--red);text-shadow:0 2px 14px rgba(0,0,0,.6)}
  .hero p{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
  /* the two buttons collapse to a hamburger, hard right; the logo stays centred */
  .nav-actions{display:none}
  .nav-toggle{display:flex;position:absolute;right:6vw;top:22px;z-index:3}
  #navDrop{display:block;position:absolute;right:6vw;top:78px;z-index:4}
  #navDrop[hidden]{display:none}
  .hero-content{padding-top:0;max-width:100%}
  /* ⚠️ FLUID, AND 3.9vw SITS IN A NARROW SAFE BAND — measured across 320-768px, do NOT nudge it.
     The blurb had a FIXED 19.52px while its container scales with the screen, so the wrap pattern
     differed per device: at 428-480px it stranded "partners." alone on line 4 (measured 77px against
     310/363/301) while 390px wrapped evenly. A FLUID size holds the font/container RATIO constant, so
     the wrap is identical on every phone. 3.9vw gives 3 CLEAN LINES from 360 to 560px — every modern
     phone, incl. the client's 430px device at 16.77px (last line 369px).
     🔥 THE CONTAINER IS `0.88 x viewport`, NOT `viewport - 40`. `.hero-inner` uses `padding:0 6vw`,
     not `.container`'s fixed 20/28px. Sweeping with the wrong model picked 4.05vw, which measured
     3 clean lines against a 390px column but ORPHANS AT EVERY WIDTH against the real 378px one.
     ⚠️ The safe band is 3.6-3.9vw. 4.0-4.4vw orphan almost everywhere; 4.6vw+ is orphan-free again but
     LARGER than the original, so it stops being the reduction that was asked for. Re-run the whole
     sweep (correct container model) if the blurb copy ever changes.
     ⚠️ Known residuals, accepted: 320px (SE 1st gen) hits the 14px floor and wraps to 4 lines, and
     640px strands the last word. Neither is a phone width that matters here; both beat the previous
     state, which orphaned the common 428-480 class. */
  .hero p{max-width:100%;font-size:clamp(14px,3.9vw,18.5px)}
  .hero h1{font-size:clamp(1.65rem,6.4vw,2.6rem);margin-bottom:26px}   /* ⚠️ the 1.65rem FLOOR is what keeps "THAT MOVES WITH YOU" on one line at 320px (measured 277px into a 280px column). At the old 9vw it wrapped and stranded "YOU". Raising this floor re-breaks the wrap. */
  .hero h1 .l1{white-space:normal}
  /* ⚠️ line 2 stays on ONE line — it was wrapping to a stranded "YOU". The clamp below is
     sized so "THAT MOVES WITH YOU" fits a 375px screen without wrapping. */
  .hero h1 .red{white-space:nowrap}
  /* stack the footer on mobile */
  .footer-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .footer-slogan{white-space:normal;margin-top:14px}   /* more space between the logo and the trust line (mobile) */
  .footer-nav{justify-self:center}
  .footer-logo{justify-self:center;justify-content:center}
  .tabs{display:flex;width:100%;justify-content:space-between}
}
@media(max-width:560px){
  .container{padding:0 20px}
  .cards-row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .trust-item{width:100%;justify-content:center;padding:14px 0}
  .trust-item:not(:last-child)::after{display:none}
  .hero-br{display:none}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* ---------- WordPress admin-bar offset (logged-in admins only; public unaffected) ---------- */
.admin-bar #header{top:32px}
@media screen and (max-width:782px){ .admin-bar #header{top:46px} }