/* Storage Truth — proposed page framework v2.
   Mobile-first. Depends on tokens.css. No JS required. Kit only — not production. */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--st-font-sans);
  font-size: var(--st-fs-base);
  line-height: var(--st-lh-body);
  color: var(--st-ink);
  background: var(--st-paper);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--st-navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--st-cta); }
:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; border-radius: 2px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

h1, h2, h3, .display {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  color: var(--st-navy);
  line-height: var(--st-lh-head);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--st-fs-h1); font-weight: 650; line-height: var(--st-lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--st-fs-h2); font-weight: 600; }
h3 { font-size: var(--st-fs-h3); font-weight: 600; }
.num, td.num, .stat__value { font-variant-numeric: tabular-nums lining-nums; }

.wrap { width: 100%; max-width: var(--st-page); margin-inline: auto; padding-inline: var(--st-gutter); }

/* Eyebrow: small caps label with brass rule — the signature section treatment */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: var(--st-fs-eyebrow); font-weight: 600;
  letter-spacing: var(--st-track-eyebrow); text-transform: uppercase;
  color: var(--st-brass-deep); margin: 0 0 var(--st-s-3);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.on-navy .eyebrow, .site-footer .eyebrow { color: var(--st-brass-bright); }

.sample-flag {
  display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: .1rem .45rem; border-radius: 3px;
  border: 1px dashed var(--st-rule-strong); color: var(--st-ink-muted); background: var(--st-paper);
  vertical-align: middle;
}

/* ---------- Preview banner (kit only) ---------- */
.kit-banner {
  background: var(--st-paper-muted); color: var(--st-ink-muted);
  font-size: var(--st-fs-xs); text-align: center; padding: .4rem var(--st-gutter);
  border-bottom: 1px solid var(--st-rule);
}

