:root{
  --black:#0a0a0a;
  --white:#f5f2ee;
  --ink:#141110;
  --paper:#f5f2ee;
  --red:#c8402f;
  --red-deep:#8f2418;
  --line-on-black: rgba(245,242,238,.16);
  --line-on-white: rgba(10,10,10,.14);
  --sign-green:#1f6b3f;
  --sign-green-deep:#123f25;
  --road-yellow:#e8b923;
  --sun-accent:#ff5a3c;
  --ff-display:"Anton", "Arial Narrow", sans-serif;
  --ff-body:"Overpass", -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img,video{max-width:100%; display:block;}

/* ---------------- page arrival: cross-document view transitions ---------------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{
    navigation:auto;
  }
  ::view-transition-old(root){
    animation:view-depart .6s cubic-bezier(.5,0,.25,1) both;
    clip-path:polygon(100.0% 0.02%, 99.92% 100.0%, 64.82% 100.0%, 0.0% 80.03%, 0.07% 77.91%, 1.94% 75.68%, 4.76% 75.61%, 5.97% 73.95%, 6.0% 71.84%, 5.24% 70.85%, 2.62% 70.69%, 1.86% 69.73%, 2.45% 66.76%, 1.43% 65.99%, 2.0% 65.12%, 1.53% 64.2%, 2.95% 64.0%, 5.01% 61.63%, 4.89% 59.47%, 5.54% 58.9%, 4.82% 54.92%, 6.51% 53.37%, 6.89% 51.87%, 11.77% 49.07%, 11.04% 47.61%, 7.4% 45.69%, 7.5% 44.42%, 5.95% 41.2%, 3.09% 38.29%, 3.06% 35.56%, 3.65% 34.85%, 2.89% 34.25%, 4.08% 33.78%, 4.24% 32.8%, 2.36% 27.32%, 2.78% 25.15%, 1.76% 21.64%, 2.36% 20.41%, 1.43% 19.16%, 1.01% 16.58%, 3.15% 15.58%, 7.08% 15.49%, 9.72% 17.79%, 11.54% 17.65%, 13.29% 14.65%, 13.23% 0.0%, 97.64% 0.02%);
    transform-origin:50% 50%;
  }
  ::view-transition-new(root){
    animation:view-arrive .5s cubic-bezier(.2,0,.2,1) .1s both;
  }
  @keyframes view-depart{
    to{ opacity:0; transform:scale(.06); filter:brightness(.5); }
  }
  @keyframes view-arrive{
    from{ opacity:0; transform:scale(.97); filter:brightness(.7); }
  }
}

/* ---------------- custom cursor: dot that stretches into a sign near links ---------------- */
.cursor-dot{ display:none; }
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  a, button{ cursor:none; }
  .cursor-dot{
    position:fixed; top:0; left:0; z-index:400;
    width:10px; height:10px; border-radius:50%;
    background-color:var(--sign-green);
    border:2px solid #f5f2ee;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    transition:width .25s cubic-bezier(.2,0,.2,1), height .25s cubic-bezier(.2,0,.2,1), border-radius .25s ease, box-shadow .25s ease, background-image .25s ease;
    will-change:transform;
  }
  .cursor-dot.is-active{
    width:44px; height:26px; border-radius:5px;
    box-shadow:0 6px 14px rgba(0,0,0,.45);
    background-image:
      radial-gradient(circle at 6px 6px, rgba(0,0,0,.4) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at calc(100% - 6px) 6px, rgba(0,0,0,.4) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at 6px calc(100% - 6px), rgba(0,0,0,.4) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(0,0,0,.4) 0 1.5px, transparent 1.6px);
  }
  .cursor-arrow{
    font-size:13px; line-height:1; color:#fff; opacity:0;
    font-family:var(--ff-body); font-weight:800;
    transition:opacity .15s ease .05s;
  }
  .cursor-dot.is-active .cursor-arrow{ opacity:1; }
}

.wrap{ max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }

