/* Aerial hero — scroll-driven truck scene for the home page.
   Scoped to #hero: every rule from the standalone build is prefixed so it
   can't leak into the rest of the site, and the reset below stops the
   site's global h1/p/img rules from leaking in. Source of truth for the
   scene itself: Documents/ContractorRank-Hero/site/index.html. */

#hero{
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  line-height:normal;
  -webkit-font-smoothing:antialiased;
}
#hero h1, #hero h2, #hero h3{ line-height:normal; letter-spacing:normal; font-weight:inherit; color:inherit; font-size:inherit; }
#hero p{ color:inherit; }
#hero img{ height:auto; }
#hero{
    --charcoal:#0a0a0a;
    --charcoal-2:#131311;
    --charcoal-3:#1c1c19;
    --gold:#d4a017;
    --gold-light:#e8c04a;
    --gold-dim:rgba(212,160,23,0.35);
    --ink:#f4f1e9;
    --ink-dim:#cbc7ba;
    --sidewalk:#8a8578;
    --sidewalk-2:#7c776b;
    --curb:#b6b0a0;
    --road:#1a1a17;
    /* Albuquerque stucco palette: tan/beige/terracotta, not charcoal siding */
    --building-a:#c3ad8b;
    --building-b:#a3886a;
    --building-warm-a:#c98f68;
    --building-warm-b:#a3684c;
    --building-cool-a:#b9a488;
    --building-cool-b:#9c886c;
  }

  #hero *, #hero *::before, #hero *::after{ box-sizing:border-box; }
  #hero img{ max-width:none; display:block; }
  #hero h1, #hero h2, #hero h3, #hero p{ margin:0; }
  #hero .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;
  }

  /* ============ HERO SHELL ============ */
  #hero{
    position:relative;
    height:320vh;
    background:var(--charcoal);
  }
  #hero.no-motion{ height:auto; }

  #hero .scene{
    position:sticky;
    top:0;
    height:100vh;
    min-height:520px;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(ellipse 120% 60% at 50% 0%, #17170f 0%, var(--charcoal) 55%);
  }
  #hero.no-motion .scene{
    position:relative;
    height:auto;
    min-height:0;
    overflow:visible;
  }

  /* ============ SKYLINE PARALLAX (desktop only) ============ */
  #hero .skyline{
    position:absolute;
    top:0; left:0; right:0;
    height:14vh;
    z-index:1;
    pointer-events:none;
    display:flex;
    align-items:flex-end;
    gap:3vw;
    padding:0 4vw;
    opacity:0.55;
    will-change:transform;
  }
  #hero .skyline i{
    display:block;
    flex:0 0 auto;
    width:5vw;
    background:linear-gradient(180deg,#1e1e19,#131310);
    border-top:2px solid var(--gold-dim);
  }
  #hero .skyline i:nth-child(1){ height:38%; }
  #hero .skyline i:nth-child(2){ height:70%; }
  #hero .skyline i:nth-child(3){ height:50%; }
  #hero .skyline i:nth-child(4){ height:88%; }
  #hero .skyline i:nth-child(5){ height:60%; }
  #hero .skyline i:nth-child(6){ height:44%; }
  #hero .skyline i:nth-child(7){ height:75%; }
  #hero .skyline i:nth-child(8){ height:55%; }

  /* ============ STREET (scrolls under fixed truck) ============ */
  #hero .street{
    position:absolute;
    inset:0;
    height:320vh;
    width:100%;
    z-index:2;
    will-change:transform;
  }
  #hero.no-motion .street{
    position:relative;
    height:auto;
    min-height:2600px;
    transform:none !important;
  }

  #hero .road{
    position:absolute;
    left:50%;
    top:-300vh;
    width:var(--road-w);
    height:calc(100% + 600vh);
    transform:translateX(-50%);
    background:
      radial-gradient(ellipse 60% 8% at 30% 20%, rgba(255,255,255,0.03), transparent 60%),
      radial-gradient(ellipse 50% 6% at 70% 55%, rgba(0,0,0,0.12), transparent 60%),
      radial-gradient(ellipse 55% 7% at 40% 80%, rgba(255,255,255,0.025), transparent 60%),
      linear-gradient(90deg,#232320 0%,#242420 8%,var(--road) 50%,#242420 92%,#232320 100%);
    box-shadow:inset 0 0 40px rgba(0,0,0,0.5);
  }
  /* solid white edge lines, curb-to-curb */
  #hero .road::before, #hero .road::after{
    content:'';
    position:absolute;
    top:0; bottom:0;
    width:2px;
    background:rgba(240,238,230,0.8);
  }
  #hero .road::before{ left:2px; }
  #hero .road::after{ right:2px; }

  #hero .lane-line{
    position:absolute;
    left:50%;
    top:-300vh;
    width:2px;
    height:calc(100% + 600vh);
    transform:translateX(-50%);
    background-image:repeating-linear-gradient(to bottom, var(--gold) 0 9px, transparent 9px 18px);
    opacity:0.9;
  }

  /* Concrete sidewalks, clearly narrower than the road, separated from the
     asphalt by a visible curb line (not just a color change). */
  #hero .sidewalk{
    position:absolute;
    top:-300vh;
    width:var(--sidewalk-w);
    height:calc(100% + 600vh);
    background:repeating-linear-gradient(to bottom, var(--sidewalk) 0 34px, var(--sidewalk-2) 34px 36px);
    box-shadow:0 0 0 1px rgba(0,0,0,0.35);
  }
  #hero .sidewalk.l{ left:calc(50% - var(--road-half) - var(--sidewalk-w)); border-right:2px solid var(--curb); }
  #hero .sidewalk.r{ left:calc(50% + var(--road-half)); border-left:2px solid var(--curb); }

  #hero .cross-street{
    position:absolute;
    left:0; right:0;
    height:var(--road-w);
    background:linear-gradient(180deg,#232320,#28281f);
    box-shadow:0 0 0 1px rgba(244,241,233,0.08);
    z-index:1;
  }
  #hero .cross-street::after{
    content:'';
    position:absolute; inset:0;
    left:0;
    right:0;
    background-image:repeating-linear-gradient(to right, var(--gold) 0 9px, transparent 9px 18px);
    opacity:0.85;
    height:3px;
    top:50%;
    transform:translateY(-50%);
  }
  /* same solid-white-edge treatment as the main road, so cross streets
     read as real streets instead of a blank charcoal band. Full-width
     (not just the main-road intersection width) so the street reads as
     continuous asphalt all the way to both screen edges instead of
     appearing to cap mid-block. */
  #hero .cross-street .cs-edge{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:rgba(240,238,230,0.8);
  }
  #hero .cross-street .cs-edge.top{ top:2px; }
  #hero .cross-street .cs-edge.bottom{ bottom:2px; }
  /* curb-separated concrete sidewalks running the full length of the cross
     street, same treatment as the main road's .sidewalk so every street in
     the grid reads consistently */
  #hero .cross-street .cs-sidewalk{
    position:absolute;
    left:0; right:0;
    height:var(--sidewalk-w);
    background:repeating-linear-gradient(to right, var(--sidewalk) 0 34px, var(--sidewalk-2) 34px 36px);
    box-shadow:0 0 0 1px rgba(0,0,0,0.3);
  }
  #hero .cross-street .cs-sidewalk.top{ top:calc(var(--sidewalk-w) * -1); border-bottom:2px solid var(--curb); }
  #hero .cross-street .cs-sidewalk.bottom{ top:100%; border-top:2px solid var(--curb); }
  /* crosswalk: a NARROW band of thin stripes right at the intersection
     edge (not a texture spanning the whole cross street) — only added to
     some intersections in the markup below */
  #hero .cross-street .crosswalk{
    position:absolute;
    left:calc(50% - var(--road-half));
    width:var(--road-w);
    top:6px;
    height:7px;
    background-image:repeating-linear-gradient(to right, rgba(232,227,212,0.6) 0 3px, transparent 3px 8px);
  }
  /* Painted stop bar: a thick white line across each cross street's
     approach lane, just short of the main road's sidewalk. */
  #hero .cross-street .stop-bar{
    position:absolute;
    width:calc(var(--lane-w) * 0.14);
    height:calc(50% - 7px);
    background:rgba(242,240,232,0.9);
  }
  #hero .cross-street .stop-bar.w{ top:5px; left:calc(50% + var(--road-half) + var(--sidewalk-w) + 10px); }
  #hero .cross-street .stop-bar.e{ bottom:5px; right:calc(50% + var(--road-half) + var(--sidewalk-w) + 10px); }
  /* Stop sign, top-down: red octagon with a thin white rim on a short grey
     post, same down-right drop shadow as trees and roofs. Each sits on the
     sidewalk at the right-hand side of its approach lane, just before the
     stop bar (westbound: north sidewalk, east of the bar; eastbound: south
     sidewalk, west of the bar). */
  #hero .stop-sign{
    --ss:16px;
    position:absolute;
    width:var(--ss); height:var(--ss);
    z-index:2;
    filter:drop-shadow(2px 3px 2px rgba(0,0,0,0.5));
    pointer-events:none;
  }
  #hero .stop-sign .post{
    position:absolute;
    left:calc(50% - 1px); top:50%;
    width:2px; height:calc(var(--ss) * 0.5 + 5px);
    background:#8d8c86;
    border-radius:1px;
  }
  #hero .stop-sign .face, #hero .stop-sign .face::after{
    position:absolute;
    clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);
  }
  #hero .stop-sign .face{ inset:0; background:#f4f1ea; }
  #hero .stop-sign .face::after{ content:''; inset:1.5px; background:#c3312a; }
  #hero .cross-street .stop-sign.w{
    top:calc(var(--sidewalk-w) * -0.5 - var(--ss) * 0.5);
    left:calc(50% + var(--road-half) + var(--sidewalk-w) + 16px + var(--lane-w) * 0.14);
  }
  #hero .cross-street .stop-sign.e{
    top:calc(100% + var(--sidewalk-w) * 0.5 - var(--ss) * 0.5);
    right:calc(50% + var(--road-half) + var(--sidewalk-w) + 16px + var(--lane-w) * 0.14);
  }
  #hero .cds-stop-bar{ position:absolute; background:rgba(242,240,232,0.9); }

  /* Flat stucco roofs seen from above, the ABQ vernacular: separately
     roofed planes (living, rear addition, garage) each with its own darker
     parapet edge, a seam line where planes meet, and a garage in a
     distinctly greyer tone. drop-shadow (not box-shadow) so the shadow
     follows the real L-shaped outline when the garage projects forward. */
  #hero .block{
    position:absolute;
    filter:drop-shadow(5px 9px 6px rgba(0,0,0,0.55));
  }
  #hero .block span{ position:absolute; }
  #hero .block .roof-section{
    box-shadow:
      inset 0 0 0 1px rgba(28,18,8,0.6),
      inset 0 0 0 var(--pp,3px) rgba(66,44,24,0.62),
      inset 0 0 0 calc(var(--pp,3px) + 1px) rgba(255,242,215,0.28);
  }
  #hero .block .roof-seam{ background:rgba(34,22,10,0.62); }
  #hero .block .chimney{
    background:#8a8078;
    border:1px solid rgba(0,0,0,0.35);
    border-radius:1px;
    box-shadow:1px 2px 2px rgba(0,0,0,0.4);
  }
  #hero .block .vent{
    border-radius:50%;
    background:radial-gradient(circle, #2e2c28 0 30%, #b5af9f 36% 62%, #7a7564 70%);
    box-shadow:1px 1px 1px rgba(0,0,0,0.5);
  }
  #hero .block .vent.sq{ border-radius:1px; background:linear-gradient(135deg,#a19c8f,#5f5b51); }
  /* swamp cooler — the single most characteristic ABQ rooftop detail */
  #hero .block .swamp{
    background:linear-gradient(135deg,#ddd7c9,#b6afa0);
    border:1px solid rgba(0,0,0,0.45);
    border-radius:1px;
    box-shadow:1px 2px 3px rgba(0,0,0,0.5);
  }
  #hero .block .duct{
    background:linear-gradient(135deg,#c9c3b5,#9d978a);
    box-shadow:1px 1px 1px rgba(0,0,0,0.35);
  }
  /* commercial strip: rooftop units + storefront canopy */
  #hero .block.com .rtu{
    background:linear-gradient(135deg,#dcdad3,#a3a098);
    border:1px solid rgba(0,0,0,0.45);
    border-radius:1px;
    box-shadow:2px 3px 3px rgba(0,0,0,0.45);
  }
  #hero .block.com .rtu::after{
    content:'';
    position:absolute; left:50%; top:50%;
    width:50%; aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,#2f2e2b 0 35%,#5e5b54 40% 60%,#3a3935 65%);
  }
  /* park building rooftop: vent stacks, conduit, canales */
  #hero .block .stack{
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #67665f, #2d2c29 70%);
    box-shadow:1px 1px 1px rgba(0,0,0,0.5);
  }
  #hero .block .conduit{ background:#3b3a36; box-shadow:1px 1px 0 rgba(0,0,0,0.3); }
  #hero .block .canale{
    background:linear-gradient(135deg,#aaa59a,#77736a);
    border:1px solid rgba(0,0,0,0.45);
    box-shadow:1px 2px 2px rgba(0,0,0,0.45);
  }
  #hero .block.com .canopy{ background:linear-gradient(90deg,#6b5a45,#806c53); }

  #hero #scenery{ position:absolute; inset:0; pointer-events:none; }

  /* Xeriscape yards, not lawns: gravel / decomposed granite in warm tans,
     buffs and rust, sized to the actual lot (house + a modest yard
     margin), not a sprawling green rectangle. A thin tan wall/fence
     outline encloses the back yard only — the single most recognizable
     feature of an ABQ neighborhood from above. Small turf patches are the
     rare exception, added separately. */
  #hero .yard{
    position:absolute;
    border-radius:2px;
  }
  /* Gravel/DG reads as fine scattered speckle, not a woven stripe hatch:
     several tiled radial-gradient dot layers at different sizes/positions/
     opacities overlap to fake random speckle without needing a canvas. */
  #hero .yard.g0{
    background-color:#83745a;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,0.24) 0 1px, transparent 1.4px),
      radial-gradient(circle at 62% 68%, rgba(255,247,225,0.16) 0 1px, transparent 1.3px),
      radial-gradient(circle at 82% 18%, rgba(0,0,0,0.20) 0 1px, transparent 1.3px),
      radial-gradient(circle at 38% 88%, rgba(255,247,225,0.12) 0 1px, transparent 1.2px),
      radial-gradient(circle at 8% 62%, rgba(0,0,0,0.16) 0 1px, transparent 1.2px);
    background-size:9px 9px,13px 13px,7px 7px,16px 16px,11px 11px;
  }
  #hero .yard.g1{
    background-color:#958360;
    background-image:
      radial-gradient(circle at 30% 22%, rgba(0,0,0,0.22) 0 1px, transparent 1.4px),
      radial-gradient(circle at 70% 55%, rgba(255,250,232,0.16) 0 1px, transparent 1.3px),
      radial-gradient(circle at 14% 74%, rgba(0,0,0,0.18) 0 1px, transparent 1.2px),
      radial-gradient(circle at 88% 86%, rgba(255,250,232,0.12) 0 1px, transparent 1.3px),
      radial-gradient(circle at 52% 12%, rgba(0,0,0,0.14) 0 1px, transparent 1.2px);
    background-size:10px 10px,8px 8px,14px 14px,7px 7px,12px 12px;
  }
  #hero .yard.g2{
    background-color:#745e44;
    background-image:
      radial-gradient(circle at 16% 46%, rgba(0,0,0,0.26) 0 1px, transparent 1.4px),
      radial-gradient(circle at 58% 20%, rgba(233,205,170,0.16) 0 1px, transparent 1.3px),
      radial-gradient(circle at 84% 64%, rgba(0,0,0,0.20) 0 1px, transparent 1.3px),
      radial-gradient(circle at 32% 84%, rgba(233,205,170,0.12) 0 1px, transparent 1.2px),
      radial-gradient(circle at 6% 12%, rgba(0,0,0,0.15) 0 1px, transparent 1.2px);
    background-size:7px 7px,15px 15px,9px 9px,12px 12px,10px 10px;
  }
  #hero .yard.g3{
    background-color:#88785c;
    background-image:
      radial-gradient(circle at 24% 64%, rgba(0,0,0,0.22) 0 1px, transparent 1.4px),
      radial-gradient(circle at 66% 30%, rgba(255,248,230,0.15) 0 1px, transparent 1.3px),
      radial-gradient(circle at 90% 78%, rgba(0,0,0,0.18) 0 1px, transparent 1.2px),
      radial-gradient(circle at 44% 8%, rgba(255,248,230,0.11) 0 1px, transparent 1.2px),
      radial-gradient(circle at 10% 92%, rgba(0,0,0,0.14) 0 1px, transparent 1.3px);
    background-size:11px 11px,7px 7px,13px 13px,9px 9px,15px 15px;
  }
  /* Desert ground under every block, so nothing ever reads as void */
  #hero .block-ground{
    position:absolute;
    background-color:#5d5140;
    background-image:
      radial-gradient(circle at 24% 36%, rgba(0,0,0,0.22) 0 1px, transparent 1.4px),
      radial-gradient(circle at 66% 70%, rgba(240,220,185,0.12) 0 1px, transparent 1.3px),
      radial-gradient(circle at 84% 20%, rgba(0,0,0,0.18) 0 1px, transparent 1.3px),
      radial-gradient(circle at 40% 90%, rgba(240,220,185,0.09) 0 1px, transparent 1.2px);
    background-size:10px 10px,14px 14px,8px 8px,12px 12px;
  }
  /* vacant lot: paler, redder caliche gravel */
  #hero .yard.desert{
    background-color:#8e7858;
    background-image:
      radial-gradient(circle at 18% 28%, rgba(0,0,0,0.22) 0 1px, transparent 1.4px),
      radial-gradient(circle at 60% 64%, rgba(255,240,210,0.16) 0 1px, transparent 1.3px),
      radial-gradient(circle at 86% 16%, rgba(0,0,0,0.18) 0 1px, transparent 1.3px),
      radial-gradient(circle at 36% 86%, rgba(255,240,210,0.12) 0 1px, transparent 1.2px),
      radial-gradient(circle at 6% 58%, rgba(0,0,0,0.15) 0 1px, transparent 1.2px);
    background-size:9px 9px,13px 13px,7px 7px,15px 15px,11px 11px;
  }
  #hero .scrub{
    position:absolute;
    background:radial-gradient(circle at 38% 34%, #9a9a78, #717353 58%, #4f5139);
    box-shadow:1px 2px 2px rgba(0,0,0,0.4);
  }
  #hero .tracks{ position:absolute; left:0; top:0; overflow:hidden; pointer-events:none; }
  #hero .tracks path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
  #hero .tracks .band{ stroke:rgba(200,180,142,0.2); }
  #hero .tracks .rut{ stroke:rgba(56,42,26,0.55); }
  #hero .lot{ position:absolute; }
  #hero .walk{ position:absolute; background:rgba(170,162,142,0.85); }
  #hero .yard-svg{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }

  /* turf uses the same fine speckle as the gravel, in green */
  #hero .turf, #hero .park-turf{
    position:absolute;
    background-color:#5d6d42;
    background-image:
      radial-gradient(circle at 22% 30%, rgba(18,28,8,0.35) 0 1px, transparent 1.4px),
      radial-gradient(circle at 64% 70%, rgba(200,220,150,0.18) 0 1px, transparent 1.3px),
      radial-gradient(circle at 84% 18%, rgba(18,28,8,0.28) 0 1px, transparent 1.3px),
      radial-gradient(circle at 40% 86%, rgba(200,220,150,0.14) 0 1px, transparent 1.2px),
      radial-gradient(circle at 8% 60%, rgba(18,28,8,0.22) 0 1px, transparent 1.2px);
    background-size:9px 9px,13px 13px,7px 7px,16px 16px,11px 11px;
  }
  #hero .turf{ border-radius:3px; opacity:0.92; }
  #hero .wall{
    position:absolute;
    border:2px solid rgba(196,186,166,0.85);
    border-radius:1px;
    box-shadow:1px 2px 1px rgba(0,0,0,0.28), inset 1px 2px 1px rgba(0,0,0,0.22);
    pointer-events:none;
  }

  /* Small neighborhood park: a rectangular gravel lot with a turf field,
     sidewalk-to-sidewalk paths and an organic pond (both drawn in an SVG
     by buildPark()), a ramada, picnic tables and spread-out trees. */
  #hero .park-ground{
    position:absolute;
    border:1px solid rgba(0,0,0,0.35);
    background-color:#7d7255;
    background-image:
      radial-gradient(circle at 18% 28%, rgba(0,0,0,0.20) 0 1px, transparent 1.3px),
      radial-gradient(circle at 60% 62%, rgba(233,222,195,0.14) 0 1px, transparent 1.2px),
      radial-gradient(circle at 82% 22%, rgba(0,0,0,0.16) 0 1px, transparent 1.3px),
      radial-gradient(circle at 36% 82%, rgba(233,222,195,0.10) 0 1px, transparent 1.2px);
    background-size:10px 10px,14px 14px,8px 8px,12px 12px;
  }
  #hero .park-turf{ opacity:0.95; }
  #hero .park-svg{ position:absolute; left:0; top:0; overflow:hidden; }
  #hero .park-picnic{ position:absolute; }
  #hero .park-picnic .top{
    position:absolute;
    inset:28% 0;
    background:#8f7248;
    border:1px solid rgba(0,0,0,0.4);
    border-radius:1px;
  }
  #hero .park-picnic .bench{
    position:absolute;
    left:8%; right:8%;
    height:16%;
    background:#7a5f3c;
    border:1px solid rgba(0,0,0,0.35);
  }
  #hero .park-picnic .bench.n{ top:6%; }
  #hero .park-picnic .bench.s{ bottom:6%; }

  /* concrete driveway, from the curb (across the sidewalk) to the garage */
  #hero .driveway{
    position:absolute;
    background:linear-gradient(90deg,#948d7d,#a49c8a,#948d7d);
    box-shadow:0 1px 3px rgba(0,0,0,0.35);
  }

  /* commercial parking lot: asphalt + white stall stripes. A big flat
     patch at the road's own #24-ish tone reads as a hole next to the tan
     gravel (the road gets away with it as a narrow striped band), so the
     lot is sun-faded asphalt a step lighter, with the same soft wear
     patches as .road plus a few oil stains so it has surface texture. */
  #hero .com-lot{
    position:absolute;
    background:
      radial-gradient(ellipse 18% 9% at 30% 22%, rgba(0,0,0,0.14), transparent 70%),
      radial-gradient(ellipse 14% 7% at 68% 47%, rgba(0,0,0,0.12), transparent 70%),
      radial-gradient(ellipse 16% 8% at 36% 76%, rgba(0,0,0,0.12), transparent 70%),
      radial-gradient(ellipse 70% 35% at 55% 30%, rgba(255,255,255,0.035), transparent 65%),
      radial-gradient(ellipse 60% 30% at 40% 80%, rgba(255,255,255,0.03), transparent 65%),
      #3a3833;
    box-shadow:inset 0 0 30px rgba(0,0,0,0.22);
    border:2px solid #b8b2a2;   /* curb edge around the whole lot */
  }
  #hero .com-entry{ position:absolute; overflow:visible; pointer-events:none; }
  #hero .stalls{
    position:absolute;
    background-image:linear-gradient(to bottom, rgba(240,238,230,0.8) 0 2px, transparent 2px);
  }

  /* cul-de-sac: concrete sidewalk ring + asphalt stub and bulb with curb
     lines, and a gravel island in the middle */
  #hero .cds-walk{ position:absolute; background:var(--sidewalk); box-shadow:0 0 0 1px rgba(0,0,0,0.3); }
  #hero .cds-walk.bulb{ border-radius:50%; }
  #hero .cds-road{ position:absolute; background:#252521; }
  #hero .cds-road.stub{ border-left:2px solid var(--curb); border-right:2px solid var(--curb); }
  #hero .cds-road.bulb{ border-radius:50%; border:2px solid var(--curb); box-shadow:inset 0 0 30px rgba(0,0,0,0.35); }
  #hero .cds-island{
    position:absolute;
    border-radius:50%;
    border:2px solid var(--curb);
    background-color:#83745a;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,0.24) 0 1px, transparent 1.4px),
      radial-gradient(circle at 62% 68%, rgba(255,247,225,0.16) 0 1px, transparent 1.3px);
    background-size:9px 9px,13px 13px;
  }

  /* arroyo SVG (channel, aprons, crossing) — see renderArroyo() */
  #hero .arroyo{ position:absolute; overflow:visible; pointer-events:none; }

  /* street lights: a small post + a subtle warm pool of light on the
     pavement — low opacity so it never competes with the gold truck */
  #hero .street-light{
    position:absolute;
    width:5px; height:5px;
    border-radius:50%;
    background:#2e2c26;
    box-shadow:0 0 0 1px rgba(0,0,0,0.4);
  }
  #hero .street-light .light-glow{
    position:absolute;
    left:50%; top:50%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,205,130,0.16), rgba(255,190,110,0.06) 55%, transparent 75%);
    pointer-events:none;
  }

  /* Canopies, not dots: an irregular blobby outline built from 2-3
     overlapping, off-center tone clumps plus a soft offset shadow, so
     foliage reads as clumped mass from directly above rather than a
     perfect circle. Muted olive/green, not gold — reads as vegetation,
     not a UI accent. Each tree's exact blob shape/offsets/tones are set
     inline per-instance by the generator so no two look stamped. */
  #hero .tree{ position:absolute; pointer-events:none; }
  #hero .tree .t-shadow{
    position:absolute;
    inset:10% 6% 0 12%;
    border-radius:50%;
    background:rgba(0,0,0,.42);
    filter:blur(1px);
    transform:translate(3px,4px);
  }
  #hero .tree .t-clump{ position:absolute; }
  #hero .tree .t-tone-0{ background:radial-gradient(circle at 38% 32%, #8c9868, #667444 62%, #4a5530 100%); }
  #hero .tree .t-tone-1{ background:radial-gradient(circle at 42% 38%, #778a52, #59683a 65%, #414c29 100%); }
  #hero .tree .t-tone-2{ background:radial-gradient(circle at 46% 28%, #9ba876, #7a8654 60%, #5c6640 100%); }

  /* ============ SERVICE BILLBOARDS ============ */
  /* Real roadside signage, not a floating UI card: a panel + a support
     post, a drop shadow cast on the ground, angled slightly off-parallel
     to the road (like a real sign turned a few degrees toward traffic).
     The OUTER .callout stays unrotated (it's what GSAP fades/slides in);
     the tilt lives on the inner .billboard so the two transforms never
     fight each other. */
  #hero .callout{
    position:absolute;
    width:min(200px,54vw);
    z-index:3;
    opacity:0;
    transform:translateY(18px);
  }
  #hero.no-motion .callout{ opacity:1; transform:none; position:relative; margin:40px auto; }
  #hero .callout.right{ left:calc(50% + var(--road-half) + var(--sidewalk-w) + 10px); }
  #hero .callout.left{ right:calc(50% + var(--road-half) + var(--sidewalk-w) + 10px); }

  #hero .billboard{ position:relative; transform:rotate(-7deg); }
  #hero .callout.left .billboard{ transform:rotate(7deg); }
  #hero .billboard .bb-shadow{
    position:absolute;
    inset:10px -8px -14px 14px;
    background:rgba(0,0,0,0.38);
    filter:blur(5px);
    border-radius:8px;
    z-index:0;
  }
  #hero .billboard .bb-post{
    position:absolute;
    left:20%; top:100%;
    width:6px; height:18px;
    background:linear-gradient(180deg,#7a7166,#4e483f);
    box-shadow:0 3px 5px rgba(0,0,0,0.4);
    z-index:0;
  }
  #hero .billboard .bb-panel{
    position:relative;
    z-index:1;
    background:rgba(10,10,9,0.9);
    border:1px solid var(--gold);
    border-radius:6px;
    padding:14px 16px;
    box-shadow:0 8px 18px rgba(0,0,0,0.5);
  }
  #hero .billboard .ic{
    width:30px; height:30px;
    border-radius:8px;
    background:rgba(212,160,23,0.12);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:8px;
  }
  #hero .billboard .ic svg{ width:17px; height:17px; stroke:var(--gold); fill:none; }
  #hero .billboard h3{ font-size:1rem; font-weight:700; color:var(--gold-light); margin-bottom:4px; }
  #hero .billboard p{ font-size:0.82rem; line-height:1.45; color:var(--ink-dim); }

  /* ============ JOBSITE LOT + CONTEXT ============ */
  /* The jobsite lot and the turn street it sits on are real children of
     the scrolling street grid (built in buildJobsite(), see the scenery
     script) — not a separate floating overlay — so they scroll and freeze
     in lockstep with the truck's motion path by construction. The lot
     itself is a real 1-2 lot residential parcel (sized off WORLD.houseW),
     clear of the roadway, sidewalks and every other building. Closing copy
     is a SEPARATE, centered overlay (.closing-copy below) so it never has
     to chase the lot's off-center position. */
  #hero .tz-lot{
    position:absolute;
    border:1px solid rgba(0,0,0,0.4);
    border-radius:3px;
    overflow:hidden;
  }
  #hero .tz-lot .ground{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 14% 78%, rgba(130,110,78,.22), transparent 42%),
      radial-gradient(circle at 82% 66%, rgba(96,86,64,.18), transparent 38%),
      radial-gradient(circle at 60% 90%, rgba(150,128,92,.14), transparent 34%),
      radial-gradient(circle at 34% 18%, rgba(104,92,66,.16), transparent 36%),
      radial-gradient(circle at 92% 14%, rgba(120,104,74,.15), transparent 32%),
      #211f19;
  }
  /* foundation: part already sheathed (solid), part still open framing.
     aspect-ratio matches the SVG viewBox so the frame doesn't distort. */
  #hero .tz-lot .frame{
    position:absolute;
    left:4%; top:10%;
    width:52%;
    aspect-ratio:100/62;
  }
  #hero .tz-lot .frame .slab{ fill:#2c2a23; stroke:none; }
  #hero .tz-lot .frame .sheathed{ fill:#8a7a56; stroke:rgba(0,0,0,.3); stroke-width:.6; }
  #hero .tz-lot .frame .wall{ fill:none; stroke:#c9a86f; stroke-width:2; stroke-dasharray:3 2.5; }
  #hero .tz-lot .frame .stud{ stroke:#c9a86f; stroke-width:1; opacity:.8; }
  #hero .tz-lot .frame .truss{ stroke:#a3835a; stroke-width:1.2; opacity:.7; }
  /* stacked pallets of shingles/lumber — layered edge lines, asymmetric */
  #hero .tz-lot .pallet{
    position:absolute;
    background:repeating-linear-gradient(0deg,#b99a63 0 3px,#8f7248 3px 6px);
    border:1px solid rgba(0,0,0,.45);
    box-shadow:0 2px 4px rgba(0,0,0,.5);
    border-radius:1px;
  }
  /* dumpster with a visibly open (darker, debris-flecked) top */
  #hero .tz-lot .dumpster{
    position:absolute;
    background:linear-gradient(135deg,#3a6b4d,#204532);
    border:1px solid rgba(0,0,0,.5);
    border-radius:1px;
    box-shadow:0 3px 6px rgba(0,0,0,.5);
  }
  #hero .tz-lot .dumpster .open{
    position:absolute; inset:12%;
    background:
      radial-gradient(circle at 30% 35%, rgba(180,150,100,.5) 0 3%, transparent 3.5%),
      radial-gradient(circle at 65% 60%, rgba(180,150,100,.4) 0 4%, transparent 4.5%),
      radial-gradient(circle at 80% 25%, rgba(180,150,100,.35) 0 3%, transparent 3.5%),
      #14231a;
    border-radius:1px;
  }
  #hero .tz-lot .portajohn{
    position:absolute;
    background:linear-gradient(135deg,#3a6f96,#20415c);
    border:1px solid rgba(0,0,0,.5);
    border-radius:1px;
    box-shadow:0 3px 6px rgba(0,0,0,.5);
  }
  /* small equipment pile: irregular, not gridded */
  #hero .tz-lot .equipment{ position:absolute; }
  #hero .tz-lot .equipment span{
    position:absolute;
    background:#5f5a4f;
    border:1px solid rgba(0,0,0,.4);
    border-radius:2px;
  }
  #hero .tz-lot .equipment span.wheel{
    background:#2b2a26;
    border-radius:50%;
  }
  /* staging pad + construction entrance: compacted rock, darker and
     rougher than concrete */
  #hero .tz-lot .staging{
    position:absolute;
    background-color:#57524a;
    background-image:
      radial-gradient(circle at 25% 30%, rgba(160,150,132,0.55) 0 1.3px, transparent 1.8px),
      radial-gradient(circle at 70% 65%, rgba(20,18,14,0.45) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 50% 10%, rgba(130,122,108,0.5) 0 1px, transparent 1.5px);
    background-size:8px 8px,10px 10px,7px 7px;
    border:1px dashed rgba(232,214,170,0.35);
    border-bottom:none;
  }
  #hero .const-entry{ position:absolute; z-index:2; overflow:visible; pointer-events:none; }
  #hero .tz-lot .pin{
    position:absolute;
    top:-16px; left:78%;
    transform:translateX(-50%);
    width:22px; height:22px;
    z-index:2;
  }
  #hero .tz-lot .pin svg{ width:100%; height:100%; fill:var(--gold); filter:drop-shadow(0 2px 6px rgba(212,160,23,0.5)); }
  /* a bare graded pad: dirt + survey stakes and string lines, one build
     stage EARLIER than the main lot */
  #hero .tz-lot .stake{
    position:absolute;
    width:2px;
    height:7%;
    background:#c9a86f;
    box-shadow:0 1px 2px rgba(0,0,0,0.4);
  }
  #hero .tz-lot .string{
    position:absolute;
    height:1px;
    background:rgba(233,205,150,0.6);
    transform-origin:0 0;
  }
  /* A contractor's own pickup + utility trailer parked on the turn street
     near the jobsite, at true scale (a pickup ~ the hero truck's length),
     white/grey so it never competes with the gold work truck. z-index:2
     because they sit ON the turn street's asphalt (a .cross-street,
     z-index:1) and #scenery itself has no z-index. */
  #hero .contractor-truck{
    position:absolute;
    z-index:2;
    background:linear-gradient(180deg,#eceae4,#cfcdc6 55%,#b6b4ad);
    border:1px solid rgba(0,0,0,0.5);
    border-radius:22% 8% 8% 22% / 30% 14% 14% 30%;
    box-shadow:2px 4px 5px rgba(0,0,0,0.55);
  }
  #hero .contractor-truck span{ position:absolute; }
  #hero .contractor-truck .hood{
    left:0; top:8%; bottom:8%; width:25%;
    border-radius:40% 0 0 40% / 50% 0 0 50%;
    background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.13) 50%, rgba(0,0,0,0.03));
  }
  #hero .contractor-truck .glass{ top:10%; bottom:10%; background:#1c2128; }
  #hero .contractor-truck .glass.front{ left:26%; width:9%; border-radius:35% 0 0 35% / 20% 0 0 20%; }
  #hero .contractor-truck .cab-roof{ left:35%; width:17%; top:9%; bottom:9%; background:linear-gradient(180deg,#f7f6f2,#d9d7d0); border-radius:2px; }
  #hero .contractor-truck .glass.rear{ left:52%; width:3.5%; }
  #hero .contractor-truck .bed{
    left:57.5%; right:2%; top:9%; bottom:9%;
    background:linear-gradient(180deg,#35342f,#262521);
    border:2px solid #bdbbb4;
    border-radius:2px;
  }
  #hero .contractor-truck .toolbox{ left:0; top:0; bottom:0; width:17%; background:linear-gradient(180deg,#dcdee0,#9ea2a6); }
  #hero .contractor-truck .mirror{ left:28%; width:4%; height:11%; background:#2b2b28; }
  #hero .contractor-truck .mirror.t{ top:-10%; }
  #hero .contractor-truck .mirror.b{ bottom:-10%; }
  #hero .contractor-tongue{
    position:absolute;
    z-index:2;
    background:#34332f;
    clip-path:polygon(0 50%,100% 0,100% 100%);
  }
  #hero .contractor-trailer{
    position:absolute;
    z-index:2;
    background:#3b3a36;
    border:1px solid rgba(0,0,0,0.55);
    border-radius:2px;
    box-shadow:2px 4px 5px rgba(0,0,0,0.5);
  }
  #hero .contractor-trailer span{ position:absolute; }
  #hero .contractor-trailer .deck{ inset:8% 3%; background:repeating-linear-gradient(90deg,#8d7550 0 5px,#766041 5px 6px); }
  #hero .contractor-trailer .fender{ left:38%; width:26%; height:14%; background:#1d1d1b; border-radius:2px; }
  #hero .contractor-trailer .fender.t{ top:-11%; }
  #hero .contractor-trailer .fender.b{ bottom:-11%; }
  #hero .contractor-trailer .load{
    left:10%; width:56%; top:22%; bottom:22%;
    background:repeating-linear-gradient(180deg,#d8c08f 0 3px,#b89c68 3px 4px);
    border:1px solid rgba(0,0,0,0.4);
    box-shadow:1px 2px 2px rgba(0,0,0,0.4);
  }

  /* ============ CLOSING COPY ============ */
  /* A separate, always-centered overlay (same pattern as .hero-copy) so
     the closing message never has to chase the lot's off-center position
     on the side street. */
  #hero .closing-copy{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-40%);
    width:min(420px,84vw);
    z-index:4;
    text-align:center;
    opacity:0;
    pointer-events:none;
  }
  /* same fix as .hero-copy: this overlay lands wherever the frozen street
     happens to be (usually right on the road/lane-line), so it needs its
     own scrim rather than trusting whatever's behind it to be dark. */
  #hero .closing-copy::before{
    content:'';
    position:absolute; left:50%; top:0;
    width:min(640px,160vw); height:120%;
    transform:translate(-50%,-8%);
    background:radial-gradient(ellipse 60% 65% at 50% 40%, rgba(0,0,0,0.62), rgba(0,0,0,0.28) 55%, transparent 78%);
    pointer-events:none;
    z-index:-1;
  }
  #hero .closing-copy h2{
    font-size:clamp(1.3rem,3vw,1.8rem);
    font-weight:800;
    color:var(--ink);
    margin-bottom:8px;
  }
  #hero .closing-copy h2 span{ color:var(--gold-light); }
  #hero .closing-copy p{ font-size:0.9rem; color:var(--ink-dim); margin-bottom:16px; }

  /* small overlay text (eyebrow, sub-lines, scroll cue) can land on light
     sand or sidewalk where the wide vignettes have already faded out, so
     each gets its own tight, feathered backdrop. At 0.8 alpha it stays
     >= 4.5:1 (WCAG AA) for gold and ink-dim even over pure white. */
  #hero .hero-copy .eyebrow, #hero .hero-copy p, #hero .closing-copy p, #hero .hero-copy .scroll-cue{
    background:rgba(14,12,8,0.8);
    box-shadow:0 0 18px 10px rgba(14,12,8,0.8);
    border-radius:12px;
  }
  #hero .hero-copy .eyebrow{ padding:2px 8px; }
  #hero .closing-copy .cta{
    display:inline-block;
    background:var(--gold);
    color:var(--charcoal);
    font-weight:700;
    font-size:0.9rem;
    padding:12px 26px;
    border-radius:999px;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(212,160,23,0.3);
    pointer-events:auto;
  }
  #hero.no-motion .closing-copy{ opacity:1 !important; position:relative; left:auto; top:auto; transform:none; margin:24px auto 60px; }

  /* ============ TRUCK ============ */
  /* The source renders have the vehicle centered in a mostly-transparent
     2048x2048 canvas: it only fills 33.69% of the width and 90.14% of the
     height. We size the CONTAINER to the vehicle's own footprint and crop
     the image against it (scale the image up by 1/0.3369 and clip), so
     --truck-w/--truck-len are the truck's true on-screen size, not a
     mostly-empty bounding square. Those sizes, along with the road/lane/
     sidewalk widths above, all come from one world-scale pass (see the
     WORLD script) so the truck-to-house-to-road ratio stays physically
     believable instead of being tuned piecemeal. */
  #hero{ --truck-crop-scale: 296.8%; --truck-crop-shift: -4.93%; }
  #hero .truck-group{
    position:absolute;
    left: calc(50% + var(--truck-w));   /* right-lane center: half a lane = truck's own width */
    top:60vh;
    width: var(--truck-w);
    height: var(--truck-len);
    transform:translate(-50%,-50%);
    z-index:5;
    will-change:transform;
  }
  #hero.no-motion .truck-group{ position:relative; left:auto; top:0; margin:40px auto; transform:none; }
  #hero .truck-shadow{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
    filter:brightness(0) blur(9px);
    opacity:0.6;
    transform:translate(7px,15px) scale(0.97);
    pointer-events:none;
  }
  #hero .truck-body{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
  }
  #hero .truck-part{ position:absolute; inset:0; overflow:hidden; }
  #hero .truck-part img, #hero .truck-shadow img{
    position:absolute;
    left:50%; top:0;
    width:var(--truck-crop-scale);
    aspect-ratio:1/1;
    max-width:none;
    transform:translate(-50%, var(--truck-crop-shift));
  }
  #hero .truck-part.bed{ z-index:1; transform-origin:50% 49%; will-change:transform; }
  #hero .truck-part.cab{ z-index:2; }

  /* ============ HERO COPY (intro overlay) ============ */
  #hero .hero-copy{
    position:absolute;
    top:0; left:0; right:0;
    height:100%;
    z-index:6;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:9vh;
    text-align:center;
    pointer-events:none;
  }
  /* Dark plate behind the headline block. It used to be one radial
     ellipse sized to the whole 100vh overlay, so it had thinned to ~28%
     by the ends of the headline lines and the gold "first" sat on bare
     arroyo gravel (2.6:1). Now it's sized BY the text block it sits in —
     same box, same motion, every viewport — solid 80% under every glyph
     and feathered outward by the shadow. It also fades on its own,
     after the text (see the timeline), so the words never thin out over
     bright gravel mid-fade. */
  #hero .hero-copy-block{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    isolation:isolate;
  }
  /* one blurred rectangle (not box + box-shadow, which left a visible
     card edge where the two alphas met): the box reaches ~2 blur radii
     past the text, so every glyph sits on the full-strength middle and
     only the margin feathers off */
  #hero .hero-scrim{
    position:absolute;
    inset:-56px -84px;
    z-index:-1;
    border-radius:48px;
    background:rgba(12,10,6,0.82);
    filter:blur(28px);
    will-change:opacity;
    pointer-events:none;
  }
  #hero .hero-copy .eyebrow{
    color:var(--gold);
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-size:0.72rem;
    font-weight:600;
    margin-bottom:14px;
  }
  #hero .hero-copy h1{
    font-size:clamp(1.9rem,5.4vw,3.4rem);
    font-weight:800;
    line-height:1.08;
    max-width:14ch;
    color:var(--ink);
  }
  #hero .hero-copy h1 span{ color:var(--gold-light); }
  #hero .hero-copy p{
    margin-top:16px;
    max-width:36ch;
    color:var(--ink-dim);
    font-size:clamp(0.9rem,2vw,1.05rem);
    line-height:1.5;
  }
  /* pinned to the bottom of the screen, well below the truck (top:58-60vh),
     and faded out by the script as soon as the visitor starts scrolling */
  #hero .hero-copy .scroll-cue{
    position:absolute;
    left:50%;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);
    padding:4px 10px;
    transition:opacity .35s ease;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  #hero .hero-copy .scroll-cue svg{ width:14px; height:14px; stroke:var(--gold); fill:none; animation:bob 1.6s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
  #hero.no-motion .hero-copy{ position:relative; }
  #hero.no-motion .hero-copy .scroll-cue{ display:none; }
  #hero.scrolled .hero-copy .scroll-cue{ opacity:0; }

  /* ============ FOOTER ============ */

  /* ============ MOBILE: fewer layers, simplified ============ */
  @media (max-width:700px){
    #hero .skyline{ display:none; }
    #hero .callout{ width:min(150px,42vw); padding:10px 12px; }
    #hero .callout .ic{ width:24px; height:24px; margin-bottom:6px; }
    #hero .callout .ic svg{ width:14px; height:14px; }
    #hero .callout h3{ font-size:0.86rem; }
    #hero .callout p{ font-size:0.74rem; line-height:1.35; }
    #hero .callout.right{ left:auto; right:6px; }
    #hero .callout.left{ right:auto; left:6px; }
    #hero .truck-group{ top:58vh; }
    #hero .hero-copy{ padding-top:7vh; }
    #hero .stop-sign{ --ss:11px; }
  }

  @media (prefers-reduced-motion:reduce){
    #hero .hero-copy .scroll-cue svg{ animation:none; }
  }

