/* ==========================================================================
   Title Data — Modernized Stylesheet
   Editorial-corporate aesthetic for Texas's premier title plant
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette — TDI standard */
  --tdi-blue-900: #152c47;  /* deep navy — footer, darkest sections */
  --tdi-blue-800: #1e3a5f;  /* dark navy — nav, hero, primary CTAs */
  --tdi-blue-700: #264a77;  /* intermediate navy */
  --tdi-blue-600: #2e6da4;  /* medium blue — links, accents, eyebrows */
  --tdi-gold: #c8a84b;      /* gold — logo star, branding accents */
  --tdi-gold-dark: #a88a33;
  --tdi-ink: #1e3a5f;       /* headings — matches nav navy */
  --tdi-text: #333333;      /* body paragraph text */
  --tdi-muted: #5a6878;     /* secondary descriptive text */
  --tdi-border: #d4dde8;
  --tdi-border-blue: #c2d0e2;
  --tdi-surface: #ffffff;           /* body & card background */
  --tdi-surface-alt: #e8f0f8;       /* light blue — alternating sections */
  --tdi-surface-blue: #d5e2ef;      /* deeper blue wash */
  --tdi-surface-dark: #152c47;      /* deep navy surface */

  /* Regional colors (preserved from original map) */
  --region-austin: #1789be;
  --region-dfw: #07638a;
  --region-houston: #144d85;
  --region-north: #91bdc8;
  --region-san-antonio: #5e81a1;
  --region-south: #4169e1;
  --region-west: #07475f;
  --region-future: #429e58;

  /* Typography — Apple's system font stack.
     On Apple devices, `-apple-system` / `BlinkMacSystemFont` resolve to SF Pro
     (apple.com's primary typeface). Windows falls to Segoe UI; Android to
     Roboto; other Linux to the platform sans. The display stack layers
     Apple's New York serif companion for editorial headlines. */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", Charter, "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --max-width: 1280px;
  --nav-height: 76px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Utility: italic blue highlight used inside <h2> em on landing sections */
.hl-blue-italic {
  font-style: italic;
  color: var(--tdi-blue-600);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tdi-text);
  background: var(--tdi-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--tdi-blue-600);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
a:hover { color: var(--tdi-blue-800); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--tdi-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 var(--space-5);
}

p { margin: 0 0 var(--space-4); }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tdi-blue-800);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 14px rgba(21,44,71,0.18);
}
.nav-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 var(--space-5);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
/* Single-image brand lockup — aspect-ratio preserved, height keeps the
   nav's original visual footprint. .nav-brand-text is retained in markup
   for accessibility but visually hidden. */
.nav-brand img {
  height: 56px;
  width: auto;
  display: block;
}
.nav-brand-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.nav-brand-tagline {
  font-size: 0.72rem;
  color: var(--tdi-gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 500;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nav-links a:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}
.nav-links a.is-active {
  color: var(--tdi-gold);
  background: rgba(200,168,75,0.08);
}
/* When the Contact button itself is the active page, keep the full gold
   treatment and add a subtle navy ring to signal "you are here" */
.nav-links a.nav-cta.is-active {
  background: var(--tdi-gold);
  color: var(--tdi-ink) !important;
  box-shadow: 0 0 0 2px var(--tdi-blue-900) inset,
              0 4px 20px rgba(200,168,75,0.5);
}
.nav-links a.nav-cta.is-active:hover {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px var(--tdi-blue-900) inset,
              0 6px 24px rgba(200,168,75,0.6);
}.nav-cta {
  background: var(--tdi-gold);
  color: var(--tdi-ink) !important;
  box-shadow: 0 4px 20px rgba(200,168,75,0.4);
  padding: 0.6rem 1.1rem !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
}
.nav-cta:hover {
  background: #fff !important;
  color: var(--tdi-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200,168,75,0.5);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 8px;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 101;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out), background 0.2s;
  transform-origin: center;
}
/* Animate hamburger → X when the menu is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--space-7) 0;
  background: var(--tdi-surface);
  overflow: hidden;
  border-top: 1px solid var(--tdi-border-blue);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 30%, rgba(46,109,164,0.07) 0%, transparent 55%);
  pointer-events: none;
}

/* Blue stats band that sits under the map */
.hero-inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  padding-inline: var(--space-5);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tdi-blue-800);
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--tdi-blue-800);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  white-space: nowrap;
}
/* Mobile: shrink the "Since 1967 · Houston, Texas" pill so it fits the
   narrowest viewport (320px). Without this, the pill runs off the right
   edge because the container's content area is ~272px wide at 320vw. */
@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.7rem;
    gap: 6px;
  }
  .hero-eyebrow::before {
    width: 5px;
    height: 5px;
  }
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tdi-gold);
  box-shadow: 0 0 0 3px rgba(200,168,75,0.35);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 400;
  margin-bottom: var(--space-5);
  letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: italic;
  color: var(--tdi-blue-800);
  font-weight: 500;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--tdi-muted);
  max-width: 620px;
  margin: 0 auto var(--space-7);
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}

/* Mobile: switch to a 2-column grid so both buttons share the same width,
   and let any .btn inside stretch to fill its cell. Using minmax(0, 1fr)
   (not plain 1fr) overrides the implicit min-content floor — otherwise the
   column with the longer button label grabs more space. */
@media (max-width: 640px) {
  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/* Narrow phones: stack vertically, still equal-width */
@media (max-width: 420px) {
  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}


.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.btn > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-primary {
  background: var(--tdi-blue-800);
  color: #fff;
  box-shadow: 0 4px 14px rgba(21,44,71,0.22);
}
.btn-primary:hover {
  background: var(--tdi-blue-900);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(21,44,71,0.3);
}
.btn-ghost {
  background: transparent;
  color: var(--tdi-blue-800);
  border-color: var(--tdi-blue-800);
}
.btn-ghost:hover {
  background: var(--tdi-blue-800);
  color: #fff;
}
/* Gold CTA — same visual language as .nav-cta but composable with .btn.
   Use when you want a primary call-to-action that matches the nav Contact
   button (homepage hero, feature cards, etc.). */
.btn-gold {
  background: var(--tdi-gold);
  color: var(--tdi-ink);
  border-color: var(--tdi-gold);
  box-shadow: 0 4px 20px rgba(200,168,75,0.4);
  font-weight: 600;
}
.btn-gold:hover {
  background: #fff;
  color: var(--tdi-ink);
  border-color: var(--tdi-gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200,168,75,0.5);
}
.btn-sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
}

/* Inline button — a compact gold pill for use inside flowing paragraph text
   (e.g., "click [here] to continue"). Sized to fit the paragraph's line-height
   without disrupting the baseline grid; includes a hairline arrow to hint at
   the link action. */
.btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.75em;
  background: var(--tdi-gold);
  color: var(--tdi-ink);
  border: 1px solid var(--tdi-gold);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92em;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: baseline;
  position: relative;
  top: -0.1em;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
  box-shadow: 0 2px 8px rgba(200,168,75,0.25);
}
.btn-inline:hover,
.btn-inline:focus-visible {
  background: #ffffff;
  color: var(--tdi-ink);
  border-color: var(--tdi-gold-dark);
  box-shadow: 0 3px 12px rgba(200,168,75,0.4);
  text-decoration: none;
}
.btn-inline svg {
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-out);
}
.btn-inline:hover svg {
  transform: translateX(2px);
}
/* The pill is intentionally compact (it sits inline inside prose), so a
   larger visual would break the line-height. Instead we extend the tap
   target with an invisible ::before overlay — the button stays visually
   27px tall but has a 44px-tall clickable area. */
