/* ==========================================================================
   Lincoln Plumbing & Rooter — Design System
   ========================================================================== */

/* Headline font: Antonio (condensed display sans) */
@font-face {
  font-family: 'Antonio';
  src: url('/fonts/Antonio-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('/fonts/Antonio-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('/fonts/Antonio-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Body font: Inter (variable — one file covers every weight, and optical
   sizing auto-tunes to whatever font-size an element renders at) */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --orange: #ff7b00;
  --orange-dark: #e06600;
  --orange-light: #fff1e2;
  --orange-2: #ff9d2e;
  --gold: #ffb547;
  --blue: #147ef0;
  --blue-dark: #0e63c4;
  --blue-light: #e9f3fe;
  --cyan: #24c4e8;

  /* Signature gradients / textures */
  --grad-orange: linear-gradient(115deg, #ff9d2e 0%, #ff7b00 45%, #e85f00 100%);
  --grad-fire: linear-gradient(180deg, #ffb547 0%, #ff7b00 55%, #e85f00 100%);
  --blueprint: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
               linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);

  /* Neutrals */
  --black: #0b0d11;
  --ink: #14181f;
  --ink-soft: #3d4552;
  --gray-600: #5b6472;
  --gray-400: #8992a0;
  --gray-200: #e3e7ec;
  --gray-100: #f1f3f6;
  --white: #ffffff;

  /* Semantic */
  --success: #1f9d55;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Antonio', 'Inter', -apple-system, sans-serif;

  /* Layout */
  --max-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06), 0 1px 1px rgba(20, 24, 31, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 20px 48px rgba(20, 24, 31, 0.14);

  --header-height: 84px;
  --topbar-height: 36px;
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: page-fade-in 0.7s ease both;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

/* ---- Typography -------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.1; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.75rem, 5.5vw, 4.25rem); }
h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
p { color: var(--ink-soft); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.eyebrow.blue { color: var(--blue-dark); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: 12px; }
.section-head p { margin-top: 14px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.35);
}
.btn-primary:hover { background: var(--orange-dark); box-shadow: 0 8px 24px rgba(255, 123, 0, 0.45); }

.btn-secondary {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue-dark);
}
.btn-secondary:hover { background: var(--blue); color: var(--white); }

.btn-outline {
  background: transparent;
  border-color: var(--gray-200);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); }

.btn-block { width: 100%; }
.btn-sm { padding: 11px 18px; font-size: 0.9rem; }

.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: var(--white);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 123, 0, 0.4);
}
.btn-call:hover { background: var(--orange-dark); }
.btn-call svg { flex-shrink: 0; }

/* ---- Header / Nav ------------------------------------------------------ */
.top-bar {
  background: var(--ink);
  color: var(--gray-200);
  font-size: 0.82rem;
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.top-bar a { transition: color 0.15s ease; }
.top-bar a:hover { color: var(--white); }
.top-bar-left { display: flex; gap: 20px; align-items: center; }
.top-bar-left span { color: var(--gray-400); }
.top-bar-social { display: flex; gap: 14px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow 0.3s ease;
}
body.scrolled:not(.page-home) .site-header,
body.page-home.scrolled .site-header {
  box-shadow: 0 4px 16px rgba(20, 24, 31, 0.06);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 56px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.main-nav a {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { background: var(--gray-100); color: var(--ink); }
.main-nav a.active { color: var(--blue-dark); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-actions .btn-secondary { padding: 12px 20px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---- Homepage hero overlay header --------------------------------------
   On the home page, the top bar + header float transparently on top of
   the full-bleed hero. Scrolling past the hero fills them in solid. */
body.page-home .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.page-home .top-bar-left span { color: rgba(255, 255, 255, 0.6); }
body.page-home .top-bar a { color: rgba(255, 255, 255, 0.85); }

body.page-home .site-header {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, top 0.3s ease;
}
body.page-home .main-nav a { color: rgba(255, 255, 255, 0.92); }
body.page-home .main-nav a:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }
body.page-home .main-nav a.active { color: var(--white); }
body.page-home .header-actions .btn-secondary { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
body.page-home .header-actions .btn-secondary:hover { background: var(--white); color: var(--ink); }
body.page-home .nav-toggle { color: var(--white); }

body.page-home.scrolled .top-bar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

body.page-home.scrolled .site-header {
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--gray-200);
  box-shadow: 0 4px 16px rgba(20, 24, 31, 0.06);
}
body.page-home.scrolled .main-nav a { color: var(--ink-soft); }
body.page-home.scrolled .main-nav a:hover { background: var(--gray-100); color: var(--ink); }
body.page-home.scrolled .main-nav a.active { color: var(--blue-dark); }
body.page-home.scrolled .header-actions .btn-secondary { border-color: var(--blue); color: var(--blue-dark); }
body.page-home.scrolled .header-actions .btn-secondary:hover { background: var(--blue); color: var(--white); }
body.page-home.scrolled .nav-toggle { color: inherit; }

@media (max-width: 860px) {
  body.page-home .site-header { top: 0; }
}

/* ---- Trust bar ---------------------------------------------------------- */
.trust-bar {
  background: var(--ink);
  color: var(--white);
  padding: 18px 0;
}
.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}
.trust-item svg { flex-shrink: 0; color: var(--orange); width: 26px; height: 26px; }
.trust-item .stars { color: var(--orange); display: flex; gap: 2px; }
.trust-item .trust-copy small { display: block; color: var(--gray-400); font-weight: 400; font-size: 0.78rem; margin-top: 2px; }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 24, 31, 0.88) 0%, rgba(20, 24, 31, 0.72) 45%, rgba(20, 24, 31, 0.45) 100%);
}
.hero .container {
  position: relative;
  z-index: 1;
  padding-top: 140px;
  padding-bottom: 100px;
}
.hero-content { max-width: 680px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.hero h1 { color: var(--white); }
.hero .lede { color: rgba(255, 255, 255, 0.86); margin-top: 18px; max-width: 560px; }

.hero-ctas { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.hero-ctas .btn-secondary { border-color: rgba(255,255,255,0.6); color: var(--white); }
.hero-ctas .btn-secondary:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.promo-strip {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.promo-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 14px 20px;
}
.promo-chip .price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1;
}
.promo-chip .label { font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
.promo-chip .label small { display: block; color: rgba(255,255,255,0.65); font-weight: 400; }

/* ---- Financing / secondary trust row ----------------------------------- */
.strip {
  background: var(--gray-100);
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-200);
}
.strip .container { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.strip-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.strip-item svg { color: var(--blue); width: 18px; height: 18px; }

/* ---- Section shells ------------------------------------------------------ */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-tight { padding: 72px 0; }
.bg-soft { background: var(--gray-100); }
.bg-ink { background: var(--ink); color: var(--white); }
.bg-ink p { color: rgba(255,255,255,0.7); }
.bg-ink h2 { color: var(--white); }

/* ---- Services grid -------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--orange-light);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: 0.94rem; flex-grow: 1; }
.service-card .service-link {
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.service-detail {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--gray-200);
}
.service-detail:last-child { border-bottom: none; }
.service-detail:nth-child(even) { direction: rtl; }
.service-detail:nth-child(even) > * { direction: ltr; }
.service-detail-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.service-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.service-detail ul { display: grid; gap: 10px; margin-top: 22px; }
.service-detail ul li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); }
.service-detail ul li svg { color: var(--success); flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; }
.service-detail .btn { margin-top: 28px; }

/* ---- Story section -------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.story-media { position: relative; }
.story-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.story-badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.story-badge strong { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 2.3rem; color: var(--orange); }
.story-badge span { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; margin-top: 4px; }
.story-copy p { margin-top: 16px; }
.story-copy p:first-of-type { margin-top: 0; }
.story-signoff { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.story-signoff .btn { margin-top: 0; }

/* ---- Stats / USP row ------------------------------------------------------ */
.usp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.usp-item { text-align: center; }
.usp-item strong { display: block; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 2.4rem; color: var(--blue); }
.usp-item span { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }

/* ---- Testimonials --------------------------------------------------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px; }
.testimonial-card .stars { color: var(--orange); display: flex; gap: 3px; margin-bottom: 14px; }
.testimonial-card p { color: var(--ink); font-size: 0.95rem; }
.testimonial-author { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.testimonial-author .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.testimonial-author strong { font-size: 0.9rem; display: block; }
.testimonial-author small { color: var(--gray-400); font-size: 0.8rem; }

/* ---- CTA band -------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--grad-orange);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  box-shadow: 0 30px 60px -24px rgba(255, 123, 0, 0.55);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: 0.6;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.cta-band p { color: rgba(255,255,255,0.92); margin-top: 8px; }
.cta-band .btn-primary { background: var(--black); color: var(--white); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.cta-band .btn-primary:hover { background: var(--white); color: var(--orange-dark); }

/* CTA reused as a bare layout shell inside a dark section (e.g. about.html):
   opt out of the orange-band treatment so the primary button stays orange. */
.bg-ink .cta-band { box-shadow: none; background: none; }
.bg-ink .cta-band::before { display: none; }
.bg-ink .cta-band .btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 6px 20px rgba(255,123,0,0.35); }
.bg-ink .cta-band .btn-primary:hover { background: var(--orange-dark); color: var(--white); }

/* ---- Gallery --------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.gallery-item { border-radius: var(--radius-md); overflow: hidden; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

/* ---- Blog ------------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card-media { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-date { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-dark); }
.blog-card h3 { margin-top: 10px; font-size: 1.15rem; }
.blog-card p { font-size: 0.92rem; margin-top: 10px; flex-grow: 1; }
.blog-card .read-more { margin-top: 16px; font-weight: 700; font-size: 0.88rem; color: var(--blue-dark); }

.blog-post-header { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.blog-post-header .blog-date { display: block; margin-bottom: 14px; }
.blog-post-hero { border-radius: var(--radius-lg); overflow: hidden; max-width: 920px; margin: 0 auto 48px; box-shadow: var(--shadow-md); }
.blog-post-hero img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.blog-post-body { max-width: 720px; margin: 0 auto; }
.blog-post-body h2 { margin-top: 40px; margin-bottom: 14px; font-size: 1.4rem; }
.blog-post-body p { margin-top: 16px; }
.blog-post-body ul { margin-top: 16px; display: grid; gap: 10px; }
.blog-post-body ul li { padding-left: 22px; position: relative; color: var(--ink-soft); }
.blog-post-body ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.blog-post-cta { margin-top: 56px; max-width: 720px; margin-left: auto; margin-right: auto; }

.related-posts { border-top: 1px solid var(--gray-200); margin-top: 72px; padding-top: 56px; }

/* ---- Forms ------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-note { font-size: 0.78rem; color: var(--gray-400); margin-top: 14px; }

.alert-success {
  background: #eafaf0;
  border: 1px solid #b7e8c9;
  color: #146c37;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.alert-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 400;
  max-width: min(420px, calc(100vw - 48px));
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  margin-bottom: 0;
}
.alert-toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 860px) {
  .alert-toast { bottom: 76px; }
}

/* Contact page split layout */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.contact-info-card {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.contact-info-card h3 { color: var(--white); }
.contact-info-row { display: flex; gap: 14px; margin-top: 24px; align-items: flex-start; }
.contact-info-row svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; }
.contact-info-row strong { display: block; font-size: 0.95rem; }
.contact-info-row span, .contact-info-row a { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.contact-info-row a:hover { color: var(--white); }
.contact-socials { display: flex; gap: 12px; margin-top: 28px; }
.contact-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease;
}
.contact-socials a:hover { background: var(--orange); }

/* ---- Footer ------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.75); }
.footer-top { padding: 72px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.3fr; gap: 40px; }
.footer-brand img { height: 52px; margin-bottom: 18px; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 280px; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease;
}
.footer-socials a:hover { background: var(--orange); }
.footer-col h4 { color: var(--white); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: rgba(255,255,255,0.65); font-size: 0.92rem; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--white); }
.footer-col address { font-style: normal; color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.6; }

.footer-form h4 { color: var(--white); margin-bottom: 6px; }
.footer-form p.form-lede { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-bottom: 18px; }
.footer-form .field label { color: rgba(255,255,255,0.6); }
.footer-form .field input, .footer-form .field select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--white);
}
.footer-form .field input::placeholder { color: rgba(255,255,255,0.35); }
.footer-form .field select option { color: var(--ink); }

.footer-bottom { padding: 22px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { color: rgba(255,255,255,0.45); font-size: 0.8rem; }
.footer-license { color: rgba(255,255,255,0.45); font-size: 0.8rem; }

/* ---- Mobile call bar ------------------------------------------------------------ */
.mobile-call-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--orange);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.mobile-call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px;
}

/* ---- 404 --------------------------------------------------------------------- */
.not-found { text-align: center; padding: 140px 0; }
.not-found .eyebrow { justify-content: center; width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .usp-row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}

@media (max-width: 860px) {
  .top-bar { display: none; }
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-actions .btn-secondary { display: none; }
  :root { --header-height: 72px; }
  .brand img { height: 44px; }

  .story { grid-template-columns: 1fr; gap: 40px; }
  .story-media { order: -1; }
  .service-detail, .service-detail:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
  .service-detail-media { order: -1; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .cta-band { padding: 36px; flex-direction: column; text-align: center; justify-content: center; }
  .cta-band .btn { width: 100%; justify-content: center; }

  .mobile-call-bar { display: block; }
  body { padding-bottom: 60px; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .usp-row { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 1; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .promo-strip { flex-direction: column; }
  .trust-bar .container { grid-template-columns: 1fr; }
  .hero .container { padding-top: 110px; padding-bottom: 64px; }
}

/* ---- Mobile nav drawer ------------------------------------------------------------ */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--gray-200); }
.mobile-nav-top img { height: 40px; }
.mobile-nav-close { background: none; border: none; padding: 8px; }
.mobile-nav-close svg { width: 26px; height: 26px; }
.mobile-nav-links { display: flex; flex-direction: column; padding: 12px 24px; }
.mobile-nav-links a {
  padding: 16px 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--gray-200);
}
.mobile-nav-cta { padding: 24px; display: grid; gap: 12px; }

/* ==========================================================================
   MAXIMALIST BRAND LAYER — orange-forward, textured, animated
   ========================================================================== */

/* ---- Scroll reveal ------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Eyebrow upgrade: animated tick + kicker number --------------------- */
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.blue::before { background: var(--blue-dark); }
.section-head .eyebrow { position: relative; }

/* Big faded section index number */
.kicker-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gray-200);
  text-stroke: 1.5px var(--gray-200);
  position: absolute;
  top: -0.35em;
  right: 4%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bg-ink .kicker-num { -webkit-text-stroke-color: rgba(255,255,255,0.08); }

/* ---- Marquee ticker ------------------------------------------------------ */
.marquee {
  background: var(--grad-orange);
  color: var(--white);
  overflow: hidden;
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  position: relative;
  z-index: 2;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: 0.02em;
  padding: 16px 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.marquee-track span i {
  font-style: normal;
  margin: 0 26px;
  color: var(--black);
  font-size: 0.9em;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Angled / blueprint section shells ---------------------------------- */
.bg-black { background: var(--black); color: var(--white); }
.bg-black h2, .bg-black h3, .bg-black h4 { color: var(--white); }
.bg-black p { color: rgba(255,255,255,0.68); }
.blueprint-bg { position: relative; }
.blueprint-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--blueprint);
  background-size: 46px 46px;
  pointer-events: none;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}
.blueprint-bg > * { position: relative; z-index: 1; }

/* Slanted divider you drop at the top/bottom of a band */
.slash-top { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); }
.slash-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
@media (max-width: 640px) { .slash-top, .slash-bottom { clip-path: none; } }