/* ---------------- intro: spray-painted Arizona outline ---------------- */
.intro-gate{
  position:fixed; inset:0; z-index:300;
  background:#0a0a0a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  cursor:pointer;
  transition:opacity .7s ease;
}
.intro-gate.intro-out{ opacity:0; pointer-events:none; }
.intro-svg{
  width:auto; height:auto;
  max-width:min(70vw,520px);
  max-height:68vh;
  overflow:visible;
}
.intro-path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw-az 1.6s cubic-bezier(.65,0,.35,1) .05s forwards;
}
.intro-path--main{
  stroke:var(--red);
  stroke-width:9;
}
.intro-path--back{
  stroke:#e0554a;
  stroke-width:15;
  opacity:.4;
  animation-delay:0s;
}
@keyframes draw-az{ to{ stroke-dashoffset:0; } }
.intro-head{
  fill:var(--white);
  filter:drop-shadow(0 0 6px rgba(200,64,47,.7));
}
.intro-horizon,
.intro-sun{
  fill:none;
  stroke:var(--white);
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw-line ease forwards;
}
.intro-horizon{
  stroke-width:6;
  animation-duration:.35s;
  animation-delay:1.35s;
}
.intro-sun{
  stroke:var(--sun-accent);
  stroke-width:8;
  animation-duration:.45s;
  animation-delay:1.45s;
}
@keyframes draw-line{ to{ stroke-dashoffset:0; } }
.intro-cactus-part{
  fill:var(--white);
  fill-opacity:0;
  stroke:var(--white);
  stroke-width:3;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw-cactus .35s ease forwards, fill-cactus .3s ease forwards;
}
@keyframes draw-cactus{ to{ stroke-dashoffset:0; } }
@keyframes fill-cactus{ to{ fill-opacity:1; } }
.intro-wordmark{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(20px,4vw,30px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transform:translateY(14px);
  animation:wordmark-in .5s ease 2.7s forwards;
}
.intro-wordmark .accent{ color:var(--red); }
@keyframes wordmark-in{ to{ opacity:1; transform:translateY(0); } }
.intro-skip{
  position:absolute; bottom:34px; right:40px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,242,238,.5);
}
@media (max-width:600px){
  .intro-svg{ max-width:82vw; max-height:60vh; }
  .intro-wordmark{ font-size:18px; }
  .intro-skip{ right:20px; bottom:24px; }
}

/* ---------------- top nav ---------------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,5vw,64px);
  mix-blend-mode:difference;
}
.topnav .brand{
  font-family:var(--ff-display);
  font-size:15px; letter-spacing:.08em; text-decoration:none; color:#fff;
  text-transform:uppercase;
}
.topnav .brand .accent{ color:var(--red); mix-blend-mode:normal; }
.topnav nav{ display:flex; gap:26px; }
.topnav nav a{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:#fff; font-weight:600;
}

/* mobile menu button + full-screen sign panel (wired up in nav.js) */
.nav-toggle{
  display:none;
  width:44px; height:44px; margin-right:-10px; padding:0;
  background:none; border:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display:block; width:22px; height:2px; background:#fff;
  transition:transform .25s ease, background-color .25s ease;
}
.nav-toggle-bars{ position:relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after{ content:""; position:absolute; left:0; }
.nav-toggle-bars::before{ top:-7px; }
.nav-toggle-bars::after{ top:7px; }
.topnav.is-open .nav-toggle-bars{ background:transparent; }
.topnav.is-open .nav-toggle-bars::before{ transform:translateY(7px) rotate(45deg); }
.topnav.is-open .nav-toggle-bars::after{ transform:translateY(-7px) rotate(-45deg); }
html.nav-locked, html.nav-locked body{ overflow:hidden; }

/* ---------------- road trip: driving POV, highway signs passing by ---------------- */
.roadtrip{
  position:relative;
  height:700vh;
  background:var(--black);
}
.roadtrip-sticky{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden;
  background:#000;
}

.roadtrip-road{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.road-bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.8);
  transition:opacity .35s ease;
}
.road-bg-video.is-swapping{ opacity:0; }
.roadtrip-road::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.6) 100%);
}
.road-signs{ position:absolute; inset:0; z-index:2; }
.road-sign{
  position:absolute; left:28%; top:63%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  padding:16px 24px;
  background-color:var(--sign-green);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(0,0,0,.4) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(0,0,0,.4) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(0,0,0,.4) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(0,0,0,.4) 0 2.5px, transparent 2.6px);
  border:3px solid #f5f2ee;
  border-radius:4px;
  box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
  text-decoration:none;
  white-space:nowrap;
  pointer-events:auto;
  transition:box-shadow .2s ease, filter .2s ease;
}
.road-sign.is-inactive{ pointer-events:none; }
.road-sign:hover{
  filter:brightness(1.08);
  box-shadow:0 18px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 3px rgba(245,242,238,.2);
}
.road-sign:active{
  filter:brightness(.9);
  box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 2px 5px rgba(0,0,0,.4);
}
.road-sign-city{
  font-family:var(--ff-body); font-weight:800; font-size:22px; letter-spacing:.01em;
  color:#fff; text-transform:uppercase; line-height:1;
}
.road-sign-section{
  font-family:var(--ff-body); font-weight:700; font-size:12px; letter-spacing:.1em;
  color:#fff; text-transform:uppercase; margin-top:8px; opacity:.92;
}