.btn-inline::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

/* Utility: prevent a span from breaking across lines. Useful when an inline
   button needs to stay on the same line as its preceding text. On very narrow
   viewports the nowrap is relaxed to prevent horizontal overflow. */
.nobreak {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .nobreak { white-space: normal; }
}

/* Stats band */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--tdi-border);
  border: 1px solid var(--tdi-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  background-color: var(--tdi-border);
}
.stat {
  background: var(--tdi-surface);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 500;
  color: var(--tdi-blue-900);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-value sup {
  font-size: 0.5em;
  color: var(--tdi-gold-dark);
  font-weight: 600;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--tdi-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* ---------- Sections ---------- */
section {
  padding: var(--space-9) 0;
  scroll-margin-top: var(--nav-height);
}
.section-alt { background: var(--tdi-surface-alt); }
.section-blue {
  background: linear-gradient(180deg, var(--tdi-surface-alt) 0%, var(--tdi-surface-blue) 100%);
  position: relative;
}
/* #about gets a warm cream ground so it contrasts with the light-blue
   #testimonials above and the light-blue .section-blue #owners below. */
#about {
  background: #fdfbf6;
}
.section-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 90% 15%, rgba(30,58,95,0.09) 0%, transparent 50%);
  pointer-events: none;
}
.section-blue > * { position: relative; z-index: 1; }
.section-header {
  max-width: 740px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.section-eyebrow {
  display: block;
  font-size: 2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tdi-gold-dark);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
/* Mobile: keep the eyebrow on a single line. Scale the type down so the
   longest label ("Customer Feedback", "Account Management") fits the
   narrowest supported viewport (320px) without wrapping. */
@media (max-width: 640px) {
  .section-eyebrow {
    white-space: nowrap;
    font-size: clamp(0.85rem, 4.2vw, 1.4rem);
    letter-spacing: 0.15em;
    line-height: 1.3;
  }
}
.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.section-header p {
  font-size: 1.1rem;
  color: var(--tdi-muted);
  margin: 0;
}

/* ---------- Map section (now the page hero) ---------- */
.map-section {
  padding: 0 0 var(--space-5);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(46,109,164,0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--tdi-surface-alt) 0%, #ffffff 85%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Layer 1: animated dot-grid — slowly drifts diagonally */
.map-section::before {
  content: "";
  position: absolute;
  inset: -48px;                 /* oversize so edges stay covered as it drifts */
  background-image: radial-gradient(circle, rgba(30,58,95,0.1) 1px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 40%, transparent 100%);
  animation: map-dots-drift 32s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes map-dots-drift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }  /* 2 tiles — seamless loop */
}

/* Layer 2: static color washes + footer border, kept on ::after */
.map-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(30,58,95,0.12) 0%, transparent 45%),
    radial-gradient(circle at 88% 25%, rgba(46,109,164,0.09) 0%, transparent 55%),
    radial-gradient(circle at 50% 95%, rgba(200,168,75,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Bottom fade rule — promoted to its own element via container decoration below */
.map-section > .container { position: relative; z-index: 1; }

/* Decorative gold→blue fade line — now a standalone layer inside container */
.map-section > .container::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: calc(var(--space-9) * -0.5);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tdi-gold) 30%,
    var(--tdi-blue-600) 70%,
    transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}

/* Texas silhouette halo — a gold drop-shadow glow around the active counties,
   with a one-shot pulse on page load. The filled (colored) counties form the
   state silhouette, so the drop-shadow naturally outlines Texas. */
#mapbase svg {
  filter: drop-shadow(0 0 0 rgba(200,168,75,0));
  animation: texas-halo-pulse 3.2s var(--ease-out) 0.3s 1 both,
             texas-halo-idle 8s ease-in-out 3.5s infinite;
}
@keyframes texas-halo-pulse {
  0%   { filter: drop-shadow(0 0 0 rgba(200,168,75,0))
                 drop-shadow(0 2px 6px rgba(30,58,95,0.18)); }
  35%  { filter: drop-shadow(0 0 24px rgba(200,168,75,0.75))
                 drop-shadow(0 0 12px rgba(200,168,75,0.5))
                 drop-shadow(0 2px 6px rgba(30,58,95,0.18)); }
  100% { filter: drop-shadow(0 0 10px rgba(200,168,75,0.25))
                 drop-shadow(0 2px 6px rgba(30,58,95,0.18)); }
}
@keyframes texas-halo-idle {
  /* settled steady glow, very gentle breathing */
  0%, 100% { filter: drop-shadow(0 0 10px rgba(200,168,75,0.25))
                     drop-shadow(0 2px 6px rgba(30,58,95,0.18)); }
  50%      { filter: drop-shadow(0 0 16px rgba(200,168,75,0.4))
                     drop-shadow(0 2px 6px rgba(30,58,95,0.18)); }
}

/* When the map is offscreen (or the tab is backgrounded), the
   Intersection/Visibility observer in index.html adds .halo-paused on
   #mapbase. Pause the idle filter animation so it stops consuming GPU
   cycles when nobody's looking at it. */
#mapbase.halo-paused svg {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .map-section::before { animation: none; }
  #mapbase svg {
    animation: none;
    filter: drop-shadow(0 0 10px rgba(200,168,75,0.25))
            drop-shadow(0 2px 6px rgba(30,58,95,0.18));
  }
}

/* ---------- Map hero wrapper — full-bleed watermark band ----------
   .map-hero-wrap is a direct child of <section.map-section> (not inside
   .container), so it spans the full viewport width. Watermark background
   and vignette overlay live here; the inner .map-hero-header stays
   max-width-constrained for readable line lengths. */
.map-hero-wrap {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* Symmetric vertical padding so content sits vertically centered
     within the hero band. */
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(ellipse at 15% 30%, rgba(21, 44, 71, 0.055) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(200, 168, 75, 0.08) 0%, transparent 55%),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(21, 44, 71, 0.08),
    inset 0 -1px 0 rgba(21, 44, 71, 0.08);
  overflow: hidden;
}
.map-hero-wrap::before {
  /* Plat-map + stacked-deeds watermark, spanning the full-bleed band.
     Low opacity + multiply blend so text always reads. */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/hero-watermark.svg") center / cover no-repeat;
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}
.map-hero-wrap::after {
  /* Center vignette — keeps the area behind the headline/eyebrow/lead
     paragraph clear, while letting the watermark carry the flanks. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 85% at 50% 50%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  pointer-events: none;
  z-index: -1;
}

/* ---------- Map hero header — asymmetric editorial layout ---------- */
.map-hero-header {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  text-align: left;
  position: relative;
  z-index: 1;
}
.map-hero-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.map-hero-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
}
.map-hero-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--tdi-ink);
  padding-left: var(--space-4);
  border-left: 3px solid var(--tdi-gold);
}
.map-hero-header h2 .hero-line {
  display: block;
  white-space: nowrap;
}
.map-hero-header h2 em {
  font-style: italic;
  color: var(--tdi-blue-600);
  font-weight: 500;
}
.map-hero-connector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 80px;
}
.map-hero-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tdi-gold);
  color: var(--tdi-ink);
  box-shadow: 0 0 0 4px rgba(200,168,75,0.2);
}
/* Decorative gold accent lines flanking the star (moved from the old
   connector-level pseudo-elements so they stay aligned with the star
   now that the connector also contains the eyebrow below) */