/* ---- Hero maximalist upgrades ------------------------------------------- */
.hero-overlay {
  background:
    linear-gradient(100deg, rgba(11,13,17,0.92) 0%, rgba(11,13,17,0.72) 45%, rgba(11,13,17,0.35) 100%),
    linear-gradient(0deg, rgba(232,95,0,0.34) 0%, transparent 42%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--blueprint);
  background-size: 54px 54px;
  opacity: 0.5;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
/* Oversized outlined wrench watermark */
.hero-watermark {
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: min(48vw, 560px);
  color: rgba(255,123,0,0.14);
  z-index: 0;
  pointer-events: none;
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-14px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce){ .hero-watermark { animation: none; } }
.hero-badge .dot { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,123,0,0.7); }
  70% { box-shadow: 0 0 0 8px rgba(255,123,0,0); }
}
.hero h1 .hl { color: var(--orange-2); position: relative; white-space: nowrap; }
.hero-content { position: relative; z-index: 1; }
.promo-chip { position: relative; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.promo-chip:hover { transform: translateY(-3px); border-color: var(--orange); }

/* Scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.6); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700;
}
.scroll-cue .mouse { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,0.5); border-radius: 12px; position: relative; }
.scroll-cue .mouse::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; background: var(--orange); border-radius: 2px; transform: translateX(-50%); animation: wheel 1.5s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0;transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0;transform:translate(-50%,10px);} }
@media (max-width: 860px){ .scroll-cue { display: none; } }

/* ---- Trust bar upgrade --------------------------------------------------- */
.trust-bar { border-top: 3px solid var(--orange); }
.trust-item svg { filter: drop-shadow(0 2px 6px rgba(255,123,0,0.5)); }

/* ---- Service cards: bold, numbered, orange hover-fill -------------------- */
.services-grid { counter-reset: svc; }
.service-card {
  position: relative;
  overflow: hidden;
  border-width: 1.5px;
  isolation: isolate;
}
.service-card::before {
  counter-increment: svc;
  content: counter(svc, decimal-leading-zero);
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px var(--gray-200);
  transition: -webkit-text-stroke-color .25s ease, color .25s ease;
  z-index: 0;
}
.service-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
  background: var(--grad-orange); transition: width .3s ease; z-index: 2;
}
.service-card:hover { border-color: var(--orange); transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(255,123,0,0.55); }
.service-card:hover::before { -webkit-text-stroke-color: transparent; color: var(--orange-light); }
.service-card:hover::after { width: 100%; }
.service-card > * { position: relative; z-index: 1; }
.service-icon {
  background: var(--grad-orange);
  color: var(--white);
  box-shadow: 0 10px 22px -8px rgba(255,123,0,0.7);
  transition: transform .25s ease;
}
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.06); }
.service-card .service-link { color: var(--orange-dark); }