/* ============ SITE INTEGRATION ============ */
/* The site's fixed header sits over the top of the scene and is
   transparent until 40px of scroll, so darken the scene's top edge to keep
   the logo, links and phone number legible over the gravel. Sits above the
   street (z2) and below the truck (z5) and copy (z6). */
#hero .scene::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:150px;
  z-index:3;
  background:linear-gradient(to bottom, rgba(10,10,10,0.88), rgba(10,10,10,0.55) 55%, transparent);
  pointer-events:none;
}
/* start the copy below the ~85px fixed header instead of 9vh/7vh */
#hero .hero-copy{ padding-top:calc(88px + 3vh); }
@media (max-width:768px){
  #hero .hero-copy{ padding-top:calc(88px + 1.5vh); }
  /* clear the sticky Call Now bar (56px) */
  #hero .hero-copy .scroll-cue{ bottom:calc(56px + 18px + env(safe-area-inset-bottom, 0px)); }
}

/* The truck is pinned at 60vh (58vh on phones) and the whole turn/jobsite
   geometry is built around that, so on short screens the copy has to fit
   between the header and the truck instead: size the headline off the
   viewport height as well as width, and tighten spacing when height is
   scarce. Tested 320x568 through 1920x1080: sub-line always ends >=16px
   above the truck. The truck also sits above the copy layer so the scrim's
   feathered edge can never dim it. */