.map-hero-star::before,
.map-hero-star::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--tdi-gold) 100%);
  pointer-events: none;
}
.map-hero-star::before { right: calc(100% + 14px); }
.map-hero-star::after {
  left: calc(100% + 14px);
  background: linear-gradient(90deg, var(--tdi-gold) 0%, transparent 100%);
}
/* Eyebrow pill on the right side of the map-hero header. Lifted from the
   .content-hero-eyebrow pattern but tuned for a LIGHT background (the
   map-hero sits on white/cream with the plat watermark, not navy). The
   star icon is intentionally omitted here so the connector star in the
   center of the row stays the only star and reads as the slogan's hinge.
   Solid-gold treatment with a double-stroke blue border: inner mid-blue
   ring (--tdi-blue-600, matches the H2's italic em) + outer navy ring
   (--tdi-blue-900) for layered brand-color presence. The pill is flanked
   by gold side rules that echo the connector's accent lines. */
.map-hero-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* Shift right to visually center under the .content-hero-tx-overlay above
     (the navy hero's Texas silhouette with the Houston hub + dashed spokes).
     The eyebrow lives in .map-hero-header-right, whose center sits about
     29px left of the overlay SVG's center axis at desktop widths. Reset on
     mobile, where the layout collapses to a single column and the eyebrow
     is centered in its column directly under the connector star. */
  transform: translateX(29px);
}
@media (max-width: 860px) {
  .map-hero-eyebrow-wrap { transform: none; }
}
.map-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: 999px;
  background: var(--tdi-gold);
  color: var(--tdi-blue-900);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 2px var(--tdi-blue-600),
    0 0 0 1px var(--tdi-blue-900),
    0 4px 12px rgba(168, 138, 51, 0.3);
}

@media (max-width: 860px) {
  .map-hero-header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-4);
  }
  .map-hero-header-left { align-items: center; }
  .map-hero-connector { min-width: auto; }
  .map-hero-header-right { align-items: center; }
}

/* Side-by-side layout: legend column on the left, map on the right.
   At narrow widths, collapses to a single column (legend above map).
   Matches the 1100px max-width of .map-hero-header so the legend's left
   edge aligns with the H1 "Texas Based. Texas Strong." headline above. */
.map-with-legend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  /* Top/bottom spacing matches the parent .container's horizontal padding
     (var(--space-5) = 24px on each inline edge), giving the map+legend
     block even breathing room on all four sides. */
  padding: var(--space-5) 0 0;
}

/* ==========================================================================
   Map Legend — "Navy Coverage Panel" (landing-page hero)
   A self-contained dark-navy card that mirrors the brand system's navy/gold
   vocabulary (business card back, letterhead banner, LinkedIn cover). The
   panel wraps an eyebrow header + a list of region rows. Rows light up with
   a gold tint on hover/focus/tap, and a gold arrow glyph fades in to signal
   the interactive link between legend row and map counties.
   ========================================================================== */
.map-legend-panel {
  position: relative;
  background: linear-gradient(180deg, var(--tdi-blue-900) 0%, var(--tdi-blue-800) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  width: clamp(220px, 20vw, 260px);
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(30,58,95,0.15);
}
/* Gold hairline bridging the top edge, fading at the corners. Matches the
   ::before treatment on .cta-panel and .map-hero-star accent lines. */
.map-legend-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tdi-gold) 30%,
    var(--tdi-gold) 70%,
    transparent 100%);
  pointer-events: none;
}
/* Subtle gold-dot texture so the panel feels like a member of the brand
   system (same treatment as the hero band and footer background). */
.map-legend-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,168,75,0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
  opacity: 0.5;
}

.map-legend-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--tdi-gold);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  text-align: center;
  position: relative;
  z-index: 1;
}

.map-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.map-container-wrap {
  min-width: 0;  /* prevent grid blowout on narrow viewports */
}

/* Mobile: stack panel above the map, widen it, make the chip list a grid */
@media (max-width: 860px) {
  .map-with-legend {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .map-legend-panel {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .map-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .map-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Individual row — sits on the navy panel */
.legend-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #e7eef8;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.22s var(--ease-out),
              transform 0.22s var(--ease-out),
              color 0.22s var(--ease-out);
}

/* Region-colored swatch — still the visual link to the map */
.legend-chip .legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--chip-color, var(--tdi-blue-600));
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22),
              0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.22s var(--ease-out);
}

.legend-chip .legend-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover / focus */
.legend-chip:hover,
.legend-chip:focus-visible {
  outline: none;
  background: rgba(200, 168, 75, 0.14);
  color: #ffffff;
  transform: translateX(2px);
}
.legend-chip:hover .legend-swatch,
.legend-chip:focus-visible .legend-swatch {
  transform: scale(1.1);
}

/* On mobile (horizontal grid layout), the transform-x direction feels off;
   keep transform subtle since space is tight. */
@media (max-width: 860px) {
  .legend-chip {
    padding: 8px 9px;
    font-size: 0.82rem;
    gap: 8px;
  }
  .legend-chip:hover,
  .legend-chip:focus-visible {
    transform: translateY(-1px);
  }
}
@media (max-width: 480px) {
  .legend-chip {
    font-size: 0.78rem;
  }
  /* At 320-480px, let labels wrap to 2 lines rather than ellipsing — the
     full region name is more useful than a truncated one. */
  .legend-chip .legend-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
}

.legend-chip.region-austin    { --chip-color: var(--region-austin); }
.legend-chip.region-dfw    { --chip-color: var(--region-dfw); }
.legend-chip.region-houston   { --chip-color: var(--region-houston); }
.legend-chip.region-north     { --chip-color: var(--region-north); }
.legend-chip.region-san-antonio { --chip-color: var(--region-san-antonio); }
.legend-chip.region-south     { --chip-color: var(--region-south); }
.legend-chip.region-west      { --chip-color: var(--region-west); }
.legend-chip.region-future    { --chip-color: var(--region-future); }

.map-container {
  max-width: 100%;
  margin: 0;
  position: relative;
  padding: 0;
}
/* ---------- About / split content ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.split-content h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  margin-bottom: var(--space-5);
}
.split-content p {
  color: var(--tdi-text);
  font-size: 1.05rem;
  line-height: 1.7;
}
.split-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tdi-ink);
}
.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}

/* ---------- Products grid ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.product-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--tdi-surface-alt) 100%);
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(21,44,71,0.06);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(21,44,71,0.12);
}
.product-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tdi-blue-900), var(--tdi-blue-800));
  color: var(--tdi-gold);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  border: 0;
  box-shadow: 0 6px 20px rgba(21,44,71,0.25);
}
.product-icon svg { width: 30px; height: 30px; }
.product-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--tdi-ink);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.product-card p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--tdi-muted);
  flex: 1;
  margin: 0 0 var(--space-5);
}
.product-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--tdi-blue-800);
  align-self: flex-start;
}
/* "Stretched link" a11y pattern — the anchor's ::after expands to cover
   its nearest positioned ancestor (.product-card is position: relative).
   This turns the entire card into the tap target while keeping the
   visible "Learn more →" styling untouched. The ::after sits above the
   card's background but below any interactive children; text selection
   still works because the link itself stays above the pseudo-element. */
.product-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-link svg {
  width: 14px; height: 14px;
  transition: transform 0.2s var(--ease-out);
}
.product-link:hover svg { transform: translateX(3px); }