/* ---- Stat / counter band (on black, blueprint) -------------------------- */
.stat-band { position: relative; overflow: hidden; }
.counter-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.counter-item { text-align: center; padding: 8px; }
.counter-item .num {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1;
  background: var(--grad-fire); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.counter-item .num .suf { -webkit-text-fill-color: currentColor; color: var(--orange-2); }
.counter-item .lbl { margin-top: 10px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.counter-item + .counter-item { border-left: 1px solid rgba(255,255,255,0.09); }
@media (max-width: 640px) {
  .counter-row { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
  .counter-item:nth-child(odd) { border-left: none; }
  .counter-item:nth-child(3) { border-left: none; }
}

/* ---- Service-area city cloud -------------------------------------------- */
.area-band {
  background: var(--grad-orange);
  color: var(--white);
  position: relative; overflow: hidden;
}
.area-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.10) 1.5px, transparent 1.6px);
  background-size: 20px 20px; opacity: 0.5; pointer-events: none;
}
.area-band .container { position: relative; z-index: 1; }
.area-head h2 { color: var(--white); }
.area-head .eyebrow { color: var(--black); }
.area-head .eyebrow::before { background: var(--black); }
.area-head p { color: rgba(255,255,255,0.9); }
.city-cloud { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.city-chip {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: 0.01em;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 999px; padding: 9px 20px; line-height: 1;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.city-chip:hover { background: var(--black); border-color: var(--black); transform: translateY(-3px); }
.city-chip.solid { background: var(--black); border-color: var(--black); }

/* ---- Guarantee seal ------------------------------------------------------ */
.seal {
  width: 132px; height: 132px; flex-shrink: 0;
  display: grid; place-items: center; text-align: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  border: 3px solid var(--orange);
  box-shadow: 0 16px 36px -14px rgba(0,0,0,0.5);
  position: relative;
}
.seal .seal-spin {
  position: absolute; inset: -3px;
  animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .seal .seal-spin { animation: none; } }
.seal strong { font-family: var(--font-heading); font-weight: 700; font-size: 1.7rem; line-height: 0.95; color: var(--orange-2); text-transform: uppercase; }
.seal span { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 4px; }

/* ---- Testimonial upgrade ------------------------------------------------- */
.testimonial-card { border-width: 1.5px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; }
.testimonial-card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 22px 44px -22px rgba(255,123,0,0.5); }

/* ---- USP row upgrade (orange numbers, energy) --------------------------- */
.usp-item strong { color: var(--orange); }

/* ---- Story badge upgrade ------------------------------------------------- */
.story-badge { border-left: 4px solid var(--orange); }
.story-media::after {
  content: ""; position: absolute; top: -16px; right: -16px; width: 84px; height: 84px;
  border-top: 4px solid var(--orange); border-right: 4px solid var(--orange);
  border-radius: 0 var(--radius-lg) 0 0; pointer-events: none;
}

/* ---- Feature (why us) tiles --------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.why-tile {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.why-tile:hover { transform: translateY(-4px); border-color: var(--orange); background: rgba(255,123,0,0.06); }
.why-tile .why-ic {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: var(--grad-orange); color: var(--white);
  display: grid; place-items: center; margin-bottom: 18px;
  box-shadow: 0 10px 22px -8px rgba(255,123,0,0.7);
}
.why-tile .why-ic svg { width: 26px; height: 26px; }
.why-tile h3 { font-size: 1.25rem; margin-bottom: 8px; }
.why-tile p { font-size: 0.94rem; color: rgba(255,255,255,0.66); }
@media (max-width: 860px){ .why-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .kicker-num { display: none; }
}

/* ==========================================================================
   Legacy landing pages (/hydrojetting, /ga-water-heater, …)
   Components used only by the pages generated from the old WordPress site.
   ========================================================================== */

/* --- hero variant: static photo + form card, instead of the video hero --- */
.hero-lp { min-height: 0; }
.hero-lp .hero-media img.hero-video { object-position: center 40%; }
.hero-lp .container { padding-top: 132px; padding-bottom: 88px; }
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--blueprint); background-size: 54px 54px; opacity: 0.5;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.hero-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero-split .hero-content { max-width: none; }