#hero .truck-group{ z-index:7; }
@media (min-width:769px){
  #hero .hero-copy{ padding-top:calc(84px + 2vh); }
  #hero .hero-copy h1{ font-size:clamp(1.9rem, min(5.4vw, 6.2vh), 3.4rem); }
}
@media (min-width:769px) and (max-height:760px){
  #hero .hero-copy{ padding-top:calc(80px + 1vh); }
  #hero .hero-copy .eyebrow{ margin-bottom:8px; }
  #hero .hero-copy h1{ font-size:clamp(1.9rem, min(5.4vw, 5.6vh), 3.4rem); }
  #hero .hero-copy h1 + p{ margin-top:10px; }
}
@media (max-width:768px) and (max-height:700px){
  #hero .hero-copy{ padding-top:calc(82px + 0.5vh); }
  #hero .hero-copy .eyebrow{ margin-bottom:8px; }
  #hero .hero-copy h1{ font-size:1.6rem; }
  #hero .hero-copy h1 + p{ margin-top:10px; font-size:0.85rem; line-height:1.45; }
}

/* Reduced motion / no GSAP: show the opening frame as one static screen —
   street parked at its start position, truck in its lane, headline and
   scrim on top — instead of the standalone build's fallback, which laid
   the whole 2600px street out flat (headline ~2600px down the page) and
   overflowed sideways on phones. Billboards and the jobsite closing copy
   only make sense in motion, so they're left out here; the page's own
   CTAs follow directly below. */
#hero.no-motion{ height:auto; }
#hero.no-motion .scene{ position:relative; height:100vh; min-height:560px; overflow:hidden; }
#hero.no-motion .street{ position:absolute; height:320vh; min-height:0; transform:translateY(-220vh) !important; }
#hero.no-motion .truck-group{ position:absolute; left:calc(50% + var(--truck-w)); top:60vh; margin:0; transform:translate(-50%,-50%); }
#hero.no-motion .hero-copy{ position:absolute; padding-left:0; padding-right:0; }
#hero.no-motion .callout,
#hero.no-motion .closing-copy{ display:none; }
@media (max-width:700px){ #hero.no-motion .truck-group{ top:58vh; } }