.owners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.owner-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px solid var(--tdi-border-blue);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  box-shadow: 0 1px 2px rgba(30,58,95,0.04), 0 4px 12px rgba(30,58,95,0.05);
  overflow: hidden;
}
.owner-card::after {
  /* soft gold top-border accent that reveals on hover */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tdi-gold) 0%, var(--tdi-blue-600) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.owner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(30,58,95,0.08), 0 20px 40px rgba(30,58,95,0.12);
  border-color: var(--tdi-blue-600);
}
.owner-card:hover::after {
  transform: scaleX(1);
}
.owner-card img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* multiply-blend dissolves the baked-in light-gray JPG backgrounds
     against the white card, leaving just the logo marks visible */
  mix-blend-mode: multiply;
  transition: transform 0.3s var(--ease-out);
}
.owner-card:hover img {
  transform: scale(1.06);
}

/* Static variant — used for owners without a public website. Renders
   identically to linked owner-cards but without any pointer interactions. */
.owner-card-static {
  cursor: default;
}
.owner-card-static:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(30,58,95,0.04), 0 4px 12px rgba(30,58,95,0.05);
  border-color: var(--tdi-border-blue);
}
.owner-card-static:hover::after {
  transform: scaleX(0);
}
.owner-card-static:hover img {
  transform: none;
}

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.testimonial {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--tdi-border-blue);
  border-left: 3px solid var(--tdi-blue-800);
  position: relative;
  box-shadow: 0 4px 16px rgba(30,58,95,0.07);
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--tdi-gold);
  opacity: 0.55;
}
.testimonial blockquote {
  margin: var(--space-6) 0 var(--space-5);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--tdi-text);
  font-style: italic;
}
.testimonial cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tdi-blue-800);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--tdi-blue-900) 0%, var(--tdi-blue-800) 100%);
  color: #fff;
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band-inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  text-align: center;
  position: relative;
  z-index: 1;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.cta-band p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-7);
}
.cta-band .btn-primary {
  background: var(--tdi-gold);
  color: var(--tdi-ink);
  box-shadow: 0 4px 20px rgba(200,168,75,0.4);
}
.cta-band .btn-primary:hover {
  background: #fff;
  color: var(--tdi-ink);
}
.cta-band .btn-ghost {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.cta-band .btn-ghost:hover {
  background: #fff;
  color: var(--tdi-ink);
  border-color: #fff;
}
/* Stack a small gold tracked-caps title below the primary CTA button in the
   CTA band. Used to identify Brian Davenport as EVP, Business Development
   without burning a separate row. The .hero-actions row is
   flex with align-items: center by default — switch to flex-start so the
   stacked element's button stays aligned with the sibling phone button
   instead of being pushed down by the title eyebrow underneath it. */
.cta-band .hero-actions { align-items: flex-start; }
.cta-btn-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
}
.cta-btn-title {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tdi-gold);
  font-weight: 600;
  max-width: 100%;
  text-align: center;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--tdi-blue-900);
  color: #b8c1d4;
  padding: var(--space-8) 0 var(--space-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--space-6);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-bottom: var(--space-7);
}
.footer h5,
.footer .footer-col-title {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-4);
  margin-top: 0;
}
.footer a {
  color: #b8c1d4;
  display: block;
  padding: 4px 0;
  font-size: 0.93rem;
}
.footer a:hover { color: var(--tdi-gold); }
.footer-brand-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.footer-brand-line img { height: 48px; width: auto; display: block; }
.footer-brand-line .nav-brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.footer-about {
  font-size: 0.93rem;
  line-height: 1.6;
  color: #9aa3b8;
  max-width: 320px;
}
.footer-bottom {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-5) var(--space-5) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: #7a8397;
}

/* ==========================================================================
   Integrated map styles (formerly assets/styles/map-style.css)
   ========================================================================== */

#mapwrapper {
  font-family: var(--font-sans);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  min-width: 300px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mapbase svg {
  width: 100%;
  height: auto;
  /* viewBox is "0 20 780 730" → aspect ratio 780:730. Set this explicitly
     so the SVG always renders at its natural aspect ratio regardless of
     container width. This replaces the old stepped-breakpoint sizing
     (320/400/480/600/720/860/1000px) which forced a taller-than-content
     SVG and produced significant blank space at the bottom on desktop. */
  aspect-ratio: 780 / 730;
  max-height: 100%;
  margin: 0;
  /* filter is defined & animated in the map-section block above (Texas halo) */
}

/* Tooltip follows the cursor — positioned via CSS variables set by JS.
   The legacy map-interact.js still sets inline left/top, but we override
   those with !important left:0/top:0 and drive actual position via a
   transform. This preserves the legacy JS untouched while giving us a
   clean, overlap-free cursor-following UX. */
#ustxjstip {
  font: 14px/1.4 var(--font-sans);
  display: none;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  /* --tx and --ty set by JS on mousemove, relative to .map-container */
  transform: translate(var(--tx, 0), var(--ty, 0));
  min-width: 160px;
  max-width: 240px;
  padding: 12px 16px;
  color: #ffffff;
  background: var(--tdi-ink);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(21,44,71,0.35);
  z-index: 10;
  word-break: keep-all;
  font-weight: 500;
  pointer-events: none;
  text-align: left;
  animation: ustxjstip-fade 0.14s var(--ease-out);
  will-change: transform;
}
#ustxjstip::before {
  content: "County";
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tdi-gold);
  margin-bottom: 4px;
}
#ustxjstip p {
  margin: 0 !important;
  color: #ffffff !important;
}
#ustxjstip img {
  float: left;
  padding: 3px;
  max-width: 100%;
}
@keyframes ustxjstip-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile: show tooltip centered at top of map to avoid overlapping the
   tapped county with a finger-covered element */
@media (max-width: 520px) {
  #ustxjstip {
    transform: translateX(-50%) !important;
    left: 50% !important;
    top: var(--space-3) !important;
    right: auto !important;
    min-width: 140px;
    max-width: 80%;
    text-align: center;
    animation: ustxjstip-fade-mobile 0.18s var(--ease-out);
  }
  #ustxjstip::before { text-align: center; }
}
@keyframes ustxjstip-fade-mobile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Responsive map sizing is now handled by the fluid aspect-ratio rule
   on #mapbase svg above. The old stepped breakpoints (320/400/480/600/
   720/860/1000px) have been removed — they forced a fixed SVG height
   that was significantly taller than the content's natural aspect
   ratio at the container's width, producing blank space below Texas. */
/* SVG county label fills — region-colored labels use white for contrast on
   their filled county paths; the pale North region uses dark ink instead.
   The .region-* classes here are the canonical region IDs; they also live
   on legend chips, data-region attrs, and map-data.js REGIONS keys. */
#mapbase text[class^="region-"] { fill: #ffffff; font-weight: 600; }
#mapbase text.region-north      { fill: #333333; }
.non-tdi-map-font-color         { fill: #333333; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .owners-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonials { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split-visual { aspect-ratio: 16 / 10; max-height: 420px; }
  /* The portrait Houston HQ photo (1200x1489) gets cropped by object-fit:cover
     once the container becomes wide-and-short. Default 50% 50% positioning
     hides the top of the building. Anchor to the top so the building's roof
     stays visible and only the lower portion is cropped. */
  .split-visual img { object-position: top; }
}

