/* Self-hosted variable fonts. Replaces the Google Fonts @import, which was a
   render-blocking chain the preload scanner could not see past. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #16161a;
  --bg-elevated: #1c1d22;
  --bg-deep: #08080a;
  --surface: #131317;
  --surface-strong: #1a1b20;
  --line: rgba(255, 255, 255, 0.22);
  /* Decorative card edges can stay soft (--line), but WCAG 1.4.11 requires >=3:1 for the
     boundary of an actual UI control. --line-strong measures 3.5:1 against the field fill
     and 4.2:1 against the page, so form inputs and filter controls use it instead. */
  --line-strong: rgba(255, 255, 255, 0.38);
  --text: #ffffff;
  --muted: #b7bdcc;
  --primary: #0052ff;
  --secondary: #00f0dd;
  --sky: #7fd8ff;
  --steel: #67676b;
  --gradient: linear-gradient(115deg, #0052ff 0%, #00b2ff 50%, #00f0dd 100%);
  /* Same hue family as --gradient, but the blue stop is lifted so the near-black text
     sitting on the CTA band clears 4.5:1 at every point (#0052ff only reached 3.47:1). */
  --gradient-cta: linear-gradient(115deg, #2b7bff 0%, #00b2ff 50%, #00f0dd 100%);
  --gradient-soft: linear-gradient(135deg, rgba(0, 82, 255, 0.25), rgba(0, 240, 221, 0.2));
  --shadow: 10px 10px 0 rgba(0, 82, 255, 0.25);
  --radius: 6px;
  --radius-sm: 4px;
  --container: min(1180px, calc(100vw - 2rem));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: Manrope, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Fraunces, serif;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; color: var(--muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* The site defines its own focus indicator rather than leaning on the UA default,
   which varies in visibility across the dark surfaces here. */
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

/* Skip link: only way to bypass the sticky header + 6 repeated nav links (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--secondary);
  color: #06090c;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: var(--container);
  margin-inline: auto;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--secondary);
  margin-bottom: 0.8em;
}
.eyebrow.center, h2.center, p.center { text-align: center; margin-inline: auto; }
p.center.muted { max-width: 640px; }
.muted { color: var(--muted); }
.accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.button, .button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 54px;
  padding: 0 1.35rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.92rem;
  transition: transform .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.button {
  background: var(--secondary);
  color: #06090c;
  box-shadow: 6px 6px 0 var(--primary);
}
.button:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--primary);
}
.button:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--primary); }
.button-ghost {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
  box-shadow: 6px 6px 0 rgba(255,255,255,0.18);
}
.button-ghost:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
.button-row { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 10, 0.9);
  border-bottom: 2px solid var(--line);
}
/* Blur lives on a pseudo-element, not .site-header itself: backdrop-filter on the
   header would create a containing block for its position:fixed mobile nav,
   confining that full-screen overlay to the header's own small box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
}
.brand-mark img { height: 40px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.8rem; }
.site-nav a { font-weight: 600; font-size: 0.95rem; color: var(--muted); transition: color .2s; }
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--text); }

/* Venue Partner: a different audience (venue owners, not advertisers) — set apart from the rest of the nav */
.site-nav a.nav-alt {
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  color: var(--sky);
}
.site-nav a.nav-alt:hover,
.site-nav a.nav-alt.active {
  border-color: var(--secondary);
  color: var(--secondary);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6.5rem 0 4.5rem;
  background: var(--bg-deep);
}
/* Brand wash behind the hero content. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 0%, rgba(0,82,255,0.30), transparent 52%),
    radial-gradient(circle at 90% 10%, rgba(0,240,221,0.16), transparent 48%);
}
/* Venue photo, now an inline banner between the headline and the lede rather than
   a full-bleed background. */
.hero-photo {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  margin: 1.6rem 0 1.8rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); margin-bottom: 0.4em; }
.hero .lede { font-size: 1.15rem; max-width: 780px; }
.hero-microstats {
  display: flex;
  gap: 2.4rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--line);
}
.microstat { display: flex; flex-direction: column; }
.microstat strong { font-family: Fraunces, serif; font-weight: 900; font-size: 1.7rem; }
.microstat span { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
.hero-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: 6px 6px 0 rgba(0, 82, 255, 0.25);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hero-card:hover {
  border-color: var(--secondary);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(0, 240, 221, 0.3);
}
.hero-card h3 { font-size: 1.3rem; }
.hero-card p { margin-bottom: 0; }
.hero-card .hero-card-note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Stat strip */
.stat-strip { background: var(--bg-elevated); padding: 3rem 0; border-block: 2px solid var(--line); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stat-grid strong { display: block; font-family: Fraunces, serif; font-size: 2.2rem; }
.stat-grid span { color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Coverage */
.coverage { padding: 6rem 0; }
.coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.coverage-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.coverage-images { display: grid; gap: 1rem; }
.coverage-images img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Coverage photo band: background photo + frosted-glass card (matches original site format) */
.coverage-photo-band { position: relative; overflow: hidden; }
.coverage-photo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--coverage-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
}
.coverage-photo-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.8) 48%, rgba(8,8,10,0.55) 100%),
    linear-gradient(135deg, rgba(0,82,255,0.28), rgba(0,240,221,0.14));
}
.coverage-photo-band .coverage-grid {
  position: relative;
  z-index: 1;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: 28px;
  border: 2px solid var(--line);
  background: rgba(19, 19, 23, 0.45);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.coverage-photo-band .coverage-images { grid-template-columns: 1fr 1fr; }
.coverage-photo-band .coverage-images img { height: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); }