.lp-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.lp-badges span {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px; padding: 7px 15px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--white);
}

.hero-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 40px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: 2.1rem; line-height: 1; color: var(--orange-2);
}
.hero-stats span { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.74); margin-top: 6px; }

.hero-form-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-lg); border-top: 5px solid var(--orange);
}
.hero-form-card h2 { font-size: 1.6rem; }
.hero-form-card p { font-size: 0.9rem; margin-top: 6px; }
.hero-form-card iframe { display: block; margin-top: 12px; }

/* --- this vs. that comparison --- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.compare-card {
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 32px 30px;
}
.compare-card h3 { font-size: 1.5rem; margin-bottom: 18px; }
.compare-card ul { list-style: none; display: grid; gap: 12px; }
.compare-card li {
  position: relative; padding-left: 30px; font-size: 0.95rem; color: var(--ink-soft);
}
.compare-card li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--gray-400);
}
.compare-card.highlight { border-color: var(--orange); box-shadow: 0 24px 48px -26px rgba(255,123,0,0.5); }
.compare-card.highlight h3 { color: var(--orange-dark); }
.compare-card.highlight li::before { border-color: var(--orange); background: var(--orange); }

/* --- numbered process steps --- */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.step-card {
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 32px 28px;
}
.step-card .stepnum {
  width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--grad-orange);
  color: var(--white); display: grid; place-items: center; margin-bottom: 18px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1;
  box-shadow: 0 10px 22px -8px rgba(255,123,0,0.7);
}
.step-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step-card p { font-size: 0.94rem; }