@media (max-width: 768px) {
  :root { --nav-height: 68px; }
  section { padding: var(--space-7) 0; }
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .nav-links { display: none; }
  .nav-toggle {
    display: block;
    /* Push the hamburger to the right edge of the nav bar on mobile.
       nav-inner has 3 flex children (brand, toggle, nav); with the nav
       wrapper still present but empty, margin-left:auto locks the hamburger
       to the far right as the user expects. */
    margin-left: auto;
  }

  /* Dropdown stays on the brand navy so the white link text inherited from
     .nav-links a stays legible. Sits as an absolutely-positioned panel
     below the nav bar, edge-to-edge on screen. */
  .nav-links.open {
    display: flex;
    position: absolute;
    top: var(--nav-height);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--tdi-blue-800);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-3) var(--space-4) var(--space-4);
    box-shadow: 0 20px 40px rgba(10,17,30,0.4);
    border-radius: 0;
    animation: mobile-nav-in 0.22s var(--ease-out);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }
  @keyframes mobile-nav-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  /* Full-width touch targets — 48px min per Apple/Google a11y guidelines */
  .nav-links.open li { width: 100%; }
  .nav-links.open a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
    min-height: 48px;
  }
  /* Hover/active indicators adapted for the vertical dropdown */
  .nav-links.open a:hover,
  .nav-links.open a:active {
    background: rgba(255,255,255,0.1);
  }
  .nav-links.open a.is-active {
    background: rgba(200,168,75,0.15);
    color: var(--tdi-gold);
  }

  /* Separate the primary CTAs with a divider */
  .nav-links.open .nav-cta {
    margin-top: var(--space-2);
    justify-content: center;
    padding: 0.85rem 1rem !important;
    width: 100%;
  }
  .nav-links.open .nav-cta {
    /* Keep solid gold appearance */
    box-shadow: 0 2px 12px rgba(200,168,75,0.3);
  }
  .nav-links.open .nav-cta.is-active {
    box-shadow: 0 0 0 2px var(--tdi-blue-900) inset,
                0 2px 12px rgba(200,168,75,0.3);
  }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: 1fr; }
  .owners-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .owner-card { min-height: 88px; padding: var(--space-4); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .nav-brand img,
  .footer-brand-line img { height: 46px; }
  .map-container { padding: var(--space-3); }
  .hero h1 { font-size: 2.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Sub-page shell (products, resources, support, contact)
   — editorial page-hero + content blocks that match the home-page system
   ========================================================================== */

/* Compact hero for non-home pages */
.page-hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-7);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(46,109,164,0.1) 0%, transparent 70%),
    linear-gradient(180deg, var(--tdi-surface-alt) 0%, #ffffff 100%);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(30,58,95,0.08) 1px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 30%, transparent 90%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tdi-gold) 30%,
    var(--tdi-blue-600) 70%,
    transparent 100%);
  opacity: 0.5;
}
.page-hero > .container { position: relative; z-index: 1; }

.page-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  margin: var(--space-4) 0 var(--space-4);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--tdi-blue-600);
  font-weight: 500;
}
.page-hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--tdi-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Breadcrumb / section-index micro-nav */
.page-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
}
.page-crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tdi-blue-800);
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  box-shadow: 0 1px 2px rgba(30,58,95,0.05);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s;
}
.page-crumbs a:hover {
  transform: translateY(-1px);
  border-color: var(--tdi-blue-600);
  box-shadow: 0 4px 10px rgba(30,58,95,0.1);
}
.page-crumbs a .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crumb-color, var(--tdi-gold));
}

/* Two-column alternating content blocks */
.content-block {
  padding: var(--space-8) 0;
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}
.content-block.alt { background: var(--tdi-surface-alt); }
.content-block .container {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.content-block-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tdi-blue-800);
  position: relative;
  box-shadow: 0 6px 20px rgba(30,58,95,0.08);
}
.content-block.alt .content-block-icon {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(30,58,95,0.12);
}
.content-block-icon svg { width: 38px; height: 38px; }
.content-block-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(200,168,75,0.5);
  animation: icon-spin 40s linear infinite;
}
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

.content-block-body h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 400;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}
.content-block-body h2 em {
  font-style: italic;
  color: var(--tdi-blue-600);
  font-weight: 500;
}
.content-block-body > p {
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--tdi-text);
  margin: 0 0 var(--space-4);
  max-width: 720px;
}
.content-block-body > p:last-of-type { margin-bottom: var(--space-5); }

.content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Document / action card — gold-accented pill for PDF/form links */
.doc-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--tdi-ink);
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(30,58,95,0.05);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}
.doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30,58,95,0.1);
  border-color: var(--tdi-blue-600);
  color: var(--tdi-ink);
}
.doc-card-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: rgba(200,168,75,0.12);
  color: var(--tdi-gold-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.doc-card-icon svg { width: 18px; height: 18px; }
.doc-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-card-meta small {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tdi-muted);
  font-weight: 600;
}

/* Contact-card treatment — used on the Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.contact-card {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 2px 10px rgba(30,58,95,0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tdi-gold), var(--tdi-blue-600));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(30,58,95,0.12);
  border-color: var(--tdi-blue-600);
}
.contact-card:hover::before { transform: scaleX(1); }
.contact-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tdi-blue-800);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.contact-card h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 2px;
  color: var(--tdi-ink);
}
.contact-card .role {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdi-muted);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.contact-card a {
  font-size: 0.95rem;
  color: var(--tdi-blue-600);
  word-break: break-word;
}

/* Address / map split */
.address-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.address-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5) 0;
}
.address-info h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--tdi-ink);
}
.address-info .addr-line {
  font-size: 1.05rem;
  color: var(--tdi-text);
  line-height: 1.6;
  margin: 0;
}
.address-info .phone-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 0.7rem 1.1rem;
  background: var(--tdi-blue-800);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  align-self: flex-start;
  box-shadow: 0 4px 14px rgba(30,58,95,0.2);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s;
}
.address-info .phone-link:hover {
  transform: translateY(-1px);
  color: #fff;
  background: var(--tdi-blue-900);
  box-shadow: 0 6px 20px rgba(30,58,95,0.3);
}
.address-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tdi-surface-alt);
  border: 1px solid var(--tdi-border-blue);
  box-shadow: 0 8px 24px rgba(30,58,95,0.1);
  min-height: 340px;
}
.address-map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .address-split { grid-template-columns: 1fr; }
}

/* Login form (support page) */
.login-card {
  max-width: 440px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 16px 40px rgba(30,58,95,0.12);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tdi-gold), var(--tdi-blue-600));
}
.login-card h2 {
  font-size: 1.6rem;
  font-weight: 500;
  margin: var(--space-3) 0 var(--space-2);
  text-align: center;
}
.login-card .login-sub {
  text-align: center;
  color: var(--tdi-muted);
  font-size: 0.95rem;
  margin: 0 0 var(--space-5);
}
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tdi-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.field .input {
  position: relative;
  display: flex;
  align-items: center;
}
.field .input svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--tdi-muted);
  pointer-events: none;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field input[type="url"],
.field input[type="date"] {
  width: 100%;
  padding: 0.75rem 0.95rem 0.75rem 44px;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.98rem;
  color: var(--tdi-ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus {
  outline: none;
  border-color: var(--tdi-blue-600);
  box-shadow: 0 0 0 3px rgba(46,109,164,0.2);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--tdi-text);
  margin-bottom: var(--space-5);
}
.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--tdi-blue-600);
}
.btn-block {
  width: 100%;
  justify-content: center;
}

/* Alert message */
.alert-info {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-left: 4px solid var(--tdi-gold);
  border-radius: var(--radius-md);
  color: var(--tdi-text);
  font-size: 0.97rem;
  line-height: 1.55;
  box-shadow: 0 2px 10px rgba(30,58,95,0.05);
}
.alert-info strong { color: var(--tdi-ink); }
.alert-info a { font-weight: 600; }