/* Brands */
.brands { padding: 5rem 0; background: var(--bg-elevated); }
/* Fixed column counts rather than auto-fit: six logos divide evenly into 6 / 3 / 2, so the
   row never ends on a lone orphan tile the way a min-width-driven wrap does. */
.brand-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
/* These are real brand marks that ship on their own white backgrounds, so the tile carries
   a white plate rather than the dark --surface used elsewhere: it lets each logo sit on the
   ground its owner designed it for instead of reading as a white rectangle on near-black. */
.brand-row article {
  background: #ffffff;
  border: 2px solid rgba(19, 19, 23, 0.14);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The source files are trimmed to the mark itself, so a shared height cap alone would let
   the wide logos (Generac, State Farm) tower over the stacked ones. Capping width as well
   holds every mark at about the same optical weight across the row. */
.brand-row img {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* One shared height cap suits the wide single-line marks but starves the stacked ones --
   Berkshire Hathaway packs three lines into the same 44px Generac gives one, so its name
   stops being readable. These lift the multi-line marks until each reads at a comparable
   weight; the wide marks hit the width cap first and are unaffected either way. */
.brand-row img[src$="berkshire-hathaway-homeservices.webp"] { max-height: 54px; }
.brand-row img[src$="farm-bureau.webp"] { max-height: 50px; }
.brand-row img[src$="the-joint-chiropractic.webp"],
.brand-row img[src$="exp-realty.webp"] { max-height: 48px; }

/* Markets */
.markets { padding: 6rem 0; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.market-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.8rem;
  text-align: center;
}
.tag {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--sky);
  font-weight: 800;
  margin-bottom: 0.6em;
}
.market-card h3 { font-size: 1.4rem; margin-bottom: 0.2em; }
.market-card span { color: var(--muted); font-size: 0.9rem; }

/* Results */
.results { padding: 6rem 0; background: var(--bg-elevated); }
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.5rem;
}
.result-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* height:auto is load-bearing: the img carries width/height attributes, and that
   presentational height wins over aspect-ratio unless height is explicitly auto,
   which left the tiles portrait and cropped the sides off the screen. */
.result-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.result-card h3, .result-card p { padding-inline: 1.6rem; }
.result-card h3 { padding-top: 1.4rem; font-size: 1.25rem; }
.result-card p:last-child { padding-bottom: 1.6rem; }