/* --- emoji standing in for an icon inside the existing icon chips --- */
.why-ic.emoji, .info-ic.emoji { font-size: 24px; line-height: 1; }

/* --- GoHighLevel form shells --- */
.form-shell {
  background: var(--white); border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-lg); border-top: 5px solid var(--orange); margin-top: 8px;
}
.form-shell iframe { display: block; border-radius: var(--radius-md); }
.quote-contact { display: flex; justify-content: center; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.quote-contact a { color: var(--orange-2); font-weight: 700; font-size: 0.95rem; }
.quote-contact a:hover { color: var(--white); }

/* --- GoodLeap financing band --- */
.finance-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.finance-grid .btn { margin-top: 26px; }
.finance-grid h2 { margin-top: 16px; }
.finance-grid p { margin-top: 14px; }
.finance-note {
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 30px 28px; display: grid; gap: 4px;
}
.finance-note strong { font-size: 1rem; }
.finance-note strong + span { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 14px; }
.finance-note span:last-child { margin-bottom: 0; }

/* --- cross-links between service pages --- */
.lp-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.lp-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
  padding: 18px 20px; font-family: var(--font-heading); font-weight: 700;
  text-transform: uppercase; font-size: 1.05rem; color: var(--ink);
  transition: border-color .18s ease, transform .18s ease, color .18s ease;
}
.lp-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--orange); }
.lp-link:hover { border-color: var(--orange); color: var(--orange-dark); transform: translateY(-3px); }