.roadtrip-panel-col{
  position:absolute; z-index:3;
  top:50%; right:clamp(14px,4vw,44px);
  transform:translateY(-50%);
  width:min(300px,74vw);
  container-type:inline-size;
  background:rgba(245,242,238,.06);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(245,242,238,.22);
  border-radius:4px;
  padding:clamp(16px,7cqi,24px);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.roadtrip-kicker{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,242,238,.6); font-weight:700; margin-bottom:clamp(18px,7cqi,28px);
}
.roadtrip-kicker .accent{ color:var(--red); }
.roadtrip-panel{
  padding-top:clamp(14px,5cqi,20px);
  border-top:3px dashed var(--road-yellow);
}
.mile-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:var(--sign-green);
  border:2px solid #f5f2ee;
  border-radius:3px;
  margin-bottom:16px;
}
.mile-badge span{
  font-family:var(--ff-body); font-weight:700; font-size:10px; letter-spacing:.08em;
  color:#fff; opacity:.85;
}
.mile-badge strong{
  font-family:var(--ff-body); font-weight:800; font-size:15px; letter-spacing:.04em;
  color:#fff;
}
.roadtrip-copy{
  font-size:15px; line-height:1.65; color:rgba(245,242,238,.75);
  margin:0; min-height:5.6em;
}
.caret{
  display:inline-block; width:2px; height:1em; vertical-align:text-bottom;
  background:var(--red); margin-left:2px; animation:caret-blink 1s step-end infinite;
}
@keyframes caret-blink{ 50%{ opacity:0; } }

/* ---------------- homepage proof strip ---------------- */
.proof-strip{ background:var(--white); color:var(--ink); padding:clamp(50px,7vw,90px) 0; }
.proof-strip .pillar-eyebrow{ color:var(--red); opacity:1; }
.proof-strip h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4vw,44px); line-height:1; margin:0 0 40px;
}
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.proof-card{
  display:block; text-decoration:none; color:inherit;
}
.proof-card-frame{
  border-radius:8px; overflow:hidden; position:relative;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  transition:transform .3s cubic-bezier(.2,0,.2,1), box-shadow .3s ease;
}
.proof-card:hover .proof-card-frame{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(0,0,0,.24); }
.proof-card-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; display:block; }
.proof-card-stat{
  position:absolute; left:10px; bottom:10px;
  background:rgba(10,10,10,.78); color:#fff;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:5px 9px; border-radius:4px;
}
.proof-card h3{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:16px; margin:14px 0 4px;
}
.proof-card span.proof-arrow{ font-size:12px; opacity:.55; }
@media (max-width:820px){
  .proof-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .proof-grid{ grid-template-columns:1fr; }
}

/* ---------------- footer ---------------- */
footer{
  background:var(--black);
  padding:clamp(60px,8vw,100px) 0 40px;
  border-top:1px solid var(--line-on-black);
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:40px;
  margin-bottom:70px;
}
footer h3{
  font-family:var(--ff-display);
  font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,5vw,56px);
  margin:0 0 20px; line-height:1;
  max-width:12ch;
}
footer .cta{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:14px 26px; border:1px solid rgba(245,242,238,.4);
}
footer .cta:hover{ background:#fff; color:#000; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ text-decoration:none; font-size:13px; letter-spacing:.05em; color:rgba(245,242,238,.7); }
.footer-links a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,242,238,.4);
  padding-top:26px; border-top:1px solid var(--line-on-black);
}
.footer-odometer{ color:var(--road-yellow); }

