/* =====================================================================
   Low clearance bridges by state  ·  Low Clearance Map
   Same tokens as data.css (Data-at-a-Glance) so the pages match the site.
   ===================================================================== */
:root {
  --sp-brand: #d63b54;
  --sp-brand-dark: #c02d46;
  --sp-brand-2: #ef3f5a;
  --sp-ink: #1a1a1a;
  --sp-muted: #6f6f76;
  --sp-faint: #9a9aa2;
  --sp-line: #ececef;
  --sp-soft: #faf8f9;
  --sp-soft-2: #f5f2f3;
  --sp-dark: #1b1418;
  --sp-radius: 18px;
  --sp-shadow: 0 18px 40px -24px rgba(31, 13, 18, 0.45);
  --sp-shadow-sm: 0 6px 20px -12px rgba(31, 13, 18, 0.4);
  --sp-font: "Poppins", "Poppins-Regular", system-ui, -apple-system, sans-serif;
}
.sp-body { margin: 0; background: #fff; }
.sp { font-family: var(--sp-font); color: var(--sp-ink); overflow-x: clip; }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
/* Resets use :where() so they have class-level specificity only and never beat the
   component classes below (a plain ".sp p" rule would override .sp-hero__lead margins). */
.sp :where(h1, h2, h3, p) { margin: 0; }
/* style.css gives every h3 a blue uppercase treatment and every link 0.9 opacity; neutralise inside these pages */
.sp :where(h2, h3) { font-family: var(--sp-font); text-transform: none; letter-spacing: normal; font-weight: 600; }
.sp :where(h3) { color: inherit; }
.sp :where(a) { text-decoration: none; opacity: 1; }
.sp a:not([class]) { color: var(--sp-brand); }
.sp a:not([class]):hover { color: var(--sp-brand-dark); }

/* ---- Shared bits ---------------------------------------------------- */
.sp-eyebrow {
  font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sp-brand); display: inline-flex; align-items: center; gap: 8px;
}
.sp-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--sp-brand); display: inline-block; }
.sp-eyebrow--light { color: #ffd3da; }
.sp-eyebrow--light::before { background: #ffd3da; }
.sp-title { color: var(--sp-ink); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.01em; margin-top: 14px; text-wrap: pretty; }
.sp-title--light { color: #fff; }
.sp-sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--sp-muted); margin-top: 16px; max-width: 720px; text-wrap: pretty; }
.sp-sub--light { color: rgba(255, 255, 255, 0.78); }
.sp-section { padding: clamp(56px, 8vw, 104px) 0; }
.sp-section--alt { background: var(--sp-soft); }
.sp-section--tight { padding-top: 0; }
.sp-section__head { max-width: 760px; }
.sp-section__head--center { margin: 0 auto 46px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sp-section__head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.sp-section__head--split > div { max-width: 720px; }

.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 28px;
  border-radius: 10px; font-weight: 600; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.sp-btn--primary { background: var(--sp-brand); color: #fff !important; box-shadow: 0 14px 26px -14px rgba(214, 59, 84, 0.85); }
.sp-btn--primary:hover { background: var(--sp-brand-dark); transform: translateY(-2px); }
.sp-btn--ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); color: #fff !important; }
.sp-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.sp-btn--outline { background: transparent; border-color: var(--sp-brand); color: var(--sp-brand); }
.sp-btn--outline:hover { background: var(--sp-brand); color: #fff; transform: translateY(-2px); }
.sp-btn--white { background: #fff; border-color: #fff; color: var(--sp-brand) !important; }
.sp-btn--white:hover { background: #ffe3e8; transform: translateY(-2px); }

/* ---- Hero ----------------------------------------------------------- */
.sp-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 80% 0%, #3a2128 0%, var(--sp-dark) 60%);
  padding: 160px 0 120px;
}
.sp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 10% 95%, rgba(214, 59, 84, 0.30), transparent 60%);
}
.sp-hero--hub { padding-bottom: 96px; }
.sp-hero__inner { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; align-items: center; }
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 48px; }
.sp .sp-crumbs a { color: rgba(255, 255, 255, 0.72); }
.sp .sp-crumbs a:hover { color: #fff; }
.sp-crumbs [aria-current] { color: #fff; }
.sp-hero__title { font-weight: 700; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.1; letter-spacing: -0.015em; margin-top: 26px; text-wrap: balance; }
.sp-hero__lead { color: rgba(255, 255, 255, 0.86); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.75; max-width: 640px; margin-top: 36px; text-wrap: pretty; }
.sp-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.sp-hero__note { margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.6); }

.sp-map { margin: 0; border-radius: 26px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); padding: 28px; }
.sp-map__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: 16px; }
.sp-map__date { font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.sp-map img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; margin-top: 18px; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.sp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sp-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.sp-dot--low { background: var(--sp-brand-2); }
.sp-dot--ok { background: rgba(255, 211, 218, 0.5); }

/* ---- KPI band -------------------------------------------------------- */
.sp-kpis { position: relative; z-index: 2; margin-top: -64px; }
.sp-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sp-kpi { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 26px 24px 24px; box-shadow: var(--sp-shadow); }
.sp-kpi__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #ffe3e8, #ffd0d8); color: var(--sp-brand); }
.sp-kpi__icon svg { width: 24px; height: 24px; }
.sp-kpi__num { margin-top: 18px; font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; }
.sp-kpi__label { margin-top: 10px; color: var(--sp-muted); font-size: 14.5px; line-height: 1.5; }

/* ---- Table ----------------------------------------------------------- */
.sp-table-wrap { margin-top: 40px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-shadow-sm); overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.sp-table th { background: var(--sp-soft-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-muted); text-align: left; padding: 14px 18px; }
.sp-table td { padding: 14px 18px; border-top: 1px solid var(--sp-line); vertical-align: middle; }
.sp-table tbody tr:nth-child(even) td { background: var(--sp-soft); }
.sp-rank { color: var(--sp-faint); font-weight: 600; width: 48px; font-variant-numeric: tabular-nums; }
.sp-strong { font-weight: 600; }
.sp-muted { color: var(--sp-muted); }
.sp-right { text-align: right; }
.sp-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 32px; padding: 0 12px; border-radius: 8px; background: #ffe3e8; color: var(--sp-brand-dark); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.sp-foot { margin-top: 16px; font-size: 13px; color: var(--sp-faint); }

/* ---- Histogram ------------------------------------------------------- */
.sp-split { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 64px; align-items: center; }
.sp-card { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 26px 30px 22px; box-shadow: var(--sp-shadow-sm); }
.sp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-card__title { font-weight: 600; font-size: 20px; }
.sp-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sp-muted); }
.sp-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--sp-brand); display: inline-block; }
.sp-hist { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 18px; height: 300px; }
.sp-hist__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; }
.sp-hist__num { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.sp-hist__bar { width: 100%; max-height: calc(100% - 70px); border-radius: 8px 8px 3px 3px; background: #f3c9d0; }
.sp-hist__bar--low { background: linear-gradient(180deg, var(--sp-brand-2), var(--sp-brand)); }
.sp-hist__label { height: 34px; font-size: 12.5px; line-height: 1.3; color: var(--sp-muted); text-align: center; }

/* ---- Editorial note --------------------------------------------------- */
.sp-note { border-radius: 26px; padding: clamp(32px, 5vw, 64px); background: radial-gradient(120% 140% at 80% 0%, #3a2128 0%, var(--sp-dark) 60%); }
.sp-note .sp-sub { max-width: 760px; }
.sp-note__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; font-size: 16px; color: #fff; }
.sp-note__link:hover { color: #ffd3da; }

/* ---- Towns ----------------------------------------------------------- */
.sp-towns { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-town { background: #fff; border: 1px solid var(--sp-line); border-radius: 14px; padding: 22px 22px 20px; }
.sp-town__name { font-weight: 600; font-size: 18px; }
.sp-town__meta { margin-top: 6px; font-size: 14px; color: var(--sp-muted); }
.sp-town__meta b { color: var(--sp-brand-dark); font-weight: 600; }

/* ---- Steps ----------------------------------------------------------- */
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-step { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 30px 28px; }
.sp-step__top { display: flex; align-items: center; justify-content: space-between; }
.sp-step__n { font-weight: 700; font-size: 40px; line-height: 1; color: var(--sp-soft-2); }
.sp-step h3 { margin-top: 22px; font-weight: 600; font-size: 20px; }
.sp-step p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--sp-muted); }

/* ---- FAQ ------------------------------------------------------------- */
.sp-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.sp-faq__intro { position: sticky; top: 110px; }
.sp-faq__list { display: flex; flex-direction: column; gap: 12px; }
.sp-acc { background: #fff; border: 1px solid var(--sp-line); border-radius: 14px; padding: 0 24px; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.sp-acc[open] { border-color: #f0c3cb; box-shadow: var(--sp-shadow-sm); }
.sp-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; }
.sp-acc summary::-webkit-details-marker { display: none; }
.sp-acc summary h3 { font-weight: 600; font-size: 17px; line-height: 1.4; }
.sp-acc__icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.sp-acc__icon::before, .sp-acc__icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: var(--sp-brand); border-radius: 2px; transition: transform 0.2s ease; }
.sp-acc__icon::after { transform: rotate(90deg); }
.sp-acc[open] .sp-acc__icon::after { transform: rotate(0deg); }
.sp-acc p { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--sp-muted); }

/* ---- CTA + nearby ----------------------------------------------------- */
.sp-cta { padding: 0 0 clamp(56px, 8vw, 88px); }
.sp-cta__card {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
  border-radius: 26px; padding: clamp(34px, 5vw, 64px); color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, var(--sp-brand-2), var(--sp-brand-dark)); box-shadow: 0 30px 60px -30px rgba(214, 59, 84, 0.7);
}
.sp-cta__card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.sp-cta__text { position: relative; max-width: 600px; }
.sp-cta__text h2 { font-weight: 700; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; text-wrap: balance; }
.sp-cta__text p { margin-top: 14px; color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.6; }
.sp-cta__actions { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 240px; }
.sp-nearby { margin-top: 72px; }
.sp-nearby__title { font-weight: 600; font-size: 22px; }
.sp-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.sp-chip { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--sp-line); background: #fff; color: var(--sp-ink); font-size: 15px; transition: border-color 0.18s ease, transform 0.18s ease; }
.sp-chip:hover { border-color: var(--sp-brand); color: var(--sp-ink); transform: translateY(-2px); }
.sp-chip b { font-weight: 600; }
.sp-chip span { color: var(--sp-muted); }
.sp-chip--all { color: var(--sp-brand); font-weight: 600; }

/* ---- Hub state grid --------------------------------------------------- */
.sp-states { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-state { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--sp-line); border-radius: 14px; padding: 20px 22px; color: var(--sp-ink); transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.sp-state:hover { color: var(--sp-ink); border-color: var(--sp-brand); transform: translateY(-2px); box-shadow: var(--sp-shadow-sm); }
.sp-state__name { font-weight: 600; font-size: 17px; color: var(--sp-brand); }
.sp-state__meta { font-size: 14px; color: var(--sp-muted); }
.sp-state__meta b { color: var(--sp-brand-dark); font-weight: 600; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
  .sp-hero__inner { grid-template-columns: 1fr; }
  .sp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-split { grid-template-columns: 1fr; gap: 32px; }
  .sp-towns, .sp-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-faq { grid-template-columns: 1fr; }
  .sp-faq__intro { position: static; }
}
@media (max-width: 767px) {
  .sp-hero { padding: 120px 0 88px; }
  /* table becomes stacked rows: rank | type + location + direction | clearance */
  .sp-table { min-width: 0; }
  .sp-table thead { display: none; }
  .sp-table tbody tr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "rank type pill" "rank loc pill" "rank dir pill"; align-items: center; column-gap: 12px; padding: 14px 16px; border-top: 1px solid var(--sp-line); }
  .sp-table tbody tr:nth-child(even) { background: var(--sp-soft); }
  .sp-table td { padding: 0; border: 0; background: transparent !important; }
  .sp-table td:nth-child(1) { grid-area: rank; }
  .sp-table td:nth-child(2) { grid-area: type; font-size: 15px; }
  .sp-table td:nth-child(3) { grid-area: loc; font-size: 13px; color: var(--sp-muted); }
  .sp-table td:nth-child(4) { grid-area: dir; font-size: 13px; }
  .sp-table td:nth-child(5) { grid-area: pill; }
  .sp-pill { font-size: 14px; }
  .sp-crumbs { margin-bottom: 32px; }
  .sp-hero__lead { margin-top: 28px; }
  .sp-hero__cta { margin-top: 36px; }
  .sp-hero__cta .sp-btn { width: 100%; }
  .sp-map { padding: 18px 16px 16px; }
  .sp-kpis { margin-top: -56px; }
  .sp-kpi { padding: 18px 16px; }
  .sp-kpi__label { font-size: 13px; }
  .sp-section__head--split .sp-btn { width: 100%; }
  .sp-hist { gap: 8px; height: 240px; }
  .sp-hist__label { font-size: 11px; }
  .sp-towns, .sp-states, .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-town, .sp-state { padding: 16px; }
  .sp-cta__actions { width: 100%; }
  .sp-cta__actions .sp-btn { width: 100%; }
  .sp-nearby { margin-top: 48px; }
}
@media (max-width: 420px) {
  .sp-steps { grid-template-columns: 1fr; }
}