/* --- contact page: info cards, map --- */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.info-card {
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 30px 26px; text-align: center;
}
.info-card .info-ic {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: var(--radius-md);
  background: var(--grad-orange); display: grid; place-items: center;
  box-shadow: 0 10px 22px -8px rgba(255,123,0,0.7);
}
.info-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.info-card a, .info-card p { font-size: 0.94rem; color: var(--ink-soft); word-break: break-word; }
.info-card a:hover { color: var(--orange-dark); }
.form-shell.light { box-shadow: var(--shadow-md); }
.map-panel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 480px; }
.map-panel iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }

/* --- testimonials page: Yelp embeds + review platform buttons --- */
.yelp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.yelp-slide {
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 18px; overflow: hidden;
}
.yelp-slide iframe { width: 100% !important; border: 0; display: block; }
.platform-row { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .lp-links, .info-grid { grid-template-columns: repeat(2, 1fr); }
  .step-grid { grid-template-columns: 1fr; }
  .finance-grid { grid-template-columns: 1fr; gap: 36px; }
  .yelp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero-lp .container { padding-top: 108px; padding-bottom: 64px; }
  .compare-grid { grid-template-columns: 1fr; }
  .lp-links, .info-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; }
  .hero-stats b { font-size: 1.7rem; }
}