/* ---------------- sub-pages: full-bleed landmark hero ---------------- */
.landmark-hero{
  position:relative;
  min-height:82vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#000;
}
.landmark-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.85);
}
.landmark-hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.88) 100%);
}
.landmark-hero .wrap{
  position:relative; z-index:2; width:100%;
  padding-top:clamp(120px,15vw,170px);
  padding-bottom:clamp(50px,7vw,80px);
}
.landmark-hero .pillar-eyebrow{ color:var(--red); opacity:1; }
.landmark-hero h1{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,8vw,104px); line-height:.9; margin:14px 0 24px; color:#fff;
}
.landmark-hero p{ font-size:18px; line-height:1.7; max-width:56ch; color:rgba(245,242,238,.85); }
.landmark-hero .back-link{ color:#fff; }
.welcome-sign{
  display:inline-flex; align-items:center; gap:14px;
  padding:9px 18px;
  background:var(--sign-green);
  border:2px solid #f5f2ee;
  border-radius:3px;
  margin:22px 0 8px;
}
.welcome-sign-city{
  font-family:var(--ff-body); font-weight:800; font-size:13px; letter-spacing:.03em;
  color:#fff; text-transform:uppercase; white-space:nowrap;
}
.welcome-sign-elev{
  font-family:var(--ff-body); font-weight:700; font-size:11px; letter-spacing:.06em;
  color:#fff; opacity:.85; white-space:nowrap;
  padding-left:14px; border-left:1px solid rgba(245,242,238,.4);
}
.mile-strip{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 8px;
  padding:7px 14px;
  background:rgba(10,10,10,.55);
  border:1px solid rgba(245,242,238,.22);
  border-radius:3px;
}
.mile-strip-mi{
  font-family:var(--ff-body); font-weight:800; font-size:11px; letter-spacing:.05em;
  color:var(--road-yellow); white-space:nowrap;
}
.mile-strip-track{ display:flex; align-items:center; gap:7px; }
.mile-strip-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:rgba(245,242,238,.35);
  display:block;
  transition:background .2s ease, transform .2s ease;
}
a.mile-strip-dot:hover{ background:rgba(245,242,238,.8); transform:scale(1.3); }
.mile-strip-dot.is-current{
  width:9px; height:9px;
  background:var(--sign-green);
  box-shadow:0 0 0 3px rgba(111,174,78,.35);
}
.mile-strip-label{
  font-family:var(--ff-body); font-weight:700; font-size:10px; letter-spacing:.08em;
  color:rgba(245,242,238,.6); text-transform:uppercase; white-space:nowrap;
}
@media (max-width:600px){
  .mile-strip{ flex-wrap:wrap; row-gap:6px; }
}
.landmark-credit{
  position:absolute; z-index:2; right:clamp(20px,5vw,64px); bottom:18px;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(245,242,238,.4);
}
.back-link{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.7; margin-bottom:34px;
}
.back-link:hover{ opacity:1; }

.pillar-eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; opacity:.55; margin-bottom:14px;
}
.pillar-link{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none;
  font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:2px solid currentColor;
}
.pillar-link .arrow{ transition:transform .25s ease; }
.pillar-link:hover .arrow{ transform:translateX(6px); }

.body-section{ padding:clamp(40px,6vw,70px) 0; }
.body-section.on-white{ background:var(--white); color:var(--ink); }
.body-section.on-black{ background:var(--black); color:var(--white); }
.body-section .cols{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.body-section h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4vw,44px); line-height:1; margin:0 0 20px;
}
.body-section p{ font-size:16px; line-height:1.75; opacity:.85; margin:0 0 16px; }
.stat-row{ display:flex; gap:40px; flex-wrap:wrap; margin-top:30px; }
.stat-row div strong{ display:block; font-family:var(--ff-display); font-size:38px; }
.stat-row div span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }

