.hero { overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; padding-block: 4rem 4.5rem; }
.hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); margin: 1rem 0 1.25rem; }
.hero .lede { font-size: 1.125rem; max-width: 54ch; margin-bottom: 1.75rem; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-call { display: flex; flex-direction: column; gap: 0.1rem; }
.hero-call a { font-family: var(--mono); font-size: 1.05rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.hero-call span { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--asphalt); }

/* Notice panel — notched-tab shape, ink board, amber signal (ADOT roadside message board) */
.notice-panel {
  --r: 16px; --tabh: 46px; --tabw: 42%; --nbg: var(--accent);
  --amber-on-accent: oklch(90% 0.13 75);
  position: relative; background: var(--nbg); color: var(--bg);
  border-radius: 0 var(--r) var(--r) var(--r);
  margin-top: var(--tabh); padding: 1.5rem 2rem 1rem;
}
.notice-wave { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.notice-wave svg { position: absolute; bottom: -6px; left: 0; width: 200%; height: 55%; animation: waveflow 10s linear infinite; }
.notice-wave .w2 { animation-duration: 15s; height: 65%; opacity: 0.7; }
@keyframes waveflow { to { transform: translateX(-50%); } }
.notice-item { position: relative; z-index: 1; }
.notice-panel::before {
  content: ""; position: absolute; bottom: 100%; left: 0;
  width: var(--tabw); height: var(--tabh);
  background: var(--nbg); border-radius: var(--r) var(--r) 0 0;
}
.notice-panel::after {
  content: ""; position: absolute; bottom: 100%; left: var(--tabw);
  width: var(--r); height: var(--r);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), var(--nbg) var(--r));
}
.notice-panel > header {
  position: absolute; bottom: 100%; left: 1.5rem; height: var(--tabh); z-index: 1;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-on-accent);
}
.notice-panel > header .open-dot { margin-right: 0; background: var(--amber-on-accent); }
.notice-item { padding-block: 1.2rem; border-top: 1px solid color-mix(in oklch, var(--bg) 25%, var(--accent)); }
.notice-item:first-of-type { border-top: 0; padding-top: 0.4rem; }
.notice-item p {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.22;
}
.notice-item p .acc { color: var(--amber-on-accent); }
.notice-item .notice-sub {
  font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 0.92rem; line-height: 1.5; color: color-mix(in oklch, var(--bg) 80%, var(--accent)); margin-top: 0.5rem;
}

/* Hero photo strip below the hero */
.hero-strip { position: relative; overflow: hidden; height: 300px; border-bottom: 1px solid var(--border); }
.hero-strip img { position: absolute; left: 0; top: -22.5%; width: 100%; height: 145%; object-fit: cover; object-position: 50% 60%; will-change: transform; }

/* Signature route arrow (draws on load) */
.route-arrow { display: block; margin-bottom: 0.25rem; }
.route-arrow path { stroke: var(--accent); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .notice-panel { order: -1; }
  .hero-strip { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .notice-wave svg { animation: none; }
  .hero-strip img { transform: none !important; }
  .route-arrow path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
}