/* How it works */
.how-it-works { padding: 6rem 0; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.step-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.8rem;
  position: relative;
}
.step-num {
  font-family: Fraunces, serif;
  font-size: 2rem;
  /* --primary at 0.5 opacity measured 1.64:1 on --surface. --sky keeps the step numbers
     visually recessive while clearing 8.6:1 on every background they appear on. */
  color: var(--sky);
  opacity: 0.9;
  display: block;
  margin-bottom: 0.4em;
}
.step-card h3 { font-size: 1.2rem; }

/* Full-bleed photo break */
.full-bleed {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-block: 2px solid var(--line);
}
.full-bleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) saturate(1.1);
}
.full-bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8,8,10,0.9) 0%, rgba(8,8,10,0.15) 60%);
}
.full-bleed .overlay {
  position: relative;
  z-index: 1;
  padding: 3rem clamp(1.2rem, 4vw, 4rem);
  width: 100%;
}
.full-bleed .overlay p.eyebrow { color: var(--secondary); }
.full-bleed .overlay h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 720px;
  margin-bottom: 0;
}

/* Bold color-block CTA break */
.color-block {
  background: var(--gradient-cta);
  padding: 4rem 0;
}
.color-block .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.color-block h2 {
  color: #06090c;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  max-width: 620px;
  margin: 0;
}
.color-block p {
  color: #06090c;
  font-weight: 600;
  margin: 0.4em 0 0;
}
.color-block .button-ghost {
  border-color: #06090c;
  color: #06090c;
  background: rgba(6, 9, 12, 0.08);
  box-shadow: 6px 6px 0 rgba(6, 9, 12, 0.3);
}
.color-block .button-ghost:hover {
  background: rgba(6, 9, 12, 0.16);
  box-shadow: 3px 3px 0 rgba(6, 9, 12, 0.3);
}

/* Testimonials */
.testimonials { padding: 6rem 0; }
.testimonials .intro { text-align: center; }
.testimonials blockquote {
  font-family: Fraunces, serif;
  font-size: 1.6rem;
  font-weight: 700;
  max-width: 700px;
  margin: 1.5rem auto;
  color: var(--text);
  text-align: center;
}
.review-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 1.4rem;
}
.badge { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--secondary); }
.score { font-weight: 800; }
.stars { color: #ffb400; letter-spacing: 0.1em; }

.review-row {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 3rem;
  padding: 0.4rem 0.4rem 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) transparent;
}
.review-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.6rem;
  box-shadow: 5px 5px 0 rgba(0, 82, 255, 0.2);
  display: flex;
  flex-direction: column;
}
.review-card .stars { display: block; margin-bottom: 0.7em; font-size: 0.95rem; }
.review-card .quote { color: var(--text); font-size: 0.98rem; flex-grow: 1; margin-bottom: 1rem; }
.review-card .reviewer { font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--secondary); }

/* FAQ */
.faq { padding: 6rem 0; background: var(--bg-elevated); }
.faq-list { max-width: 780px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.3rem 1.6rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--secondary);
  transition: transform .25s;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
/* max-height:0 clips the answer visually but leaves it in the accessibility tree, so a
   screen reader would read all seven answers at once. visibility:hidden removes it; the
   0s delay holds it visible until the collapse animation finishes. */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .3s ease, padding .3s ease, visibility 0s .3s;
  padding: 0 1.6rem;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 1.6rem 1.4rem;
  visibility: visible;
  transition: max-height .3s ease, padding .3s ease, visibility 0s;
}
.faq-answer p { margin: 0; }