.live-wire{ background:var(--black); color:var(--white); padding:clamp(50px,7vw,80px) 0; }
.live-wire-head{ display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.live-dot{
  width:9px; height:9px; border-radius:50%; background:var(--red); flex-shrink:0;
  animation:live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(200,64,47,.55); }
  70%{ box-shadow:0 0 0 9px rgba(200,64,47,0); }
  100%{ box-shadow:0 0 0 0 rgba(200,64,47,0); }
}
.live-wire-head h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,36px); margin:0; letter-spacing:.02em;
}
.live-wire-list{ list-style:none; margin:0 0 26px; padding:0; }
.live-wire-list li{
  padding:16px 0; border-top:1px solid var(--line-on-black);
  font-size:16px; line-height:1.5;
}
.live-wire-list li:last-child{ border-bottom:1px solid var(--line-on-black); }
.live-wire-region{
  display:inline-block; font-family:var(--ff-body); font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-right:12px;
}
.live-wire-loading,
.live-wire-error{ opacity:.6; font-style:italic; }
.live-wire-error a{ font-style:normal; text-decoration:underline; opacity:1; color:inherit; }
.live-wire .pillar-link{ color:#fff; border-color:rgba(245,242,238,.5); }

/* ---------------- web: services as highway exit signs ---------------- */
.services{ background:var(--white); color:var(--ink); padding:clamp(50px,7vw,90px) 0; border-top:1px solid var(--line-on-white); }
.services h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4vw,44px); line-height:1; margin:10px 0 14px;
}
.services-lede{ max-width:64ch; margin:0 0 40px; line-height:1.6; }
.exit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:40px; }
.exit-sign{
  position:relative; margin-top:16px; margin-bottom:18px;
  padding:22px 20px 18px; border-radius:6px;
  background:var(--sign-green); color:#fff;
  border:3px solid #fff; box-shadow:0 0 0 3px var(--sign-green), 0 14px 30px rgba(0,0,0,.18);
  transition:transform .25s ease;
}
.exit-card:hover .exit-sign{ transform:translateY(-4px); }
.exit-tab{
  position:absolute; top:-16px; right:18px;
  padding:4px 12px; border-radius:4px 4px 0 0;
  background:var(--sign-green); border:3px solid #fff; border-bottom:0;
  font-family:var(--ff-body); font-weight:800; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
}
.exit-name{
  display:block; font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px,2.4vw,28px); line-height:1;
}
.exit-card p{ margin:0; font-size:15px; line-height:1.65; }
@media (max-width:820px){
  .exit-grid{ grid-template-columns:1fr; gap:22px; }
}

/* ---------------- sports: YouTube drive-in ---------------- */
.drive-in{
  background:linear-gradient(180deg, var(--black) 0%, #15100c 100%);
  color:var(--white); padding:clamp(50px,7vw,90px) 0;
}
.drive-in-marquee{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:fit-content; max-width:100%; margin:0 auto 22px;
  padding:12px 28px; border-radius:6px;
  background:var(--sign-green); border:3px solid #fff;
  box-shadow:0 0 0 3px var(--sign-green), 0 18px 40px rgba(0,0,0,.5);
  text-align:center;
}
.drive-in-now{
  font-family:var(--ff-body); font-weight:800; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--road-yellow);
}
.drive-in-title{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(20px,3.2vw,32px); line-height:1.05; color:#fff;
}
.drive-in-screen{
  max-width:900px; margin-inline:auto;
  aspect-ratio:16/9; background:#000;
  border:10px solid #1c1c1c; border-radius:4px;
  box-shadow:0 0 90px rgba(255,90,60,.14), 0 40px 80px rgba(0,0,0,.6);
}
.drive-in-screen iframe{ width:100%; height:100%; border:0; display:block; }
.drive-in-foot{
  max-width:900px; margin:28px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.drive-in-foot p{ margin:0; max-width:52ch; opacity:.75; line-height:1.55; }
.drive-in .pillar-link{ color:#fff; border-color:rgba(245,242,238,.5); }
@media (max-width:600px){
  .drive-in-screen{ border-width:6px; }
}

.full-visual{ width:100%; aspect-ratio:16/8; overflow:hidden; }
.full-visual img{ width:100%; height:100%; object-fit:cover; }

/* ---------------- device showcase: tilted browser frame / phone mockup ---------------- */
.device-showcase{ background:var(--black); padding:clamp(60px,9vw,110px) 0; perspective:1400px; }
.browser-frame{
  max-width:900px; margin-inline:auto;
  border-radius:8px; overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,0,.2,1);
  will-change:transform;
}
.browser-chrome{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px;
  background:#1c1c1c;
}
.chrome-dot{ width:10px; height:10px; border-radius:50%; background:#4a4a4a; flex-shrink:0; }
.chrome-url{
  margin-left:10px; padding:5px 16px; border-radius:20px;
  background:#111; color:rgba(245,242,238,.5);
  font-size:11px; font-family:var(--ff-body); letter-spacing:.02em;
}
.browser-frame img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; display:block; }

.phone-frame{
  width:min(300px,72vw); margin-inline:auto;
  aspect-ratio:9/19.5;
  border-radius:44px;
  border:10px solid #1a1a1a;
  background:#000;
  overflow:hidden;
  position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,0,.2,1);
  will-change:transform;
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38%; height:22px; background:#1a1a1a; border-radius:0 0 14px 14px; z-index:2;
}
.phone-frame img{ width:100%; height:100%; object-fit:cover; object-position:top; }