/* Terms modal — lightweight CSS-only version */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 17, 30, 0.7);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-5);
  z-index: 1000;
  overflow-y: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-overlay:target { display: flex; }
.modal-overlay:target .modal-box {
  animation: modal-in 0.3s var(--ease-out);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.modal-box {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 780px;
  width: 100%;
  margin: var(--space-6) auto;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 17, 30, 0.5);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--tdi-blue-800);
  color: #fff;
}
.modal-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
}
.modal-close {
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: background 0.15s;
}
.modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}
.modal-body {
  padding: var(--space-5) var(--space-6);
  max-height: 65vh;
  overflow-y: auto;
}
.modal-body ol { padding-left: var(--space-5); }
.modal-body ol > li { margin-bottom: var(--space-4); }
.modal-body ol > li h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--tdi-ink);
  margin: 0 0 var(--space-2);
}
.modal-body ol > li p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--tdi-text);
  margin: 0;
}
.modal-foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--tdi-border);
  text-align: right;
}

@media (max-width: 860px) {
  .content-block .container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .content-block-body > p { margin-left: auto; margin-right: auto; }
  .content-actions { justify-content: center; }
}

/* ==========================================================================
   Support portal pages (/support/*)
   Authenticated subscriber area — sharing the site's design system with
   form-heavy, data-heavy, and link-list variants.
   ========================================================================== */

/* ---------- Dashboard (customer-portal-auth & aliases) ---------- */
.dashboard-group-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 500;
  color: var(--tdi-ink);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-5);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.dashboard-card {
  display: grid;
  grid-template-columns: 52px 1fr 20px;
  align-items: center;
  gap: var(--space-4);
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--tdi-ink);
  box-shadow: 0 2px 8px rgba(30,58,95,0.05);
  transition: transform 0.18s var(--ease-out), border-color 0.18s,
              box-shadow 0.18s, background 0.18s;
}
.dashboard-card:hover {
  transform: translateY(-2px);
  border-color: var(--tdi-blue-600);
  box-shadow: 0 10px 24px rgba(30,58,95,0.1);
  color: var(--tdi-ink);
}
.dashboard-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(46,109,164,0.08);
  color: var(--tdi-blue-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dashboard-card:hover .dashboard-card-icon {
  background: var(--tdi-blue-800);
  color: var(--tdi-gold);
}
.dashboard-card-icon svg { width: 24px; height: 24px; }
.dashboard-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dashboard-card-body strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tdi-ink);
  line-height: 1.3;
}
.dashboard-card-body small {
  font-size: 0.85rem;
  color: var(--tdi-muted);
  line-height: 1.4;
}
.dashboard-card-arrow {
  color: var(--tdi-muted);
  transition: transform 0.18s var(--ease-out), color 0.18s;
}
.dashboard-card-arrow svg { width: 16px; height: 16px; }
.dashboard-card:hover .dashboard-card-arrow {
  color: var(--tdi-blue-600);
  transform: translateX(3px);
}

/* ---------- Billing video feature card (customer-portal-auth billing block) ----------
   Full-width navy feature card that sits below the 5 dashboard-cards in the
   Billing Reports section. Pairs a large gold play button with a title +
   description + duration + CTA — distinct from the dashboard-card grid so
   it reads as a training resource rather than another report link. */
.billing-video-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, var(--tdi-blue-900) 0%, var(--tdi-blue-800) 100%);
  border: 1px solid rgba(200, 168, 75, 0.25);
  border-radius: var(--radius-lg);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(21, 44, 71, 0.18);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s, border-color 0.22s;
  position: relative;
  overflow: hidden;
}
.billing-video-card::before {
  /* Gold corner accent glow upper-right */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 90% at 100% 0%, rgba(200,168,75,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.billing-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(21, 44, 71, 0.28);
  border-color: rgba(200, 168, 75, 0.55);
}
.billing-video-card-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tdi-gold);
  font-weight: 600;
}
.billing-video-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.billing-video-card-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.billing-video-card-duration {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--tdi-gold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.billing-video-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.22s, transform 0.22s;
}
.billing-video-card:hover .billing-video-card-cta {
  color: var(--tdi-gold);
}
.billing-video-card:hover .billing-video-card-cta svg {
  transform: translateX(3px);
}
.billing-video-card-cta svg {
  transition: transform 0.22s var(--ease-out);
}

/* Mobile: stack vertically; meta row goes under body */
@media (max-width: 640px) {
  .billing-video-card {
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .billing-video-card-title {
    font-size: 1.15rem;
  }
}

/* ---------- Doc groups (codes, downloads, recording-volume) ---------- */
.doc-group-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--tdi-ink);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--tdi-border-blue);
  letter-spacing: -0.01em;
}
.doc-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Image request form ---------- */
.image-request-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-5);
  background: var(--tdi-surface-alt);
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.image-request-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: var(--space-2) 0;
  color: var(--tdi-ink);
}
.image-request-stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
}
.image-request-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.image-request-stat strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--tdi-blue-800);
  letter-spacing: -0.02em;
}
.image-request-stat span {
  font-size: 0.82rem;
  color: var(--tdi-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.image-request-form-card {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 14px rgba(30,58,95,0.06);
}
.image-request-form-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 var(--space-5);
}
.image-request-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
}
@media (max-width: 900px) {
  .image-request-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .image-request-form { grid-template-columns: 1fr; }
  .image-request-header { grid-template-columns: 1fr; }
}
.image-request-form .field-submit { align-self: end; }
.image-request-form .field-submit .btn { min-width: 140px; }

/* ---------- Native select styling (consistent with input fields) ---------- */
.select-native {
  width: 100%;
  max-width: 100%;
  padding: 0.7rem 2.3rem 0.7rem 0.95rem;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-md);
  background: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--tdi-ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.select-native:focus {
  outline: none;
  border-color: var(--tdi-blue-600);
  box-shadow: 0 0 0 3px rgba(46,109,164,0.18);
}

/* ---------- Password holders table + cancellation card ---------- */
.cancellation-card {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 14px rgba(30,58,95,0.06);
  margin-bottom: var(--space-6);
  max-width: 640px;
}
.cancellation-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.cancellation-card > p {
  color: var(--tdi-muted);
  margin-bottom: var(--space-5);
  font-size: 0.95rem;
}

.pw-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(30,58,95,0.06);
}
/* The cancellation form wraps both the info card and the wide pw-table.
   Without a width anchor, the form grows to fit the table and pushes
   everything off the viewport on mobile. Constrain it explicitly. */
#form1 {
  max-width: 100%;
  min-width: 0;
}
.pw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.pw-table thead {
  background: var(--tdi-blue-800);
  color: #ffffff;
}
.pw-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 0;
}
.pw-table tbody tr {
  border-bottom: 1px solid var(--tdi-border);
  transition: background 0.12s;
}
.pw-table tbody tr:last-child { border-bottom: 0; }
.pw-table tbody tr:hover { background: var(--tdi-surface-alt); }
.pw-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--tdi-text);
  vertical-align: middle;
}
.pw-table .cell-check { width: 48px; }
.pw-table .cell-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--tdi-blue-600);
  cursor: pointer;
}
.pw-table .cell-email,
.pw-table .cell-phone,
.pw-table .cell-dept {
  font-size: 0.85rem;
  color: var(--tdi-muted);
}
.pw-table .cell-changed {
  font-size: 0.85rem;
  color: var(--tdi-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pw-table .cell-name {
  font-weight: 600;
  color: var(--tdi-ink);
}

/* ---------- Market share report card ---------- */
.market-share-card {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 14px rgba(30,58,95,0.06);
  margin-bottom: var(--space-7);
}
.market-share-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--tdi-border);
}
.market-share-company,
.market-share-period {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--tdi-ink);
  margin: var(--space-2) 0 0;
  letter-spacing: -0.015em;
}
.market-share-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
}
@media (max-width: 700px) {
  .market-share-form { grid-template-columns: 1fr; }
  .market-share-meta { grid-template-columns: 1fr; }
}
.market-share-note {
  color: var(--tdi-muted);
  font-size: 0.9rem;
  margin: var(--space-4) 0 0;
  font-style: italic;
}
.market-share-nav {
  margin-top: var(--space-7);
}