/* the hero sets a white text colour for the photo background; the form card and
   its heading sit on white, so they opt back out */
.hero-lp .hero-form-card h2 { color: var(--ink); }
.hero-lp .hero-form-card p { color: var(--gray-600); }
/* the auto-numbered corner counter on .service-card needs room when the card
   has no icon above the heading (the legacy "signs" grids) */
.services-grid .service-card h3 { padding-right: 46px; }

/* ==========================================================================
   Pages carried over from the legacy WordPress site (service tree, service
   locations, blog posts) — see tools/build-legacy-all.py
   ========================================================================== */

/* compact hero for interior pages: no form card, so it doesn't need the height */
.hero-compact .container { padding-top: 124px; padding-bottom: 72px; }
.hero-compact .hero-content { max-width: 760px; }
.hero-compact h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.crumbs a { color: rgba(255,255,255,0.72); }
.crumbs a:hover { color: var(--orange-2); }
.crumbs span { color: var(--orange-2); }
.crumbs i { font-style: normal; color: rgba(255,255,255,0.35); }

/* prose imported from the old site: same rhythm as a blog post, plus figures,
   inline buttons and the occasional h3/h4 and table the legacy copy used */
.legacy-prose { max-width: 760px; }
.legacy-prose h2 { margin-top: 44px; margin-bottom: 12px; font-size: 1.45rem; }
.legacy-prose h2:first-child { margin-top: 0; }
.legacy-prose h3 { margin-top: 30px; margin-bottom: 10px; font-size: 1.15rem; }
.legacy-prose h4 { margin-top: 24px; font-size: 1.02rem; }
.legacy-prose p { margin-top: 16px; }
.legacy-prose a:not(.btn) {
  color: var(--orange-dark); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.legacy-prose a:not(.btn):hover { color: var(--ink); }
.legacy-prose ol { margin-top: 16px; padding-left: 22px; display: grid; gap: 10px; }
.legacy-prose ol li { color: var(--ink-soft); }
.legacy-prose figure {
  margin: 34px 0 6px; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.legacy-prose figure img { width: 100%; display: block; }
.legacy-prose .btn { margin-top: 26px; }
.legacy-prose table { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: 0.94rem; }
.legacy-prose th, .legacy-prose td { padding: 12px 14px; border-bottom: 1px solid var(--gray-200); text-align: left; }
.legacy-prose th { font-weight: 700; background: var(--gray-100); }
.legacy-prose blockquote {
  margin-top: 26px; padding: 20px 24px; border-left: 4px solid var(--orange);
  background: var(--gray-100); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* /sitemap — the human index of every page */
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.index-col h3 {
  font-size: 1.1rem; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid var(--orange);
}
.index-col ul { list-style: none; display: grid; gap: 9px; }
.index-col li a { font-size: 0.94rem; color: var(--ink-soft); }
.index-col li a:hover { color: var(--orange-dark); }
.index-posts { display: block; columns: 3; column-gap: 32px; }
.index-posts li { break-inside: avoid; margin-bottom: 9px; }

@media (max-width: 900px) {
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .index-posts { columns: 2; }
}
@media (max-width: 600px) {
  .index-grid { grid-template-columns: 1fr; }
  .index-posts { columns: 1; }
  .hero-compact .container { padding-top: 104px; padding-bottom: 56px; }
}

/* legacy prose images: the old layout had them in narrow side columns, so many
   originals are tall portraits. Constrain the width rather than the height —
   cropping would cut the top off the coupon graphics on /specials. */
.legacy-prose > figure { max-width: 560px; margin-left: auto; margin-right: auto; }
.prose-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 6px; }
.prose-figures figure { margin: 0; }
.prose-figures figure img { max-height: 340px; }
@media (max-width: 600px) { .prose-figures { grid-template-columns: 1fr; } }

/* ==========================================================================
   Paid landing-page chrome. Deliberately has no navigation: the legacy LPs
   didn't either, and it keeps paid traffic in the funnel instead of leaking it
   into the organic site (where it would also see the main phone number rather
   than the Ads call-tracking one). See tools/build-legacy-lps.py.
   ========================================================================== */
.lp-topstrip {
  background: var(--black); color: rgba(255,255,255,0.62);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 9px 0;
}
.lp-topstrip .container { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; }

.lp-header {
  position: sticky; top: 0; z-index: 50; background: var(--white);
  border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
}
.lp-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 76px;
}
.lp-header img { height: 52px; width: auto; }
.lp-header-actions { display: flex; align-items: center; gap: 14px; }

.lp-footer { background: var(--black); color: rgba(255,255,255,0.62); padding: 52px 0; text-align: center; }
.lp-footer img { height: 54px; width: auto; margin-bottom: 22px; }
.lp-footer p { font-size: 0.9rem; color: rgba(255,255,255,0.72); }
.lp-footer a { color: var(--orange-2); font-weight: 700; }
.lp-footer a:hover { color: var(--white); }
.lp-footer .lp-footer-legal {
  margin-top: 14px; font-size: 0.78rem; color: rgba(255,255,255,0.42);
  max-width: 640px; margin-left: auto; margin-right: auto;
}

/* the LP hero sits under a 76px header rather than the taller site header */
.lp-header + .hero-lp .container,
.lp-header ~ .hero-lp .container { padding-top: 72px; }

@media (max-width: 760px) {
  .lp-topstrip .container { gap: 4px 18px; font-size: 0.72rem; }
  .lp-header .container { height: 64px; }
  .lp-header img { height: 42px; }
  .lp-header-actions .btn-sm { display: none; }
}