.phone-fan{
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,0,.2,1);
  will-change:transform;
}
.phone-fan .phone-frame{
  margin:0; flex-shrink:0;
  transition:transform .4s cubic-bezier(.2,0,.2,1), filter .4s ease;
}
.phone-fan .phone-frame.is-center{ width:min(240px,56vw); z-index:3; }
.phone-fan .phone-frame.is-side{
  width:min(195px,44vw); z-index:1; filter:brightness(.62) saturate(.85);
}
.phone-fan .phone-frame.side-left{ margin-right:-64px; transform:rotate(-11deg) translateY(26px); }
.phone-fan .phone-frame.side-right{ margin-left:-64px; transform:rotate(11deg) translateY(26px); }
.phone-fan:hover .phone-frame.side-left{ transform:rotate(-15deg) translateY(14px) translateX(-6px); }
.phone-fan:hover .phone-frame.side-right{ transform:rotate(15deg) translateY(14px) translateX(6px); }
.phone-fan:hover .phone-frame.is-side{ filter:brightness(.8) saturate(1); }
.phone-fan-caption{
  text-align:center; margin-top:28px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(245,242,238,.5);
}
@media (max-width:600px){
  /* keep the fan inside the screen: smaller side phones, tucked further behind the center one */
  .phone-fan .phone-frame.is-center{ width:min(220px,52vw); }
  .phone-fan .phone-frame.is-side{ width:min(150px,34vw); }
  .phone-fan .phone-frame.side-left{ margin-right:-24vw; }
  .phone-fan .phone-frame.side-right{ margin-left:-24vw; }
}

/* ---------------- practice-build cards ---------------- */
.build-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
}
.build-card-frame{
  border-radius:8px; overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  background:#111;
}
.build-card-chrome{
  display:flex; align-items:center; gap:6px; padding:9px 12px; background:#1c1c1c;
}
.build-card-chrome .chrome-dot{ width:7px; height:7px; border-radius:50%; background:#4a4a4a; flex-shrink:0; }
.build-card-frame img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; display:block; }
.build-card-tag{
  display:inline-block; margin-top:18px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--road-yellow);
}
.build-card h3{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:22px; margin:6px 0 8px;
}
.build-card p{ font-size:14px; line-height:1.65; opacity:.75; margin:0; }
@media (max-width:820px){
  .build-grid{ grid-template-columns:1fr; }
}

/* ---------------- contact sign: pressable highway-sign button ---------------- */
.contact-sign{
  display:inline-flex; flex-direction:column; gap:4px;
  padding:16px 24px;
  background-color:var(--sign-green);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(0,0,0,.35) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(0,0,0,.35) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(0,0,0,.35) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(0,0,0,.35) 0 2.5px, transparent 2.6px);
  border:3px solid var(--ink);
  border-radius:4px;
  text-decoration:none;
  box-shadow:0 8px 0 var(--sign-green-deep);
  transition:transform .15s ease, box-shadow .15s ease;
}
.contact-sign:hover{ transform:translateY(-2px); box-shadow:0 10px 0 var(--sign-green-deep); }
.contact-sign:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--sign-green-deep); }
.contact-sign-label{
  font-family:var(--ff-body); font-weight:700; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
}
.contact-sign-value{
  font-family:var(--ff-body); font-weight:800; font-size:16px; letter-spacing:.01em;
  color:#fff;
}