/* ---------- ZIP area maintenance ---------- */
.zip-area-card {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 14px rgba(30,58,95,0.06);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.zip-area-table-wrap {
  margin: var(--space-5) 0;
  min-height: 100px;
  padding: var(--space-4);
  background: var(--tdi-surface-alt);
  border-radius: var(--radius-md);
  border: 1px dashed var(--tdi-border-blue);
}
.zip-area-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--space-3);
}
.zip-area-add {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--tdi-border);
}
.zip-area-add input[type="text"] {
  flex: 1;
  max-width: 320px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
}
.zip-area-add input[type="text"]:focus {
  outline: none;
  border-color: var(--tdi-blue-600);
  box-shadow: 0 0 0 3px rgba(46,109,164,0.18);
}

/* Mobile: tighten the card padding, stack the "add area" row so the
   input and button each get a full row and no clipping at 320px. */
@media (max-width: 480px) {
  .zip-area-card { padding: var(--space-4); }
  .zip-area-add {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .zip-area-add input[type="text"] {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .zip-area-add .btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Nav submenu (used on /support/* pages for the Support dropdown)
   — Desktop: hover/focus-within reveals a floating panel below the link
   — Mobile: inside the hamburger dropdown, submenu renders inline stacked
   ========================================================================== */

.has-submenu {
  position: relative;
}
.has-submenu > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.submenu-caret {
  transition: transform 0.2s var(--ease-out);
  opacity: 0.8;
  margin-left: 2px;
}
.has-submenu:hover > a .submenu-caret,
.has-submenu:focus-within > a .submenu-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* The dropdown panel itself */
.submenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--tdi-blue-900);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 20px 40px rgba(10,17,30,0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              visibility 0.18s;
  z-index: 99;
}
/* Hover bridge — invisible gap-filler between parent and submenu so the
   mouse doesn't hit an empty area while crossing from parent to dropdown */
.submenu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu.is-expanded > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.has-submenu.is-expanded > a .submenu-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.submenu li { margin: 0; padding: 0; }
.submenu a {
  display: block;
  padding: 0.6rem 1rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
}
.submenu a:hover,
.submenu a:focus {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  outline: none;
}

/* Mobile: inside the hamburger panel, render submenu inline instead of
   floating. Open-by-default so no JS toggle is needed, and visually
   grouped by indentation + subtle background tint. */
@media (max-width: 768px) {
  .has-submenu { width: 100%; }
  .has-submenu > a .submenu-caret { display: none; }
  .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-left: 2px solid rgba(200,168,75,0.25);
    margin: 2px 0 var(--space-2) var(--space-3);
    padding: 0;
    min-width: 0;
  }
  .submenu::before { display: none; }
  .submenu a {
    padding: 0.65rem 0.95rem;
    font-size: 0.92rem;
    min-height: 42px;
    display: flex;
    align-items: center;
  }
  .submenu a:hover,
  .submenu a:focus {
    background: rgba(255,255,255,0.06);
  }
}


/* ==========================================================================
   Report detail pages (/support/*-detail.html, starters-*, etc.)
   ========================================================================== */

.report-filters {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 2px 8px rgba(30,58,95,0.05);
  margin-bottom: var(--space-5);
}
.report-filters-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--tdi-ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--tdi-border);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.report-filters input[type="date"] {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-md);
  background: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--tdi-ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.report-filters input[type="date"]:focus {
  outline: none;
  border-color: var(--tdi-blue-600);
  box-shadow: 0 0 0 3px rgba(46,109,164,0.18);
}

/* KPI strip — summary cards above the table */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.kpi-card {
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(30,58,95,0.05);
}
.kpi-label {
  font-size: 0.78rem;
  color: var(--tdi-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--tdi-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-card.kpi-gold    { border-left: 4px solid var(--tdi-gold); }
.kpi-card.kpi-blue    { border-left: 4px solid var(--tdi-blue-600); }
.kpi-card.kpi-neutral { border-left: 4px solid var(--tdi-border-blue); }

/* Action bar — Apply Filters / Print / Export */
.report-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.report-actions .btn { min-width: 140px; justify-content: center; }
.report-actions .btn-sm { min-width: 110px; }

/* The report table itself */
.report-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid var(--tdi-border-blue);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(30,58,95,0.06);
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.report-table thead {
  background: var(--tdi-blue-800);
  color: #ffffff;
}
.report-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.report-table th:last-child,
.report-table td:last-child {
  text-align: right;
}
.report-table tbody tr {
  border-bottom: 1px solid var(--tdi-border);
  transition: background 0.12s;
}
.report-table tbody tr:nth-child(even) { background: rgba(232,240,248,0.4); }
.report-table tbody tr:hover { background: var(--tdi-surface-alt); }
.report-table tbody tr:last-child { border-bottom: 0; }
.report-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--tdi-text);
  vertical-align: middle;
  white-space: nowrap;
}
.report-table tfoot .total-row {
  background: var(--tdi-surface-alt);
  border-top: 2px solid var(--tdi-blue-800);
}
.report-table tfoot .total-row td {
  padding: var(--space-4);
  font-size: 0.95rem;
  color: var(--tdi-ink);
}

/* Screen-reader only caption */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Print optimizations */
@media print {
  .nav, .footer, .report-filters, .report-actions { display: none !important; }
  .page-hero { padding: var(--space-5) 0; }
  .page-hero-lead { display: none; }
  .report-table-wrap { box-shadow: none; border-color: #333; }
  .report-table thead { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ==========================================================================
   Texas county map — base fills
   Counties are tagged with data-region="<regionId>" by map-interact.js on
   init. These selectors provide the fill color declaratively, replacing
   the legacy JS that set per-path inline `fill` attributes (which then
   needed !important overrides to defeat in the legend-highlight rules).
   Non-TDI counties have no data-region attribute and fall through to the
   default pale fill.
   ========================================================================== */

/* Non-TDI counties (no data-region attribute) — default pale fill */
#mapbase path[id^="ustxjs"] {
  fill: #F0F8FF;
  stroke: #404040;
}

/* TDI region fills */
#mapbase path[data-region="region-austin"]     { fill: #1789be; }
#mapbase path[data-region="region-dfw"]     { fill: #07638a; }
#mapbase path[data-region="region-houston"]    { fill: #144d85; }
#mapbase path[data-region="region-north"]      { fill: #91bdc8; }
#mapbase path[data-region="region-san-antonio"] { fill: #5e81a1; }
#mapbase path[data-region="region-south"]      { fill: #4169e1; }
#mapbase path[data-region="region-west"]       { fill: #07475f; }
#mapbase path[data-region="region-future"]     { fill: #429e58; }

/* Direct hover over a county — gold fill. Applied by map-interact.js via
   the .is-hovered class (event-delegated). */
#mapbase path.is-hovered {
  fill: #EFC34A;
  cursor: pointer;
}

/* ==========================================================================
   Legend-chip map highlight
   When a .legend-chip is hovered/focused/tapped, JS adds .map-has-focus to
   #mapbase and .is-highlighted to matching <path> + <text> pairs.
   ========================================================================== */

/* When the map is in "focused" mode, dim all county paths and labels */
#mapbase.map-has-focus path,
#mapbase.map-has-focus text {
  opacity: 0.22;
  transition: opacity 0.2s var(--ease-out),
              stroke 0.2s var(--ease-out),
              stroke-width 0.2s var(--ease-out),
              filter 0.2s var(--ease-out);
}

/* Matching paths pop with a gold halo */
#mapbase path.is-highlighted {
  opacity: 1 !important;
  stroke: var(--tdi-gold);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 3px rgba(200,168,75,0.55));
}