/* ---------- Header (overlays hero) ---------- */
.site-header { position: absolute; inset-inline: 0; z-index: 3; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--st-s-4);
  padding-block: var(--st-s-4);
}
.site-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; flex-shrink: 0; }
.site-logo img { display: block; height: 34px; width: auto; }
.site-logo__tagline { display: block; padding-left: 39px; color: var(--st-navy); opacity: .85; font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.site-nav { display: none; gap: var(--st-s-5); font-size: var(--st-fs-sm); font-weight: 500; }
.site-nav a { color: var(--st-navy); text-decoration: none; }
.site-nav a:hover { color: var(--st-cta); }
.site-nav { background: rgba(255,255,255,.82); padding: .45rem 1rem; border-radius: 999px; box-shadow: 0 2px 10px -4px rgba(15,31,46,.25); }
@media (min-width: 48rem) { .site-nav { display: flex; } }

/* ---------- Hero (city-specific, bright daylight) ----------
   Per-market photo via --st-hero-image (Austin first). Photo has a cream wash on the left;
   we reinforce it with a paper scrim so navy type always passes contrast, and leave the skyline bright.
   Missing photo → warm sky gradient. Storage units never appear in the hero. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--st-ink);
  /* Mobile default (refined further in max-width:59.99rem): solid paper under type,
     city photo as a fixed top band. Desktop overrides below. */
  background-color: var(--st-paper);
  background-image:
    var(--st-hero-image-sm),
    var(--st-hero-sky);
  background-size: 100% 10.5rem, 100% 10.5rem;
  background-position: 70% 0, top;
  background-repeat: no-repeat;
  padding-top: 0;
  padding-bottom: 5.5rem;
  border-bottom: 1px solid var(--st-rule);
}
.hero__grid {
  margin-top: 10.5rem;
  padding-top: var(--st-s-5);
  background: var(--st-paper);
  position: relative;
  z-index: 1;
}
@media (min-width: 60rem) {
  .hero {
    background-image:
      linear-gradient(90deg, rgba(246,243,237,.98) 0%, rgba(246,243,237,.94) 34%, rgba(246,243,237,.78) 46%, rgba(246,243,237,.35) 56%, rgba(246,243,237,0) 66%),
      var(--st-hero-image),
      var(--st-hero-sky);
    background-size: cover, cover, cover;
    background-position: center, right center, center;
    background-repeat: no-repeat;
    padding-top: 7.5rem; padding-bottom: 8.5rem; min-height: 42rem;
    border-bottom: 1px solid var(--st-rule);
  }
  .hero__grid {
    margin-top: 0;
    padding-top: 0;
    background: transparent;
    box-shadow: none;
  }
}
/* Faint unit-grid texture under the text side only (brand signature) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    repeating-linear-gradient(90deg, rgba(27,51,72,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(27,51,72,.025) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 40%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 40%);
}
.hero__credit {
  position: absolute; right: var(--st-gutter); bottom: 5.25rem; z-index: 1;
  font-size: .6875rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); letter-spacing: .04em;
}
.hero__city {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: var(--st-s-4);
  background: var(--st-navy); color: #fff; border-radius: 999px; padding: .3rem .8rem .3rem .6rem;
  font-size: var(--st-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hero__city svg { width: 14px; height: 14px; color: var(--st-brass-bright); }
.hero__grid { display: grid; gap: var(--st-s-6); align-items: end; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4.2fr); gap: var(--st-s-7); } }

.breadcrumb { font-size: var(--st-fs-xs); color: var(--st-ink-muted); margin-bottom: var(--st-s-3); }
.breadcrumb a { color: var(--st-ink-muted); }
.hero h1 { color: var(--st-navy); max-width: 16ch; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--st-brass-deep); }
.hero .lead {
  font-size: var(--st-fs-lead); line-height: 1.55; color: #d8e0e7;
  max-width: 31rem; margin: var(--st-s-4) 0 var(--st-s-5);
}
.hero .lead { color: var(--st-ink-muted); }
.hero .lead b { color: var(--st-navy); font-weight: 600; }

/* FTC disclosure — full block after the comparison table, before Fee traps. Never dismissible. One-line .aff-note sits in the table stage bar. */
.disc {
  font-size: var(--st-fs-sm); line-height: 1.5;
  background: var(--st-disc-bg); color: var(--st-disc-ink);
  border-left: 4px solid var(--st-disc-border);
  border-radius: var(--st-radius-sm);
  padding: var(--st-s-3) var(--st-s-4);
  max-width: 38rem;
}
.disc strong { color: #2a200a; }
.hero .disc { box-shadow: var(--st-shadow-card); }

/* Truth receipt — signature hero object: advertised vs. what you actually pay */
.receipt {
  background: var(--st-paper-raised); color: var(--st-ink);
  border-radius: var(--st-radius-lg); box-shadow: 0 30px 60px -24px rgba(15,31,46,.45);
  padding: var(--st-s-5); position: relative;
  border-top: 5px solid var(--st-brass);
}
.receipt__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--st-s-3); margin-bottom: var(--st-s-3); }
.receipt__title { font-family: var(--st-font-display); font-weight: 600; font-size: 1.125rem; color: var(--st-navy); }
.receipt dl { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: .55rem; column-gap: var(--st-s-4); font-size: var(--st-fs-sm); }
.receipt dt { color: var(--st-ink-muted); }
.receipt dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt .strike { color: var(--st-ink-faint); font-weight: 500; }
.receipt .unk { color: var(--st-flag); font-weight: 600; font-size: var(--st-fs-xs); }
.receipt__total {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px dashed var(--st-rule-strong); margin-top: .35rem; padding-top: .7rem;
}
.receipt__total span:first-child { font-weight: 600; color: var(--st-navy); }
.receipt__total .big { font-family: var(--st-font-display); font-size: 2.25rem; font-weight: 650; color: var(--st-navy); line-height: 1; }
.receipt__foot { margin: var(--st-s-3) 0 0; font-size: var(--st-fs-xs); color: var(--st-ink-faint); }

/* ---------- Overlapping stat cards ---------- */
.stats {
  position: relative; z-index: 2; margin-top: -4.5rem;
  display: grid; gap: var(--st-s-3); grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--st-s-4); } }
.stat {
  background: var(--st-paper-raised); border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-card); padding: var(--st-s-4) var(--st-s-5);
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--st-s-4); align-items: center;
  border: 1px solid rgba(15,31,46,.06);
}
.stat__icon {
  grid-row: span 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--st-paper); color: var(--st-brass-deep);
  border: 1px solid var(--st-rule);
}
.stat__icon svg { width: 22px; height: 22px; }
.stat__label { font-size: var(--st-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-muted); }
.stat__value { font-family: var(--st-font-display); font-size: var(--st-fs-stat); font-weight: 650; color: var(--st-navy); line-height: 1.05; }
.stat__value small { font-size: .45em; font-weight: 500; color: var(--st-ink-muted); font-family: var(--st-font-sans); }
.stat__hint { font-size: var(--st-fs-xs); color: var(--st-ink-faint); }

/* ---------- Sections ---------- */
.section { padding-block: var(--st-s-8); }
.section--tight { padding-block: var(--st-s-7); }
.section-head { margin-bottom: var(--st-s-5); max-width: 46rem; }
.section-head p { color: var(--st-ink-muted); margin: var(--st-s-3) 0 0; }