@media (max-width:820px){
  .body-section .cols{ grid-template-columns:1fr; }
  .topnav nav{ display:none; }
  .nav-toggle{ display:flex; position:relative; z-index:2; }
  /* the bar blends with mix-blend-mode:difference; turn that off while the menu is open */
  .topnav.is-open{ mix-blend-mode:normal; }
  .topnav.is-open .brand{ position:relative; z-index:2; }
  .topnav.is-open nav{
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:14px;
    position:fixed; inset:0; z-index:1;
    padding:96px clamp(20px,5vw,64px) 40px;
    background:rgba(10,10,10,.97);
    overflow-y:auto;
  }
  .topnav.is-open nav a{
    font-family:var(--ff-body); font-size:18px; font-weight:800; letter-spacing:.06em;
    padding:12px 20px; min-width:220px;
    background:var(--sign-green);
    border:2px solid rgba(255,255,255,.9); border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .topnav.is-open nav a::after{ content:" \2192"; opacity:.7; }
  .footer-top{ flex-direction:column; }

  .roadtrip{ height:500vh; }
  .road-sign{ padding:10px 16px; }
  .road-sign-city{ font-size:16px; }
  .road-sign-section{ font-size:10px; }
  .roadtrip-panel-col{
    top:auto; bottom:20px; right:16px; left:16px;
    width:auto; transform:none;
  }

  .welcome-sign{ flex-wrap:wrap; gap:6px 14px; }
  .welcome-sign-elev{ border-left:none; padding-left:0; }
}
@media (max-width:600px){
  /* phones: a compact caption bar instead of a big card, so the road and signs stay the focus */
  .roadtrip-panel-col{
    left:14px; right:14px; top:72px; bottom:auto;
    padding:12px 14px 14px;
    border-radius:6px;
  }
  .roadtrip-kicker{
    font-size:9px; letter-spacing:.16em; margin-bottom:10px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .roadtrip-kicker .kicker-tail{ display:none; }
  .roadtrip-panel{
    display:flex; align-items:flex-start; gap:12px;
    padding-top:10px; border-top-width:2px;
  }
  .mile-badge{ flex:none; gap:5px; padding:3px 7px; margin:2px 0 0; border-width:1.5px; }
  .mile-badge span{ font-size:8px; }
  .mile-badge strong{ font-size:12px; }
  .roadtrip-copy{ font-size:13px; line-height:1.5; min-height:6em; }
  /* caption bar sits under the header; signs travel in the space below it, never behind it */
  .road-signs{ top:240px; bottom:env(safe-area-inset-bottom, 0px); }
}
@media (max-width:820px){
  /* solid bar behind the logo + menu button: the inverting blend turned them grey-on-grey over light photos */
  .topnav{
    mix-blend-mode:normal;
    padding-top:8px; padding-bottom:8px;
    background:rgba(10,10,10,.82);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(245,242,238,.08);
  }
  /* backdrop-filter would trap the fixed full-screen menu inside the bar */
  .topnav.is-open{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (max-width:600px){
  /* city-page heroes: phone-sized intro copy, a darker fade so it reads on any photo, room under the mile strip */
  .landmark-hero::before{
    background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.2) 28%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.9) 100%);
  }
  .landmark-hero .wrap{ padding-top:96px; padding-bottom:44px; }
  .landmark-hero .mile-strip{ margin-bottom:22px; }
  .landmark-hero .pillar-eyebrow{
    color:#ff6b55; margin-bottom:6px;
    text-shadow:0 1px 8px rgba(0,0,0,.7);
  }
  .landmark-hero h1{ margin:6px 0 16px; }
  .landmark-hero p{ font-size:16px; line-height:1.55; text-shadow:0 1px 10px rgba(0,0,0,.6); }
}