/* HazardAlert · live-map landing (light scheme) */
:root {
  --white: #fff; --fog: #f3f5f7; --line: #d6dbe2; --ink: #0e1116; --steel: #566070;
  --signal: #ff5a1f; --warn: #c8102e; --watch: #f2a900; --adv: #3f6fb5; --ok: #1e8e5a;
  --gut: clamp(16px, 4vw, 56px);
  --display: "Archivo", "Arial Narrow", sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.5 var(--display); caret-color: var(--signal); }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 3px solid var(--adv); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.25em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 20; }
.skip:focus { left: 8px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px var(--gut); border-bottom: 1px solid var(--line); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; font: 800 1.5rem/1 var(--display); font-stretch: 68%; }
.mark svg { width: 40px; height: 28px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.top nav a { text-decoration: none; font: 600 1rem/1 var(--display); font-stretch: 88%; padding: 12px 0; }
.top nav a:hover { text-decoration: underline; }

.hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px) var(--gut); }
h1 { margin: 0; font: 800 clamp(2.5rem, 5.2vw, 4.75rem)/0.94 var(--display); font-stretch: 64%; letter-spacing: -0.015em; text-wrap: balance; }
h1 span { color: var(--signal); }
.sub { margin: 16px 0 22px; font-size: 1.25rem; line-height: 1.4; color: var(--steel); max-width: 32ch; }
.run { display: flex; border: 2px solid var(--ink); max-width: 500px; background: #fff; }
.run:focus-within { outline: 3px solid var(--adv); outline-offset: 3px; }
.run input { flex: 1; min-width: 0; border: 0; padding: 15px 14px; font: 500 1rem/1.2 var(--display); color: var(--ink); background: transparent; outline: none; }
.run input::placeholder { color: var(--steel); opacity: 1; }
.run button { border: 0; background: var(--ink); color: #fff; padding: 0 20px; font: 800 1rem/1 var(--display); font-stretch: 82%; cursor: pointer; white-space: nowrap; transition: background-color 0.16s cubic-bezier(0.16, 1, 0.3, 1); }
.run button:hover { background: #2a313c; }
.run button[disabled] { background: var(--steel); cursor: progress; }
.run-note { margin: 10px 0 0; font-size: 0.875rem; color: var(--steel); }
.run-note.err { color: var(--warn); font-weight: 600; }

.mapbox { position: relative; border: 1px solid var(--line); background: var(--fog); }
#map { width: 100%; aspect-ratio: 16 / 10; min-height: 340px; }
.live { position: absolute; left: 12px; top: 12px; z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 7px 10px; font: 600 0.6875rem/1.2 var(--mono); font-stretch: 87%; text-transform: uppercase; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.legend { list-style: none; margin: 0; padding: 9px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--line); background: #fff; font-size: 0.8125rem; color: var(--steel); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; }
.k-storm { background: var(--warn); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25); }
.k-warn { background: rgba(200, 16, 46, 0.35); border-radius: 0 !important; border: 1px solid var(--warn); }
.k-fire { background: var(--watch); }
.k-quake { background: var(--adv); }
.k-radar { background: linear-gradient(90deg, #4fb04f, #f2d21f, #e0402c); border-radius: 0 !important; }
.maplibregl-ctrl-attrib { font: 500 10px/1.4 var(--mono); }
.storm-pin { position: relative; width: 16px; height: 16px; }
.storm-pin::before, .storm-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--warn); }
.storm-pin::after { animation: ring 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; opacity: 0.45; }
@keyframes ring { to { transform: scale(4.2); opacity: 0; } }
.storm-pin b { position: absolute; left: 22px; top: -4px; white-space: nowrap; background: #fff; border: 1px solid var(--ink); padding: 3px 6px; font: 800 0.8125rem/1.2 var(--display); font-stretch: 80%; color: var(--ink); }

.ticker { display: flex; align-items: stretch; background: var(--fog); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker > b { flex: none; display: flex; align-items: center; padding: 0 16px 0 var(--gut); font: 600 0.6875rem/1.2 var(--mono); font-stretch: 87%; text-transform: uppercase; color: #c23f08; background: var(--fog); z-index: 1; }
.ticker-view { overflow: hidden; flex: 1; }
.ticker-track { display: inline-flex; white-space: nowrap; padding: 14px 0; font: 800 1.125rem/1 var(--display); font-stretch: 72%; text-transform: uppercase; animation: tick var(--tick, 60s) linear infinite; will-change: transform; }
.ticker-track span { padding: 0 22px; }
.ticker-track span + span { border-left: 2px solid var(--line); }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-bottom: 1px solid var(--line); }
.ev { --c: var(--steel); padding: 20px clamp(16px, 2.2vw, 28px) 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-top: 4px solid var(--c); margin-bottom: -1px; animation: arrive 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.ev[data-k="warn"] { --c: var(--warn); }
.ev[data-k="watch"] { --c: var(--watch); --t: var(--ink); }
.ev[data-k="adv"] { --c: var(--adv); }
.ev[data-k="ok"] { --c: var(--ok); }
.ev em { display: inline-block; font: 600 0.625rem/1 var(--mono); font-stretch: 87%; font-style: normal; background: var(--c); color: var(--t, #fff); padding: 5px 6px; }
.ev h2 { margin: 10px 0 4px; font: 800 1.5rem/1.05 var(--display); font-stretch: 72%; text-wrap: balance; }
.ev p { margin: 0; color: var(--steel); line-height: 1.4; }
.ev time { display: block; margin-top: 10px; font: 500 0.6875rem/1.4 var(--mono); font-stretch: 87%; color: var(--steel); }

.foot { padding: 26px var(--gut) 44px; color: var(--steel); font-size: 0.875rem; line-height: 1.5; }
.foot p { margin: 0 0 6px; max-width: 80ch; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .top nav a:not(:first-child) { display: none; }
}
@media (max-width: 520px) {
  .run { flex-direction: column; }
  .run button { padding: 15px 20px; }
  .ticker > b { max-width: 104px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .live i, .storm-pin::after, .ev { animation: none; }
  .ticker-view { overflow-x: auto; }
}

/* ---- fixed bar: navigation plus the monitoring ribbon ---- */
.bar { position: sticky; top: 0; z-index: 60; background: #fff; }
.bar .top { border-bottom: 0; padding-block: 8px; }
.bar .ticker { border-top: 1px solid var(--line); }
.bar .ticker-track { padding: 11px 0; font-size: 1rem; }

/* ---- footage hero ---- */
.hero.vid { position: relative; isolation: isolate; display: block; padding: 0; min-height: clamp(400px, calc(100svh - 300px), 600px); background: var(--ink); color: #fff; overflow: hidden; }
.reel, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel { z-index: -1; }
.reel video { object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.reel video.on { opacity: 1; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,17,22,0.5) 0%, rgba(14,17,22,0.22) 42%, rgba(14,17,22,0) 70%), linear-gradient(180deg, transparent 62%, rgba(14,17,22,0.4) 100%); }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; min-height: inherit; padding: clamp(28px, 5vh, 56px) var(--gut) clamp(22px, 4vh, 40px); }
.hero.vid h1 { color: #fff; max-width: 13ch; }
.hero.vid .sub { color: #fff; }
.hero.vid .run { border-color: #fff; }
.hero.vid .run-note { color: #e6e9ee; }
.hero.vid .run-note.err { color: #ffd0c7; }
.cap { justify-self: end; text-align: right; max-width: 22ch; }
.cap-k { margin: 0 0 6px; font: 600 0.75rem/1.2 var(--mono); font-stretch: 87%; text-transform: uppercase; color: #fff; }
.cap-v { margin: 0; font: 800 clamp(1.5rem, 3vw, 2.5rem)/1.02 var(--display); font-stretch: 70%; text-wrap: balance; transition: opacity 0.5s ease; }
.cap-v.out { opacity: 0; }
.dots { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dots button { width: 34px; height: 24px; padding: 10px 0; background: none; border: 0; cursor: pointer; }
.dots button::before { content: ""; display: block; height: 4px; background: rgba(255,255,255,0.45); }
.dots button[aria-pressed="true"]::before { background: var(--signal); }
.dots button:focus-visible { outline-color: #fff; }

/* ---- tracking now ---- */
.tracking { padding-top: clamp(40px, 6vw, 72px); }
.track-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 0 var(--gut) 22px; }
.track-head h2 { margin: 0; font: 800 clamp(2rem, 4vw, 3.25rem)/1 var(--display); font-stretch: 66%; letter-spacing: -0.01em; }
.track-head .live { position: static; }
.tracking .events { border-top: 1px solid var(--line); }
.tracking .mapbox { margin: clamp(24px, 4vw, 48px) var(--gut) 0; }
.tracking #map { aspect-ratio: 21 / 9; min-height: 360px; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; align-items: end; }
  .cap { justify-self: start; text-align: left; max-width: none; }
  .dots { justify-content: flex-start; }
  .bar .top nav a:not(:first-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .reel video, .cap-v { transition: none; } }

.hero.vid .sub { max-width: 36ch; }

/* lighter footage: keep the words readable with a soft shadow instead of a heavy tint */
.hero.vid h1, .hero.vid .sub, .hero.vid .run-note, .cap { text-shadow: 0 1px 14px rgba(14, 17, 22, 0.55), 0 0 2px rgba(14, 17, 22, 0.5); }
.hero.vid h1 { font-size: clamp(2.5rem, 4.8vw, 4.25rem); }
.hero.vid h1 span { color: #ff7541; }
.hero.vid .sub { margin: 12px 0 18px; }

/* tornado clip: mirror it so the funnel sits clear of the headline, brighten it, keep the ground in frame */
.reel video.v-dal { transform: scaleX(-1); filter: brightness(1.32) contrast(1.08) saturate(1.12); object-position: 50% 72%; }

/* caption stays readable over bright sky */
.cap { background: rgba(14, 17, 22, 0.55); padding: 12px 16px 14px; text-shadow: none; }


/* ---- due-diligence line under the hero ---- */
.dd { margin: 0; padding: 14px var(--gut); background: var(--ink); color: #fff; font-size: 1rem; }
.dd a { color: #fff; font-weight: 400; }
#top-form { position: absolute; top: -140px; }
.hero.vid .run { position: relative; }

/* ---- live hazard tracking ---- */
.track-head { align-items: flex-end; }
.track-head h2 { display: flex; align-items: center; gap: 14px; }
.pulse { width: 16px; height: 16px; border-radius: 50%; background: var(--warn); animation: blink 1.4s ease-in-out infinite; flex: none; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 34px; margin: 0; }
.counts div { display: flex; flex-direction: column; }
.counts dd { margin: 0; font: 800 clamp(2.25rem, 4vw, 3.5rem)/0.95 var(--display); font-stretch: 64%; font-variant-numeric: tabular-nums; }
.counts dt { order: 2; margin-top: 4px; font: 600 0.6875rem/1.3 var(--mono); font-stretch: 87%; text-transform: uppercase; color: var(--steel); }
.track-body { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feed { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.feed h3 { margin: 0; padding: 12px var(--gut) 10px; font: 600 0.6875rem/1.3 var(--mono); font-stretch: 87%; text-transform: uppercase; color: var(--steel); border-bottom: 1px solid var(--line); }
#stream { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; max-height: 560px; scrollbar-width: thin; }
#stream li.none { padding: 16px var(--gut); color: var(--steel); }
#stream button { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px 13px var(--gut); cursor: pointer; font: inherit; color: var(--ink); animation: arrive 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
#stream button:hover, #stream button[aria-pressed="true"] { background: var(--fog); }
#stream time { display: block; font: 500 0.6875rem/1.5 var(--mono); font-stretch: 87%; color: var(--steel); }
#stream em { display: inline-block; font: 600 0.625rem/1 var(--mono); font-style: normal; padding: 4px 5px; margin-right: 8px; vertical-align: 2px; color: #fff; background: var(--steel); }
#stream em[data-k="warn"] { background: var(--warn); }
#stream em[data-k="watch"] { background: var(--watch); color: var(--ink); }
#stream em[data-k="adv"] { background: var(--adv); }
#stream b { font: 800 1.0625rem/1.2 var(--display); font-stretch: 80%; }
#stream span { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.35; color: var(--steel); }
.tracking .mapbox { margin: 0; border: 0; display: flex; flex-direction: column; }
.tracking #map { aspect-ratio: auto; flex: 1; min-height: 480px; }
.regions { display: flex; flex-wrap: wrap; padding: 10px 12px; gap: 0; border-bottom: 1px solid var(--line); background: #fff; }
.regions button { font: 700 0.875rem/1 var(--display); font-stretch: 84%; color: var(--ink); background: #fff; border: 2px solid var(--ink); padding: 10px 12px; min-height: 40px; margin: 0 -2px -2px 0; cursor: pointer; }
.regions button:hover { background: var(--fog); }
.regions button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tracking .events { border-top: 0; }
.pop { font: 600 0.8125rem/1.35 var(--display); }
@media (max-width: 900px) {
  .track-body { grid-template-columns: 1fr; }
  .feed { border-right: 0; border-bottom: 1px solid var(--line); }
  #stream { max-height: 320px; }
  .tracking #map { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) { .pulse, #stream button { animation: none; } }

.counts div { max-width: 150px; }

/* ---- header call to action ---- */
.top nav { align-items: center; }
.top nav a.nav-cta { background: var(--ink); color: #fff; padding: 11px 16px; font-weight: 800; }
.top nav a.nav-cta:hover { background: #2a313c; text-decoration: none; }

/* ---- shared section openings ---- */
.sec-top { padding: clamp(48px, 7vw, 88px) var(--gut) 24px; max-width: 1100px; }
.sec-top h2, .closing h2 { margin: 0; font: 800 clamp(2rem, 4vw, 3.25rem)/1 var(--display); font-stretch: 66%; letter-spacing: -0.01em; text-wrap: balance; }
.sec-top p { margin: 14px 0 0; font-size: 1.25rem; line-height: 1.4; color: var(--steel); max-width: 62ch; }
.soon { display: inline-block; margin: 0 0 12px !important; padding: 5px 8px; background: var(--signal); color: #fff !important; font: 600 0.6875rem/1 var(--mono) !important; font-stretch: 87%; text-transform: uppercase; }

/* ---- hazards ---- */
.hz-list { list-style: none; margin: 0; padding: 0 var(--gut); columns: 2; column-gap: clamp(24px, 5vw, 72px); }
.hz-list li { break-inside: avoid; display: grid; grid-template-columns: minmax(130px, 0.6fr) minmax(0, 1.4fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.hz-list b { font: 800 1.25rem/1.15 var(--display); font-stretch: 76%; }
.hz-list span { color: var(--steel); line-height: 1.4; }

/* ---- sensors ---- */
.sn { background: var(--fog); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(36px, 5vw, 64px); }
.sn .sec-top { padding-top: clamp(36px, 5vw, 64px); }
.sn-body { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); margin: 8px var(--gut) 0; background: #fff; border: 1px solid var(--line); }
.sn-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.sn-tabs button { text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; font: 700 1rem/1.2 var(--display); font-stretch: 86%; color: var(--ink); cursor: pointer; }
.sn-tabs button:hover { background: var(--fog); }
.sn-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.sn-panel { padding: clamp(18px, 2.6vw, 32px); }
.sn-panel > p.for { margin: 0 0 18px; font-size: 1.25rem; line-height: 1.4; max-width: 60ch; }
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.pkg { border-top: 4px solid var(--ink); padding: 16px 0 8px; }
.pkg h3 { margin: 0 0 4px; font: 800 1.5rem/1.1 var(--display); font-stretch: 72%; }
.pkg .protects { margin: 0 0 12px; color: var(--steel); line-height: 1.4; }
.pkg ul { list-style: none; margin: 0; padding: 0; }
.pkg li { display: grid; grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.3fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.pkg li b { font-weight: 700; font-stretch: 88%; }
.pkg li span { color: var(--steel); font-size: 0.9375rem; line-height: 1.4; }
.sn-wait { margin: 26px var(--gut) 0; }
.sn .run-note, .sn-fine { margin: 10px var(--gut) 0; }
.sn-fine { font-size: 0.875rem; color: var(--steel); max-width: 78ch; }

/* ---- closing ---- */
.closing { padding: clamp(48px, 7vw, 88px) var(--gut); }
.closing p { margin: 20px 0 0; }
.btn { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; padding: 16px 22px; font: 800 1rem/1 var(--display); font-stretch: 82%; }
.btn:hover { background: #2a313c; }

@media (max-width: 900px) {
  .hz-list { columns: 1; }
  .sn-body { grid-template-columns: 1fr; }
  .sn-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .sn-tabs button { white-space: nowrap; border-bottom: 0; border-right: 1px solid var(--line); }
  .bar .top nav a:not(:first-child) { display: none; }
  .bar .top nav a.nav-cta { display: inline-block; }
  .bar .top nav a:first-child { display: none; }
}
@media (max-width: 560px) { .hz-list li, .pkg li { grid-template-columns: 1fr; gap: 2px; } }

.sn.tease { padding-bottom: clamp(36px, 5vw, 64px); }
.sn.tease .sec-top { padding-bottom: 0; }
.tease-cta { margin-top: 22px !important; }

.dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.dd p { margin: 0; }
.dd time { font: 500 0.8125rem/1.4 var(--mono); font-stretch: 87%; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* tracking title sits higher, with the "latest alert" line under it */
.tracking { padding-top: clamp(22px, 3.2vw, 40px); }
.track-head { align-items: center; }
.latest { margin: 8px 0 0 30px; font: 500 0.8125rem/1.4 var(--mono); font-stretch: 87%; color: var(--steel); min-height: 1.4em; }
.latest b { color: var(--warn); font-weight: 600; }

/* strip under the hero: soft grey text instead of pure white */
.dd, .dd a, .dd time { color: #c3c9d2; }

/* wider caption box so long hazard names take two lines, not four */
.cap { max-width: 27rem; }
.cap-v { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }

/* caption box hugs its text */
.cap { width: fit-content; }
.cap-v { margin-left: auto; }