@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800&family=Patua+One&display=swap');

:root {
  /* Brand colors sampled from the legacy site header */
  --brand-red: #ea3323;
  --brand-red-hover: #c92718;
  --brand-blue: #427bca;
  --brand-navy: #10233f;
  /* Legacy site typefaces: Patua One for display copy, Bebas Neue for the tagline */
  --font-display: 'Patua One', Georgia, serif;
  --font-tagline: 'Bebas Neue', 'Inter', system-ui, sans-serif;
  /* How far the homepage hero is pulled up under the transparent header.
     Deliberately a little taller than the header so the hero always tucks
     under the opaque announcement bar and never leaves a light sliver. */
  --header-overlay-h: 10.5rem;
  --primary: #0056b3;
  --primary-hover: #004494;
  --primary-light: #e6f0fa;
  --secondary: #d32f2f;
  --secondary-hover: #b71c1c;
  --accent: #2563eb;
  --dark: #0f172a;
  --dark-surface: #1e293b;
  --light: #f8fafc;
  --white: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main);
  background-color: var(--white);
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-hover);
}

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

/* Accessibility Focus */
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--secondary);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--dark);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
  font-size: 1.25rem;
}

p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

p.lead {
  font-size: 1.15rem;
  line-height: 1.7;
}

/* Layout Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Top Emergency Announcement Bar */
.announce-bar {
  background-color: var(--brand-red);
  color: var(--white);
  padding: 0.7rem 0;
  position: relative;
  z-index: 110;
}

/* The masthead runs wider than the body container, as it did on the legacy site */
.announce-bar .container,
.site-header .container {
  max-width: 1560px;
}