/* Matching text labels stay fully visible and bold up */
#mapbase text.is-highlighted {
  opacity: 1 !important;
  font-weight: 700;
  fill: #ffffff;
}

/* Smooth transition even when NOT focused, so paths/labels fade back in
   cleanly after hover-off rather than snapping */
#mapbase path,
#mapbase text {
  transition: opacity 0.22s var(--ease-out),
              stroke 0.22s var(--ease-out),
              stroke-width 0.22s var(--ease-out),
              filter 0.22s var(--ease-out),
              font-weight 0.22s var(--ease-out);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #mapbase path,
  #mapbase text,
  #mapbase.map-has-focus path,
  #mapbase.map-has-focus text,
  .legend-chip {
    transition: none;
  }
}



/* ==========================================================================
   Content hero (A1)
   Editorial-style landing section that PRECEDES the map. Leads with a
   serif headline + supporting lede + primary CTA; a stylized Texas
   silhouette with Houston anchor sits on the right as an illustrative
   co-star. Stats row immediately below reinforces scale.
   ========================================================================== */
.content-hero {
  position: relative;
  background: linear-gradient(180deg, var(--tdi-blue-900) 0%, var(--tdi-blue-800) 100%);
  color: #ffffff;
  padding: var(--space-5) 0;
  overflow: hidden;
  isolation: isolate;
}
.content-hero::before {
  /* Subtle radial glow at top-left — gives the navy some dimension */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(46,109,164,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 100%, rgba(200,168,75,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.content-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.content-hero-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tdi-gold);
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.content-hero-masthead {
  border-top: 2px solid var(--tdi-gold);
  border-bottom: 2px solid var(--tdi-gold);
  position: relative;
  padding: var(--space-6) 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-7);
  align-items: center;
}
.content-hero-masthead::before,
.content-hero-masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(200, 168, 75, 0.5);
}
.content-hero-masthead::before { top: 6px; }
.content-hero-masthead::after  { bottom: 6px; }
.content-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.content-hero-headline {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.25vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  color: #ffffff;
  text-align: left;
}
.content-hero-headline em {
  font-style: italic;
  color: var(--tdi-gold);
  font-weight: 500;
}
.content-hero-headline .hero-line {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.content-hero-headline .hero-line + .hero-line {
  margin-top: 0.35em;
}
.content-hero-headline .hero-bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: rgba(200, 168, 75, 0.12);
  border: 1px solid rgba(200, 168, 75, 0.45);
  align-self: flex-start;
  transform: translateY(0.3em);
}
.content-hero-headline .hero-bullet svg {
  width: 60%;
  height: 60%;
  fill: var(--tdi-gold);
}
.content-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  width: fit-content;
}
.content-hero-actions .btn {
  font-size: 1.05rem;
  padding: 14px 26px;
  width: 100%;
  justify-content: center;
}
.content-hero .btn-ghost {
  border-color: rgba(255,255,255,0.35);
  color: #ffffff;
}
.content-hero .btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: #ffffff;
}
.content-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding: var(--space-4) 0 var(--space-5);
}
.content-hero-stat {
  text-align: center;
  position: relative;
}
.content-hero-stat + .content-hero-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,0.18);
}
.content-hero-stat-value {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.1rem, 3.1vw, 3rem);
  font-weight: 400;
  color: var(--tdi-gold);
  line-height: 1;
}
.content-hero-stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 12px;
}
.content-hero-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}
.content-hero-tx {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 745 / 720;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.28));
}
.content-hero-tx img,
.content-hero-tx-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .content-hero-masthead {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .content-hero-tx {
    max-width: 240px;
  }
  .content-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .content-hero-stat:nth-child(3)::before { display: none; }
}
@media (max-width: 480px) {
  .content-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ==========================================================================
   Testimonial spotlight band — replacement for stats band (Alt D)
   Single large customer testimonial elevated to a full-width navy feature
   band sitting between the map/coverage section and the About section.
   Uses the brand's navy/gold motif; testimonials section below remains
   as secondary proof.
   ========================================================================== */
.testimonial-spotlight {
  background: linear-gradient(180deg, var(--tdi-blue-900) 0%, var(--tdi-blue-800) 100%);
  padding: var(--space-8) 0;
  position: relative;
  overflow: hidden;
}
.testimonial-spotlight::before {
  /* Subtle gold wash upper-right — same kind of glow used elsewhere for the
     brand's navy surfaces (content-hero, etc) */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 70% at 85% 20%, rgba(200,168,75,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.testimonial-spotlight-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  text-align: center;
  position: relative;
}
.testimonial-spotlight-mark {
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 0.7;
  color: var(--tdi-gold);
  margin-bottom: var(--space-3);
  font-weight: 400;
}
.testimonial-spotlight-quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.4;
  color: #ffffff;
  font-weight: 400;
  margin: 0 0 var(--space-5);
  letter-spacing: -0.005em;
}
.testimonial-spotlight-quote em {
  font-style: italic;
  color: var(--tdi-gold);
  font-weight: 500;
}
.testimonial-spotlight-attribution {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.testimonial-spotlight-attribution span {
  color: var(--tdi-gold);
}

/* ===== Variant V3: SPLIT WITH FILM FRAME ===== */
.bv-split.billing-video-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 168, 75, 0.3);
}
.bv-split-frame {
  position: relative;
  background: linear-gradient(135deg, #1b3556 0%, #0a1a30 100%);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(200,168,75,0.2);
}
.bv-split-filmstrip {
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  background: #0a1a30;
}
.bv-split-filmstrip-top    { top: 0; }
.bv-split-filmstrip-bottom { bottom: 0; }
.bv-split-filmstrip span {
  width: 18px;
  height: 6px;
  background: rgba(0,0,0,0.7);
  border-radius: 2px;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.8);
}
.bv-split-logo {
  width: 140px;
  height: auto;
  opacity: 0.55;
}
.bv-split-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--tdi-gold);
  color: var(--tdi-blue-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.22s var(--ease-out);
}
.bv-split-play svg { margin-left: 3px; }
.bv-split.billing-video-card:hover .bv-split-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.bv-split-body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  position: relative;
  z-index: 1;
}
.bv-split .billing-video-card-title {
  font-size: 1.4rem;
}
.bv-split .billing-video-card-desc {
  font-size: 0.95rem;
  max-width: 55ch;
}
.bv-split-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.bv-split .billing-video-card-duration {
  font-size: 0.95rem;
  font-family: var(--font-display);
  color: var(--tdi-gold);
  letter-spacing: normal;
  font-weight: 500;
}
.bv-split-dot { color: rgba(255,255,255,0.4); }
.bv-split-format {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.75rem;
}
.bv-split .billing-video-card-cta {
  margin-left: auto;
}