/* Hero — ported from design/mockup.html (.hero). */

.section--hero{position:relative;padding:0;background:
  radial-gradient(1100px 500px at 78% -10%, rgba(28,46,78,.55), transparent 60%),
  linear-gradient(180deg,var(--asphalt) 0%,var(--asphalt-2) 100%);
  color:#fff;overflow:hidden}
.section--hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:22px 22px;pointer-events:none}
.section--hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;padding-top:96px;padding-bottom:110px;align-items:center}
.section--hero h1{margin-top:20px}
.section--hero h1 .accent{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9)}
.section--hero p.lede{color:rgba(255,255,255,.72);margin:26px 0 36px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-phone{margin-top:34px;display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.85)}
.hero-phone strong{font-family:var(--display);font-size:26px;letter-spacing:.04em;font-weight:600;color:#fff}
.hero-phone .badge{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hero-phone .badge svg{width:18px;height:18px}
.hero-phone .label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* Road panel — pure CSS, no image. */
.road-panel{position:relative;height:460px;background:linear-gradient(160deg,#23262D 0%,#191C22 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.road-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px}
.road-center{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);
  background-image:linear-gradient(180deg,#fff 0 42px,transparent 42px 70px);
  background-size:3px 70px;animation:roll 2.6s linear infinite;opacity:.9}
.road-edge{position:absolute;top:0;bottom:0;width:3px;background:var(--red);opacity:.85}
.road-edge.l{left:34px}
.road-edge.r{right:34px;background:var(--navy);filter:brightness(1.6)}
@keyframes roll{to{background-position-y:70px}}
.road-stats{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08)}
.road-stats div{background:rgba(20,22,27,.86);backdrop-filter:blur(4px);padding:20px 24px}
.road-stats strong{display:block;font-family:var(--display);font-weight:700;font-size:34px;line-height:1;letter-spacing:.02em;color:var(--sand)}
.road-stats span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

@media(max-width:1020px){
  .section--hero .wrap{grid-template-columns:1fr;padding-top:70px;padding-bottom:80px}
  .road-panel{height:380px}
}

/* Photo in place of the animated road graphic. The stats plate stays over it. */
.road-panel--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.road-panel--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,21,26,.1) 40%,rgba(19,21,26,.72) 100%)}
.road-panel--photo .road-stats{z-index:2}