.announce-text {
  margin: 0;
  text-align: center;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2.1vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.announce-text a {
  color: var(--white);
  text-decoration: none;
}

.announce-text a:hover,
.announce-text a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.top-bar-badge {
  background-color: var(--secondary);
  color: var(--white);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Navigation Header
   Two variants share all typography and only differ in backdrop:
   --overlay (homepage) floats transparently over the hero photo,
   --solid (inner pages) sits on brand navy. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header--overlay {
  background-color: transparent;
}

.site-header--solid {
  background-color: var(--brand-navy);
  box-shadow: var(--shadow-md);
}

/* Once the page scrolls, the overlay header gains a backdrop so the
   nav stays readable against whatever is passing beneath it. */
body.is-scrolled .site-header--overlay {
  background-color: rgba(16, 35, 63, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

/* Utility row: TCEQ number + review / emergency buttons */
.header-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
}

.header-tceq {
  margin: 0;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.header-actions {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn-review,
.btn-emergency {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 2px;
  white-space: nowrap;
}

.btn-review {
  background-color: var(--white);
  color: var(--dark);
}

.btn-review:hover,
.btn-review:focus-visible {
  background-color: #e8e8e8;
  color: var(--dark);
}

.btn-emergency {
  background-color: var(--brand-red);
  color: var(--white);
}

.btn-emergency:hover,
.btn-emergency:focus-visible {
  background-color: var(--brand-red-hover);
  color: var(--white);
}

/* Logo + primary nav row */
.header-main {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
}

.header-main nav {
  flex: 1;
}

.brand-logo {
  flex-shrink: 0;
}

.brand-logo img {
  height: 68px;
  width: auto;
  object-fit: contain;
}

.site-header--solid .brand-logo img {
  height: 58px;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  list-style: none;
  gap: clamp(0.7rem, 1.5vw, 1.6rem);
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--font-base);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(0.95rem, 1.35vw, 1.3rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.site-header--solid .nav-link {
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  text-shadow: none;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

/* Current page reads as muted rather than highlighted, matching the legacy nav */
.nav-link.active {
  color: rgba(255, 255, 255, 0.62);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 1rem;
  min-width: 560px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  border-top: 4px solid var(--brand-red);
  /* Four grouped sections flow top-to-bottom into two columns:
     Residential + Commercial on the left, Parts & Repair + General on the right. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  gap: 1rem 1.25rem;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* A grouping block inside the dropdown: heading label + its links */
.dropdown-group {
  list-style: none;
  display: grid;
  gap: 0.15rem;
  align-content: start;
  min-width: 0;
}

.dropdown-group>ul {
  list-style: none;
  display: grid;
  gap: 0.1rem;
}

.dropdown-heading {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.35rem 0.65rem 0.3rem;
  border-bottom: 1px solid var(--border);
}

.dropdown-link {
  display: block;
  padding: 0.5rem 0.65rem;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.dropdown-link:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}

/* 24/7 Emergency gets a red accent so it's instantly scannable */
.dropdown-link--emergency {
  border-left: 3px solid var(--brand-red);
  background: #fff5f4;
  font-weight: 700;
  color: var(--secondary);
}

.dropdown-link--emergency:hover {
  background: var(--brand-red);
  color: var(--white);
}

/* Mobile Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  color: var(--white);
}

.mobile-nav-toggle svg {
  width: 30px;
  height: 30px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: var(--secondary-hover);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-outline {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Hero Section */
.hero {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: var(--white);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Homepage hero: full-bleed team photo pulled up beneath the transparent header */
.hero--home {
  margin-top: calc(-1 * var(--header-overlay-h));
  padding-top: calc(var(--header-overlay-h) + 2.5rem);
  padding-bottom: 3.5rem;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-image: url('/Resources/images/BurlesonSepticStaff-hero-1920w.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Serve a lighter hero photo to narrower screens */
@media (max-width: 1280px) {
  .hero--home {
    background-image: url('/Resources/images/BurlesonSepticStaff-hero-1280w.jpg');
  }
}

@media (max-width: 800px) {
  .hero--home {
    background-image: url('/Resources/images/BurlesonSepticStaff-hero-800w.jpg');
  }
}

.hero--home::before {
  background: linear-gradient(100deg, rgba(12, 26, 54, 0.56) 0%, rgba(12, 26, 54, 0.24) 58%, rgba(12, 26, 54, 0.1) 100%);
}

.hero-home-inner {
  position: relative;
  z-index: 2;
  /* Indented past the container edge the way the legacy hero was, so the copy
     sits clear of the crew rather than starting at the page margin.
     5.75vw resolves to the source layout's 79px inset at a 1374px viewport. */
  padding-left: clamp(1.5rem, 5.75vw, 4.9rem);
}

.hero-headline {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: 1rem;
  /* reset; the two spans below carry the real sizing */
  letter-spacing: normal;
  /* the global h1 tightening doesn't belong on Patua One */
}

.hero-eyebrow {
  display: block;
  font-family: var(--font-tagline);
  /* Bebas Neue ships no italic; the legacy site relied on a synthesized oblique */
  transform: skewX(-11deg);
  transform-origin: left bottom;
  width: fit-content;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-headline-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.65vw, 4.5rem);
  line-height: 1;
  /* Capped in em so the three-line break holds at every size: "Service Since
     1972" measures 7.94em, "Prompt Professional" 9.06em. */
  max-width: 8.4em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.hero-band {
  display: table;
  margin: 0 0 0.55rem;
  padding: 0.3rem 0.85rem 0.45rem;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--white);
  font-size: clamp(1.4rem, 3vw, 2.7rem);
  line-height: 1.2;
}

.hero-band--red {
  background-color: var(--brand-red);
  margin-top: 1rem;
}

.hero-band--red a {
  color: var(--white);
}

.hero-band--red a:hover,
.hero-band--red a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

.hero-band--blue {
  background-color: var(--brand-blue);
}

.hero-ratings {
  margin-top: 2.25rem;
  width: min(100%, 475px);
  height: auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hero-title {
  color: var(--white);
  margin-bottom: 1.25rem;
}

.hero-title span {
  color: #60a5fa;
}

.hero-subtitle {
  color: #94a3b8;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255, 255, 255, 0.1);
}

/* Service Badge / Feature Cards */
.section {
  padding: 5rem 0;
}

.bg-light {
  background-color: var(--light);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.section-subtitle {
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  display: block;
}

.cards-grid {
  display: grid;
  /* min() keeps the 300px track from forcing horizontal scroll on 320px phones */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.3);
}

.card-icon {
  width: 56px;
  height: 56px;
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.card-icon svg {
  width: 28px;
  height: 28px;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-text {
  flex-grow: 1;
}

.card-link {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
}

/* Stats / Credentials Bar */
.trust-bar {
  background: var(--primary);
  color: var(--white);
  padding: 2.5rem 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

.trust-number {
  font-size: 2.75rem;
  font-weight: 800;
  font-family: var(--font-heading);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.trust-label {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Form Styling */
.form-container {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--dark);
  font-size: 0.95rem;
}

.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 1rem;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Testimonials */
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.testimonial-stars {
  color: #f59e0b;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.2rem;
}

/* Footer */
.site-footer {
  background-color: var(--dark);
  color: #94a3b8;
  padding: 4rem 0 2rem;
  margin-top: auto;
  border-top: 4px solid var(--primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-heading {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.65rem;
}

.footer-links a {
  color: #94a3b8;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
}

/* Awards / recognition band */
.awards-section {
  background: linear-gradient(160deg, #162c4d 0%, #10233f 55%, #0c1b31 100%);
  color: var(--white);
}

.awards-section h2 {
  color: var(--white);
}

.awards-section .section-subtitle {
  color: #8fb6e8;
}

.awards-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* flex-start keeps every badge tile on the same top edge; a caption that
     runs to two lines then extends downward instead of shoving its tile up. */
  align-items: flex-start;
  justify-content: center;
  gap: 3.5rem;
}

.award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  flex: 0 1 17rem;
  text-align: center;
}

/* Fixed-height media box: the three badges have very different aspect ratios,
   so this keeps their captions on a shared baseline. */
.award-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 100%;
  padding: 0 1.5rem;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  transition: transform 0.28s cubic-bezier(0.22, 0.75, 0.25, 1), box-shadow 0.28s ease;
}

.award:hover .award-media {
  transform: translateY(-6px);
  box-shadow: 0 20px 34px -14px rgba(0, 0, 0, 0.7);
}

.award:hover .award-caption {
  color: var(--white);
}

.award-media img {
  transition: transform 0.28s cubic-bezier(0.22, 0.75, 0.25, 1);
}

.award:hover .award-media img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {

  .award-media,
  .award-media img {
    transition: none;
  }

  .award:hover .award-media {
    transform: none;
  }

  .award:hover .award-media img {
    transform: none;
  }
}

.award img {
  width: auto;
  max-height: 120px;
}

.award-caption {
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  transition: color 0.28s ease;
}

/* "53+ Years of Trusted Service" */
.legacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.legacy-badge img {
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}

.legacy-list {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.legacy-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-muted);
}

.legacy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--brand-red);
}

.legacy-kicker {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--dark);
  margin-bottom: 0;
}

/* Footer NAP block */
.footer-nap {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #94a3b8;
}

.footer-nap strong {
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.footer-nap a {
  color: #94a3b8;
  width: fit-content;
}

.footer-nap a:hover {
  color: var(--white);
}

.footer-nap-phone {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white) !important;
}

.footer-tceq {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.footer-bbb {
  margin-top: 1.25rem;
  width: 150px;
  height: auto;
}

.footer-credit a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credit a:hover {
  color: #ff8a7a;
}

/* --- Happy Pumper -------------------------------------------------------
   He lives in his own dark band rather than floating over the page. The
   artwork faces LEFT and the lettering on the tank reads left-to-right, so
   he is never mirrored — he drives IN from the right edge instead. */
.pumper-band {
  background: linear-gradient(150deg, #0d1b2c 0%, #0a1522 55%, #060d16 100%);
  color: var(--white);
  padding: 4.5rem 0;
  overflow: hidden;
}

.pumper-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.pumper-band h2 {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin-bottom: 1rem;
}

.pumper-band .section-subtitle {
  color: #7fb0ea;
}

.pumper-band p {
  color: #a9b8c6;
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

.pumper-stage {
  display: flex;
  justify-content: flex-end;
}

.pumper-truck {
  width: min(100%, 26rem);
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
  /* Parked off the right edge until the band scrolls into view */
  transform: translateX(125%);
  opacity: 0;
  transition: transform 1.15s cubic-bezier(0.22, 0.75, 0.25, 1), opacity 0.5s ease 0.1s;
}

.pumper-band.is-parked .pumper-truck {
  transform: translateX(0);
  opacity: 1;
  animation: pumper-idle 3.4s ease-in-out 1.2s infinite;
}

@keyframes pumper-idle {

  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }

  50% {
    transform: translateX(0) translateY(-4px) rotate(-0.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pumper-truck {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .pumper-band.is-parked .pumper-truck {
    animation: none;
  }
}

/* Held to a single line on tablet and up. Below ~640px the one-line scale
   would drop under the normal h2 floor and look undersized next to its
   siblings, so there it wraps and inherits the standard heading size. */
@media (min-width: 641px) {
  .h2-oneline {
    font-size: clamp(1.75rem, 4.4vw, 2.5rem);
    text-wrap: nowrap;
    white-space: nowrap;
  }
}

/* --- Service pages -------------------------------------------------------
   A reading column plus a rail that carries the phone number and, on longer
   pages, the section list. The rail is what the old single-column layout was
   leaving as 45% empty margin on desktop. */
.svc-hero {
  padding-bottom: 3rem;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(66, 123, 202, 0.28) 0%, transparent 58%),
    linear-gradient(158deg, #16294a 0%, var(--brand-navy) 58%, #0b1729 100%);
  color: var(--white);
  padding: 2.25rem 0 3.25rem;
}

.svc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #93a9c4;
  margin-bottom: 1.5rem;
}

.svc-crumbs a {
  color: #93a9c4;
}

.svc-crumbs a:hover,
.svc-crumbs a:focus-visible {
  color: var(--white);
}

.svc-crumbs [aria-current] {
  color: var(--white);
  font-weight: 600;
}

.svc-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--white);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 20ch;
  margin-bottom: 1rem;
}

.svc-lead {
  color: #c3d1e0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

.svc-hero-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.svc-hero-badges li {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #d7e3f1;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.svc-actions .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.svc-actions .btn-outline:hover {
  background: var(--white);
  color: var(--brand-navy);
}

.svc-body {
  padding: 4.5rem 0 5rem;
}

.svc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 4rem;
  align-items: start;
}

/* The rail comes first in the DOM so focus order matches the stacked mobile
   view; grid placement puts it on the right at desktop without reordering. */
.svc-main {
  grid-column: 1;
  grid-row: 1;
}

.svc-rail {
  grid-column: 2;
  grid-row: 1;
}

/* Blocks are separated by air and a hairline, so grouping comes from the
   content rather than from arbitrary alternating background bands. */
.svc-block[id] {
  scroll-margin-top: 7.5rem;
}

.svc-block+.svc-block {
  margin-top: 3.25rem;
  padding-top: 3.25rem;
  border-top: 1px solid var(--border);
}

.svc-block>h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 1.1rem;
}

.svc-block>h3 {
  font-size: 1.2rem;
  color: var(--dark);
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
}

.svc-block>h3:first-child {
  margin-top: 0;
}

.svc-block>p {
  max-width: 68ch;
  margin-bottom: 1.1rem;
  line-height: 1.75;
}

/* The opening paragraph of a block carries more weight than the ones that
   follow it — the rhythm the flat single-size body copy was missing. */
.svc-block-lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

.svc-block a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Refined "Learn more" arrow-link on city service lists. Sits on its own
   line like a quiet, editorial affordance — mirrors the arrow-forward
   language of the homepage card links. Keyword phrase lives in the
   aria-label for link anchor SEO text. */
.svc-block .svc-more-link {
  /* block-level flex = starts on its own line, width shrinks to content */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 86, 179, 0.25);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.svc-block .svc-more-link::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.svc-block .svc-more-link:hover,
.svc-block .svc-more-link:focus-visible {
  color: var(--primary-hover);
  border-color: rgba(0, 68, 148, 0.4);
}

.svc-block .svc-more-link:hover::after,
.svc-block .svc-more-link:focus-visible::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* The scannable layer: these lists are what a visitor actually reads. */
.svc-checks {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  margin: 0.5rem 0 1.75rem;
}

.svc-checks li {
  position: relative;
  padding-left: 2.3rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.svc-checks li b {
  display: block;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.svc-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: var(--radius-full);
  background: var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230056b3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

@media (min-width: 900px) {

  /* Short items read faster two-up; long ones stay single column. */
  .svc-checks:not(.is-long) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* Extra 20px breathing room between service items on city hub service lists */
.svc-block[id^="services-we-provide-in-"] .svc-checks {
  gap: calc(0.9rem + 20px);
}

/* Numbered process steps ("What to Expect When You Call") */
.flow-steps {
  list-style: none;
  counter-reset: flow;
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
  padding-left: 3rem;
  position: relative;
}

.flow-steps::before {
  content: '';
  position: absolute;
  left: 1.15rem;
  top: 1.9rem;
  bottom: 1.9rem;
  width: 2px;
  background: var(--border);
}

.flow-steps li {
  counter-increment: flow;
  position: relative;
  padding: 0.5rem 0 0.5rem 0.5rem;
}

.flow-steps li::before {
  content: counter(flow);
  position: absolute;
  left: -3rem;
  top: 0.25rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--white);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-steps b {
  display: block;
  color: var(--dark);
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

.flow-steps p {
  margin: 0;
  color: var(--text-muted);
}

.badge-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}

.badge-strip li {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
}

/* A line that asks for the call gets treated as an action, not body copy. */
.svc-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: none !important;
  margin: 2rem 0 !important;
  padding: 1.4rem 1.6rem;
  background: var(--primary-light);
  border-radius: var(--radius-md);
  color: var(--dark);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
}

.svc-callout span {
  flex: 1 1 20rem;
}

.svc-callout .btn {
  flex: 0 0 auto;
}

/* Cities a page names as served: compact chips rather than a run-on line. */
.city-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.5rem 0 2rem;
}

.city-chips li {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
}

.city-chips li a {
  display: block;
  color: var(--text-main);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  transition: var(--transition);
}

.city-chips li a:hover,
.city-chips li a:focus-visible {
  background: var(--brand-navy);
  color: var(--white);
  border-color: var(--brand-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Woven job photography -----------------------------------------------
   Two frames to a slot, filling the reading column between content blocks.
   Equal widths and a shared aspect ratio keep the pair reading as one band. */
.jobshots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.75rem 0 3rem;
}

.work-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--border);
  box-shadow: var(--shadow-md);
  position: relative;
}

.work-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.75, 0.25, 1);
}

.work-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 23, 41, 0.35), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.work-shot:hover img,
.work-shot:focus-visible img {
  transform: scale(1.04);
}

.work-shot:hover::after,
.work-shot:focus-visible::after {
  opacity: 1;
}

@media (max-width: 560px) {

  /* Side by side would leave each frame around 165px wide on a phone */
  .jobshots {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-shot img {
    transition: none;
  }

  .work-shot:hover img,
  .work-shot:focus-visible img {
    transform: none;
  }
}

/* --- Mobile sticky call bar --------------------------------------------- */
.mobile-action-bar {
  display: none;
}

/* Review stars are links to the review site; keep them amber, no underline */
.svc-review-link {
  color: #f59e0b;
  text-decoration: none;
}

.svc-review-link:hover,
.svc-review-link:focus-visible {
  color: #b45309;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 740px);
  color: var(--white);
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(6, 12, 22, 0.86);
  backdrop-filter: blur(2px);
}

.lightbox-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.lightbox-caption {
  margin: 0.9rem 0 0;
  text-align: center;
  color: #d7e3f1;
  font-size: 0.95rem;
}

.lightbox-close {
  position: absolute;
  top: -2.9rem;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --- Reviews ------------------------------------------------------------- */
.review-marquee {
  margin: 1.5rem 0 2rem;
  overflow: hidden;
  /* Fade the ends so cards enter and leave rather than getting clipped. */
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.review-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  /* Duration scales with the card count so speed stays constant per card. */
  animation: review-drift calc(var(--review-count, 3) * 11s) linear infinite;
}

.review-marquee:hover .review-track,
.review-marquee:focus-within .review-track {
  animation-play-state: paused;
}

@keyframes review-drift {

  /* The track holds two copies, so -50% is exactly one full set. */
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-marquee {
    overflow-x: auto;
    mask-image: none;
  }

  .review-track {
    animation: none;
  }
}

.quote {
  flex: 0 0 20rem;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.quote blockquote {
  color: var(--text-main);
  line-height: 1.65;
  font-size: 0.98rem;
}

.quote blockquote::before {
  content: '';
  display: block;
  width: 2.1rem;
  height: 0.5rem;
  margin-bottom: 0.85rem;
  border-radius: var(--radius-full);
  background: var(--brand-red);
}

.quote figcaption {
  margin-top: auto;
  font-weight: 700;
  color: var(--dark);
  font-size: 0.95rem;
}

.quote figcaption span {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
  padding: 1.5rem;
  background: linear-gradient(155deg, #eaf2fc 0%, #f4f8fd 100%);
  border-radius: var(--radius-lg);
}

.faq-item {
  border: 1px solid #d3e2f4;
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--primary);
  box-shadow: 0 6px 18px -10px rgba(0, 86, 179, 0.55);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.45;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.4rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--primary);
}

.faq-item>p {
  margin: 0;
  padding: 0 1.25rem 1.2rem;
  color: var(--text-muted);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* Cards rendered as <a> (service-area city cards) */
a.card {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

a.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.3);
}

a.card h3 {
  color: var(--dark);
}

/* The page's closing ask, given weight instead of a subhead and a paragraph. */
.svc-close {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-top: 3.25rem;
  padding: 2.5rem clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    radial-gradient(110% 150% at 92% 8%, rgba(234, 51, 35, 0.42) 0%, transparent 60%),
    linear-gradient(145deg, #16294a 0%, var(--brand-navy) 60%, #0b1729 100%);
}

.svc-close h2 {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 0.75rem;
}

.svc-close p {
  color: #c3d1e0;
  line-height: 1.7;
  margin: 0;
  max-width: 52ch;
}

.svc-close-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.svc-close-actions .btn {
  justify-content: center;
  font-size: 1.05rem;
}

.svc-close-actions .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.svc-close-actions .btn-outline:hover {
  background: var(--white);
  color: var(--brand-navy);
}

.svc-close-note {
  color: #93a9c4 !important;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.25rem !important;
}

@media (max-width: 760px) {
  .svc-close {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

/* Stat rows the old builder had flattened into three separate paragraphs */
.stat-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.stat-row li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, #eaf2fc 0%, #f4f8fd 100%);
}

.stat-prefix {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: 0.3rem;
}

.watch-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  text-decoration: none !important;
}

.watch-link a::before {
  content: '';
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: var(--brand-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

.watch-link a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Featured podcast interview card (About page) */
.podcast-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(155deg, #eaf2fc 0%, #f4f8fd 100%);
  border: 1px solid #d3e2f4;
  border-radius: var(--radius-lg);
}

.podcast-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background: var(--brand-red);
  color: var(--white);
  font-size: 1.15rem;
  padding-left: 0.25rem;
  /* optically center the > glyph */
  filter: drop-shadow(0 6px 14px rgba(234, 51, 35, 0.35));
}

.podcast-card-copy .podcast-card-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.podcast-card-copy h3 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  color: var(--dark);
}

.podcast-card-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.podcast-card .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .podcast-card {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    justify-items: center;
    gap: 1rem;
  }
}

/* The review widget is third-party; give it room and stop it overflowing. */
.ndrsl-widget {
  margin: 1.5rem 0 0;
  min-height: 12rem;
  overflow-x: auto;
}

/* Open roles */
.positions {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
}

.positions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.positions li:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -12px rgba(0, 86, 179, 0.5);
}

.positions h3 {
  margin: 0 0 0.15rem;
  font-size: 1.2rem;
  color: var(--dark);
}

.positions p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.positions .btn {
  flex: 0 0 auto;
}

/* A trailing margin on the last block in the article was adding dead space
   above whatever section came next. */
.svc-main > *:last-child {
  margin-bottom: 0;
}
/* The article already ends on 5rem of padding; a second 5rem on the next
   section stacked into a 208px void. */
.svc-body + .section {
  padding-top: 3.5rem;
}

/* Service-area coverage, grouped by county */
.county-grid {
  /* Explicit tracks: auto-fit made a fifth, empty column for four counties */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}
@media (max-width: 900px) {
  .county-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .county-grid { grid-template-columns: minmax(0, 1fr); }
}
.county-col h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: 0.6rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.county-col ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.county-col a {
  color: var(--text-main);
  font-size: 0.98rem;
}
.county-col a:hover,
.county-col a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The city list is never exhaustive; this says so and invites the call. */
.county-more {
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
.county-more-lead {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.county-more-note {
  display: block;
  font-size: 0.95rem;
}
.county-more a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-status {
  margin-top: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-status.is-ok { color: #0f7a4d; }
.form-status.is-error { color: var(--brand-red); }

/* --- Rail ---------------------------------------------------------------- */
.svc-rail {
  position: sticky;
  top: 8.5rem;
  display: grid;
  gap: 1.25rem;
}

.rail-cta {
  background: var(--brand-navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.5rem;
}

.rail-cta-label {
  margin: 0 0 0.35rem;
  color: #8fb6e8;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-phone {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.rail-phone:hover,
.rail-phone:focus-visible {
  color: #ffb3aa;
}

.rail-cta-note {
  color: #a9b8c6;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.rail-btn {
  width: 100%;
  justify-content: center;
}

.rail-toc {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.4rem;
}

.rail-toc-label {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rail-toc ul {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.rail-toc a {
  display: block;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  padding-left: 0.85rem;
  border-left: 2px solid var(--border);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.rail-toc a:hover,
.rail-toc a:focus-visible,
.rail-toc a.is-current {
  color: var(--primary);
  border-left-color: var(--primary);
}

.rail-toc a.is-current {
  font-weight: 600;
}
/* Subheadings, listed only on pages with too few sections to fill the rail */
.rail-toc li.is-sub a {
  padding-left: 1.6rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.rail-toc li.is-sub a::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 0.72em;
  width: 0.35rem;
  height: 1px;
  background: var(--border);
}
.rail-toc li.is-sub {
  position: relative;
}

/* "At a glance" sidebar info block (city hub pages) */
.rail-info {
  margin-top: 1.25rem;
}

.rail-info-list li {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.45;
}

.rail-info-list li:last-child {
  border-bottom: 0;
}

.rail-info-list span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* County filter chips (service-area page) */
.county-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.5rem 0 0.75rem;
}

.county-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--font-base);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
}

.county-chip:hover {
  background: var(--white);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.county-chip.active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--white);
}

.county-chip .county-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  color: currentColor;
}

.county-chip:not(.active) .county-count {
  background: var(--primary-light);
  color: var(--primary);
}

/* Filtered cards fade out smoothly */
.cards-grid>.is-hidden {
  display: none;
}

/* Badge strips inside city cards need tighter spacing */
.card .badge-strip {
  margin: 0 0 0.6rem;
}

/* Special "don't see your city" card */
.card-any-city {
  background: var(--primary-light);
  border-color: #c3dbf5;
  display: flex;
  flex-direction: column;
}

.card-any-city h3 {
  color: var(--primary);
}

.card-any-city .btn {
  align-self: flex-start;
  margin-top: auto;
}

.city-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 0.75rem;
}

.city-grid li {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
}

.cta-panel {
  background: var(--brand-navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
}

.cta-panel h2 {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.cta-panel p {
  color: #a9b8c6;
  max-width: 52ch;
  margin: 0 auto 1.75rem;
}

.cta-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.cta-panel .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.cta-panel .btn-outline:hover {
  background: var(--white);
  color: var(--brand-navy);
}

@media (max-width: 1024px) {
  .svc-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* Rail moves above the copy on narrow screens, where the phone number is
     the thing most people are reaching for. */
  .svc-main,
  .svc-rail {
    grid-column: 1;
    grid-row: auto;
  }

  .svc-rail {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  .rail-toc {
    display: none;
  }

  .svc-body {
    padding: 3rem 0 3.5rem;
  }
}

/* --- Job photo gallery --------------------------------------------------- */
.photo-grid {
  list-style: none;
  display: grid;
  /* Fixed three across so six photos land as a clean 3x2 instead of 4+2 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.photo-grid li {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--border);
}

.photo-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.75, 0.25, 1);
}

.photo-grid li:hover img {
  transform: scale(1.04);
}

/* Responsive Media Queries */
/* Seven nav items no longer fit alongside the logo below ~1150px,
   so the whole primary nav collapses into the drawer here. */
@media (max-width: 1150px) {
  :root {
    --header-overlay-h: 9rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero--home {
    min-height: 0;
  }

  .header-main {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    gap: 1rem;
  }

  .header-main nav {
    flex: 0 0 auto;
  }

  .brand-logo img {
    height: 58px;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-navy);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-lg);
    /* The full service list is taller than a phone screen, so the drawer scrolls */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    clip-path: circle(0% at 100% 0);
    transition: clip-path 0.4s ease-in-out;
  }

  .nav-menu.open {
    clip-path: circle(160% at 100% 0);
  }

  .nav-link {
    text-shadow: none;
    font-size: 1.05rem;
    /* Toggle indicator signals the SERVICES / SERVICE AREA sub-lists open */
    position: relative;
  }

  .nav-item.has-dropdown>.nav-link::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .nav-item.has-dropdown:hover>.nav-link::after {
    transform: rotate(-135deg);
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0.35rem 0 0.25rem;
    min-width: 0;
    /* Groups stack one under the other in the drawer with their headings */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 0.75rem;
  }

  .dropdown-heading {
    color: #8fb6e8;
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  .dropdown-link {
    color: rgba(255, 255, 255, 0.82);
    padding: 0.4rem 0.35rem;
    border-radius: var(--radius-sm);
  }

  .dropdown-link:hover {
    background: var(--brand-navy);
    color: var(--white);
  }

  .dropdown-link--emergency {
    border-left: 3px solid var(--brand-red);
    background: rgba(234, 51, 35, 0.25);
    color: var(--white);
  }
}

@media (max-width: 768px) {
  :root {
    --header-overlay-h: 5.5rem;
  }

  /* Drop the transparent overlay on phones: the photo is too busy behind
     the logo at this width, so the header gets a solid backdrop instead. */
  .site-header--overlay {
    background-color: var(--brand-navy);
  }

  .hero--home {
    margin-top: 0;
    padding-top: 3rem;
  }

  .header-utility {
    display: none;
  }

  /* Mobile-only sticky call / quote bar — the header actions are hidden
     below 768px, so this keeps the two most valuable taps one thumb away. */
  .mobile-action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.14);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    text-decoration: none;
    text-align: center;
  }

  .mobile-action-btn--call {
    background: var(--brand-red);
  }

  .mobile-action-btn--call:hover,
  .mobile-action-btn--call:focus-visible {
    background: var(--brand-red-hover);
  }

  .mobile-action-btn--quote {
    background: var(--primary);
  }

  .mobile-action-btn--quote:hover,
  .mobile-action-btn--quote:focus-visible {
    background: var(--primary-hover);
  }

  /* Clear the footer so the fixed bar never covers the last links */
  .site-footer {
    padding-bottom: 5rem;
  }

  .header-main {
    padding-top: 0.75rem;
  }

  .brand-logo img,
  .site-header--solid .brand-logo img {
    height: 46px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .awards-row {
    gap: 2.5rem;
  }

  .legacy-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pumper-band-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pumper-stage {
    justify-content: center;
  }

  .legacy-badge img {
    max-width: 14rem;
  }
}

@media (max-width: 420px) {

  /* Below this the logo plus the menu button no longer fit side by side */
  .brand-logo img,
  .site-header--solid .brand-logo img {
    height: 36px;
  }

  .header-main {
    gap: 0.5rem;
  }
}

@media (max-width: 560px) {
  .announce-text {
    font-size: 0.85rem;
  }

  .hero-band {
    padding: 0.25rem 0.6rem 0.35rem;
  }
}