/* Footer */
.site-footer { background: var(--bg-deep); border-top: 2px solid var(--line); padding-top: 5rem; }
.footer-cta { text-align: center; max-width: 700px; padding-bottom: 4rem; }
.footer-cta h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.footer-cta .button-row { justify-content: center; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-block: 3rem;
  border-top: 2px solid var(--line);
}
.footer-brand img { height: 36px; width: auto; margin-bottom: 1rem; }
.footer-grid h4 { font-family: Manrope, sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--secondary); margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-grid a { color: var(--muted); font-size: 0.92rem; transition: color .2s; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { border-top: 2px solid var(--line); padding: 1.6rem 0; text-align: center; }
.footer-bottom p { font-size: 0.85rem; margin: 0; }

/* Responsive */
/* ===== Shared sub-page components ===== */

/* Page hero (smaller than homepage hero) */
.page-hero {
  padding: 5rem 0 3.5rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(15,102,251,0.22), transparent 55%),
    radial-gradient(circle at 92% 15%, rgba(87,216,209,0.16), transparent 50%),
    var(--bg-deep);
  text-align: center;
}
.page-hero .container { max-width: 820px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.page-hero .lede { font-size: 1.1rem; max-width: 640px; margin-inline: auto; }
.page-hero .button-row { justify-content: center; }

/* Asymmetric two-column variant, for pages with a relevant visual */
.page-hero.page-hero-split { text-align: left; }
.page-hero.page-hero-split .container {
  max-width: var(--container);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.page-hero.page-hero-split h1 { margin-inline: 0; }
.page-hero.page-hero-split .lede { margin-inline: 0; }
.page-hero.page-hero-split .button-row { justify-content: flex-start; }
.page-hero.page-hero-split .eyebrow.center { text-align: left; margin-inline: 0; }
.page-hero.page-hero-split h1.center, .page-hero.page-hero-split p.center { text-align: left; }

.page-hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--line);
  box-shadow: 12px 12px 0 rgba(0, 82, 255, 0.28);
  aspect-ratio: 4 / 3;
}
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Generic two-col section */
.split { padding: 5rem 0; }
.split .container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split.alt { background: var(--bg-elevated); }
.split h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }

/* Feature grid (icon-less cards) */
.feature-grid, .benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.feature-card, .benefit-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.8rem;
}
.feature-card h3, .benefit-card h3 { font-size: 1.15rem; margin-bottom: 0.3em; }
.feature-card p, .benefit-card p { margin-bottom: 0; font-size: 0.95rem; }

/* Numbered highlight list (billboards page) */
.highlight-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }
.highlight-item { display: flex; gap: 1rem; align-items: flex-start; }
.highlight-item .step-num { font-size: 1.4rem; margin: 0; }
.highlight-item p { margin: 0; color: var(--text); font-weight: 600; }

/* Coverage chip list */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }
.chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.chip .view {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--secondary);
  font-weight: 800;
}

/* Simple checklist */
.check-list { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text); font-weight: 500; }
.check-list li::before { content: '✓'; color: var(--secondary); font-weight: 800; flex-shrink: 0; }

/* Advertiser spotlight / carousel */
.spotlight-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.spotlight-card { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--line); position: relative; }
.spotlight-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.spotlight-card span {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(8,16,24,0.7);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sky);
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.team-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}
.team-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.team-card .team-body { padding: 1.3rem; }
.team-card .role {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--secondary);
}
.team-card h3 { font-size: 1.1rem; margin: 0.3em 0 0.5em; }
.team-card p { font-size: 0.88rem; margin: 0; }

/* Leaflet map embed */
.map-embed {
  height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--line);
  margin-top: 2.5rem;
  background: var(--bg-elevated);
}
.map-embed.tall { height: 620px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #1c1d21; color: var(--text); }
.leaflet-popup-content-wrapper a { color: var(--secondary); }
.dw-marker span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 4px rgba(15,102,251,0.25), 0 0 12px rgba(87,216,209,0.6);
  border: 2px solid #fff;
}

/* Marker cluster bubbles (Leaflet.markercluster) */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background: rgba(0, 82, 255, 0.18);
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background: var(--gradient);
  color: #06090c;
  font-weight: 800;
}