/* ---------- Table stage ---------- */
.stage-band {
  background:
    linear-gradient(180deg, var(--st-paper) 0, var(--st-paper-deep) 9rem, var(--st-paper-deep) 100%);
}
.stage {
  background: var(--st-paper-raised); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-stage); border: 1px solid rgba(15,31,46,.07);
  overflow: hidden;
}
.stage__bar {
  display: flex; flex-wrap: wrap; gap: var(--st-s-2) var(--st-s-5); align-items: center; justify-content: space-between;
  padding: var(--st-s-4) var(--st-s-5);
  border-bottom: 1px solid var(--st-rule);
  background: linear-gradient(90deg, var(--st-brass) 0 4px, transparent 4px), var(--st-paper-raised);
  font-size: var(--st-fs-sm); color: var(--st-ink-muted);
}
.stage__bar strong { color: var(--st-navy); }
.stage__meta { display: flex; flex-wrap: wrap; gap: var(--st-s-2) var(--st-s-4); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--st-fs-sm); line-height: var(--st-lh-table); min-width: 60rem; }
.data-table th, .data-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--st-rule); }
.data-table thead th {
  position: sticky; top: 0; background: var(--st-th-bg); color: var(--st-ink-muted);
  font-size: var(--st-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.data-table tbody tr:nth-child(even) td { background: var(--st-row-alt); }
.data-table tbody tr:hover td { background: var(--st-row-hover); }
.data-table th:first-child, .data-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--st-paper-raised);
  box-shadow: 1px 0 0 var(--st-rule); min-width: 13rem;
}
.data-table thead th:first-child { background: var(--st-th-bg); z-index: 2; }
.data-table tbody tr:nth-child(even) td:first-child { background: var(--st-row-alt); }
.fac-name { font-weight: 600; color: var(--st-navy); display: block; }
.fac-addr { font-size: var(--st-fs-xs); color: var(--st-ink-faint); }
.td-key { font-weight: 600; color: var(--st-navy); }
.unk { color: var(--st-flag); }
td.actions { white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.stage__foot { padding: var(--st-s-4) var(--st-s-5); border-top: 1px solid var(--st-rule); font-size: var(--st-fs-xs); color: var(--st-ink-muted); background: var(--st-row-alt); }

.btn {
  display: inline-block; background: var(--st-cta); color: var(--st-cta-ink);
  font-weight: 600; font-size: var(--st-fs-sm); text-decoration: none;
  padding: .55rem 1rem; border-radius: var(--st-radius-sm);
}
.btn:hover { background: var(--st-cta-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--st-navy); border: 1px solid var(--st-rule-strong); }
.btn--ghost:hover { background: var(--st-paper); color: var(--st-navy); }

/* ---------- Fee traps (on wash art) ---------- */
.wash {
  background-color: var(--st-paper);
  background-image: linear-gradient(180deg, rgba(246,243,237,.25), rgba(246,243,237,.85)), var(--st-wash-image);
  background-size: cover; background-position: center;
  border-block: 1px solid var(--st-rule);
}
.traps { display: grid; gap: var(--st-s-4); grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 40rem) { .traps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .traps { grid-template-columns: repeat(3, 1fr); } }
.trap {
  background: var(--st-paper-raised); border-radius: var(--st-radius); padding: var(--st-s-5);
  box-shadow: var(--st-shadow-card); border: 1px solid rgba(15,31,46,.06);
  display: grid; grid-template-columns: auto 1fr; gap: .25rem var(--st-s-4); align-content: start;
}
.trap__icon { grid-row: span 2; width: 40px; height: 40px; color: var(--st-navy); }
.trap__icon .acc { color: var(--st-brass-deep); }
.trap h3 { font-size: 1.125rem; }
.trap p { margin: 0; color: var(--st-ink-muted); font-size: var(--st-fs-sm); }
.trap--lead {
  background: var(--st-navy); color: #d8e0e7; border: 0;
  grid-template-columns: 1fr;
}
.trap--lead h3 { color: #fff; font-size: 1.375rem; }
.trap--lead p { color: var(--st-mist); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: var(--st-s-6); }
@media (min-width: 60rem) { .faq-grid { grid-template-columns: 4fr 7fr; gap: var(--st-s-8); } .faq-grid > header { position: sticky; top: var(--st-s-6); align-self: start; } }
.faq details { border-bottom: 1px solid var(--st-rule); padding-block: var(--st-s-4); }
.faq details:first-of-type { border-top: 1px solid var(--st-rule); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--st-s-4);
  font-family: var(--st-font-display); font-weight: 600; font-size: 1.1875rem; color: var(--st-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--st-font-sans); color: var(--st-brass-deep); font-weight: 500; font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: var(--st-s-3) 0 0; color: var(--st-ink-muted); max-width: var(--st-measure); }

/* ---------- Nearby ---------- */
.nearby { display: grid; gap: var(--st-s-3); grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 40rem) { .nearby { grid-template-columns: repeat(3, 1fr); } }
.nearby a, .nearby span.card {
  display: block; padding: var(--st-s-4) var(--st-s-5); border: 1px solid var(--st-rule); border-radius: var(--st-radius);
  background: var(--st-paper-raised); text-decoration: none; color: var(--st-navy); font-weight: 600;
}
.nearby a:hover { border-color: var(--st-brass); }
.nearby small { display: block; font-weight: 400; color: var(--st-ink-faint); font-size: var(--st-fs-xs); }

/* ---------- Footer ---------- */
.site-footer { background: var(--st-navy-deep); color: var(--st-mist); font-size: var(--st-fs-sm); padding-block: var(--st-s-7); }
.site-footer__grid { display: grid; gap: var(--st-s-5); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h4 { margin: 0 0 var(--st-s-2); color: #fff; font-size: var(--st-fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.site-footer a { color: var(--st-mist); }
.site-footer__legal { border-top: 1px solid rgba(201,211,220,.15); margin-top: var(--st-s-6); padding-top: var(--st-s-4); font-size: var(--st-fs-xs); color: #8e9caa; }

/* ---------- Kit reference sheet (preview only) ---------- */
.kit { background: var(--st-paper-raised); border-top: 1px solid var(--st-rule); }
.kit-grid { display: grid; gap: var(--st-s-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kit-card { border: 1px solid var(--st-rule); border-radius: var(--st-radius); padding: var(--st-s-5); background: var(--st-paper); margin: 0; }
.kit-card--navy { background: var(--st-navy); border-color: var(--st-navy); color: var(--st-mist); }
.kit-card figcaption { font-size: var(--st-fs-xs); color: var(--st-ink-muted); margin-top: var(--st-s-3); }
.kit-card--navy figcaption { color: var(--st-mist); }
.kit-card img { max-height: 72px; width: auto; }
.kit-card .explore { max-height: 140px; border-radius: var(--st-radius-sm); }
.swatches { display: grid; gap: var(--st-s-3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.swatch { border: 1px solid var(--st-rule); border-radius: var(--st-radius); overflow: hidden; background: #fff; font-size: var(--st-fs-xs); }
.swatch i { display: block; height: 64px; }
.swatch div { padding: .5rem .65rem; color: var(--st-ink-muted); }
.swatch b { display: block; color: var(--st-ink); }
.type-spec { display: grid; gap: var(--st-s-5); }
@media (min-width: 48rem) { .type-spec { grid-template-columns: 1fr 1fr; } }
.type-spec .big { font-family: var(--st-font-display); font-size: 3.5rem; font-weight: 650; color: var(--st-navy); line-height: 1; }
.type-spec .big-sans { font-size: 2.25rem; font-weight: 600; color: var(--st-navy); line-height: 1.1; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .hero { background: none; color: #000; } .hero h1, .hero .lead { color: #000; } .site-header, .kit-banner { display: none; } }

/* Masthead wrapper: header overlays the hero */
.masthead { position: relative; }

/* ---------- Mobile hero readability ----------
   Problem: absolute header + soft gradient left navy type and the tagline sitting on the
   city photo. Fix: header becomes in-flow on solid paper; photo is a fixed-height band;
   all copy (H1, lead, tagline, disclosure, receipt) sits on a solid paper panel below it.
   Desktop (≥60rem) keeps the left-wash overlay treatment unchanged. */
@media (max-width: 59.99rem) {
  .site-header {
    position: relative;
    background: var(--st-paper);
    border-bottom: 1px solid var(--st-rule);
  }
  .site-header__inner { padding-block: var(--st-s-3); }
  .site-logo img { height: 30px; }
  .site-logo__tagline {
    padding-left: 35px;
    font-size: 11px;
    color: var(--st-navy);
    opacity: 1;
    white-space: normal;
    max-width: 16rem;
  }

  .hero {
    padding-top: 0;
    padding-bottom: 5.5rem;
    /* Photo band only — no translucent fade under type */
    background-color: var(--st-paper);
    background-image:
      var(--st-hero-image-sm),
      var(--st-hero-sky);
    background-size: 100% 10.5rem, 100% 10.5rem;
    background-position: 70% 0, top;
    background-repeat: no-repeat;
    border-bottom: 0;
  }
  .hero::before { display: none; } /* unit-grid texture not needed on solid paper */
  .hero__credit { display: none; }
  .hero .breadcrumb { display: none; }

  /* Solid paper panel under every text element — no photo bleed */
  .hero__grid {
    margin-top: 10.5rem;
    padding: var(--st-s-5) 0 var(--st-s-2);
    background: var(--st-paper);
    position: relative;
    z-index: 1;
    box-shadow: 0 -12px 24px -8px rgba(15,31,46,.08);
  }
  .hero h1 { max-width: none; color: var(--st-navy); }
  .hero .lead {
    font-size: 1.0625rem;
    margin-block: var(--st-s-3) var(--st-s-4);
    color: var(--st-ink-muted);
  }
  .hero .disc {
    box-shadow: none;
    border: 1px solid var(--st-rule);
  }
  .receipt {
    box-shadow: var(--st-shadow-card);
  }
  .stats { margin-top: -3.25rem; }
}
/* Column rhythm: Facility | Advertised | Required fees | Month 2 | 3-month | Notes | CTA */
.data-table th:nth-child(3), .data-table td:nth-child(3) { min-width: 11rem; }
.data-table th:nth-child(6), .data-table td:nth-child(6) { min-width: 11rem; }

/* ---------- Per-city heroes (production) ----------
   Default tokens use transparent placeholders → warm sky gradient.
   Photo heroes: Image Studio art under art/hero-<slug>-*. Never use corridor as a city hero. */
.hero--home {
  --st-hero-image: image-set(url("art/hero-home-metro-1600x900.webp") type("image/webp"), url("art/hero-home-metro-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-home-metro-960x540.webp") type("image/webp"), url("art/hero-home-metro-1600x900.jpg") type("image/jpeg"));
}
.hero--atlanta {
  --st-hero-image: image-set(url("art/hero-atlanta-1600x900.webp") type("image/webp"), url("art/hero-atlanta-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-atlanta-960x540.webp") type("image/webp"), url("art/hero-atlanta-1600x900.jpg") type("image/jpeg"));
}
.hero--austin {
  --st-hero-image: image-set(url("art/hero-austin-1600x900.webp") type("image/webp"), url("art/hero-austin-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-austin-960x540.webp") type("image/webp"), url("art/hero-austin-1600x900.jpg") type("image/jpeg"));
}
.hero--baltimore {
  --st-hero-image: image-set(url("art/hero-baltimore-1600x900.webp") type("image/webp"), url("art/hero-baltimore-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-baltimore-960x540.webp") type("image/webp"), url("art/hero-baltimore-1600x900.jpg") type("image/jpeg"));
}
.hero--boston {
  --st-hero-image: image-set(url("art/hero-boston-1600x900.webp") type("image/webp"), url("art/hero-boston-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-boston-960x540.webp") type("image/webp"), url("art/hero-boston-1600x900.jpg") type("image/jpeg"));
}
.hero--charlotte {
  --st-hero-image: image-set(url("art/hero-charlotte-1600x900.webp") type("image/webp"), url("art/hero-charlotte-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-charlotte-960x540.webp") type("image/webp"), url("art/hero-charlotte-1600x900.jpg") type("image/jpeg"));
}
.hero--chicago {
  --st-hero-image: image-set(url("art/hero-chicago-1600x900.webp") type("image/webp"), url("art/hero-chicago-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-chicago-960x540.webp") type("image/webp"), url("art/hero-chicago-1600x900.jpg") type("image/jpeg"));
}
.hero--cincinnati {
  --st-hero-image: image-set(url("art/hero-cincinnati-1600x900.webp") type("image/webp"), url("art/hero-cincinnati-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-cincinnati-960x540.webp") type("image/webp"), url("art/hero-cincinnati-1600x900.jpg") type("image/jpeg"));
}
.hero--cleveland {
  --st-hero-image: image-set(url("art/hero-cleveland-1600x900.webp") type("image/webp"), url("art/hero-cleveland-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-cleveland-960x540.webp") type("image/webp"), url("art/hero-cleveland-1600x900.jpg") type("image/jpeg"));
}
.hero--columbus {
  --st-hero-image: image-set(url("art/hero-columbus-1600x900.webp") type("image/webp"), url("art/hero-columbus-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-columbus-960x540.webp") type("image/webp"), url("art/hero-columbus-1600x900.jpg") type("image/jpeg"));
}
.hero--dallas {
  --st-hero-image: image-set(url("art/hero-dallas-1600x900.webp") type("image/webp"), url("art/hero-dallas-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-dallas-960x540.webp") type("image/webp"), url("art/hero-dallas-1600x900.jpg") type("image/jpeg"));
}
.hero--denver {
  --st-hero-image: image-set(url("art/hero-denver-1600x900.webp") type("image/webp"), url("art/hero-denver-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-denver-960x540.webp") type("image/webp"), url("art/hero-denver-1600x900.jpg") type("image/jpeg"));
}
.hero--detroit {
  --st-hero-image: image-set(url("art/hero-detroit-1600x900.webp") type("image/webp"), url("art/hero-detroit-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-detroit-960x540.webp") type("image/webp"), url("art/hero-detroit-1600x900.jpg") type("image/jpeg"));
}
.hero--houston {
  --st-hero-image: image-set(url("art/hero-houston-1600x900.webp") type("image/webp"), url("art/hero-houston-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-houston-960x540.webp") type("image/webp"), url("art/hero-houston-1600x900.jpg") type("image/jpeg"));
}
.hero--indianapolis {
  --st-hero-image: image-set(url("art/hero-indianapolis-1600x900.webp") type("image/webp"), url("art/hero-indianapolis-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-indianapolis-960x540.webp") type("image/webp"), url("art/hero-indianapolis-1600x900.jpg") type("image/jpeg"));
}
.hero--jacksonville {
  --st-hero-image: image-set(url("art/hero-jacksonville-1600x900.webp") type("image/webp"), url("art/hero-jacksonville-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-jacksonville-960x540.webp") type("image/webp"), url("art/hero-jacksonville-1600x900.jpg") type("image/jpeg"));
}
.hero--kansas-city {
  --st-hero-image: image-set(url("art/hero-kansas-city-1600x900.webp") type("image/webp"), url("art/hero-kansas-city-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-kansas-city-960x540.webp") type("image/webp"), url("art/hero-kansas-city-1600x900.jpg") type("image/jpeg"));
}
.hero--las-vegas {
  --st-hero-image: image-set(url("art/hero-las-vegas-1600x900.webp") type("image/webp"), url("art/hero-las-vegas-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-las-vegas-960x540.webp") type("image/webp"), url("art/hero-las-vegas-1600x900.jpg") type("image/jpeg"));
}
.hero--los-angeles {
  --st-hero-image: image-set(url("art/hero-los-angeles-1600x900.webp") type("image/webp"), url("art/hero-los-angeles-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-los-angeles-960x540.webp") type("image/webp"), url("art/hero-los-angeles-1600x900.jpg") type("image/jpeg"));
}
.hero--louisville {
  --st-hero-image: image-set(url("art/hero-louisville-1600x900.webp") type("image/webp"), url("art/hero-louisville-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-louisville-960x540.webp") type("image/webp"), url("art/hero-louisville-1600x900.jpg") type("image/jpeg"));
}
.hero--memphis {
  --st-hero-image: image-set(url("art/hero-memphis-1600x900.webp") type("image/webp"), url("art/hero-memphis-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-memphis-960x540.webp") type("image/webp"), url("art/hero-memphis-1600x900.jpg") type("image/jpeg"));
}
.hero--miami {
  --st-hero-image: image-set(url("art/hero-miami-1600x900.webp") type("image/webp"), url("art/hero-miami-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-miami-960x540.webp") type("image/webp"), url("art/hero-miami-1600x900.jpg") type("image/jpeg"));
}
.hero--milwaukee {
  --st-hero-image: image-set(url("art/hero-milwaukee-1600x900.webp") type("image/webp"), url("art/hero-milwaukee-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-milwaukee-960x540.webp") type("image/webp"), url("art/hero-milwaukee-1600x900.jpg") type("image/jpeg"));
}
.hero--minneapolis {
  --st-hero-image: image-set(url("art/hero-minneapolis-1600x900.webp") type("image/webp"), url("art/hero-minneapolis-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-minneapolis-960x540.webp") type("image/webp"), url("art/hero-minneapolis-1600x900.jpg") type("image/jpeg"));
}
.hero--nashville {
  --st-hero-image: image-set(url("art/hero-nashville-1600x900.webp") type("image/webp"), url("art/hero-nashville-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-nashville-960x540.webp") type("image/webp"), url("art/hero-nashville-1600x900.jpg") type("image/jpeg"));
}
.hero--new-orleans {
  --st-hero-image: image-set(url("art/hero-new-orleans-1600x900.webp") type("image/webp"), url("art/hero-new-orleans-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-new-orleans-960x540.webp") type("image/webp"), url("art/hero-new-orleans-1600x900.jpg") type("image/jpeg"));
}
.hero--new-york {
  --st-hero-image: image-set(url("art/hero-new-york-1600x900.webp") type("image/webp"), url("art/hero-new-york-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-new-york-960x540.webp") type("image/webp"), url("art/hero-new-york-1600x900.jpg") type("image/jpeg"));
}
.hero--oklahoma-city {
  --st-hero-image: image-set(url("art/hero-oklahoma-city-1600x900.webp") type("image/webp"), url("art/hero-oklahoma-city-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-oklahoma-city-960x540.webp") type("image/webp"), url("art/hero-oklahoma-city-1600x900.jpg") type("image/jpeg"));
}
.hero--orlando {
  --st-hero-image: image-set(url("art/hero-orlando-1600x900.webp") type("image/webp"), url("art/hero-orlando-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-orlando-960x540.webp") type("image/webp"), url("art/hero-orlando-1600x900.jpg") type("image/jpeg"));
}
.hero--philadelphia {
  --st-hero-image: image-set(url("art/hero-philadelphia-1600x900.webp") type("image/webp"), url("art/hero-philadelphia-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-philadelphia-960x540.webp") type("image/webp"), url("art/hero-philadelphia-1600x900.jpg") type("image/jpeg"));
}
.hero--phoenix {
  --st-hero-image: image-set(url("art/hero-phoenix-1600x900.webp") type("image/webp"), url("art/hero-phoenix-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-phoenix-960x540.webp") type("image/webp"), url("art/hero-phoenix-1600x900.jpg") type("image/jpeg"));
}
.hero--pittsburgh {
  --st-hero-image: image-set(url("art/hero-pittsburgh-1600x900.webp") type("image/webp"), url("art/hero-pittsburgh-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-pittsburgh-960x540.webp") type("image/webp"), url("art/hero-pittsburgh-1600x900.jpg") type("image/jpeg"));
}
.hero--portland {
  --st-hero-image: image-set(url("art/hero-portland-1600x900.webp") type("image/webp"), url("art/hero-portland-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-portland-960x540.webp") type("image/webp"), url("art/hero-portland-1600x900.jpg") type("image/jpeg"));
}
.hero--raleigh {
  --st-hero-image: image-set(url("art/hero-raleigh-1600x900.webp") type("image/webp"), url("art/hero-raleigh-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-raleigh-960x540.webp") type("image/webp"), url("art/hero-raleigh-1600x900.jpg") type("image/jpeg"));
}
.hero--richmond {
  --st-hero-image: image-set(url("art/hero-richmond-1600x900.webp") type("image/webp"), url("art/hero-richmond-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-richmond-960x540.webp") type("image/webp"), url("art/hero-richmond-1600x900.jpg") type("image/jpeg"));
}
.hero--sacramento {
  --st-hero-image: image-set(url("art/hero-sacramento-1600x900.webp") type("image/webp"), url("art/hero-sacramento-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-sacramento-960x540.webp") type("image/webp"), url("art/hero-sacramento-1600x900.jpg") type("image/jpeg"));
}
.hero--salt-lake-city {
  --st-hero-image: image-set(url("art/hero-salt-lake-city-1600x900.webp") type("image/webp"), url("art/hero-salt-lake-city-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-salt-lake-city-960x540.webp") type("image/webp"), url("art/hero-salt-lake-city-1600x900.jpg") type("image/jpeg"));
}
.hero--san-antonio {
  --st-hero-image: image-set(url("art/hero-san-antonio-1600x900.webp") type("image/webp"), url("art/hero-san-antonio-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-san-antonio-960x540.webp") type("image/webp"), url("art/hero-san-antonio-1600x900.jpg") type("image/jpeg"));
}
.hero--san-diego {
  --st-hero-image: image-set(url("art/hero-san-diego-1600x900.webp") type("image/webp"), url("art/hero-san-diego-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-san-diego-960x540.webp") type("image/webp"), url("art/hero-san-diego-1600x900.jpg") type("image/jpeg"));
}
.hero--san-francisco {
  --st-hero-image: image-set(url("art/hero-san-francisco-1600x900.webp") type("image/webp"), url("art/hero-san-francisco-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-san-francisco-960x540.webp") type("image/webp"), url("art/hero-san-francisco-1600x900.jpg") type("image/jpeg"));
}
.hero--san-jose {
  --st-hero-image: image-set(url("art/hero-san-jose-1600x900.webp") type("image/webp"), url("art/hero-san-jose-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-san-jose-960x540.webp") type("image/webp"), url("art/hero-san-jose-1600x900.jpg") type("image/jpeg"));
}
.hero--seattle {
  --st-hero-image: image-set(url("art/hero-seattle-1600x900.webp") type("image/webp"), url("art/hero-seattle-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-seattle-960x540.webp") type("image/webp"), url("art/hero-seattle-1600x900.jpg") type("image/jpeg"));
}
.hero--st-louis {
  --st-hero-image: image-set(url("art/hero-st-louis-1600x900.webp") type("image/webp"), url("art/hero-st-louis-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-st-louis-960x540.webp") type("image/webp"), url("art/hero-st-louis-1600x900.jpg") type("image/jpeg"));
}
.hero--tampa {
  --st-hero-image: image-set(url("art/hero-tampa-1600x900.webp") type("image/webp"), url("art/hero-tampa-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-tampa-960x540.webp") type("image/webp"), url("art/hero-tampa-1600x900.jpg") type("image/jpeg"));
}
.hero--washington-dc {
  --st-hero-image: image-set(url("art/hero-washington-dc-1600x900.webp") type("image/webp"), url("art/hero-washington-dc-1600x900.jpg") type("image/jpeg"));
  --st-hero-image-sm: image-set(url("art/hero-washington-dc-960x540.webp") type("image/webp"), url("art/hero-washington-dc-1600x900.jpg") type("image/jpeg"));
}
.hero--sky {
  /* Explicit fallback class — bright warm gradient, no photo */
  --st-hero-image: linear-gradient(transparent, transparent);
  --st-hero-image-sm: linear-gradient(transparent, transparent);
}

/* ---------- Home city index (A+C hybrid) ----------
   PRODUCTION index: A+C hybrid. Multi-page cities → hub (C). Single-page cities → card + chips (A).
   City name first; never SEO titles as headlines. Hardened so links/chips never run together. */
.city-index { display: flex; flex-direction: column; gap: 1.5rem; }
.city-hubs { display: flex; flex-direction: column; gap: 1rem; }
.city-hub { background: var(--st-paper-raised); border: 1px solid var(--st-rule); border-top: 4px solid var(--st-navy); border-radius: var(--st-radius-lg); overflow: hidden; }
.city-hub__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; padding: .875rem 1.125rem; background: var(--st-paper-muted); border-bottom: 1px solid var(--st-rule); }
.city-hub__city { font-family: var(--st-font-display); font-size: 1.375rem; font-weight: 700; color: var(--st-navy); margin: 0; line-height: 1.2; }
.city-hub__meta { font-size: var(--st-fs-xs); color: var(--st-ink-faint); margin: 0; }
.city-hub__body { display: grid; grid-template-columns: 1fr; }
.city-hub__body a { display: block; min-height: 44px; padding: 1rem 1.125rem; text-decoration: none; color: var(--st-ink); border: 0; border-top: 1px solid var(--st-rule); }
.city-hub__body a:first-child { border-top: 0; }
.city-hub__body a:hover { background: var(--st-row-hover); }
.city-hub__body a:focus-visible { outline: 2px solid var(--st-focus); outline-offset: -2px; }
.city-hub__size { display: block; font-size: 1rem; font-weight: 700; color: var(--st-navy); margin: 0 0 .25rem; line-height: 1.25; }
.city-hub__body a.is-drive .city-hub__size { color: var(--st-cta); }
.city-hub__desc { display: block; font-size: var(--st-fs-xs); color: var(--st-ink-muted); margin: 0; line-height: 1.35; }
.city-grid { display: grid; grid-template-columns: 1fr; gap: .875rem; }
.city-card { display: flex; flex-direction: column; background: var(--st-paper-raised); border: 1px solid var(--st-rule); border-top: 4px solid var(--st-navy); border-radius: var(--st-radius-lg); padding: 1rem 1rem .875rem; }
.city-card__city { font-family: var(--st-font-display); font-size: 1.25rem; font-weight: 700; color: var(--st-navy); margin: 0 0 .125rem; line-height: 1.2; }
.city-card__meta { font-size: var(--st-fs-xs); color: var(--st-ink-faint); margin: 0 0 .75rem; }
.city-card__chips { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: auto; }
.chip { display: inline-flex; flex-direction: column; justify-content: center; gap: .1875rem; flex: 1 1 8rem; min-width: 7rem; min-height: 44px; box-sizing: border-box; padding: .625rem .75rem; background: var(--st-paper-muted); border: 1px solid var(--st-rule); border-radius: var(--st-radius); color: var(--st-ink); text-decoration: none; line-height: 1.2; }
.chip:hover { border-color: var(--st-brass); }
.chip:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
.chip__size { display: block; font-size: var(--st-fs-xs); font-weight: 700; color: var(--st-navy); }
.chip__kind { display: block; font-size: .6875rem; color: var(--st-ink-muted); }
.chip--drive { background: #eef4f2; }
.chip--drive .chip__size { color: var(--st-cta); }
@media (min-width: 40rem) {
  .city-grid { grid-template-columns: repeat(2, 1fr); }
  .city-hub__body { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .city-hub__body a { border-top: 0; border-left: 1px solid var(--st-rule); }
  .city-hub__body a:first-child { border-left: 0; }
}
@media (min-width: 60rem) { .city-grid { grid-template-columns: repeat(3, 1fr); } }