/* Filter bar (map page) */
.filter-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
.filter-bar input, .filter-bar select {
  width: 100%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  padding: 0.9rem 1.1rem;
}
.filter-bar select { appearance: none; }
.result-count { margin-top: 1.2rem; min-height: 1.6em; color: var(--muted); font-size: 0.9rem; }

/* Venue card list (map page) */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1.8rem;
}
.venue-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.4rem;
}
.venue-card .tag { margin-bottom: 0.7em; }
.venue-card h3 { font-size: 1.05rem; margin-bottom: 0.15em; }
.venue-card .city { font-size: 0.82rem; color: var(--sky); font-weight: 700; margin-bottom: 0.5em; }
.venue-card p:last-child { font-size: 0.88rem; margin-bottom: 0; }
.venue-card[hidden] { display: none; }

/* Forms */

/* Two-column layout: intro/context copy on the left, form on the right */
.split-form {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: start;
  text-align: left;
}
.split-form .best-fit-box {
  margin-top: 1.6rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
}
.split-form .best-fit-box .eyebrow { margin-bottom: 0.4em; }
.split-form .best-fit-box p:not(.eyebrow) { margin: 0; font-size: 0.92rem; }

.form-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem;
  margin-top: 2rem;
  box-shadow: 8px 8px 0 rgba(0, 82, 255, 0.22);
}
.split-form .form-card { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.form-field label .req { color: var(--secondary); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-elevated);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  padding: 0.85rem 1rem;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}
.form-card .button { margin-top: 0.5rem; width: fit-content; border: none; }

/* Requirement pill row */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.pill {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Contact info cards */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.info-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.info-card .tag { color: var(--secondary); }
.info-card h3 { font-size: 1.2rem; }
.info-card a.value {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 800;
  color: var(--text);
  font-size: 1.05rem;
}
.info-card a.value:hover { color: var(--secondary); }

/* Bold hard-shadow treatment applied uniformly across all remaining card types */
.feature-card, .benefit-card, .market-card, .step-card, .result-card,
.team-card, .venue-card, .form-card, .faq-item, .spotlight-card,
.brand-row article {
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 5px 5px 0 rgba(0, 82, 255, 0.2);
}
.feature-card:hover, .benefit-card:hover, .market-card:hover, .step-card:hover, .result-card:hover,
.team-card:hover, .venue-card:hover, .spotlight-card:hover,
.brand-row article:hover {
  border-color: var(--secondary);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(0, 240, 221, 0.28);
}
.chip, .pill {
  box-shadow: 3px 3px 0 rgba(0, 82, 255, 0.2);
}

/* Headline scale bump for bold sub-page heros and section titles */
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.eyebrow { font-weight: 800; letter-spacing: 0.18em; }

@media (max-width: 900px) {
  /* translateX alone parks the panel off-screen but leaves its links focusable, so
     keyboard users tabbed through five invisible links. visibility:hidden takes them out
     of the tab order; the 0s delay keeps the slide-out animation visible on close. */
  .site-nav {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg-deep);
    flex-direction: column;
    padding: 2rem;
    align-items: flex-start;
    gap: 1.4rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s, visibility 0s .3s;
  }
  .site-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s, visibility 0s;
  }
  .nav-toggle { display: flex; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-cards, .results-grid, .steps-grid { grid-template-columns: 1fr; }
  .page-hero.page-hero-split .container { grid-template-columns: 1fr; text-align: center; }
  .page-hero.page-hero-split .eyebrow.center,
  .page-hero.page-hero-split h1.center,
  .page-hero.page-hero-split p.center { text-align: center; margin-inline: auto; }
  .page-hero.page-hero-split .button-row { justify-content: center; }
  .page-hero-photo { order: -1; max-width: 320px; margin-inline: auto; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid { grid-template-columns: 1fr; }
  .coverage-photo-band .coverage-images { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split .container { grid-template-columns: 1fr; }
  .feature-grid, .benefit-grid, .spotlight-track, .info-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-row { grid-template-columns: repeat(3, 1fr); }
  .venue-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .split-form { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand-row { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}