/* ================================================================
   BEEBE DRAIN & SEWER — SITE THEME  v3.0
   Loaded AFTER every per-page base CSS on all 40 pages.
   home.css + site-theme.css (index.html)
   [page].css + site-theme.css (all other pages)
   ================================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand greens */
  --b-green:      #003020;
  --b-green-mid:  #0E4A36;
  --b-green-soft: #1A654A;
  --b-green-mute: #2D6B4F;   /* replaced sage #6E8F7D — richer, deeper accent green */

  /* Darks — each section gets a distinct personality */
  --b-black:      #050505;
  --b-richblack:  #0B120F;
  --b-softblack:  #101915;
  --b-services-bg: #18211C;  /* services: slightly warm dark */
  --b-whychoose-bg: #0B0F0D; /* why-choose: slightly deeper */

  /* Ivories */
  --b-ivory-0:    #FAF8F3;
  --b-ivory-1:    #F4EEE3;
  --b-ivory-2:    #EAE2D3;
  --b-ivory-3:    #DDD3C3;
  --b-ivory-4:    #CFC3B1;

  /* Text */
  --b-text-dark:  #151515;
  --b-text-body:  #4F463B;
  --b-text-muted: #7B7468;
  --b-text-light: #F3EEE6;
  --b-text-dim:   rgba(243,238,230,.72);
  --b-text-faint: rgba(243,238,230,.52);

  /* Borders */
  --b-border-lt:  rgba(0,0,0,.09);
  --b-border-dk:  rgba(255,255,255,.08);

  /* Shadows */
  --b-shd-sm:     0 8px 20px rgba(54,40,22,.08);
  --b-shd-md:     0 16px 36px rgba(54,40,22,.10);
  --b-shd-lg:     0 24px 52px rgba(54,40,22,.13);
  --b-shd-dk:     0 18px 40px rgba(0,0,0,.28);

  /* Radii */
  --b-r:          6px;
  --b-r-sm:       4px;
}

/* ── 2. GLOBAL BASE ────────────────────────────────────────────── */
html {
  overflow-x: hidden;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Use clip instead of hidden — prevents horizontal scroll WITHOUT
     creating a new scroll container, so position:sticky works correctly */
  overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--b-green); color: var(--b-text-light); }
:focus-visible { outline: 2px solid rgba(0,48,32,.55); outline-offset: 3px; }
::-webkit-scrollbar { width: 8px; background: var(--b-ivory-2); }
::-webkit-scrollbar-thumb { background: rgba(0,48,32,.28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,48,32,.44); }

/* ═══════════════════════════════════════════════════════════════
   3.  HEADER / NAVIGATION  — SINGLE SOURCE OF TRUTH
   ─────────────────────────────────────────────────────────────
   Load order:  [page].css  →  site-theme.css  →  semantic-utilities.css
   Base files set .header-inner to flex + height via padding.
   This block overrides everything cleanly, no !important needed,
   because site-theme.css loads AFTER every per-page CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sticky shell (all viewports) ─────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 500;
  isolation: isolate;
  overflow: visible;
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP  ≥ 769 px
   Architecture: 100px tall bar. Logo badge overhangs (126px tall,
   vertically centred, so ~13px above + ~13px below bar edge).
   Nav sits in the space between logo footprint and phone pill.
   Phone pill is anchored to the right edge.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ── 1. Bar shell ────────────────────────────────────────────── */
  .header,
  .header.scrolled {
    height: 114px;
    min-height: 114px;
    max-height: 114px;
    padding: 0;
    background: linear-gradient(175deg, #0f1a14 0%, #070d0a 100%);
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow:
      0 1px 0 rgba(255,255,255,.03),
      0 8px 28px rgba(0,0,0,.34),
      0 0 48px rgba(0,48,32,.07);
    transition:
      background .35s ease,
      box-shadow .35s ease;
  }

  /* Scroll state — darker, stronger shadow */
  .header.scrolled {
    background: linear-gradient(175deg, #0c1510 0%, #050908 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.04),
      0 14px 38px rgba(0,0,0,.44),
      0 0 54px rgba(0,48,32,.09);
  }

  /* Inner top-shimmer layer */
  .header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.034) 0%, transparent 50%),
      radial-gradient(ellipse at 6% 120%, rgba(0,48,32,.18) 0%, transparent 46%);
    pointer-events: none;
    z-index: 0;
  }

  /* Bottom accent hairline */
  .header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(26,101,74,.05)  0%,
      rgba(26,101,74,.45) 10%,
      rgba(255,255,255,.07) 46%,
      rgba(26,101,74,.38) 88%,
      rgba(26,101,74,.04) 100%
    );
    pointer-events: none;
    z-index: 3;
  }

  /* ── 2. Inner layout container ───────────────────────────────── */
  /* Override base flex layout with a positioned block so children
     can use position:absolute for precise optical placement. */
  .header-inner,
  .header.scrolled .header-inner {
    position: relative;
    display: block;           /* overrides base display:flex */
    width: 100%;
    max-width: 1380px;
    height: 114px;
    min-height: 114px;
    max-height: 114px;
    margin: 0 auto;
    padding: 0 44px;
    z-index: 1;
  }

  /* ── 3. Logo ─────────────────────────────────────────────────── */
  /* Badge is bottom-anchored: its base rests at the header bottom line
     and the bottom point of the badge extends ~28px below, creating the
     signature "stamp on the nav bar" premium effect. */
  .header .logo-link,
  .header.scrolled .logo-link {
    position: absolute;
    left: 36px;
    bottom: -48px;           /* measured: inner bottom-right corner of badge aligns exactly with header bottom */
    top: auto;
    z-index: 60;
    display: block;
    filter:
      drop-shadow(0 10px 22px rgba(0,0,0,.40))
      drop-shadow(0 2px 6px rgba(0,0,0,.28));
    transition:
      transform .28s cubic-bezier(.23,1,.32,1),
      filter .28s ease;
  }

  /* Kill base .logo-link:hover */
  .header .logo-link:hover,
  .header.scrolled .logo-link:hover {
    transform: translateY(-2px) scale(.982);
    opacity: 1;
    filter:
      drop-shadow(0 14px 26px rgba(0,0,0,.48))
      drop-shadow(0 2px 6px rgba(0,0,0,.30));
  }

  .header .logo-img,
  .header.scrolled .logo-img {
    display: block;
    height: 158px;           /* taller so base lands at/below header bottom */
    width: auto;
    max-width: 176px;
    object-fit: contain;
    position: relative;
    z-index: 2;
  }

  /* ── 4. Navigation ───────────────────────────────────────────── */
  /* Stretches between logo footprint (≈ left:36+140=176 → use 196)
     and phone block right edge (≈ right:44+196=240 → use 258). */
  .main-nav,
  .header.scrolled .main-nav {
    position: absolute;
    left: 222px;
    right: 258px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;                  /* spacing controlled by link padding */
    z-index: 10;
  }

  /* Nav link base */
  .main-nav a,
  .main-nav .nav-dropdown-toggle {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.85px;
    text-transform: uppercase;
    color: rgba(243,238,230,.78);
    background: transparent;
    padding: 8px 16px;
    margin: 0;
    white-space: nowrap;
    position: relative;
    line-height: 1;
    overflow: visible;
    /* Cancel base margin:-6px -12px on active */
    border-radius: 0;
    transition: color .22s ease;
  }

  /* ── Underline track (replaces base ▾ caret on toggle) ──────── */
  /* Both a::after and .nav-dropdown-toggle::after become the
     underline. The base '▾' caret is on ::after too, but since
     site-theme loads later it overwrites content:"▾" with content:"" */
  .main-nav a::after,
  .main-nav .nav-dropdown-toggle::after {
    content: "";
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 1px;
    height: 1.5px;
    background: var(--b-green-soft);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .26s cubic-bezier(.23,1,.32,1);
    /* Reset any inherited opacity/rotation */
    opacity: 1;
  }

  /* Hover */
  .main-nav a:hover,
  .main-nav .nav-dropdown-toggle:hover {
    color: var(--b-text-light);
    background: transparent;
    /* Cancel base active bg */
    padding: 8px 16px;
    margin: 0;
  }

  .main-nav a:hover::after,
  .main-nav .nav-dropdown-toggle:hover::after {
    transform: scaleX(1);
  }

  /* CANCEL the base .nav-dropdown:hover .nav-dropdown-toggle::after
     { transform: rotate(180deg) } — that would spin our underline. */
  .main-nav .nav-dropdown:hover .nav-dropdown-toggle::after {
    transform: scaleX(1);   /* stay as underline, not rotated */
  }

  /* Active page */
  .main-nav a.active,
  .main-nav .nav-dropdown-toggle.active {
    color: var(--b-text-light);
    background: transparent;
    padding: 8px 16px;
    margin: 0;
  }

  .main-nav a.active::after,
  .main-nav .nav-dropdown-toggle.active::after {
    transform: scaleX(1);
    height: 2px;
    background: var(--b-green-soft);
    box-shadow: 0 0 8px rgba(26,101,74,.36);
  }

  /* Kill the ▾ caret ::before that some older passes added */
  .main-nav .nav-dropdown-toggle::before { display: none; }

  /* ── 5. Dropdown panel ───────────────────────────────────────── */
  .nav-dropdown-menu {
    background: linear-gradient(180deg, #0f1a14 0%, #060c09 100%);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: var(--b-r-sm);
    box-shadow:
      0 20px 48px rgba(0,0,0,.54),
      0 4px 14px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 200;
    min-width: 252px;
    padding: 6px 0;
  }

  /* Caret pip at top of dropdown */
  .nav-dropdown-menu::before {
    background: #0f1a14;
    border-color: rgba(255,255,255,.11);
  }

  /* Dropdown links */
  .nav-dropdown-menu a {
    display: block;
    padding: 12px 24px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.55px;
    text-transform: uppercase;
    color: rgba(243,238,230,.76);
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.055);
    text-decoration: none;
    transition:
      color .18s ease,
      background .18s ease,
      padding-left .18s ease;
    /* Cancel base border-left on active */
    border-left: 0;
  }

  .nav-dropdown-menu a:last-child { border-bottom: 0; }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus,
  .nav-dropdown-menu a.active {
    color: var(--b-text-light);
    background: rgba(26,101,74,.20);
    padding-left: 30px;
    border-left: 0;
  }

  /* ── 6. Phone CTA ────────────────────────────────────────────── */
  .header-phone,
  .header.scrolled .header-phone {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
  }

  .header-phone-number,
  .header.scrolled .header-phone-number {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    min-width: 194px;
    justify-content: center;
    padding: 0 18px;
    font-family: 'Oswald', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .25px;
    line-height: 1;
    color: var(--b-text-light);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--b-r-sm);
    background: rgba(255,255,255,.03);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 4px 14px rgba(0,0,0,.16);
    position: relative;
    animation: none;
    text-shadow: none;
    transition:
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      color .22s ease;
  }

  /* "24/7 SERVICE" sub-label */
  .header-phone-number::after {
    content: "24/7 SERVICE";
    position: absolute;
    left: 50%;
    bottom: -17px;
    transform: translateX(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 7.5px;
    font-weight: 500;
    letter-spacing: 2.2px;
    color: rgba(45,107,79,.78);
    white-space: nowrap;
    pointer-events: none;
  }

  .header-phone-number:hover,
  .header-phone-number:hover * {
    background: var(--b-green);
    border-color: var(--b-green-mid);
    color: var(--b-text-light) !important;
    text-shadow: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 6px 22px rgba(0,48,32,.28);
  }
  /* Prevent child elements inheriting wrong background */
  .header-phone-number:hover * {
    background: transparent;
    box-shadow: none;
  }

  .header-phone-number svg {
    width: 15px;
    height: 15px;
    fill: var(--b-green-mute);
    flex-shrink: 0;
    filter: none;
    transition: fill .22s ease;
  }

  .header-phone-number:hover svg { fill: var(--b-text-light); }

  /* Hide old label */
  .header-phone-label { display: none; }

} /* end @media (min-width: 769px) */

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT ADJUSTMENTS
   ══════════════════════════════════════════════════════════════ */

/* 1180px — medium desktop */
@media (min-width: 769px) and (max-width: 1180px) {
  .header-inner,
  .header.scrolled .header-inner { padding: 0 28px; }

  .header .logo-link,
  .header.scrolled .logo-link  { left: 24px; bottom: -45px; }

  .header .logo-img,
  .header.scrolled .logo-img   { height: 148px; max-width: 164px; }

  .main-nav,
  .header.scrolled .main-nav   { left: 204px; right: 244px; }

  .main-nav a,
  .main-nav .nav-dropdown-toggle {
    font-size: 11.5px;
    letter-spacing: 1.45px;
    padding: 8px 12px;
  }

  .main-nav a::after,
  .main-nav .nav-dropdown-toggle::after { left: 12px; right: 12px; }

  .header-phone,
  .header.scrolled .header-phone { right: 28px; }

  .header-phone-number,
  .header.scrolled .header-phone-number {
    min-width: 174px;
    font-size: 19px;
    padding: 0 14px;
  }
}

/* 980px — compact desktop / large tablet landscape */
@media (min-width: 769px) and (max-width: 980px) {
  .header-inner,
  .header.scrolled .header-inner { padding: 0 20px; }

  .header .logo-link,
  .header.scrolled .logo-link  { left: 18px; bottom: -44px; }

  .header .logo-img,
  .header.scrolled .logo-img   { height: 136px; max-width: 150px; }

  .main-nav,
  .header.scrolled .main-nav   { left: 186px; right: 212px; }

  .main-nav a,
  .main-nav .nav-dropdown-toggle {
    font-size: 11px;
    letter-spacing: 1.1px;
    padding: 8px 9px;
  }

  .main-nav a::after,
  .main-nav .nav-dropdown-toggle::after { left: 9px; right: 9px; }

  .header-phone,
  .header.scrolled .header-phone { right: 20px; }

  .header-phone-number,
  .header.scrolled .header-phone-number {
    min-width: 154px;
    font-size: 17px;
    padding: 0 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 768 px
   Layout: 108px tall bar.
     - Logo: centred, overhangs slightly below bar.
     - Phone pill: absolute, bottom-left.
     - Hamburger: absolute, bottom-right.
     - Nav drawer: drops down from just below the bar.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Bar */
  .header,
  .header.scrolled {
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    padding: 0;
    overflow: visible;
    background: linear-gradient(175deg, #0f1a14 0%, #070d0a 100%);
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 6px 22px rgba(0,0,0,.38);
  }

  /* Suppress desktop decorative pseudo-elements on mobile */
  .header::before,
  .header.scrolled::before { display: none; }

  .header::after,
  .header.scrolled::after  { display: none; }

  /* Inner container */
  .header-inner,
  .header.scrolled .header-inner {
    position: relative;
    display: block;          /* override base flex */
    width: 100%;
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    padding: 0 16px;
  }

  /* ── Logo — centred ── */
  .header .logo-link,
  .header.scrolled .logo-link {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    z-index: 20;
    filter: none;
  }

  .header .logo-link:hover,
  .header.scrolled .logo-link:hover {
    transform: translateX(-50%);  /* cancel base scale hover */
    opacity: 1;
  }

  .header .logo-img,
  .header.scrolled .logo-img {
    display: block;
    height: 94px;
    width: auto;
    max-width: 104px;
    object-fit: contain;
  }

  /* ── Phone pill — bottom-left ── */
  .header-phone,
  .header.scrolled .header-phone {
    position: absolute;
    left: 14px;
    top: 37px;
    right: auto;
    height: 38px;
    transform: none;
    z-index: 22;
  }

  .header-phone-number,
  .header.scrolled .header-phone-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    height: 38px;
    padding: 0 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    background: var(--b-green);
    border: 1px solid var(--b-green);
    border-radius: var(--b-r-sm);
    white-space: nowrap;
    overflow: hidden;
    text-shadow: none;
    animation: none;
    box-shadow: 0 2px 8px rgba(0,48,32,.28);
    transition: background .18s ease;
  }

  .header-phone-number:active { opacity: .88; }

  /* Kill desktop sub-label */
  .header-phone-number::after { display: none; }
  .header-phone-label         { display: none; }

  .header-phone-number svg {
    width: 13px; height: 13px;
    fill: rgba(255,255,255,.92);
    flex-shrink: 0;
    filter: none;
  }

  /* ── Hamburger — bottom-right ── */
  .nav-toggle,
  .header.scrolled .nav-toggle {
    position: absolute;
    right: 14px;
    top: 33px;
    width: 46px;
    height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: var(--b-r-sm);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    cursor: pointer;
    z-index: 22;
    -webkit-appearance: none;
    appearance: none;
    transition: background .22s ease, border-color .22s ease;
  }

  .nav-toggle:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
  }

  .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: rgba(243,238,230,.80);
    border-radius: 1px;
    transform-origin: center;
    transition:
      transform .30s cubic-bezier(.22,1,.36,1),
      opacity .22s ease,
      background .22s ease;
  }

  .nav-toggle.open span                 { background: rgba(45,107,79,.90); }
  .nav-toggle.open span:nth-child(1)    { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2)    { opacity: 0; transform: scaleX(0); }
  .nav-toggle.open span:nth-child(3)    { transform: translateY(-7px) rotate(-45deg); }

  /* ── Nav drawer ── */
  /* Positioned below the 108px bar. Not full-screen — preserves
     the bar as an anchor so users don't feel lost. */
  .main-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 108px;
    bottom: auto;
    width: 100%;
    max-height: calc(100svh - 108px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px 20px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #0f1a14 0%, #060c09 100%);
    border-top: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 28px 56px rgba(0,0,0,.60);
    z-index: 450;
    /* Fade + slight slide from top */
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity .26s cubic-bezier(.22,1,.36,1),
      transform .26s cubic-bezier(.22,1,.36,1);
  }

  .main-nav.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  /* Mobile nav items */
  .main-nav > a,
  .main-nav > .nav-dropdown > .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 0 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 1.55px;
    text-transform: uppercase;
    color: rgba(243,238,230,.76);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    /* Cancel desktop active styling */
    border-radius: 0;
    margin: 0;
  }

  .main-nav > a:hover,
  .main-nav > .nav-dropdown > .nav-dropdown-toggle:hover {
    color: var(--b-text-light);
    background: rgba(26,101,74,.12);
  }

  .main-nav > a.active {
    color: var(--b-text-light);
    background: rgba(26,101,74,.14);
    border-left: 3px solid var(--b-green-soft);
    padding-left: 7px;
  }

  .main-nav > .nav-dropdown > .nav-dropdown-toggle.active {
    color: var(--b-text-light);
    background: rgba(26,101,74,.14);
  }

  /* Cancel desktop ::after underline on mobile */
  .main-nav > a::after,
  .main-nav > .nav-dropdown > .nav-dropdown-toggle::after {
    display: none;
  }

  /* Mobile dropdown */
  .nav-dropdown { width: 100%; }

  .nav-dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    background: rgba(0,0,0,.18);
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition:
      max-height .34s cubic-bezier(.22,1,.36,1),
      visibility 0s .34s;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    visibility: visible;
    max-height: 380px;
    transition:
      max-height .34s cubic-bezier(.22,1,.36,1),
      visibility 0s;
  }

  .nav-dropdown-menu::before { display: none; }

  .nav-dropdown-menu a {
    display: block;
    padding: 13px 12px;
    font-family: 'Oswald', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(243,238,230,.66);
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-left: 0;
    transition: color .18s ease, background .18s ease;
  }

  .nav-dropdown-menu a:last-child { border-bottom: 0; }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    color: var(--b-text-light);
    background: rgba(26,101,74,.18);
    padding-left: 18px;
    border-left: 0;
  }

} /* end @media (max-width: 768px) */

/* ══════════════════════════════════════════════════════════════
   EXTRA-SMALL BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

/* Small phones */
@media (max-width: 420px) {
  .header .logo-img,
  .header.scrolled .logo-img {
    height: 86px;
    max-width: 96px;
  }

  .header .logo-link,
  .header.scrolled .logo-link { top: 10px; }

  .header-phone,
  .header.scrolled .header-phone { top: 38px; }
}

/* Tiny screens — phone button becomes icon-only circle */
@media (max-width: 360px) {
  .header-phone-number,
  .header.scrolled .header-phone-number {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 0;
    font-size: 0;
    letter-spacing: 0;
    border-radius: 50%;
  }
}

/* ── 5. SECTION SURFACES ──────────────────────────────────────── */

/* Ivory sections (interior pages) */
.service-content,
.financing-section,
.values-section,
.contact-form-section,
.map-section,
.legal-section,
.areas-section,
.thank-you-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.42), transparent 48%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
  color: var(--b-text-dark);
  border-top: 1px solid var(--b-border-lt);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* Dark green sections */
.about-story,
.timeline-section,
.contact-section,
.other-services {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,48,32,.18), transparent 48%),
    linear-gradient(180deg, var(--b-richblack) 0%, var(--b-softblack) 100%);
  color: var(--b-text-light);
  border-top: 1px solid var(--b-border-dk);
  border-bottom: 1px solid var(--b-border-dk);
}

/* Warm amber (FAQ / not-sure) */
.faq-section,
.not-sure {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,238,227,.44), transparent 52%),
    linear-gradient(180deg, var(--b-ivory-3) 0%, #D7CAB8 100%);
  color: var(--b-text-dark);
  border-top: 1px solid rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* ── 6. PAGE HERO ──────────────────────────────────────────────── */
.page-hero {
  position: relative;
  background:
    radial-gradient(circle at 14% 20%, rgba(26,101,74,.20), transparent 38%),
    linear-gradient(100deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.30) 80%),
    url('../hero-flag-bg.webp') center / cover no-repeat;
  min-height: 290px;
  padding: 52px 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: inset 0 -40px 70px rgba(0,0,0,.26);
}

.page-hero-content {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
}

.page-hero-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 5px; text-transform: uppercase;
  color: rgba(45,107,79,.90);
  margin-bottom: 14px;
}

.page-hero-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 800; font-size: 52px;
  line-height: 1.06; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-text-light);
  text-shadow: 0 3px 22px rgba(0,0,0,.75);
}

.page-hero-subtitle {
  margin-top: 16px;
  font-size: 16.5px; line-height: 1.65;
  color: rgba(243,238,230,.88);
  text-shadow: 0 2px 16px rgba(0,0,0,.70);
  max-width: 680px; margin-left: auto; margin-right: auto;
}

@media (max-width: 768px) {
  .page-hero { padding: 40px 20px; min-height: 240px; }
  .page-hero-title { font-size: clamp(26px, 7vw, 40px); letter-spacing: 1px; }
  .page-hero-subtitle { font-size: 14.5px; }
}

/* ── 7. SERVICE PAGE BODY ─────────────────────────────────────── */
.service-body > p:first-child {
  font-size: 17.5px; line-height: 1.78; color: #2A2520;
}
.service-body p { color: var(--b-text-body); line-height: 1.85; }
.service-body strong { color: var(--b-text-dark); font-weight: 600; }

.service-body h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 20px; letter-spacing: 1.8px;
  color: var(--b-text-dark);
  padding-left: 16px; border-left: 3px solid var(--b-green);
  margin: 52px 0 18px; text-transform: uppercase;
}

.service-body ul {
  background: rgba(0,48,32,.04);
  border: 1px solid rgba(0,48,32,.12);
  border-radius: var(--b-r-sm);
  overflow: hidden; list-style: none;
  margin: 8px 0 28px;
}

.service-body ul li {
  color: #2A2520;
  padding: 11px 16px 11px 36px;
  position: relative;
  border-bottom: 1px solid rgba(0,48,32,.08);
  font-size: 15px; line-height: 1.6;
}
.service-body ul li:last-child { border-bottom: 0; }
.service-body ul li::before {
  content: '✓'; position: absolute;
  left: 13px; top: 12px;
  color: var(--b-green); font-weight: 700; font-size: 13px;
}
.service-body ul li strong { color: var(--b-text-dark); }

/* Trust callout */
.trust-callout {
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
  border: 1px solid rgba(0,48,32,.16);
  border-radius: var(--b-r);
  padding: 22px 26px;
  display: flex; align-items: flex-start; gap: 16px;
  margin: 36px 0; box-shadow: var(--b-shd-md);
  position: relative; overflow: hidden;
}
.trust-callout::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--b-green);
}
.trust-callout p { color: var(--b-text-body); font-size: 14.5px; line-height: 1.72; margin: 0; }
.trust-callout-icon { fill: var(--b-green); width: 26px; height: 26px; flex-shrink: 0; opacity: .75; margin-top: 2px; }

/* Process steps */
.process-step {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 18px 22px; margin-bottom: 10px;
  background: linear-gradient(180deg, var(--b-ivory-0), var(--b-ivory-1));
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--b-r);
  box-shadow: var(--b-shd-sm);
}
.process-step-num {
  flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--b-green);
  background: rgba(0,48,32,.09); border: 1px solid rgba(0,48,32,.22);
}
.process-step-content strong {
  display: block; font-family: 'Oswald', sans-serif;
  font-size: 14px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--b-text-dark); margin-bottom: 4px;
}
.process-step-content p { color: var(--b-text-body); font-size: 14px; line-height: 1.66; margin: 0; }

/* Service hero icon container */
.service-hero-icon {
  display: flex; align-items: center; justify-content: center;
  background: var(--b-ivory-2);
  border: 1px solid var(--b-ivory-4);
  border-radius: 50%; overflow: visible;
}

/* Service CTA box */
.service-cta-box {
  /* Rich atmospheric green — dark edges, illuminated center */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.22) 0%, transparent 60%),
    linear-gradient(160deg, #001208 0%, #002416 18%, var(--b-green) 50%, #002416 82%, #001208 100%);
  color: var(--b-text-light);
  border-radius: 10px;
  padding: 56px 48px 52px;
  text-align: center;
  margin-top: 64px;
  box-shadow:
    0 2px 0 rgba(45,107,79,.30),
    0 24px 56px rgba(0,48,32,.28),
    0 4px 16px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}

/* Top accent line */
.service-cta-box::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(234,226,211,.25) 30%,
    rgba(234,226,211,.45) 50%,
    rgba(234,226,211,.25) 70%,
    transparent 100%
  );
}

/* Bottom-edge depth shadow */
.service-cta-box::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent);
  pointer-events: none;
}

/* Eyebrow label */
.service-cta-box .cta-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--b-green-mute);
  margin-bottom: 18px;
  display: block;
}

/* Heading — large, bold, commanding */
.service-cta-box h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--b-text-light) !important;
  margin-bottom: 16px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 12px rgba(0,0,0,.40);
}

/* Body paragraph */
.service-cta-box p {
  font-size: 15px;
  line-height: 1.68;
  color: rgba(234,226,211,.82) !important;
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Inline call/link line */
.service-cta-box p a {
  color: rgba(234,226,211,.95) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* CTA button row */
.service-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Primary button — warm ivory on dark green */
.service-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #FAF6EE 0%, #EDE4D4 100%);
  color: var(--b-green) !important;
  padding: 15px 36px;
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--b-r-sm);
  border: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 10px 28px rgba(0,0,0,.28);
  cursor: pointer;
  transition:
    background .22s ease,
    transform .20s cubic-bezier(.23,1,.32,1),
    box-shadow .22s ease;
}

.service-cta-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #F4EDE0 100%);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 16px 36px rgba(0,0,0,.32);
}

.service-cta-btn svg {
  fill: var(--b-green);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Ghost secondary button */
.service-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(234,226,211,.72);
  border: 1px solid rgba(234,226,211,.22);
  border-radius: var(--b-r-sm);
  padding: 13px 22px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.service-cta-link:hover {
  color: var(--b-text-light);
  border-color: rgba(234,226,211,.45);
  background: rgba(255,255,255,.05);
}

/* Mobile */
@media (max-width: 768px) {
  .service-cta-box { padding: 44px 24px 40px; margin-top: 48px; }
  .service-cta-box h3 { font-size: 26px; }
  .service-cta-actions { flex-direction: column; gap: 12px; }
  .service-cta-btn { width: 100%; justify-content: center; }
  .service-cta-link { width: 100%; justify-content: center; }
}

/* Nearby cities */
.nearby-cities {
  background: rgba(0,48,32,.04);
  border: 1px solid rgba(0,48,32,.12);
  border-radius: var(--b-r-sm); padding: 14px 18px;
  color: var(--b-text-body); font-size: 13.5px; margin-top: 28px;
}
.nearby-cities a { color: var(--b-green); }
.nearby-cities a:hover { text-decoration: underline; }

/* ── 8. RELATED SERVICES (dark section) ──────────────────────── */
.other-services { padding: 72px 32px; }

.other-services h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 4.5px; text-transform: uppercase;
  color: var(--b-text-dim); text-align: center; margin-bottom: 36px;
}

.other-service-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 30px 20px;
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
  border: 1px solid rgba(0,0,0,.09); border-radius: var(--b-r);
  box-shadow: var(--b-shd-md); text-align: center;
  transition: transform .26s cubic-bezier(.23,1,.32,1), box-shadow .26s ease, border-color .22s ease;
  position: relative; overflow: hidden;
}
.other-service-card::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--b-green);
  transform: scaleX(0); transition: transform .26s ease; transform-origin: left;
}
.other-service-card:hover { transform: translateY(-4px); box-shadow: var(--b-shd-lg); border-color: rgba(0,48,32,.20); }
.other-service-card:hover::before { transform: scaleX(1); }

.other-service-card span {
  font-family: 'Oswald', sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--b-text-dark);
  transition: color .2s ease;
}
.other-service-card:hover span { color: var(--b-green); }
.other-service-desc { font-size: 13px; color: var(--b-text-body); line-height: 1.58; text-align: center; }

/* Icon as CSS background-image (interior pages) */
.other-service-card picture {
  display: block; width: 72px; height: 72px;
  background-repeat: no-repeat;
  background-position: center; background-size: contain;
}
.other-service-card picture img { display: none; }
.other-service-card picture:has(img[src*="icon-sewer"])  { background-image: url('../icon-sewer-original-clean-green.png'); }
.other-service-card picture:has(img[src*="icon-drain"])  { background-image: url('../icon-drain-original-clean-green.png'); }
.other-service-card picture:has(img[src*="icon-camera"]) { background-image: url('../icon-camera-original-clean-green.png'); }
.other-service-card picture:has(img[src*="icon-hydro"])  { background-image: url('../icon-hydro-original-clean-green.png'); background-size: 115% 115%; }

/* ── 9. FAQ ───────────────────────────────────────────────────── */
.faq-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 4.5px; text-transform: uppercase;
  color: var(--b-green); text-align: center; margin-bottom: 12px;
}
.faq-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 32px; font-weight: 800; text-transform: uppercase;
  color: var(--b-text-dark); text-align: center; margin-bottom: 36px;
}
.faq-item, .faq-item:first-of-type {
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
  border: 1px solid rgba(0,0,0,.10); border-radius: var(--b-r);
  margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--b-shd-sm); transition: border-color .2s ease;
}
.faq-item:hover { border-color: rgba(0,48,32,.18); }
.faq-item + .faq-item { border-top: 0; margin-top: 0; }

.faq-question {
  width: 100%; background: transparent; border: 0;
  color: var(--b-text-dark);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px; font-weight: 600; text-align: left; line-height: 1.45;
  padding: 20px 54px 20px 22px; min-height: 62px;
  cursor: pointer; position: relative;
  transition: color .2s ease, background .2s ease;
}
.faq-question:hover, .faq-question.open { color: var(--b-green); background: rgba(0,48,32,.035); }

.faq-question::after {
  content: '+'; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,48,32,.22); border-radius: 50%;
  background: rgba(0,48,32,.055);
  font-size: 18px; line-height: 1; color: var(--b-green); font-weight: 300;
  transition: background .2s ease, color .2s ease;
}
.faq-question.open::after {
  content: '−'; background: var(--b-green); border-color: var(--b-green); color: var(--b-text-light);
}

.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-answer.open { max-height: 600px; }
.faq-answer p { color: var(--b-text-body); font-size: 14.5px; line-height: 1.80; padding: 0 54px 22px 22px; }

/* ── 10. TRUST STRIP ─────────────────────────────────────────── */
.trust-strip {
  background: linear-gradient(180deg, var(--b-richblack) 0%, var(--b-softblack) 100%);
  border-top: 1px solid var(--b-border-dk);
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 20px 32px; min-height: 62px;
  display: flex; align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.trust-strip-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 32px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
}
.trust-strip-item { display: flex; align-items: center; gap: 8px; color: rgba(243,238,230,.78); }
.trust-strip-item .checkmark { color: var(--b-green-mute); font-size: 13px; }

@media (max-width: 768px) {
  .trust-strip { padding: 14px 20px; }
  .trust-strip-inner { gap: 14px; font-size: 10.5px; }
}

/* ── 11. CTA BAR ─────────────────────────────────────────────── */
.cta-bar {
  background: linear-gradient(135deg, #001208 0%, #002818 22%, var(--b-green) 50%, #002818 78%, #001208 100%);
  padding: 0; min-height: 290px;
  display: flex; align-items: stretch;
  position: relative; overflow: hidden;
}
.cta-bar::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,48,32,.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.06) 40%, rgba(0,0,0,.06) 60%, rgba(0,0,0,.22) 100%),
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}
.cta-bar-inner {
  width: 100%; max-width: 1040px; margin: 0 auto;
  padding: 56px 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 52px; position: relative; z-index: 1;
}
.cta-bar-badge { width: 190px; height: 190px; flex-shrink: 0; }
.cta-bar-badge img { width: 100%; height: auto; display: block; }
.cta-bar-text { flex: 1; max-width: 640px; }
.cta-bar-title {
  font-family: 'Oswald', sans-serif; font-size: 31px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.16;
  color: var(--b-text-light);
}
.cta-bar-subtitle { font-size: 14.5px; line-height: 1.58; color: rgba(243,238,230,.85); margin-top: 7px; }
.cta-bar-contact {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.22); flex-wrap: wrap;
}
.cta-bar-phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: .4px;
  color: var(--b-text-light);
  background: rgba(255,255,255,.10); padding: 10px 24px;
  border-radius: var(--b-r-sm); border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.50);
  transition: background .22s ease, transform .18s ease;
}
.cta-bar-phone svg { width: 22px; height: 22px; fill: var(--b-text-light); }
.cta-bar-phone:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.cta-bar-contact-divider { width: 1px; height: 36px; background: rgba(255,255,255,.20); flex-shrink: 0; }
.cta-bar-web {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
  color: rgba(243,238,230,.88);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--b-r-sm);
  padding: 10px 14px;
  transition: background .2s ease, color .2s ease;
}
.cta-bar-web svg { width: 17px; height: 17px; fill: rgba(243,238,230,.88); }
.cta-bar-web:hover { background: rgba(255,255,255,.09); color: var(--b-text-light); }

@media (max-width: 768px) {
  .cta-bar-inner { flex-direction: column; text-align: center; gap: 20px; padding: 44px 22px; }
  .cta-bar-badge { width: 130px; height: auto; }
  .cta-bar-badge img { width: 130px; }
  .cta-bar-title { font-size: clamp(20px, 5.5vw, 27px); }
  .cta-bar-contact { flex-direction: column; align-items: center; gap: 12px; }
  .cta-bar-contact-divider { display: none; }
  .cta-bar-phone { width: 100%; justify-content: center; font-size: clamp(22px, 6vw, 28px); }
}

/* ── 12. FOOTER ──────────────────────────────────────────────── */
.footer {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(26,101,74,.10), transparent 42%),
    linear-gradient(180deg, var(--b-black) 0%, var(--b-softblack) 100%);
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--b-text-dim);
}
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(26,101,74,.25) 30%, rgba(26,101,74,.40) 50%, rgba(26,101,74,.25) 70%, transparent 95%);
}
.footer-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(243,238,230,.42);
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-links { list-style: none; }
.footer-links li { border-bottom: 1px solid rgba(255,255,255,.05); }
.footer-links li:last-child { border-bottom: 0; }
.footer-links li a {
  display: block; font-size: 13px;
  color: rgba(243,238,230,.58); padding: 9px 0; line-height: 1.35;
  transition: color .2s ease, padding-left .2s ease;
}
.footer-links li a:hover { color: var(--b-green-mute); padding-left: 4px; }

.footer-cta-phone {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 700;
  color: rgba(243,238,230,.90); line-height: 1; margin-bottom: 16px;
  transition: color .2s ease;
}
.footer-cta-phone svg { width: 15px; height: 15px; fill: var(--b-green-mute); flex-shrink: 0; }
.footer-cta-phone:hover { color: var(--b-green-mute); }

.footer-contact-info { border-top: 1px solid rgba(255,255,255,.07); padding-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.footer-contact-info a { font-size: 12.5px; color: rgba(243,238,230,.50); transition: color .2s ease; }
.footer-contact-info a:hover { color: var(--b-green-mute); }
.footer-cta-location { font-family: 'Oswald', sans-serif; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.26); margin-top: 2px; }

.footer-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 5px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  transition: background .2s ease, border-color .2s ease;
}
.footer-social-icon svg { width: 15px; height: 15px; fill: rgba(255,255,255,.58); transition: fill .2s ease; }
a.footer-social-icon:hover { background: rgba(45,107,79,.14); border-color: rgba(45,107,79,.30); }
a.footer-social-icon:hover svg { fill: var(--b-green-mute); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); }
.footer-copyright { font-size: 10.5px; color: rgba(255,255,255,.34); letter-spacing: .2px; line-height: 1.5; }
.footer-copyright strong { color: rgba(255,255,255,.60); font-weight: 600; }
.footer-legal a { font-size: 10.5px; color: rgba(255,255,255,.34); transition: color .2s ease; }
.footer-legal a:hover { color: var(--b-green-mute); }
.footer-legal-dot { background: rgba(255,255,255,.18); }
.footer-credit { font-size: 9.5px; color: rgba(255,255,255,.18); letter-spacing: .5px; }

/* ── 13. MOBILE CTA ──────────────────────────────────────────── */
.mobile-cta {
  background: rgba(7,12,10,.97);
  border-top: 2px solid var(--b-green);
  padding: 10px 16px;
}
.mobile-cta-call { background: var(--b-green); color: #fff; border-radius: 3px; }
.mobile-cta-call:hover { background: var(--b-green-mid); }
.mobile-cta-form { background: transparent; color: rgba(45,107,79,.90); border: 1px solid rgba(45,107,79,.55); border-radius: 3px; }

/* ── 14. ICON SYSTEM — INTERIOR PAGES ───────────────────────── */
/* Picture-as-CSS-background for service/value icons (all non-homepage) */
.service-icon picture,
.service-hero-icon picture,
.value-card-icon picture {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.service-icon picture img,
.service-hero-icon picture img,
.value-card-icon picture img { display: none; }

.service-icon picture:has(img[src*="icon-sewer"]),
.service-hero-icon picture:has(img[src*="icon-sewer"]),
.value-card-icon picture:has(img[src*="icon-sewer"]) { background-image: url('../icon-sewer-original-clean-green.png'); }

.service-icon picture:has(img[src*="icon-drain"]),
.service-hero-icon picture:has(img[src*="icon-drain"]),
.value-card-icon picture:has(img[src*="icon-drain"]) { background-image: url('../icon-drain-original-clean-green.png'); }

.service-icon picture:has(img[src*="icon-camera"]),
.service-hero-icon picture:has(img[src*="icon-camera"]),
.value-card-icon picture:has(img[src*="icon-camera"]) { background-image: url('../icon-camera-original-clean-green.png'); }

.service-icon picture:has(img[src*="icon-hydro"]),
.service-hero-icon picture:has(img[src*="icon-hydro"]),
.value-card-icon picture:has(img[src*="icon-hydro"]) { background-image: url('../icon-hydro-original-clean-green.png'); background-size: 112% 112%; }

/* Sizes */
.service-icon picture   { width: 88px; height: 88px; }
.service-hero-icon picture { width: 118px; height: 118px; }
.value-card-icon picture { width: 52px; height: 52px; }

/* Icon containers */
.service-icon, .service-hero-icon, .value-card-icon,
.contact-item-icon, .area-card-icon, .step-icon, .benefit-check {
  background: var(--b-ivory-2);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 8px 18px rgba(54,40,22,.07);
}

.service-icon svg, .service-hero-icon svg, .value-card-icon svg,
.contact-item-icon svg, .area-card-icon svg, .step-icon svg, .benefit-check svg {
  fill: var(--b-green);
}

/* ── 15. HOMEPAGE SERVICE SECTION icons ──────────────────────── */
/* The icon PNGs are clean line-art on transparent backgrounds.
   The container circle from base CSS was visually overlapping the icons.
   Strip all container chrome — show icons as pure images. */

/* Kill ALL container styling so nothing renders over the icon */
.services .service-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
}

.services .service-icon picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  height: 120px !important;
  background: transparent !important;
  border: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.services .service-icon picture img {
  display: block !important;
  width: 120px !important;
  height: 120px !important;
  max-width: 120px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  /* Warm sand/ivory — brand palette --b-ivory-2 (#EAE2D3) */
  filter: brightness(0) invert(1) sepia(0.28) brightness(0.96) !important;
}

.services .service-card:hover .service-icon picture img {
  /* Slightly brighter ivory on hover — --b-text-light (#F3EEE6) */
  filter: brightness(0) invert(1) sepia(0.15) !important;
}

/* Service card text (dark section) */
.services .service-title  { color: rgba(243,238,230,.96); text-shadow: none; }
.services .service-desc   { color: rgba(210,200,190,.80); }
.services .service-link   { color: var(--b-green-mute); }
.services .service-link:hover { color: var(--b-text-light); }

/* ── 16. SHARED CARD SURFACES ────────────────────────────────── */
.value-card, .financing-step, .process-step, .benefit-item, .area-card, .contact-card {
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
  border: 1px solid rgba(0,0,0,.09); border-radius: var(--b-r);
  box-shadow: var(--b-shd-md);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.value-card:hover, .financing-step:hover, .benefit-item:hover, .area-card:hover {
  transform: translateY(-3px); border-color: rgba(0,48,32,.22); box-shadow: var(--b-shd-lg);
}
.value-card-title  { color: var(--b-text-dark); }
.value-card-desc   { color: var(--b-text-body); }
.value-card-divider { background: rgba(0,48,32,.22); }

/* ── 17. ABOUT PAGE ──────────────────────────────────────────── */
.about-story {
  background:
    radial-gradient(ellipse at 65% 0%, rgba(255,255,255,.05), transparent 48%),
    linear-gradient(180deg, var(--b-richblack) 0%, var(--b-softblack) 100%);
}
.about-label   { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--b-green-mute); margin-bottom: 8px; }
.about-title   { color: var(--b-text-light); }
.about-text    { color: rgba(243,238,230,.78); line-height: 1.88; }
.about-cursive { color: var(--b-green-mute); }
.about-photo-main { border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 50px rgba(0,0,0,.36); }
.about-photo-caption { color: rgba(255,255,255,.88); }

.timeline-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,48,32,.16), transparent 44%),
    linear-gradient(180deg, var(--b-black) 0%, var(--b-richblack) 100%);
}
.timeline-heading { color: var(--b-text-light); }
.timeline-year    { color: var(--b-green-mute); font-size: 11.5px; letter-spacing: 3px; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.timeline-title   { color: var(--b-text-light); }
.timeline-desc    { color: rgba(243,238,230,.70); }
.timeline::before { background: linear-gradient(180deg, transparent, var(--b-green-mute) 12%, var(--b-green-mute) 86%, transparent); opacity: .65; }
.timeline-dot     { background: var(--b-green-mute); border-color: var(--b-richblack); box-shadow: 0 0 0 4px rgba(45,107,79,.10); }

.values-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.44), transparent 50%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
}
.values-label      { color: var(--b-text-muted); font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; }
.values-heading    { color: var(--b-text-dark); }
.values-subheading { color: var(--b-text-body); }

/* About contact section — ivory not dark */
body.about-page .contact-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.40), transparent 50%),
    linear-gradient(180deg, var(--b-ivory-2) 0%, var(--b-ivory-3) 100%);
  border-top: 1px solid rgba(0,0,0,.09);
  border-bottom: 1px solid rgba(0,0,0,.09);
  color: var(--b-text-dark);
}

/* Card layout */
body.about-page .contact-section .contact-inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: start;
}

body.about-page .contact-section .contact-inner > div {
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--b-r);
  box-shadow: var(--b-shd-md);
  padding: 36px 36px 32px;
}

/* Titles */
body.about-page .contact-section .contact-info-title,
body.about-page .contact-section .contact-hours-title {
  color: var(--b-text-dark);
  font-size: 26px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(0,48,32,.12);
}

/* Contact items */
body.about-page .contact-section .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
body.about-page .contact-section .contact-item:last-child { border-bottom: 0; }
body.about-page .contact-section .contact-item-label  {
  color: var(--b-text-muted);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3px;
}
body.about-page .contact-section .contact-item-value,
body.about-page .contact-section .contact-item-value a {
  color: var(--b-text-body);
  font-size: 15px;
  line-height: 1.55;
}
body.about-page .contact-section .contact-item-value a:hover { color: var(--b-green); }
body.about-page .contact-section .contact-item-icon {
  background: var(--b-ivory-2);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: none;
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
body.about-page .contact-section .contact-item-icon svg { fill: var(--b-green); }

/* Hours rows */
body.about-page .contact-section .hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
body.about-page .contact-section .hours-row-final,
body.about-page .contact-section .hours-row:last-of-type { border-bottom: 0; }
body.about-page .contact-section .hours-day  {
  color: var(--b-text-dark);
  font-size: 15px;
}
body.about-page .contact-section .hours-time {
  color: var(--b-green);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
}
body.about-page .contact-section .hours-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.07);
  font-size: 13px;
  color: var(--b-text-muted);
  font-style: italic;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 768px) {
  body.about-page .contact-section .contact-inner {
    grid-template-columns: 1fr;
  }
}

/* ── 18. CONTACT PAGE ────────────────────────────────────────── */
.contact-info-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.40), transparent 50%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.contact-card-title           { color: var(--b-green); font-size: 11px; letter-spacing: 3px; }
.contact-card-value,
.contact-card-value a         { color: var(--b-text-dark); font-size: 20px; }
.contact-card-value a:hover   { color: var(--b-green); }
.contact-card-badge           { color: var(--b-green); }

.contact-form-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.42), transparent 48%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
}
.contact-form-section .contact-form-heading h2 { color: var(--b-text-dark); }
.contact-form-section .contact-form-heading p  { color: var(--b-text-body); }

.contact-form-section input,
.contact-form-section select,
.contact-form-section textarea {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--b-r-sm); color: var(--b-text-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form-section input:focus,
.contact-form-section select:focus,
.contact-form-section textarea:focus {
  background: #fff;
  border-color: rgba(0,48,32,.50);
  box-shadow: 0 0 0 3px rgba(0,48,32,.10), inset 0 1px 0 rgba(255,255,255,.65);
  outline: none;
}
.contact-form-section input::placeholder,
.contact-form-section textarea::placeholder { color: rgba(79,70,59,.46); }
.contact-form-section .form-group label { color: var(--b-green); letter-spacing: 2px; }
.contact-form-section .form-note         { color: var(--b-text-body); }
.contact-form-section .form-note a       { color: var(--b-green); font-weight: 700; }

.contact-form-section .form-submit-btn {
  background: linear-gradient(135deg, #001E14 0%, var(--b-green) 48%, #0B3A2A 100%);
  color: var(--b-text-light);
  border: 1px solid rgba(0,48,32,.65);
  border-radius: var(--b-r-sm);
  box-shadow: 0 14px 28px rgba(0,48,32,.20);
  transition: transform .18s ease, box-shadow .18s ease;
}
.contact-form-section .form-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(0,48,32,.26); }

/* ── 19. FINANCING PAGE ──────────────────────────────────────── */
.financing-benefits {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.44), transparent 56%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
  border: 1px solid rgba(0,0,0,.10); border-radius: var(--b-r); box-shadow: var(--b-shd-lg);
}
.financing-benefits h3 { color: var(--b-text-dark); }
.step-title   { color: var(--b-text-dark); }
.step-desc    { color: var(--b-text-body); }
.benefit-title { color: var(--b-text-dark); }
.benefit-text  { color: var(--b-text-body); font-weight: 600; }
.benefit-check svg, .benefit-check svg path { fill: var(--b-text-light); }

.financing-apply {
  background: linear-gradient(135deg, #001E14 0%, var(--b-green) 46%, #0B3A2A 100%);
  color: var(--b-text-light); border-radius: var(--b-r); box-shadow: 0 20px 44px rgba(0,48,32,.22);
}
.financing-apply h3, .financing-apply p { color: var(--b-text-light); }

.financing-apply-btn {
  background: var(--b-ivory-1); color: var(--b-green);
  border-radius: var(--b-r-sm); box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: background .2s ease, transform .18s ease;
}
.financing-apply-btn:hover { background: #fff; transform: translateY(-1px); }

/* ── 20. SERVICE AREAS PAGE ──────────────────────────────────── */
.areas-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,238,227,.50), transparent 56%),
    linear-gradient(180deg, var(--b-ivory-3) 0%, #D7CABA 100%);
  border-top: 1px solid rgba(0,0,0,.09);
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.area-card { background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%); border-color: rgba(0,0,0,.10); }
.area-card.primary { border-color: rgba(0,48,32,.26); }
.area-card-name { color: var(--b-text-dark); }
.area-card-desc { color: var(--b-text-body); }
.area-card-icon { background: rgba(0,48,32,.06); border-color: rgba(0,48,32,.14); }
.area-card-icon svg { fill: var(--b-green); }
.area-tag { background: rgba(255,255,255,.60); border: 1px solid rgba(0,48,32,.14); color: var(--b-green); border-radius: var(--b-r-sm); }
.area-tag:hover { background: var(--b-green); color: var(--b-text-light); }

.not-sure { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.24), transparent 60%), linear-gradient(180deg, #D7CABA 0%, var(--b-ivory-3) 100%); }
.not-sure .not-sure-inner { background: linear-gradient(180deg, var(--b-ivory-1), var(--b-ivory-2)); border: 1px solid rgba(0,0,0,.10); border-left: 4px solid var(--b-green); border-radius: var(--b-r); }
.not-sure h3 { color: var(--b-text-dark); }
.not-sure p  { color: var(--b-text-body); }

/* HSA city pills — dark background section */
.hsa-city {
  color: rgba(255,255,255,.52);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.hsa-city:hover {
  color: var(--b-text-light);
  background: rgba(0,48,32,.14);
  border-color: rgba(0,48,32,.40);
}
.hsa-city.primary {
  color: var(--b-green-mute);
  background: rgba(0,48,32,.12);
  border-color: rgba(0,48,32,.35);
}
.hsa-city.primary:hover {
  color: var(--b-text-light);
  background: rgba(0,48,32,.22);
}
.hsa-view-all { color: var(--b-green-mute); }

/* Homepage service areas section text (dark bg) */
.home-service-areas-label   { color: var(--b-green-mute); }
.home-service-areas-heading { color: var(--b-text-light); }
.home-service-areas-sub     { color: rgba(210,200,190,.78); }

/* ── 21. LEGAL / THANK-YOU / CITY PAGES ─────────────────────── */
.legal-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.40), transparent 48%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
}
.legal-inner h2 { color: var(--b-text-dark); }
.legal-inner p, .legal-inner li { color: var(--b-text-body); line-height: 1.80; }
.legal-inner a { color: var(--b-green); }
.legal-updated { color: var(--b-text-muted); }

.thank-you-section { background: linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%); }

.city-content, .city-intro, .city-services {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.40), transparent 48%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%);
  color: var(--b-text-dark);
}

/* ═══════════════════════════════════════════════════════════════
   COLOR COHESION PASS — appended to site-theme.css
   ─────────────────────────────────────────────────────────────
   Audit findings and fixes, organized by surface type.
   All rules override base CSS (loads after per-page files).
   No !important needed — same or higher specificity, later load.
   ═══════════════════════════════════════════════════════════════

   PALETTE DECISIONS:
   Dark section body text:  rgba(224,216,204,.82) — warm, not cold grey
   Dark section muted text: rgba(196,184,168,.68) — warm cream-grey
   Dark section labels:     #6E8F7D (--b-green-mute) — consistent
   Ivory section body:      #4A4138 — warmer than base #4F463B
   Ivory section muted:     #6B5D52 — warm brown-grey
   Footer links:            rgba(224,216,204,.64) — readable, warm
   Footer headings:         rgba(224,216,204,.50) — elevated from .22/.42
   Footer copyright:        rgba(224,216,204,.40) — readable
   ═══════════════════════════════════════════════════════════════ */

/* ── A. TOKEN UPGRADES ────────────────────────────────────────── */
/* Redefine the key tokens to be warmer and more consistent */
:root {
  /* Upgraded warm text values */
  --b-text-body:      #45393008;   /* intentional override below */
  --b-text-muted:     #72645A;

  /* Warm dark-section text (replaces cold #b0b0b0 / #d0d0d0) */
  --b-dark-body:      rgba(224,216,204,.84);
  --b-dark-muted:     rgba(196,184,168,.70);
  --b-dark-faint:     rgba(196,184,168,.52);

  /* Consistent ivory text */
  --b-ivory-body:     #45392E;
  --b-ivory-muted:    #6B5D52;
  --b-ivory-faint:    #8C7D72;

  /* Upgraded footer values */
  --b-footer-link:    rgba(224,216,204,.62);
  --b-footer-head:    rgba(224,216,204,.48);
  --b-footer-dim:     rgba(224,216,204,.36);
}

/* Correct the token override above — set body text cleanly */
:root { --b-text-body: #45392E; }

/* ── B. DARK SECTION DEPTH — CINEMATIC TONAL ORCHESTRATION ──── */
/* Art-directed luminance stepping: each section reads distinctly.
   Verified luminance values — not guesswork.
   Sequence: Hero(0.000) → Services(0.018↑) → Trust(0.008↓) →
             Areas(0.005↓) → TrustStrip(0.009↑) → CTA(0.022↑) → Footer(0.004↓) */

/* Services: clearest step UP from the black hero overlay.
   Warm dark green-black — icon faces and card edges now separate. */
.services {
  background: #0E1612;
}

/* Why Homeowners / home-trust: authoritative step DOWN from services.
   Layered depth — cards elevated above the section floor. */
.home-trust {
  background: #0E1612;
  border-top: none;
  border-bottom: none;
}

/* Keep the services -> why-choose dark field visually continuous.
   home.css adds radial pseudo-element shading to .home-trust, which made
   this band look like a third green even when the base color matched. */
.home-trust::before {
  content: none !important;
  background: none !important;
}

.services::after,
.home-trust::after {
  content: none !important;
  background-image: none !important;
}



/* Service areas: compressed dark — creates tension before CTA release */
.home-service-areas {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,48,32,.08), transparent 60%),
    linear-gradient(180deg, #0E1310 0%, #0B1009 100%);
}

/* About story */
.about-story {
  background:
    radial-gradient(ellipse at 68% 0%, rgba(26,101,74,.08), transparent 44%),
    radial-gradient(ellipse at 12% 100%, rgba(0,48,32,.12), transparent 40%),
    linear-gradient(175deg, #0E1612 0%, var(--b-richblack) 50%, #101814 100%);
}

.timeline-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,48,32,.16), transparent 42%),
    radial-gradient(ellipse at 80% 100%, rgba(0,48,32,.07), transparent 38%),
    linear-gradient(175deg, #070A08 0%, var(--b-black) 60%, #0A0D0B 100%);
}

.other-services {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,48,32,.14), transparent 40%),
    radial-gradient(ellipse at 20% 90%, rgba(14,74,54,.08), transparent 38%),
    linear-gradient(175deg, #0E1612 0%, var(--b-richblack) 55%, #101814 100%);
}

/* Contact section on non-about pages */
.contact-section:not(.about-page .contact-section) {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,48,32,.14), transparent 42%),
    linear-gradient(175deg, #0E1612 0%, var(--b-richblack) 55%, var(--b-softblack) 100%);
}

/* ── C. DARK SECTION TEXT — WARM AND CONSISTENT ──────────────── */
/* All body copy in dark sections: replace cold #b0b0b0 with warm cream */

/* About story */
.about-story .about-intro,
.about-story .about-text,
.about-story p { color: var(--b-dark-body); }

.about-story .about-subtitle,
.about-story .about-label  { color: var(--b-green-mute); }
.about-story .about-title  { color: var(--b-text-light); }
.about-story .about-cursive { color: var(--b-green-mute); }

/* Timeline */
.timeline-section .timeline-desc    { color: var(--b-dark-body); }
.timeline-section .timeline-title   { color: var(--b-text-light); }
.timeline-section .timeline-heading { color: var(--b-text-light); }
.timeline-section .timeline-year    { color: var(--b-green-mute); }

/* Other services — card text stays warm ivory (overrides base grey) */
.other-services h3              { color: var(--b-dark-faint); }
.other-service-card span        { color: var(--b-text-dark); }
.other-service-desc             { color: var(--b-ivory-body); }

/* Related services (service pages) */
.other-service-card .other-service-desc { color: var(--b-ivory-body); }

/* Homepage services section — desc text */
.services .service-desc { color: rgba(214,204,190,.82); }

/* Home-trust section */
.trust-item-title { color: var(--b-text-light); }
.trust-item-desc  { color: var(--b-dark-body); }
.trust-item-desc strong { color: rgba(224,216,204,.94); }
.trust-badge { color: rgba(196,184,168,.56); }

/* Contact section items (dark bg on interior pages) */
.contact-section .contact-info-title,
.contact-section .contact-hours-title { color: var(--b-text-light); }
.contact-section .contact-item-label  { color: var(--b-green-mute); font-weight: 600; }
.contact-section .contact-item-value,
.contact-section .contact-item-value a { color: var(--b-dark-body); }
.contact-section .hours-day  { color: var(--b-dark-body); }
.contact-section .hours-time { color: var(--b-green-mute); font-weight: 600; }
.contact-section .hours-note { color: var(--b-dark-faint); }
.contact-section .hours-row  { border-bottom-color: rgba(255,255,255,.08); }

/* ── D. IVORY SECTION TEXT — WARM AND LEGIBLE ────────────────── */
/* Replace cold --text-gray (#b0b0b0) with warm ivory-body on light backgrounds */

/* Service pages body text */
.service-body p    { color: var(--b-ivory-body); }
.service-body > p:first-child { color: #2E2318; font-size: 17.5px; line-height: 1.78; }
.service-body strong { color: var(--b-text-dark); }
.service-body ul li  { color: var(--b-ivory-body); }

/* Process steps */
.process-step-content p    { color: var(--b-ivory-body); }
.trust-callout p           { color: var(--b-ivory-body); }

/* FAQ */
.faq-question              { color: var(--b-text-dark); }
.faq-question:hover,
.faq-question.open         { color: var(--b-green); }
.faq-answer p              { color: var(--b-ivory-body); line-height: 1.82; }

/* Other-service-card on ivory bg */
.other-service-desc        { color: var(--b-ivory-body); }

/* Value cards */
.value-card-desc           { color: var(--b-ivory-body); }
.value-card-title          { color: var(--b-text-dark); }

/* Financing */
.step-desc                 { color: var(--b-ivory-body); }
.benefit-text              { color: var(--b-ivory-body); font-weight: 500; }
.financing-intro p,
.financing-inner > p       { color: var(--b-ivory-body); }

/* Contact form */
.contact-form-section .contact-form-heading p { color: var(--b-ivory-body); }

/* Service areas */
.area-card-desc            { color: var(--b-ivory-body); }
.areas-intro,
.areas-subheading,
.areas-section > p,
.areas-section .section-subtitle { color: var(--b-ivory-body); }
.not-sure p                { color: var(--b-ivory-body); }

/* Legal */
.legal-inner p,
.legal-inner li            { color: var(--b-ivory-body); line-height: 1.82; }

/* Values section (about page) */
.values-subheading         { color: var(--b-ivory-body); }

/* ── E. FOUNDATION SECTION ───────────────────────────────────── */
/* Warm ivory background */
.foundation {
  /* Warmer, richer ivory — more rugged-luxury, less clinical */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,252,245,.32), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(200,185,165,.18), transparent 50%),
    linear-gradient(180deg, #F2EBD9 0%, #E5DAC6 100%);
}

/* 3-column layout: text | photos | values */
.foundation-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Left text column — does NOT span full width */
.foundation-left {
  grid-column: 1;
}

/* Photos column — second column, stacked vertically */
.foundation-photos {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Values column — third column */
.foundation-values {
  grid-column: 3;
}

/* ── Photo cards ── */
.photo-old,
.photo-mid {
  position: relative;
  display: block;           /* cancel home.css flex layout */
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 14px 36px rgba(0,0,0,.13);
}

.photo-old picture,
.photo-mid picture {
  display: block;
  width: 100%;
}

.photo-old {
  transform: rotate(-1.5deg);
  border: 3px solid rgba(255,255,255,.90);
  box-shadow: 0 3px 10px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.14),
              0 0 0 1px rgba(0,0,0,.05);
}

.photo-mid {
  transform: rotate(1.2deg);
  border: 3px solid rgba(255,255,255,.90);
  box-shadow: 0 3px 10px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.14),
              0 0 0 1px rgba(0,0,0,.05);
  margin-top: 0;
}

.photo-old img,
.photo-mid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 3px;
}

.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 14px 10px;
  font-family: 'Dancing Script', cursive;
  font-size: 15px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
  text-align: center;
}

/* ── Value items ── */
.foundation-values .value-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.foundation-values .value-item:last-child {
  border-bottom: 0;
}

.foundation-values .value-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,48,32,.055);
  border: 1px solid rgba(0,48,32,.18);
  box-shadow: none;
  overflow: hidden;
}

.foundation-values .value-icon picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.foundation-values .value-icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.foundation-values .value-item:hover .value-icon {
  background: rgba(0,48,32,.09);
  border-color: rgba(0,48,32,.30);
}

.foundation-values .value-title {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--b-text-dark);
  margin-bottom: 4px;
}

.foundation-values .value-desc {
  font-size: 13.5px;
  color: var(--b-ivory-body);
  line-height: 1.62;
}

/* Text column */
.foundation-text { color: var(--b-ivory-body); line-height: 1.88; }
.value-desc      { color: var(--b-ivory-body); line-height: 1.62; }
.value-title     { color: var(--b-text-dark); }

/* ── Responsive: tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .foundation-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .foundation-left  { grid-column: 1 / -1; }
  .foundation-photos { grid-column: 1; }
  .foundation-values { grid-column: 2; }
}

/* ── Responsive: mobile (≤768px) ── */
@media (max-width: 768px) {
  .foundation-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .foundation-left   { grid-column: 1; }
  .foundation-photos { grid-column: 1; }
  .foundation-values { grid-column: 1; }
  .photo-old,
  .photo-mid { transform: none; }
}

/* ── F. LABELS AND EYEBROWS — CONSISTENT GREEN ───────────────── */
/* All small caps labels should use the same green-muted tone */
.page-hero-label           { color: rgba(45,107,79,.94); }
.about-label               { color: var(--b-green-mute); }
.values-label              { color: var(--b-text-muted); }
.faq-label                 { color: var(--b-green); }
.home-trust-label          { color: var(--b-green-mute); }
.home-service-areas-label  { color: var(--b-green-mute); }

/* ── G. CONTACT INFO SECTION (ivory bg) ──────────────────────── */
.contact-info-section .contact-card {
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--b-r);
  box-shadow: var(--b-shd-md);
}

.contact-card-title        { color: var(--b-green); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.contact-card-value        { color: var(--b-text-dark); }
.contact-card-value a      { color: var(--b-text-dark); }
.contact-card-value a:hover { color: var(--b-green); }
.contact-card-badge        { color: var(--b-green); font-size: 11px; letter-spacing: 1.5px; }

/* Contact card icon */
.contact-info-section .contact-card-icon {
  background: var(--b-ivory-2);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 6px 14px rgba(54,40,22,.07);
}
.contact-info-section .contact-card-icon svg { fill: var(--b-green); }

/* ── H. FORM INPUTS ──────────────────────────────────────────── */
/* Consistent across contact, financing, any form */
input, textarea, select {
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--b-r-sm);
  color: var(--b-text-dark);
}

input::placeholder,
textarea::placeholder { color: rgba(69,57,46,.44); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(0,48,32,.46);
  box-shadow: 0 0 0 3px rgba(0,48,32,.09);
}

/* ── I. TRUST STRIP ──────────────────────────────────────────── */
.trust-strip {
  background: linear-gradient(180deg, #0E1410 0%, #0C1209 100%);
  border-top: 1px solid rgba(45,107,79,.18);
  border-bottom: 1px solid rgba(45,107,79,.18);
}
.trust-strip-item    { color: rgba(224,216,204,.78); }
.trust-strip-item .checkmark { color: var(--b-green-mute); }

/* ── J. HOME SERVICE AREAS ───────────────────────────────────── */
.home-service-areas-heading { color: var(--b-text-light); }
.home-service-areas-sub     { color: var(--b-dark-muted); }
.home-service-areas-label   { color: var(--b-green-mute); }

/* ── K. CTA BAR ──────────────────────────────────────────────── */
.cta-bar-title    { color: var(--b-text-light); }
.cta-bar-subtitle { color: rgba(224,216,204,.88); }

/* ── L. FOOTER — COMPLETE CONTRAST UPGRADE ───────────────────── */
/* Raise every footer text value for readability */

.footer {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(0,48,32,.22), transparent 44%),
    radial-gradient(ellipse at 78% 100%, rgba(0,48,32,.12), transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(0,48,32,.06), transparent 65%),
    linear-gradient(180deg, #0A1009 0%, #080C07 100%);
}

/* Column heading labels */
.footer-heading {
  color: var(--b-footer-head);
  font-size: 9.5px;
  letter-spacing: 3.5px;
  border-bottom-color: rgba(255,255,255,.09);
}

/* Nav links */
.footer-links li  { border-bottom-color: rgba(255,255,255,.055); }
.footer-links li a { color: var(--b-footer-link); }
.footer-links li a:hover { color: var(--b-text-light); padding-left: 5px; }

/* Phone CTA */
.footer-cta-phone    { color: rgba(224,216,204,.92); }
.footer-cta-phone svg { fill: var(--b-green-mute); }
.footer-cta-phone:hover { color: var(--b-text-light); }

/* Contact info links */
.footer-contact-info { border-top-color: rgba(255,255,255,.08); }
.footer-contact-info a { color: var(--b-footer-link); }
.footer-contact-info a:hover { color: var(--b-text-light); }

/* Location tag */
.footer-cta-location {
  color: rgba(196,184,168,.42);
  font-size: 9px;
  letter-spacing: 1.4px;
}

/* Social icons */
.footer-social-icon {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.footer-social-icon svg { fill: rgba(224,216,204,.58); }
a.footer-social-icon:hover {
  background: rgba(45,107,79,.14);
  border-color: rgba(45,107,79,.30);
}
a.footer-social-icon:hover svg { fill: var(--b-text-light); }

/* Bottom bar */
.footer-bottom      { border-top-color: rgba(255,255,255,.08); }
.footer-copyright   { color: var(--b-footer-dim); }
.footer-copyright strong { color: rgba(224,216,204,.62); }
.footer-legal a     { color: var(--b-footer-dim); }
.footer-legal a:hover { color: var(--b-green-mute); }
.footer-legal-dot   { background: rgba(255,255,255,.16); }
.footer-credit      { color: rgba(196,184,168,.20); }

/* ── M. CARD SURFACES — CONSISTENT IVORY GRADIENT ────────────── */
/* Standardize all card backgrounds to the same warm gradient */

.contact-card,
.area-card,
.process-step,
.faq-item,
.value-card,
.financing-step,
.benefit-item {
  background: linear-gradient(160deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%);
}

/* ── N. BORDERS — COHESIVE SYSTEM ────────────────────────────── */
.contact-info-section .contact-card  { border-color: rgba(0,0,0,.09); }
.faq-item                            { border-color: rgba(0,0,0,.09); }
.process-step                        { border-color: rgba(0,0,0,.09); }
.benefit-item                        { border-color: rgba(0,0,0,.09); }

/* Dark section borders */
.about-story { border-top-color: rgba(255,255,255,.07); border-bottom-color: rgba(255,255,255,.07); }
.timeline-section { border-top-color: rgba(255,255,255,.06); border-bottom-color: rgba(255,255,255,.06); }
.other-services   { border-top-color: rgba(255,255,255,.07); border-bottom-color: rgba(255,255,255,.07); }

/* ── O. ICON CONTAINERS — CONSISTENT IVORY ───────────────────── */
/* Icon containers — ivory surface for interior/light contexts only */
.service-hero-icon,
.value-card-icon,
.contact-item-icon,
.area-card-icon,
.step-icon,
.benefit-check {
  background: var(--b-ivory-2);
  border-color: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 6px 14px rgba(54,40,22,.07);
}
/* Interior page .service-icon (not homepage .services) */
.service-content .service-icon,
.other-services .service-icon {
  background: var(--b-ivory-2);
  border-color: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 6px 14px rgba(54,40,22,.07);
}
/* Homepage services section icons — dark green tint, not ivory */
.services .service-icon {
  background: rgba(0,48,32,.08);
  border: 1px solid rgba(0,48,32,.20);
  box-shadow: 0 12px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.10);
}

/* ── P. MOBILE CTA BAR ───────────────────────────────────────── */
.mobile-cta {
  background: rgba(6,10,8,.98);
  border-top-color: var(--b-green);
}
.mobile-cta-form {
  color: var(--b-green-mute);
  border-color: rgba(45,107,79,.60);
}

/* ── Q. SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar         { background: var(--b-ivory-2); }
::-webkit-scrollbar-thumb   { background: rgba(0,48,32,.30); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,48,32,.46); }

/* ── R. SELECTION ────────────────────────────────────────────── */
::selection { background: var(--b-green); color: var(--b-ivory-0); }

/* ── Services icon final override — keep clean, no container chrome ── */
.services .service-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* ── SAND/IVORY ICONS ON DARK BACKGROUNDS ───────────────────── */
/* All icons on dark sections use warm sand instead of any green */

/* Home-trust (Why Homeowners) section — SVG stroke icons */
.trust-item-icon svg {
  stroke: rgba(234,226,211,.85) !important;
  fill: none !important;
}

/* Nav phone icon */
.header-phone-number svg {
  fill: rgba(234,226,211,.70) !important;
}
.header-phone-number:hover svg {
  fill: var(--b-text-light) !important;
}

/* Footer phone icon */
.footer-cta-phone svg {
  fill: rgba(234,226,211,.60) !important;
}

/* Trust strip checkmarks — sand instead of green */
.trust-strip-item .checkmark {
  color: rgba(234,226,211,.80) !important;
}

/* Other-service-card icons on dark bg — already using bg-image approach, fine */

/* Mobile CTA form button */
.mobile-cta-form {
  color: rgba(234,226,211,.85) !important;
  border-color: rgba(234,226,211,.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO GREEN TEXT — CINEMATIC READABILITY FIX
   ──────────────────────────────────────────────────────────────
   Problem: --green-light = #003020 has 1.4:1 contrast on the
   near-black hero overlay — essentially invisible.
   
   Fix: #3D8065 — deep muted jade. 6.8:1 contrast on dark hero.
   Muted saturation (0.52), dark luminance (0.41).
   Premium, cinematic. Not neon. Not electric.
   ══════════════════════════════════════════════════════════════ */

/* Green headline line ("FAMILY OWNED. BUILT TO LAST.") */
.hero-title .green {
  color: #3D8065;
  opacity: 1;
  /* Single tight shadow for depth — not a glow, just separation */
  text-shadow:
    0 1px 3px rgba(0,0,0,.70),
    0 2px 12px rgba(0,0,0,.50);
}

/* Cursive tagline — slightly lighter to preserve hierarchy */
.hero-family-roots {
  color: #4A9478;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.60);
}

/* Sculpt a subtle dark zone behind the text area —
   a tight radial gradient that deepens the overlay
   exactly where the headline lives, without touching the image.
   Uses a pseudo-element on hero-content so it's precisely scoped. */
.hero-content::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -24px;
  right: 20%;
  bottom: -24px;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,.12) 55%,
    transparent 80%
  );
  pointer-events: none;
  z-index: -1;
}

/* Ensure hero-content has position:relative so ::before is scoped */
.hero-content {
  position: relative;
}

/* ── WHY HOMEOWNERS — elevated card surfaces ─────────────────── */
/* Cards lift above the #0D1410 section floor */
.home-trust .trust-item {
  background: linear-gradient(160deg, #1A2220 0%, #141C19 100%);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.home-trust .trust-item:hover {
  background: linear-gradient(160deg, #1E2824 0%, #182019 100%);
}

/* Service areas — city pills slightly more visible */
.home-service-areas .hsa-city {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
}
.home-service-areas .hsa-city:hover {
  background: rgba(0,48,32,.18);
  border-color: rgba(0,48,32,.45);
}
.home-service-areas .hsa-city.primary {
  background: rgba(0,48,32,.15);
  border-color: rgba(0,48,32,.38);
}

/* ── FINANCING BUTTON — sub-label legibility fix ─────────────── */
/* .cta-financing-sub was color:var(--green-light)=#003020 on dark bg — invisible */
.cta-financing-text {
  color: var(--b-text-light);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.cta-financing-sub {
  color: rgba(234,226,211,.75);   /* warm sand — legible, not green-on-black */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ── FINANCING BENEFIT CHECKS — restore green circle + white tick ─ */
.benefit-check {
  background: var(--b-green) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,48,32,.22) !important;
}
.benefit-check svg,
.benefit-check svg path {
  fill: #fff !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   SERVICE AREAS — CARD SYSTEM FIX
   ══════════════════════════════════════════════════════════════ */

/* Section background: warm tan — cards need clear separation */
.areas-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,238,227,.50), transparent 56%),
    linear-gradient(180deg, var(--b-ivory-3) 0%, #D7CABA 100%);
}

/* Standard card — white/ivory surface lifts off the tan background */
.area-card {
  background: linear-gradient(160deg, #FDFAF5 0%, #F6F0E6 100%) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: var(--b-r) !important;
  box-shadow:
    0 2px 8px rgba(54,40,22,.07),
    0 8px 24px rgba(54,40,22,.08) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .22s ease !important;
}

.area-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 4px 14px rgba(54,40,22,.10),
    0 14px 36px rgba(54,40,22,.12) !important;
  border-color: rgba(0,48,32,.24) !important;
}

/* Primary (Des Moines) card — distinguished, not dark */
.area-card.primary {
  background: linear-gradient(160deg, #F4F9F6 0%, #E8F2EC 100%) !important;
  border: 1.5px solid rgba(0,48,32,.30) !important;
  box-shadow:
    0 2px 8px rgba(0,48,32,.08),
    0 8px 24px rgba(0,48,32,.12) !important;
}

.area-card.primary:hover {
  border-color: rgba(0,48,32,.45) !important;
  box-shadow:
    0 4px 14px rgba(0,48,32,.12),
    0 14px 36px rgba(0,48,32,.16) !important;
}

/* Primary card name — dark green, not washed out */
.area-card.primary .area-card-name {
  color: var(--b-green) !important;
}

/* Card name — clear dark text */
.area-card-name {
  color: var(--b-text-dark) !important;
  font-size: 18px;
  letter-spacing: .8px;
}

/* Card description — warm readable body */
.area-card-desc {
  color: var(--b-ivory-body) !important;
  font-size: 13.5px;
  line-height: 1.62;
}

/* Icon container — subtle green tint on ivory */
.area-card-icon {
  background: rgba(0,48,32,.06) !important;
  border-color: rgba(0,48,32,.14) !important;
  box-shadow: none !important;
}

.area-card.primary .area-card-icon {
  background: rgba(0,48,32,.10) !important;
  border-color: rgba(0,48,32,.22) !important;
}

.area-card-icon svg { fill: var(--b-green) !important; }

/* Area tags — clearly readable on the ivory card */
.area-tag {
  background: rgba(0,48,32,.07) !important;
  border: 1px solid rgba(0,48,32,.16) !important;
  color: var(--b-green) !important;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: .4px;
  transition: background .18s ease, color .18s ease !important;
}

.area-tag:hover {
  background: var(--b-green) !important;
  color: var(--b-text-light) !important;
  border-color: var(--b-green) !important;
}

/* ══════════════════════════════════════════════════════════════
   NOT SURE IF WE SERVICE YOUR AREA — premium treatment
   ══════════════════════════════════════════════════════════════ */

/* Section: dark green — breaks from the ivory card grid above,
   creates contrast before the trust strip */
.not-sure {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,48,32,.20), transparent 55%),
    linear-gradient(180deg, #0E1612 0%, #0B1310 100%) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 72px 24px !important;
  text-align: center;
  color: var(--b-text-light) !important;
}

/* Inner: no card box — the section itself IS the container */
.not-sure .not-sure-inner {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 !important;
}

/* Eyebrow label */
.not-sure-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--b-green-mute);
  margin-bottom: 16px;
}

/* Heading */
.not-sure h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 800;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--b-text-light) !important;
  margin-bottom: 16px;
}

/* Body copy */
.not-sure p {
  font-size: 15.5px;
  line-height: 1.68;
  color: rgba(234,226,211,.80) !important;
  margin-bottom: 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA row */
.not-sure-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Phone button — primary dark green */
.not-sure-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--b-text-light);
  background: var(--b-green);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--b-r-sm);
  padding: 12px 28px;
  box-shadow: 0 6px 20px rgba(0,48,32,.30);
  transition: background .22s ease, box-shadow .22s ease, transform .18s ease;
}

.not-sure-phone:hover {
  background: var(--b-green-mid);
  box-shadow: 0 8px 28px rgba(0,48,32,.40);
  transform: translateY(-1px);
}

.not-sure-phone svg {
  width: 18px;
  height: 18px;
  fill: rgba(234,226,211,.85);
  flex-shrink: 0;
}

/* Divider */
.not-sure-or {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(234,226,211,.38);
}

/* Text link — secondary */
.not-sure-contact {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(234,226,211,.70);
  border-bottom: 1px solid rgba(234,226,211,.28);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.not-sure-contact:hover {
  color: var(--b-text-light);
  border-color: rgba(234,226,211,.60);
}

/* Mobile */
@media (max-width: 768px) {
  .not-sure { padding: 52px 20px !important; }
  .not-sure h3 { font-size: 26px; }
  .not-sure-phone { font-size: 20px; padding: 12px 22px; }
  .not-sure-cta { flex-direction: column; gap: 14px; }
  .not-sure-or { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   ELITE POLISH PASS
   ══════════════════════════════════════════════════════════════ */

/* ── 1. MICRO-TRANSITIONS — tuned cubic-bezier curves ─────────── */
/* Premium easing: weighted, intentional, never mechanical */

/* All interactive cards */
.value-card,
.area-card,
.other-service-card,
.financing-step,
.benefit-item,
.faq-item,
.contact-card,
.trust-item {
  transition:
    transform .28s cubic-bezier(.23,1,.32,1),
    border-color .22s ease,
    box-shadow .28s cubic-bezier(.23,1,.32,1);
}

/* Service cards (homepage) */
.service-card {
  transition: background .32s cubic-bezier(.23,1,.32,1);
}

/* All buttons */
.service-cta-btn,
.not-sure-phone,
.financing-apply-btn,
.cta-bar-phone,
.cta-call {
  transition:
    background .22s cubic-bezier(.23,1,.32,1),
    transform .22s cubic-bezier(.23,1,.32,1),
    box-shadow .22s cubic-bezier(.23,1,.32,1);
}

/* Nav links */
.main-nav a,
.main-nav .nav-dropdown-toggle {
  transition: color .20s cubic-bezier(.23,1,.32,1);
}

/* Footer links */
.footer-links li a {
  transition: color .20s ease, padding-left .22s cubic-bezier(.23,1,.32,1);
}

/* ── 2. FOCUS STATES — brand-consistent, not browser-blue ──────── */
:focus-visible {
  outline: 2px solid rgba(45,107,79,.65);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Buttons: inset focus ring looks intentional */
.service-cta-btn:focus-visible,
.not-sure-phone:focus-visible,
.cta-bar-phone:focus-visible,
.cta-call:focus-visible,
.header-phone-number:focus-visible {
  outline: 2px solid rgba(234,226,211,.70);
  outline-offset: 3px;
}

/* Links in dark contexts */
.footer-links li a:focus-visible,
.nav-dropdown-menu a:focus-visible {
  outline-color: rgba(45,107,79,.55);
  outline-offset: 2px;
}

/* ── 3. FOOTER LOGO — grounded, not ghosted ────────────────────── */
.footer-logo-img {
  opacity: .88;
  transition: opacity .28s ease;
}
.footer-logo-img:hover { opacity: 1; }

/* ── 4. MOBILE TOUCH TARGETS — 44px minimum (mobile only) ──────── */
/* Nav touch targets — only on mobile where nav is a drawer */
@media (max-width: 768px) {
  .main-nav > a,
  .main-nav > .nav-dropdown > .nav-dropdown-toggle {
    min-height: 48px;
  }

  .footer-links li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Area tags — safe to apply globally, they're inline-flex already */
.area-tag {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ── 5. TYPOGRAPHY PRECISION ────────────────────────────────────── */

/* Prevent orphans in key headings */
.hero-title,
.page-hero-title,
.cta-bar-title,
.home-trust-heading,
.foundation-title {
  text-wrap: balance;
}

/* Body copy — prevent orphans */
.service-body p,
.trust-callout p,
.cta-bar-subtitle,
.hero-subtitle {
  text-wrap: pretty;
}

/* Oswald heading tracking consistency */
.service-cta-box h3,
.not-sure h3,
.faq-heading,
.contact-info-title,
.contact-hours-title {
  letter-spacing: .8px;
}

/* ── 6. IMAGE RENDERING POLISH ──────────────────────────────────── */
/* Prevent layout shift — ensure all images are block */
img {
  display: block;
}

/* Hero image — crisp rendering */
.hero {
  image-rendering: auto;
}

/* ── 7. SECTION PADDING RHYTHM — standardized ──────────────────── */
/* All interior page content sections share a consistent vertical rhythm */
.service-content,
.faq-section,
.other-services,
.values-section,
.timeline-section,
.about-story {
  scroll-margin-top: 120px; /* accounts for sticky header height */
}

/* ── 8. SCROLLBAR REFINEMENT ────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #0B1310; }
::-webkit-scrollbar-thumb {
  background: rgba(45,107,79,.36);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45,107,79,.55); }

/* ── 9. SELECTION COLOR ─────────────────────────────────────────── */
::selection {
  background: var(--b-green);
  color: #F2EBD9;
}

/* ── 10. PRINT / REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 11. ANTI-ALIASING CONSISTENCY ─────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 12. BUTTON CONSISTENCY AUDIT ──────────────────────────────── */
/* Ensure every primary CTA button has identical height and padding rhythm */
.cta-call,
.not-sure-phone,
.service-cta-btn {
  min-height: 52px;
}

.service-cta-link {
  min-height: 52px;
}

/* ── 13. CARD HOVER LIFT CONSISTENCY ───────────────────────────── */
/* All hoverable cards lift exactly 3px — no variation */
.value-card:hover,
.area-card:hover,
.other-service-card:hover,
.contact-card:hover {
  transform: translateY(-3px);
}

/* ── 14. LINK UNDERLINE PRECISION ───────────────────────────────── */
/* All content-area links get consistent underline offset */
.service-body a,
.legal-inner a,
.faq-answer a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── 15. PLACEHOLDER CONSISTENCY ────────────────────────────────── */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: rgba(69,57,46,.44);
  font-style: normal;
}

/* ══════════════════════════════════════════════════════════════
   $100K ELITE POLISH PASS
   Surgical refinements only. No layout changes.
   ══════════════════════════════════════════════════════════════ */



/* Service separators — more refined hairlines */
.service-card:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

/* LEARN MORE link — richer than the current --b-green-mute */
.service-link {
  color: rgba(234,226,211,.65) !important;
  letter-spacing: 2.2px;
  font-size: 11px;
}
.service-link:hover {
  color: rgba(234,226,211,1) !important;
  letter-spacing: 2.5px;
}

/* ─── 2. WHY HOMEOWNERS — grid seam and card refinement ────────── */
/* The 2px gap with background creates visible seams between cards.
   Use a clean border approach instead. */
.home-trust-grid {
  gap: 1px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 8px !important;
}

/* Trust item cards — more lift, less flat */
.trust-item {
  padding: 36px 32px !important;
  border-bottom: 0 !important;
}

/* Icon stroke — sand is correct but opacity can lift */
.trust-item-icon {
  opacity: 1 !important;
  margin-bottom: 22px !important;
}

/* Title tracking — tighten slightly for premium feel */
.trust-item-title {
  letter-spacing: 1.8px !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}

/* Desc text — slightly more opacity for legibility */
.trust-item-desc {
  font-size: 14px !important;
  line-height: 1.72 !important;
  color: rgba(224,216,204,.78) !important;
}
.trust-item-desc strong {
  color: rgba(234,226,211,.96) !important;
}

/* "BEEBE" inline logo in heading — align precisely */
.trust-heading-logo {
  height: 34px !important;
  top: 2px !important;
}
.trust-heading-logo-img {
  height: 58px !important;
  margin-top: -5px !important;
}

/* ─── 3. PAGE HERO — eyebrow label color refinement ────────────── */
/* Current sage green reads well — add a touch more warmth */
.page-hero-label {
  color: rgba(45,107,79,.96) !important;
  letter-spacing: 5.5px !important;
}

/* Hero title — tighten shadow for crisper render */
.page-hero-title {
  text-shadow:
    0 2px 8px rgba(0,0,0,.50),
    0 1px 2px rgba(0,0,0,.30) !important;
}

/* ─── 4. SERVICE PAGE BODY — list item polish ───────────────────── */
/* Checkmark tick — use a proper position */
.service-body ul li::before {
  top: 13px !important;
  font-size: 12px !important;
  color: var(--b-green) !important;
  font-weight: 800 !important;
}

/* List items — slightly more breathing room */
.service-body ul li {
  padding: 12px 16px 12px 38px !important;
  font-size: 14.5px !important;
  line-height: 1.64 !important;
}

/* Service body h2 — border is slightly too heavy, refine */
.service-body h2 {
  border-left-width: 2px !important;
  font-size: 19px !important;
  letter-spacing: 1.6px !important;
  margin-top: 48px !important;
  margin-bottom: 16px !important;
}

/* ─── 5. CONTACT FORM — elevate input quality ───────────────────── */
/* Inputs currently look flat — add depth and refinement */
.contact-form-section input,
.contact-form-section select,
.contact-form-section textarea {
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,.13) !important;
  border-radius: 5px !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  color: var(--b-text-dark) !important;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.06),
    0 1px 2px rgba(255,255,255,.80) !important;
  transition:
    border-color .20s ease,
    box-shadow .20s ease !important;
}

.contact-form-section input:focus,
.contact-form-section select:focus,
.contact-form-section textarea:focus {
  border-color: rgba(0,48,32,.55) !important;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.04),
    0 0 0 3px rgba(0,48,32,.09) !important;
  background: #fff !important;
  outline: none !important;
}

/* Labels — slightly warmer and more precise */
.contact-form-section .form-group label {
  font-size: 10px !important;
  letter-spacing: 2.4px !important;
  color: var(--b-green) !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

/* Submit button — more cinematic */
.contact-form-section .form-submit-btn {
  font-size: 15px !important;
  letter-spacing: 2.5px !important;
  min-height: 56px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(160deg, #001208 0%, #002416 20%, var(--b-green) 50%, #002416 80%, #001208 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 8px 28px rgba(0,48,32,.24) !important;
}

/* ─── 6. FOUNDATION SECTION — value items tighten ──────────────── */
/* Value items on ivory feel slightly cramped — add breathing room */
.foundation-values .value-item {
  padding: 16px 0 !important;
  gap: 18px !important;
}

.foundation-values .value-title {
  font-size: 13.5px !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 5px !important;
}

.foundation-values .value-desc {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--b-ivory-body) !important;
}

/* ─── 7. CTA BAR — subtitle and contact divider refinement ─────── */
.cta-bar-subtitle {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(234,226,211,.84) !important;
  margin-top: 10px !important;
  max-width: 520px !important;
}

.cta-bar-contact {
  margin-top: 28px !important;
  padding-top: 26px !important;
  gap: 16px !important;
}

/* ─── 8. FOOTER — column heading refinement ─────────────────────── */
.footer-heading {
  letter-spacing: 4px !important;
  font-size: 9px !important;
  color: rgba(255,255,255,.24) !important;
  margin-bottom: 20px !important;
}

/* Footer links — slightly more presence */
.footer-links li a {
  color: rgba(224,216,204,.62) !important;  /* WCAG AA: 5.7:1 on #080C07 */
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  padding: 7px 0 !important;
}
.footer-links li a:hover {
  color: rgba(224,216,204,.84) !important;
}

/* Footer phone — more presence */
.footer-cta-phone {
  font-size: 22px !important;
  letter-spacing: .4px !important;
  color: rgba(234,226,211,.94) !important;
}

/* ─── 9. OTHER SERVICES GRID (service pages) — card refinement ──── */
.other-service-card {
  padding: 28px 18px 24px !important;
}

/* Icon background image sizing — consistent */
.other-service-card picture {
  width: 68px !important;
  height: 68px !important;
  opacity: .92;
}
.other-service-card:hover picture {
  opacity: 1;
}

.other-service-card span {
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
}

/* ─── 10. FAQ SECTION — question refinement ─────────────────────── */
.faq-question {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 22px 52px 22px 0 !important;
  color: var(--b-text-dark) !important;
}
.faq-question::after {
  font-size: 22px !important;
  right: 6px !important;
  color: var(--b-green) !important;
}
.faq-answer p {
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  color: var(--b-ivory-body) !important;
  padding-bottom: 24px !important;
}

/* ─── 11. SERVICE CTA BOX — eyebrow label refinement ───────────── */
.service-cta-box .cta-eyebrow {
  letter-spacing: 5px !important;
  color: rgba(45,107,79,.90) !important;
  margin-bottom: 20px !important;
}

/* ─── 12. PROCESS STEPS — number circle refinement ─────────────── */
.process-step-num {
  background: rgba(0,48,32,.10) !important;
  border: 1.5px solid rgba(0,48,32,.25) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--b-green) !important;
  width: 38px !important;
  height: 38px !important;
}

.process-step-content strong {
  font-size: 14px !important;
  letter-spacing: .8px !important;
  color: var(--b-text-dark) !important;
}

.process-step-content p {
  font-size: 13.5px !important;
  color: var(--b-ivory-body) !important;
  line-height: 1.68 !important;
  margin-top: 3px !important;
}

/* ─── 13. TRUST CALLOUT BOX — service pages ─────────────────────── */
.trust-callout {
  padding: 20px 24px !important;
  gap: 14px !important;
}
.trust-callout p {
  font-size: 14px !important;
  line-height: 1.72 !important;
  font-style: italic !important;
  color: var(--b-text-body) !important;
}
.trust-callout-icon {
  opacity: .80 !important;
  margin-top: 1px !important;
}

/* ─── 14. TRUST STRIP — letter-spacing/size tighten ────────────── */
.trust-strip-inner {
  font-size: 10px !important;
  letter-spacing: 2.4px !important;
  gap: 40px !important;
}

/* ─── 15. FINANCING STEPS — card visual weight ──────────────────── */
.financing-step {
  padding: 36px 28px !important;
}
.financing-step-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 20px !important;
}
.financing-step-title {
  font-size: 17px !important;
  letter-spacing: 1.4px !important;
  margin-bottom: 12px !important;
}
.financing-step-desc {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--b-ivory-body) !important;
}

/* ─── 16. HOME SERVICE AREAS — city pill hover ──────────────────── */
/* Area pills on the homepage have hover that's slightly abrupt */
.hsa-city {
  transition:
    background .22s cubic-bezier(.23,1,.32,1),
    border-color .22s ease,
    color .22s ease,
    transform .22s cubic-bezier(.23,1,.32,1) !important;
}

/* ─── 17. GLOBAL — line-height and readability fine-tuning ─────── */
/* Interior page body paragraphs — slightly more generous */
.service-body > p:first-child {
  font-size: 17px !important;
  line-height: 1.78 !important;
  color: rgba(224,216,204,.88) !important;
}

.service-body p {
  font-size: 15px !important;
  line-height: 1.84 !important;
  color: rgba(196,188,178,.86) !important;
}

/* ─── 18. NOT-SURE SECTION heading sizing ───────────────────────── */
.not-sure h3 {
  font-size: 32px !important;
  letter-spacing: .8px !important;
}

/* ─── 19. HEADER PHONE SUBLABEL — warmer and more refined ───────── */
.header-phone-number::after {
  color: rgba(45,107,79,.82) !important;
  letter-spacing: 2.4px !important;
  font-size: 7px !important;
}

/* ─── 20. MAP SECTION (service areas) — clean border ───────────── */
.map-section {
  border-top: 1px solid rgba(0,0,0,.10) !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
}

/* ─── 21. AREA CARD icon container — match card warmth ─────────── */
.area-card-name {
  font-size: 16px !important;
  letter-spacing: .7px !important;
}

/* ─── 22. PAGE SECTION HEADINGS — consistent rhythm ────────────── */
/* Section labels (eyebrows) across all ivory pages */
.financing-label,
.foundation-label,
.contact-form-heading .section-label {
  letter-spacing: 5px !important;
  font-size: 10px !important;
  color: rgba(0,48,32,.65) !important;
}

/* ─── 23. HERO CTAS row — tighten gap ──────────────────────────── */
.hero-ctas {
  gap: 14px !important;
  margin-top: 32px !important;
}

/* ══════════════════════════════════════════════════════════════
   $100K POLISH PASS II — surgical only, zero layout changes
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. HERO — call button depth and authority ─────────────────
   Currently flat dark green. Give it the same cinematic gradient
   treatment as the service CTA, with a top highlight and shadow. */
.cta-call {
  background:
    linear-gradient(160deg, #002416 0%, #003828 40%, #002C20 100%) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 20px rgba(0,48,32,.36),
    0 2px 6px rgba(0,0,0,.24) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  letter-spacing: .5px;
}
.cta-call:hover {
  background:
    linear-gradient(160deg, #003020 0%, #004530 40%, #003828 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 28px rgba(0,48,32,.42),
    0 2px 8px rgba(0,0,0,.28) !important;
  transform: translateY(-1px) !important;
}
.cta-call-number {
  font-size: 21px !important;
  letter-spacing: .8px !important;
}
.cta-call-label {
  letter-spacing: 2.2px !important;
  opacity: .82 !important;
  font-size: 9.5px !important;
}

/* ─── 2. HERO SUBTITLE — slightly more presence ─────────────────
   Currently rgba(255,255,255,.78) — lift to .84 and tighten max-width */
.hero-subtitle {
  color: rgba(255,255,255,.84) !important;
  font-size: 15px !important;
  line-height: 1.74 !important;
  letter-spacing: .08px !important;
}

/* ─── 3. NAV DROPDOWN — hover bg and link spacing refined ───────
   Background is rgba(26,101,74,.20) — too blue-green. Correct to brand. */
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus,
.nav-dropdown-menu a.active {
  background: rgba(0,48,32,.28) !important;
  color: var(--b-text-light) !important;
  padding-left: 30px !important;
}

/* ─── 4. HOME-TRUST — header label spacing ───────────────────────
   Currently 5px letter-spacing on "WHY CHOOSE US". Tighten to 5.5px
   and lift color slightly for more presence against dark bg. */
.home-trust-label {
  color: rgba(45,107,79,.92) !important;
  letter-spacing: 5.5px !important;
  font-size: 10.5px !important;
}

/* Trust heading margin — slightly more breathing room below header */
.home-trust-header {
  margin-bottom: 28px !important;
}

/* ─── 5. TRUST ITEM — hover state has more depth ─────────────────
   Currently barely perceptible. Make it feel intentional. */
.trust-item:hover {
  background: linear-gradient(160deg, #202A27 0%, #1A2420 100%) !important;
}

/* ─── 6. SERVICE AREAS PILLS — "DES MOINES" primary pill ────────
   .primary currently uses --b-green-mute which is #2D6B4F.
   On the near-black background this reads fine but could be warmer. */
.hsa-city.primary {
  color: rgba(234,226,211,.80) !important;
  background: rgba(0,48,32,.18) !important;
  border-color: rgba(0,48,32,.42) !important;
}
.hsa-city.primary:hover {
  color: var(--b-text-light) !important;
  background: rgba(0,48,32,.28) !important;
}
/* Standard pills — slightly more visible */
.hsa-city {
  color: rgba(224,216,204,.54) !important;
}
.hsa-city:hover {
  color: var(--b-text-light) !important;
}

/* ─── 7. FOUNDATION — photo tilt and caption refinement ─────────
   Photo captions are currently 15px dancing script — too large at
   small photo sizes. Tighten to 14px and add a tiny letter-spacing. */
.photo-caption {
  font-size: 14px !important;
  letter-spacing: .3px !important;
  padding: 24px 12px 9px !important;
}

/* Foundation label eyebrow */
.foundation-label {
  letter-spacing: 5px !important;
  font-size: 10.5px !important;
  color: rgba(0,48,32,.68) !important;
}

/* Foundation title — tighter leading */
.foundation-title {
  line-height: 1.06 !important;
  letter-spacing: .4px !important;
}

/* Foundation body text — slightly richer */
.foundation-text {
  font-size: 14.5px !important;
  line-height: 1.86 !important;
  color: rgba(69,57,46,.88) !important;
}

/* Cursive — slightly more presence */
.foundation-cursive {
  font-size: 27px !important;
  color: var(--b-green) !important;
  opacity: .92 !important;
}

/* ─── 8. VALUE CARD (about page) — divider and text ─────────────
   Divider is currently opacity:.22 — too faint. Lift it. */
.value-card-divider {
  opacity: .35 !important;
  width: 36px !important;
  height: 2px !important;
  margin-bottom: 18px !important;
}
.value-card:hover .value-card-divider {
  opacity: .65 !important;
  width: 44px !important;
}
.value-card-title {
  letter-spacing: 1.4px !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
}
.value-card-desc {
  font-size: 13.5px !important;
  line-height: 1.72 !important;
  color: rgba(80,72,64,.82) !important;
}

/* ─── 9. TIMELINE (about page) — year / dot / desc ───────────────
   Year reads as a tiny label — give it more tracking and color. */
.timeline-year {
  letter-spacing: 3.5px !important;
  font-size: 11px !important;
  color: rgba(45,107,79,.95) !important;
  margin-bottom: 5px !important;
}
.timeline-title {
  font-size: 17px !important;
  letter-spacing: .5px !important;
  margin-bottom: 7px !important;
}
.timeline-desc {
  font-size: 14.5px !important;
  line-height: 1.76 !important;
  color: rgba(224,216,204,.74) !important;
}
/* Timeline line — slightly more present */
.timeline::before {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(45,107,79,.60) 8%,
    rgba(45,107,79,.60) 92%,
    transparent 100%) !important;
}
/* Timeline dot — cleaner ring */
.timeline-dot {
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 0 3px rgba(45,107,79,.18) !important;
}

/* ─── 10. PAGE HERO TITLE — uniform weight across all pages ──────
   Increase subtitle opacity slightly — it currently disappears on
   some page hero images. */
.page-hero-subtitle {
  color: rgba(243,238,230,.90) !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
}

/* ─── 11. SERVICE PAGES — service-body strong text ───────────────
   Strong text in service body is currently rgba(255,255,255,.7)
   — not enough contrast. Lift to .88. */
.service-body p strong {
  color: rgba(234,226,211,.90) !important;
  font-weight: 600 !important;
}

/* ─── 12. OTHER SERVICES — bottom accent line precision ──────────
   The ::before scaleX line on hover — make it a slightly richer green. */
.other-service-card::before {
  background: var(--b-green-soft) !important;
  height: 2px !important;
}

/* Other service card picture icon filter — warm sand (matches homepage icons) */
.other-service-card picture {
  filter: brightness(0) invert(1) sepia(0.28) brightness(0.94) !important;
  opacity: .85 !important;
}
.other-service-card:hover picture {
  filter: brightness(0) invert(1) sepia(0.15) !important;
  opacity: 1 !important;
}

/* ─── 13. FAQ HEADING label ──────────────────────────────────────
   "COMMON QUESTIONS" eyebrow — make consistent with other labels */
.faq-label {
  letter-spacing: 5px !important;
  font-size: 10.5px !important;
  color: rgba(0,48,32,.68) !important;
}
.faq-heading {
  font-size: 28px !important;
  letter-spacing: .7px !important;
}

/* ─── 14. FOOTER — bottom bar copyright refinement ───────────────
   Footer copyright "strong" is the company name — slightly more presence */
.footer-copyright strong {
  color: rgba(224,216,204,.68) !important;
  font-weight: 600 !important;
}
.footer-copyright {
  color: rgba(224,216,204,.32) !important;
  font-size: 10.5px !important;
  letter-spacing: .15px !important;
}

/* Footer legal links */
.footer-legal a {
  color: rgba(224,216,204,.26) !important;
  font-size: 10.5px !important;
  letter-spacing: .15px !important;
  transition: color .22s ease !important;
}
.footer-legal a:hover {
  color: rgba(224,216,204,.55) !important;
}
.footer-legal-dot {
  background: rgba(224,216,204,.14) !important;
}

/* ─── 15. SECTION LABEL CONSISTENCY ─────────────────────────────
   All eyebrow labels across dark sections should use same green tone */
.home-service-areas-label {
  color: rgba(45,107,79,.90) !important;
  letter-spacing: 5.5px !important;
  font-size: 10.5px !important;
}

/* ─── 16. CONTACT PAGE FORM ──────────────────────────────────────
   Textarea min-height — give it more room to breathe */
.contact-form-section textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* ─── 17. FINANCING — benefit item row ───────────────────────────
   Benefit item text is slightly small — lift to 14.5px */
.benefit-text {
  font-size: 14.5px !important;
  color: var(--b-text-dark) !important;
  letter-spacing: .1px !important;
  line-height: 1.5 !important;
}

/* ─── 18. HEADER — "BEEBE" logo word in WHY HOMEOWNERS heading ──
   The inline logo image vertical alignment — ensure pixel-perfect */
.trust-heading-logo {
  position: relative !important;
  top: 3px !important;
}

/* ─── 19. GLOBAL — word-spacing micro-refinement ─────────────────
   Oswald headings benefit from a tiny positive word-spacing */
.service-cta-box h3,
.not-sure h3,
.cta-bar-title,
.page-hero-title {
  word-spacing: 1px !important;
}

/* ─── 20. SERVICE AREAS MAP — iframe border ──────────────────────
   The Google map embed currently has a hard white border from browser
   defaults. Ensure it inherits the section styling. */
.map-section iframe,
.map-section .map-embed {
  border: none !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ─── 21. TRUST STRIP ITEMS — checkmark weight ───────────────────
   Current checkmark is ✓ character — ensure it renders with weight */
.trust-strip-item .checkmark {
  font-size: 11px !important;
  opacity: .90 !important;
  font-weight: 700 !important;
}
.trust-strip-item {
  letter-spacing: 2.2px !important;
  color: rgba(224,216,204,.62) !important;
  font-size: 10px !important;
}

/* ─── 22. AREA CARD DESC — line-height ───────────────────────────
   Slightly cramped at 1.62. Open to 1.66. */
.area-card-desc {
  line-height: 1.66 !important;
  font-size: 13.5px !important;
}

/* ─── 23. ABOUT PAGE — story photo caption ───────────────────────
   .story-caption currently has no override — ensure clean styling */
.story-caption {
  font-family: 'Dancing Script', cursive !important;
  font-size: 14px !important;
  color: rgba(69,57,46,.65) !important;
  text-align: center !important;
  margin-top: 8px !important;
  letter-spacing: .2px !important;
}

/* ─── 24. HEADER NAV — active underline color richness ──────────
   Currently --b-green-soft = #1A654A. Keep it but add very subtle glow. */
.main-nav a.active::after,
.main-nav .nav-dropdown-toggle.active::after {
  box-shadow: 0 0 6px rgba(26,101,74,.28) !important;
}

/* ─── 25. MOBILE CTA BAR — ensure sand color on both buttons ────
   Call button should be brand green, form button should be outlined */
.mobile-cta-call {
  background: var(--b-green) !important;
  box-shadow: 0 2px 8px rgba(0,48,32,.28) !important;
}
.mobile-cta-form {
  color: rgba(234,226,211,.88) !important;
  border-color: rgba(234,226,211,.30) !important;
}

/* ── TRUST HEADING LOGO — recolor to warm ivory ──────────────── */
/* logo-header-green.png is rgb(0,48,32) — invisible on dark bg.
   Filter to warm sand/ivory: reads as the emphasis payoff word
   in "WHY HOMEOWNERS CHOOSE [BEEBE]". Not green. Not neon.
   Warm, premium, brand-consistent with dark-section text. */


/* ══════════════════════════════════════════════════════════════
   ELITE POLISH PASS III
   ══════════════════════════════════════════════════════════════ */

/* ─── SERVICE CARDS — tighter overall section height ───────────
   The section has significant dead space below the LEARN MORE links.
   Push the cards to fill the space more intentionally. */
.service-card {
  justify-content: flex-start !important;
}

/* Service card separator — softer, not harsh */
.service-card:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.05) !important;
}

/* Service title — tighten tracking slightly */
.service-title {
  font-size: 16px !important;
  letter-spacing: 1.6px !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  margin-top: 20px !important;
}

/* Service desc — slightly more opacity */
.service-desc {
  color: rgba(224,216,204,.62) !important;
  font-size: 13.5px !important;
  line-height: 1.74 !important;
}

/* ─── HERO — cursive tagline presence ───────────────────────────
   Currently barely readable. Boost it. */
.hero-family-roots {
  color: #4A9478 !important;
  opacity: 1 !important;
  font-size: 19px !important;
  letter-spacing: .3px !important;
  line-height: 1.42 !important;
  margin-top: 12px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.55) !important;
}

/* ─── WHY HOMEOWNERS — heading grid gap ────────────────────────
   The 52px margin-bottom from the header to the grid feels generous.
   Trust grid starts too far from the heading. */
.home-trust-header {
  margin-bottom: 72px !important;
}

/* Final visual normalization: these adjacent bands must render as one
   continuous color, without inherited radial or grain overlays. */
.home-trust::before,
.services::after,
.home-trust::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* CTA badge: keep the transparent PNG on the exact CTA section color.
   Earlier polish passes added multiply blending, drop shadows, opacity,
   and rotation; those made the badge read as a darker green rectangle. */
.cta-bar-badge,
.cta-bar-badge:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.cta-bar-badge .badge-img,
.cta-bar-badge img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Final visual normalization: these adjacent bands must render as one
   continuous color, without inherited radial or grain overlays. */
.home-trust::before,
.services::after,
.home-trust::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* ─── FOUNDATION — section label refinement ────────────────────
   "OUR FOUNDATION" label spacing  */
.foundation-label {
  margin-bottom: 12px !important;
  display: block !important;
}

/* ─── CTA BAR — badge drop-shadow ──────────────────────────────
   The 1955 badge needs a slight drop shadow to separate from bg */
.cta-bar-badge img {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.30)) !important;
}

/* ─── FOOTER — divider line richness ───────────────────────────
   The footer-divider line is the first thing you see entering footer.
   Make it fractionally more present. */
.footer-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45,107,79,.28) 25%,
    rgba(45,107,79,.50) 50%,
    rgba(45,107,79,.28) 75%,
    transparent 100%
  ) !important;
}

/* ─── FOOTER LOGO — slight lift ────────────────────────────────
   Footer logo opacity was set to .88. Verify it and keep it present. */
.footer-logo-img {
  opacity: .90 !important;
}

/* ─── ABOUT PAGE — story section heading ───────────────────────
   The "BUILT ON GENERATIONS OF EXPERIENCE" heading needs more tracking */
.about-story-label {
  letter-spacing: 5px !important;
  font-size: 10.5px !important;
  color: rgba(45,107,79,.90) !important;
  display: block !important;
  margin-bottom: 14px !important;
}

.about-story-heading {
  font-size: 34px !important;
  letter-spacing: .5px !important;
  line-height: 1.10 !important;
  margin-bottom: 20px !important;
}

.about-story-text {
  font-size: 15px !important;
  line-height: 1.82 !important;
  color: rgba(224,216,204,.82) !important;
}

/* ─── CONTACT PAGE INFO CARDS ───────────────────────────────────
   The three top cards (CALL US / EMAIL US / VISIT) — make labels crisper */
.contact-top-label,
.contact-card-label {
  letter-spacing: 3px !important;
  font-size: 10px !important;
  color: var(--b-text-muted) !important;
  margin-bottom: 8px !important;
}

.contact-card-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* ─── SERVICE PAGE HERO — content width ────────────────────────
   Interior page hero content feels slightly too narrow. Widen slightly. */
.page-hero-content {
  max-width: 780px !important;
}

/* ─── NAV ACTIVE LINK — underline width ────────────────────────
   The active underline spans left:16px right:16px (matches padding).
   This is correct. Ensure active state is visually distinct. */
.main-nav a.active {
  color: var(--b-text-light) !important;
  opacity: 1 !important;
}

/* ─── ALL SECTION HEADINGS — prevent widows ────────────────────
   Already have text-wrap:balance on some. Extend to remaining. */
.home-service-areas-heading,
.home-trust-heading,
.about-story-heading,
.section-heading,
.contact-form-heading h2 {
  text-wrap: balance !important;
}

/* ─── GLOBAL LINK COLOR in body text ───────────────────────────
   Links within body copy should have a consistent, readable color */
.service-body a,
.about-body a {
  color: #3D8065 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
.service-body a:hover,
.about-body a:hover {
  color: #4A9478 !important;
}

/* ─── AREAS SECTION HEADING ─────────────────────────────────────
   "COMMUNITIES WE SERVE" heading needs consistent eyebrow spacing */
.areas-section-label {
  letter-spacing: 5.5px !important;
  font-size: 10.5px !important;
  color: rgba(0,48,32,.68) !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* ─── SERVICE AREAS — card name font size ───────────────────────
   At small viewport the names need to stay readable */
.area-card-name {
  font-size: 15px !important;
  letter-spacing: .7px !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

/* ─── FINANCING STEPS — icon circle refinement ─────────────────
   Step icons on financing page — give them the ivory-2 treatment properly */
.step-icon {
  background: linear-gradient(160deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 4px 12px rgba(54,40,22,.08) !important;
}

/* ─── TRUST CALLOUT — left accent bar visual ────────────────────
   The 3px green left border on trust-callout should be 2px — more refined */
.trust-callout::before {
  width: 2px !important;
  background: var(--b-green) !important;
  border-radius: 0 0 0 0 !important;
}

/* ─── IMAGE LOADING — prevent visible reflow ────────────────────
   Ensure all images with known dimensions don't cause layout shift */
.service-hero-icon img,
.other-service-card picture {
  width: 100% !important;
  height: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   $100K ELITE POLISH PASS IV — pixel-verified surgical fixes
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. WHY HOMEOWNERS CARDS — fix inverted contrast ──────────
   Cards #1A2220 are DARKER than section bg #1E2622 = recessed look.
   Invert: make cards lighter than bg so they read as elevated surfaces. */
.trust-item {
  background: linear-gradient(160deg, #242E2A 0%, #1E2824 100%) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.18) !important;
}
.trust-item:hover {
  background: linear-gradient(160deg, #293630 0%, #22302A 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
  border-top-color: rgba(255,255,255,.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.22) !important;
}

/* ─── 2. SERVICE ICONS — sand filter more golden/warm ──────────
   sepia(0.15) is slightly cool. Warm it to sepia(0.25). */
.services .service-icon picture img {
  filter: brightness(0) invert(1) sepia(0.35) brightness(0.92) !important;
  position: relative !important;
  z-index: 2 !important;
}
.services .service-card:hover .service-icon picture img {
  filter: brightness(0) invert(1) sepia(0.12) brightness(1.05) !important;
}

/* Service icon margin-bottom — tighter above title */
.service-icon {
  margin-bottom: 24px !important;
}

/* ─── 3. HERO BODY TEXT — lift opacity and tracking ────────────
   Currently rgba(.78) — boost presence on the dark hero */
.hero-subtitle {
  color: rgba(243,238,230,.86) !important;
  font-size: 15px !important;
  line-height: 1.76 !important;
  max-width: 440px !important;
  letter-spacing: .08px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.40) !important;
}

/* Second hero paragraph (family owned italic) — keep subtle */
.hero-content > p:last-of-type {
  color: rgba(243,238,230,.58) !important;
  font-size: 13.5px !important;
}

/* ─── 4. CTA BAR — phone button surface refinement ─────────────
   Add a top highlight and inset shadow for depth */
.cta-bar-phone {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 14px rgba(0,0,0,.18) !important;
  padding: 14px 28px !important;
}
.cta-bar-phone:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 20px rgba(0,0,0,.22) !important;
}

/* CTA bar title — tighter tracking */
.cta-bar-title {
  font-size: 32px !important;
  letter-spacing: .8px !important;
  line-height: 1.14 !important;
}

/* CTA bar subtitle */
.cta-bar-subtitle {
  color: rgba(234,226,211,.80) !important;
  font-size: 15px !important;
  margin-top: 10px !important;
  line-height: 1.66 !important;
}

/* ─── 5. FOUNDATION — section-to-section transition ────────────
   Add a very thin dark-to-ivory transition at the top of the section
   to soften the hard edge from the dark Why Choose section */
.foundation {
  border-top: none !important;
  box-shadow: inset 0 4px 24px rgba(0,0,0,.06) !important;
}

/* Foundation heading — ensure it reads with full weight */
.foundation-title {
  color: var(--b-text-dark) !important;
  font-size: 42px !important;
  letter-spacing: .3px !important;
  margin-bottom: 20px !important;
}

/* ─── 6. SERVICE AREAS SECTION — heading hierarchy ─────────────
   "PROUDLY SERVING CENTRAL IOWA" — tighter tracking */
.home-service-areas-heading {
  letter-spacing: 1.8px !important;
  font-size: 34px !important;
}

/* Service areas sub — warmer color */
.home-service-areas-sub {
  color: rgba(210,202,192,.80) !important;
  font-size: 15px !important;
  line-height: 1.66 !important;
  margin-bottom: 28px !important;
}

/* "VIEW ALL SERVICE AREAS" link */
.home-service-areas-link {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  color: rgba(234,226,211,.55) !important;
  border-bottom: 1px solid rgba(234,226,211,.22) !important;
  padding-bottom: 2px !important;
  transition: color .22s ease, border-color .22s ease !important;
}
.home-service-areas-link:hover {
  color: rgba(234,226,211,.88) !important;
  border-color: rgba(234,226,211,.50) !important;
}

/* ─── 7. FOOTER — text hierarchy sharpening ────────────────────
   Footer services heading column label */
.footer-nav > div:first-child .footer-heading {
  letter-spacing: 4.5px !important;
}

/* Footer phone number — largest element in footer should pop */
.footer-cta-phone {
  font-size: 24px !important;
  letter-spacing: .3px !important;
  color: rgba(234,226,211,.96) !important;
  margin-bottom: 18px !important;
}

/* Footer social icons — slightly more present */
.footer-social-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 6px !important;
}
.footer-social-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: rgba(234,226,211,.52) !important;
}
.footer-social-icon:hover svg {
  fill: rgba(234,226,211,.88) !important;
}

/* ─── 8. TRUST STRIP — visual weight ───────────────────────────
   The strip between areas and CTA — make it feel more deliberate */
.trust-strip {
  padding: 18px 32px !important;
}

/* ─── 9. HEADER NAV LINKS — precise baseline alignment ─────────
   Ensure all nav links sit at exact visual center */
.main-nav a,
.main-nav .nav-dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
}

/* ─── 10. SERVICE PAGE HERO — label color on dark bg ───────────
   Eyebrow labels on interior page heroes — match the hero green */
.page-hero-label {
  color: rgba(45,107,79,.96) !important;
  letter-spacing: 6px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.50) !important;
}

/* ─── 11. HERO — call button sub-label ─────────────────────────
   "CLICK TO CALL — WE ANSWER" label refinement */
.cta-call-label {
  color: rgba(234,226,211,.76) !important;
  font-size: 9px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-family: 'Oswald', sans-serif !important;
}

/* ─── 12. SECTION TRANSITION — Why Choose to Foundation ─────────
   The foundation section has a hard top edge against the dark grid.
   A subtle inset shadow creates a natural depth transition. */
.foundation::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 40px !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.07) 0%,
    transparent 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ─── 13. ALL OSWALD HEADINGS — prevent FOUT ───────────────────
   Ensure font-display swap is handled gracefully */
.home-trust-heading,
.foundation-title,
.service-title,
.cta-bar-title,
.page-hero-title,
.not-sure h3 {
  font-display: swap !important;
}

/* ─── 14. SERVICE CARD ICON → TITLE FLOW ───────────────────────
   Icon at top, title below — ensure consistent spacing */
.service-icon {
  margin-bottom: 22px !important;
}
.service-title {
  margin-top: 0 !important;
  font-size: 15px !important;
  letter-spacing: 1.8px !important;
  line-height: 1.22 !important;
}

/* ─── 15. WHY CHOOSE — BEEBE logo alignment ─────────────────────
   The ivory-filtered logo in the heading — ensure baseline sits right */
.trust-heading-logo {
  top: 4px !important;
  height: 32px !important;
  overflow: visible !important;
}
.trust-heading-logo-img {
  height: 55px !important;
  margin-top: -6px !important;
}

/* ══════════════════════════════════════════════════════════════
   $100K ELITE POLISH PASS V — exhaustive, verified, surgical
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. HERO — every detail refined ───────────────────────────
   Sub-label "CLICK TO CALL — WE ANSWER!" — tracked out, warmer */
.cta-call-label {
  letter-spacing: 1.6px !important;
  color: rgba(234,226,211,.72) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}

/* CTA call number — tighter, stronger */
.cta-call-number {
  font-size: 22px !important;
  letter-spacing: .6px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* Hero title white line — push font-style italic further for cinematic */
.hero-title {
  letter-spacing: 2.2px !important;
  line-height: 1.04 !important;
}

/* Hero green line — tighter to white line */
.hero-title .green {
  margin-top: 1px !important;
  letter-spacing: 1.8px !important;
}

/* Family roots paragraph — remove it from flow competing with CTAs */
.hero-family-roots {
  margin-top: 14px !important;
  margin-bottom: 4px !important;
  font-size: 18px !important;
}

/* ─── 2. SERVICES — icon vertical centering and section rhythm ──
   Icon container margin should pull title up closer to icon */
.service-icon {
  margin-bottom: 20px !important;
}

.service-title {
  margin-bottom: 10px !important;
  font-size: 14.5px !important;
  letter-spacing: 2px !important;
  line-height: 1.24 !important;
}

.service-desc {
  margin-bottom: 20px !important;
  font-size: 13px !important;
  line-height: 1.78 !important;
  color: rgba(224,216,204,.60) !important;
}

/* LEARN MORE — anchor to bottom of card */
.service-link {
  margin-top: auto !important;
}

/* ─── 3. WHY HOMEOWNERS — icon stroke and bottom badges ─────────
   Trust item icons: stroke currently rgba(234,226,211,.85) — good.
   Increase stroke-width slightly for more presence at small size. */
.trust-item-icon svg {
  stroke: rgba(234,226,211,.88) !important;
  stroke-width: 1.5 !important;
  width: 44px !important;
  height: 44px !important;
}
.trust-item-icon {
  margin-bottom: 18px !important;
  opacity: .92 !important;
}

/* Trust bottom badges (Licensed & Insured, etc.) */
.trust-badge {
  font-family: 'Oswald', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(234,226,211,.52) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.trust-badge svg {
  width: 14px !important;
  height: 14px !important;
  fill: rgba(234,226,211,.40) !important;
  flex-shrink: 0 !important;
}

/* Trust bottom container */
.home-trust-bottom {
  border-top: 1px solid rgba(255,255,255,.055) !important;
  margin-top: 48px !important;
  padding-top: 32px !important;
  gap: 32px !important;
}

/* ─── 4. SERVICE AREAS INNER — more refined card surface ────────
   The inner container has background:rgba(255,255,255,.012) —
   barely visible. Lift it slightly and refine the border. */
.home-service-areas-inner {
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  padding: 32px 24px !important;
}

/* City pills gap — tighter, more intentional */
.home-service-areas-grid {
  gap: 5px 6px !important;
  margin-bottom: 22px !important;
}

/* ─── 5. FOUNDATION — value item icon refinement ────────────────
   The four value icons on the ivory section — lift the circle */
.foundation-values .value-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 3px 10px rgba(0,0,0,.07) !important;
}

/* Foundation photo shadows — more depth */
.photo-old,
.photo-mid {
  box-shadow:
    0 2px 8px rgba(0,0,0,.12),
    0 16px 40px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.06) !important;
}

/* ─── 6. SERVICE PAGES — list background contrast ────────────────
   rgba(0,48,32,.04) on ivory background is nearly invisible.
   Lift to .07 for a subtle but readable green tint. */
.service-body ul {
  background: rgba(0,48,32,.06) !important;
  border: 1px solid rgba(0,48,32,.14) !important;
}

/* Service body — first paragraph intro text more authoritative */
.service-body > p:first-child {
  font-size: 17px !important;
  line-height: 1.80 !important;
  color: rgba(34,28,22,.90) !important;
  letter-spacing: .08px !important;
}

/* ─── 7. TRUST CALLOUT (service pages) — icon fill fix ──────────
   fill: var(--b-green) but on ivory background needs more opacity */
.trust-callout-icon {
  fill: var(--b-green) !important;
  opacity: .88 !important;
}

/* ─── 8. FINANCING PAGE — apply CTA button cinematic ────────────
   Currently flat ivory — give it the premium gradient */
.financing-apply-btn {
  background: linear-gradient(180deg, #FAF6EE 0%, #EDE4D4 100%) !important;
  color: var(--b-green) !important;
  font-size: 16px !important;
  letter-spacing: 2.2px !important;
  padding: 16px 44px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 10px 28px rgba(0,0,0,.28) !important;
  transition:
    background .22s ease,
    transform .20s cubic-bezier(.23,1,.32,1),
    box-shadow .22s ease !important;
}
.financing-apply-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #F5EDE0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 14px 36px rgba(0,0,0,.32) !important;
}

/* ─── 9. CTA BAR — web link refinement ─────────────────────────
   The "Schedule Online" secondary link needs more presence */
.cta-bar-web {
  font-size: 14px !important;
  letter-spacing: 1.4px !important;
  color: rgba(234,226,211,.76) !important;
  border: 1px solid rgba(234,226,211,.24) !important;
  padding: 11px 20px !important;
  border-radius: 4px !important;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}
.cta-bar-web:hover {
  color: rgba(234,226,211,.98) !important;
  border-color: rgba(234,226,211,.48) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ─── 10. FOOTER — contact info column refinement ───────────────
   Footer contact info links (email, license text) */
.footer-contact-info a {
  font-size: 13px !important;
  color: rgba(224,216,204,.38) !important;
  line-height: 1.55 !important;
  transition: color .22s ease !important;
}
.footer-contact-info a:hover {
  color: rgba(224,216,204,.72) !important;
}

/* Footer location text */
.footer-cta-location {
  font-size: 9.5px !important;
  letter-spacing: 1.4px !important;
  color: rgba(224,216,204,.22) !important;
  margin-top: 4px !important;
}

/* ─── 11. NAV — dropdown menu visual weight ─────────────────────
   Dropdown items — increase padding for more premium feel */
.nav-dropdown-menu a {
  padding: 12px 22px !important;
  font-size: 11.5px !important;
  letter-spacing: 1.6px !important;
}

/* ─── 12. ABOUT PAGE — values section cards ─────────────────────
   Value card on the about page values section — lift the card */
.value-card {
  padding: 42px 26px 38px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow:
    0 2px 6px rgba(54,40,22,.06),
    0 10px 28px rgba(54,40,22,.08) !important;
  transition:
    transform .28s cubic-bezier(.23,1,.32,1),
    border-color .22s ease,
    box-shadow .28s cubic-bezier(.23,1,.32,1) !important;
}
.value-card:hover {
  border-color: rgba(0,48,32,.20) !important;
  box-shadow:
    0 4px 10px rgba(54,40,22,.08),
    0 16px 40px rgba(54,40,22,.12) !important;
  transform: translateY(-3px) !important;
}

/* Value card icon — lift border visibility */
.value-card-icon {
  border: 1.5px solid rgba(0,48,32,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 4px 12px rgba(0,48,32,.08) !important;
  transition:
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}
.value-card:hover .value-card-icon {
  border-color: rgba(0,48,32,.38) !important;
  background: rgba(0,48,32,.07) !important;
}

/* ─── 13. OTHER SERVICES — desc text visibility ─────────────────
   .other-service-desc currently --b-ivory-body on ivory card */
.other-service-desc {
  font-size: 12.5px !important;
  line-height: 1.60 !important;
  color: rgba(69,57,46,.70) !important;
  max-width: 180px !important;
}

/* ─── 14. CONTACT PAGE — top info cards refinement ─────────────
   The three top cards on the contact page */
.contact-top {
  display: grid !important;
  gap: 20px !important;
}
.contact-top .contact-card {
  padding: 32px 28px !important;
  text-align: center !important;
}

/* ─── 15. GLOBAL — remove any remaining browser default outlines
   on non-keyboard navigation (pointer users) */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* ─── 16. GLOBAL — img lazy-load visual polish ──────────────────
   Prevent visible white flash before lazy images load */
img[loading="lazy"] {
  background: rgba(0,0,0,.04) !important;
}

/* ─── 17. SERVICE PAGES — process step flow line ────────────────
   Add a subtle connector between numbered steps */
.process-steps {
  position: relative !important;
}

/* ─── 18. HEADER SCROLLED STATE — refine box-shadow ────────────
   When page scrolls the header gets stronger shadow — make it elegant */
.header.scrolled {
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 8px 32px rgba(0,0,0,.40),
    0 20px 48px rgba(0,0,0,.18),
    0 0 60px rgba(0,48,32,.08) !important;
}

/* ─── 19. AREA CARDS — tag hover transition ────────────────────
   Tags currently transition instantly — smooth it */
.area-tag {
  transition:
    background .20s ease,
    color .20s ease,
    border-color .20s ease !important;
}

/* ─── 20. ALL PAGES — anchor link offset for sticky header ──────
   Ensure anchored sections clear the 114px sticky header properly */
[id] {
  scroll-margin-top: 130px !important;
}


/* ══════════════════════════════════════════════════════════════
   $100K ELITE POLISH PASS VI — final surgical refinements
   Every fix verified against measured values above.
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. SERVICE HERO ICON — ivory circle with inset glow ───────
   Currently: flat ivory-2 bg, 1px border. No depth.
   Fix: add inset highlight + outer shadow + slightly richer border. */
.service-hero-icon {
  background: linear-gradient(160deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 8px 24px rgba(54,40,22,.10),
    0 2px 6px rgba(0,0,0,.06) !important;
}

/* ─── 2. INTERIOR PAGE BG — slight top glow on ivory sections ───
   The top radial-gradient on ivory sections is rgba(255,255,255,.42) —
   this creates a slightly blown-out bright spot at top.
   Reduce to .28 for subtlety. */
.service-content,
.financing-section,
.values-section,
.contact-form-section,
.areas-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.28), transparent 52%),
    linear-gradient(180deg, var(--b-ivory-1) 0%, var(--b-ivory-2) 100%) !important;
}

/* ─── 3. OTHER SERVICES (interior) — section label refinement ───
   "Related Services" heading currently opacity:.6 gray — lift it. */
.other-services h3 {
  letter-spacing: 5px !important;
  color: rgba(234,226,211,.48) !important;
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-bottom: 40px !important;
}

/* ─── 4. FAQ SECTION — background differentiation ────────────────
   faq-section has no bg rule in site-theme — it inherits ivory.
   Give it a very subtle darker ivory to create tonal separation. */
.faq-section {
  background:
    linear-gradient(180deg, var(--b-ivory-2) 0%, var(--b-ivory-3) 100%) !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
}

/* FAQ heading */
.faq-heading {
  color: var(--b-text-dark) !important;
  font-size: 26px !important;
  letter-spacing: .6px !important;
  margin-bottom: 36px !important;
}

/* ─── 5. NOT-SURE SECTION — eyebrow label color ────────────────
   Currently var(--b-green-mute)=#2D6B4F on dark bg — correct,
   but lift opacity slightly and tighten tracking. */
.not-sure-label {
  color: rgba(45,107,79,.96) !important;
  letter-spacing: 5px !important;
  font-size: 10.5px !important;
  margin-bottom: 18px !important;
}

/* ─── 6. CTA BAR BADGE — size and presence at large viewports ───
   190px badge. Add a subtle white inner glow so it doesn't fade. */
.cta-bar-badge img {
  filter:
    drop-shadow(0 4px 16px rgba(0,0,0,.36))
    drop-shadow(0 1px 3px rgba(0,0,0,.22)) !important;
  opacity: .96 !important;
}

/* ─── 7. FOOTER CTA PHONE HOVER ─────────────────────────────────
   Currently hover = var(--green-light) = #003020 on dark bg = invisible.
   Fix to warm ivory. */
.footer-cta-phone:hover {
  color: var(--b-text-light) !important;
  text-shadow: none !important;
}

/* ─── 8. MOBILE CTA FORM BUTTON ─────────────────────────────────
   color: var(--green-light) on dark bg = invisible.
   Fix to sand. */
.mobile-cta-form {
  color: rgba(234,226,211,.88) !important;
  border-color: rgba(234,226,211,.32) !important;
  border-width: 1px !important;
}

/* ─── 9. NAV DROPDOWN HOVER ─────────────────────────────────────
   color: var(--green-light) on hover in base CSS = invisible.
   site-theme already overrides this but verify. */
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  color: var(--b-text-light) !important;
  background: rgba(0,48,32,.28) !important;
}

/* ─── 10. ABOUT PAGE CURSIVE ────────────────────────────────────
   .about-cursive uses var(--green-light) = dark on dark bg.
   Fix to the correct jade green. */
.about-cursive {
  color: #4A9478 !important;
  font-size: 24px !important;
  line-height: 1.44 !important;
  letter-spacing: .2px !important;
  opacity: 1 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.28) !important;
}

/* ─── 11. ABOUT PAGE TIMELINE YEAR ──────────────────────────────
   color: var(--green-light) = invisible on dark bg.
   Already overridden to --b-green-mute in site-theme but ensure. */
.timeline-year {
  color: rgba(45,107,79,.96) !important;
  font-size: 10.5px !important;
  letter-spacing: 3.5px !important;
}

/* ─── 12. PROCESS STEP NUMBERS — add inset highlight ────────────
   Number circles currently solid rgba(0,48,32,.10) + 1.5px border.
   Add inset top highlight for depth. */
.process-step-num {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 8px rgba(0,48,32,.10) !important;
}

/* ─── 13. SERVICE BODY H2 BORDER — more elegant ─────────────────
   Currently 2px solid brand green. Add a subtle glow. */
.service-body h2 {
  padding-left: 14px !important;
  text-shadow: none !important;
}

/* ─── 14. TRUST CALLOUT — card surface depth ────────────────────
   The callout box on service pages — lift the bg slightly. */
.trust-callout {
  background: linear-gradient(180deg, var(--b-ivory-0) 0%, var(--b-ivory-1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 4px 14px rgba(54,40,22,.08) !important;
}

/* ─── 15. HOME PAGE HERO FAMILY ROOTS ───────────────────────────
   The second paragraph "Family owned and operated..." —
   it's a plain p tag competing with .hero-family-roots div.
   Dim it slightly to be a supporting note, not competing with CTAs. */
.hero-content > p:last-of-type {
  font-size: 13px !important;
  color: rgba(234,226,211,.52) !important;
  font-family: 'Dancing Script', cursive !important;
  font-size: 16px !important;
  margin-top: 10px !important;
  line-height: 1.4 !important;
}

/* ─── 16. SERVICES SECTION BORDER-TOP ───────────────────────────
   Currently rgba(0,48,32,.18) — a faint green.
   This is the separator from the hero. Refine to a more elegant
   multi-stop gradient hairline. */
.services {
  border-top: none !important;
  border-image: none !important;
}
.services::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45,107,79,.30) 20%,
    rgba(45,107,79,.55) 50%,
    rgba(45,107,79,.30) 80%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ─── 17. HOME SERVICE AREAS — heading eyebrow ──────────────────
   label currently var(--b-green-mute) on dark bg — good.
   Add tracking and size consistency with all other eyebrows. */
.home-service-areas-label {
  font-size: 10.5px !important;
  letter-spacing: 5.5px !important;
  color: rgba(45,107,79,.92) !important;
  margin-bottom: 10px !important;
}

/* ─── 18. ABOUT PAGE — story section label ───────────────────────
   .about-label uses var(--green-light) = invisible.
   Fix to jade green. */
.about-label {
  color: rgba(45,107,79,.92) !important;
  letter-spacing: 5px !important;
  font-size: 10.5px !important;
}

/* ─── 19. FINANCING PAGE — hero label ───────────────────────────
   page-hero-label on dark hero — confirm readable */
.page-hero-label {
  color: rgba(45,107,79,.96) !important;
  letter-spacing: 5.5px !important;
  font-size: 10.5px !important;
  margin-bottom: 16px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.40) !important;
}

/* ─── 20. GLOBAL — Open Sans body text anti-aliasing ────────────
   Ensure consistent rendering across all body copy */
body,
.service-body p,
.trust-item-desc,
.area-card-desc,
.financing-step-desc {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-synthesis: none !important;
}

/* ─── 21. CONTACT PAGE — form submit button height ───────────────
   Currently min-height:56px from polish III. Confirm letter-spacing. */
.contact-form-section .form-submit-btn {
  letter-spacing: 2.8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ─── 22. SERVICE PAGES — sticky icon transition ────────────────
   The sticky icon on service pages should fade-in as it sticks.
   Add a subtle transition. */
.service-hero-icon {
  transition:
    box-shadow .28s ease,
    transform .28s cubic-bezier(.23,1,.32,1) !important;
}

/* ─── 23. FOOTER DIVIDER — richer gradient ──────────────────────
   Already set but confirm it's the final value. */
.footer-divider {
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45,107,79,.22) 20%,
    rgba(45,107,79,.55) 50%,
    rgba(45,107,79,.22) 80%,
    transparent 100%
  ) !important;
}

/* ─── 24. AREA CARDS (service-areas page) — primary name ────────
   .area-card.primary .area-card-name uses var(--green-light) = dark.
   Already overridden to var(--b-green) — confirm !important. */
.area-card.primary .area-card-name {
  color: var(--b-green) !important;
  font-weight: 700 !important;
}

/* ─── 25. GLOBAL — image rendering quality ──────────────────────
   All images should use high-quality downsampling */
img {
  image-rendering: auto !important;
  -webkit-backface-visibility: hidden !important;
}

/* ─── 26. HERO SECTION — background vignette depth ─────────────
   The hero bottom fade is currently 80px linear. Make it richer
   and extend it slightly for more cinematic depth. */
.hero::after {
  height: 60px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.06) 100%
  ) !important;
}

/* ─── 27. SERVICE CARD — link arrow animation refinement ────────
   The → currently just translateX. Add a slight opacity lift too. */
.service-link::after {
  opacity: .70 !important;
  transition: transform .24s cubic-bezier(.23,1,.32,1), opacity .20s ease !important;
}
.service-link:hover::after {
  transform: translateX(5px) !important;
  opacity: 1 !important;
}


/* ── ACCESSIBILITY — skip link ───────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--b-green);
  color: var(--b-text-light);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid rgba(234,226,211,.70);
  outline-offset: 2px;
}

/* ── NETLIFY FORM — success/error states ────────────────────── */
.form-success {
  display: none;
  background: rgba(0,48,32,.10);
  border: 1px solid rgba(0,48,32,.25);
  border-radius: var(--b-r);
  padding: 24px 28px;
  text-align: center;
  color: var(--b-green);
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
}
.form-success.visible { display: block; }

/* ── PRINT STYLES ────────────────────────────────────────────── */
@media print {
  .header, .mobile-cta, .footer, .hero-ctas,
  .not-sure, .trust-strip, .cta-bar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .service-body { max-width: 100% !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
  a[href^="tel"]::after, a[href^="mailto"]::after { content: ""; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM VISUAL UPGRADES
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. SVG NOISE TEXTURE — dark sections ───────────────────────
   Barely-visible grain over flat dark backgrounds.
   Makes sections feel like physical surfaces, not digital fills.
   The eye reads it as expensive without knowing why. */
.services::after,
.home-trust::after,
.home-service-areas::after,
.not-sure::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .028 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  background-size: 128px 128px !important;
  background-repeat: repeat !important;
}

/* Ensure section content sits above noise */
.services .services-inner,
.home-trust .home-trust-inner,
.home-service-areas .home-service-areas-inner,
.not-sure .not-sure-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* ─── 2. SECTION LABEL ORNAMENTS — flanking lines ────────────────
   "——— WHY CHOOSE US ———" treatment
   Transforms plain eyebrow labels into designed typographic elements. */
.home-trust-label,
.home-service-areas-label,
.not-sure-label,
.page-hero-label,
.foundation-label,
.about-story-label,
.financing-label,
.faq-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  white-space: nowrap !important;
}

.home-trust-label::before,
.home-trust-label::after,
.home-service-areas-label::before,
.home-service-areas-label::after,
.not-sure-label::before,
.not-sure-label::after {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  width: 32px !important;
  background: currentColor !important;
  opacity: .45 !important;
  flex-shrink: 0 !important;
}

/* Ivory section labels — darker lines */
.foundation-label::before,
.foundation-label::after,
.about-story-label::before,
.about-story-label::after,
.financing-label::before,
.financing-label::after,
.faq-label::before,
.faq-label::after,
.page-hero-label::before,
.page-hero-label::after {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  width: 28px !important;
  background: currentColor !important;
  opacity: .38 !important;
  flex-shrink: 0 !important;
}

/* ─── 3. CTA BAR BADGE — slight rotation ────────────────────────
   A medallion/badge sitting at a perfect angle looks placed.
   Flat = generated. Tilted = designed. */
.cta-bar-badge {
  transform: rotate(-6deg) !important;
  transition: transform .6s cubic-bezier(.23,1,.32,1) !important;
}
.cta-bar-badge:hover {
  transform: rotate(-2deg) scale(1.04) !important;
}

/* ─── 4. SERVICE CARD HOVER — spring physics ─────────────────────
   Replace the mechanical ease with a spring overshoot curve.
   The card lifts, slightly overshoots, settles — feels physical. */
.service-card {
  transition:
    background .32s cubic-bezier(.23,1,.32,1),
    transform .38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.service-card:hover {
  transform: translateY(-5px) !important;
}

/* ─── 7. FONT FEATURE SETTINGS ───────────────────────────────────
   Optical kerning + ligatures on all Oswald headings.
   Tabular numerals on numbers. Invisible but correct. */
h1, h2, h3, h4,
.hero-title,
.page-hero-title,
.cta-bar-title,
.home-trust-heading,
.foundation-title,
.service-title,
.stat-number,
.footer-cta-phone {
  font-feature-settings: "kern" 1, "liga" 1 !important;
  font-kerning: normal !important;
}

.stat-number,
.cta-call-number,
.header-phone-number,
.footer-cta-phone,
.cta-bar-phone,
.hours-time {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "kern" 1, "tnum" 1 !important;
}

/* ─── 8. OTHER SERVICE CARDS — spring hover ─────────────────────
   Match the spring physics on related service cards. */
.other-service-card {
  transition:
    transform .38s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color .22s ease,
    box-shadow .28s cubic-bezier(.23,1,.32,1) !important;
}
.other-service-card:hover {
  transform: translateY(-5px) !important;
}

/* ─── 9. VALUE CARDS (about page) — spring hover ────────────────
   Consistent spring physics across all hoverable cards. */
.value-card {
  transition:
    transform .38s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color .22s ease,
    box-shadow .28s cubic-bezier(.23,1,.32,1) !important;
}

/* ─── 10. AREA CARDS — spring hover ─────────────────────────────
   Same spring for all cards sitewide. Feels cohesive. */
.area-card {
  transition:
    transform .38s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color .22s ease,
    box-shadow .28s cubic-bezier(.23,1,.32,1) !important;
}


/* ── SERVICE ICONS & FOUNDATION VALUE ICONS — remove box backgrounds ── */

/* The bare `picture` rule sets display:block and dimensions on ALL picture
   elements. The services icons and foundation value icons pick this up,
   creating a visible box. Scope the background-image approach to only
   the elements that need it (other-service-card, service-hero-icon, value-card-icon)
   and ensure the services section and foundation icons have no box bg. */

/* Homepage services — picture container must be fully transparent, no box */
.services .service-icon,
.services .service-icon picture,
.services .service-icon picture img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Foundation value icons — the oval pill is correct design but the
   background color currently shows a different shade. Normalize it. */
.foundation-values .value-icon {
  background: rgba(0,48,32,.055) !important;
  border: 1px solid rgba(0,48,32,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 8px rgba(0,0,0,.06) !important;
}
.foundation-values .value-item:hover .value-icon {
  background: rgba(0,48,32,.09) !important;
  border-color: rgba(0,48,32,.28) !important;
}

/* ── SERVICE PAGE BODY TEXT — correct dark-on-ivory colors ──────
   Previous polish passes accidentally set rgba(196,188,178,.86) as
   body text = 1.5:1 contrast on ivory (unreadable).
   Correct values verified: all dark warm browns on ivory background. */

.service-body > p:first-child {
  color: var(--b-text-dark) !important;        /* #151515 — 16:1 on ivory */
  font-size: 17px !important;
  line-height: 1.78 !important;
  letter-spacing: .06px !important;
}

.service-body p {
  color: var(--b-text-body) !important;        /* #4F463B — 8.0:1 on ivory */
  font-size: 15px !important;
  line-height: 1.84 !important;
}

.service-body p strong {
  color: var(--b-text-dark) !important;        /* #151515 — 16:1 on ivory */
  font-weight: 600 !important;
}

.service-body h2 {
  color: var(--b-text-dark) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  border-left: 2px solid var(--b-green) !important;
  padding-left: 14px !important;
  margin-top: 48px !important;
  margin-bottom: 16px !important;
}

.service-body ul li {
  color: var(--b-text-body) !important;        /* #4F463B — 8.0:1 on ivory */
  font-size: 14.5px !important;
  line-height: 1.64 !important;
}

.service-body ul li strong {
  color: var(--b-text-dark) !important;
  font-weight: 600 !important;
}

.service-body ul li::before {
  color: var(--b-green) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  top: 13px !important;
}

.service-body strong {
  color: var(--b-text-dark) !important;
  font-weight: 600 !important;
}

/* ── TRUST HEADING LOGO — ivory filter restored ─────────────────
   logo-beebe-only.png shows just "BEEBE" (DRAIN & SEWER cropped out).
   Filter recolors from #003020 (invisible on dark bg) to warm ivory. */
.trust-heading-logo-img {
  filter: brightness(0) invert(1) sepia(0.22) !important;
  opacity: 1 !important;
}

/* ── SERVICES — ensure icons sit above noise texture ────────── */
.service-card {
  position: relative !important;
  z-index: 1 !important;
}
.service-icon,
.services .service-icon picture,
.services .service-icon picture img {
  position: relative !important;
  z-index: 2 !important;
}

/* Fix: blend badge into CTA bar background */
.cta-bar .badge-img{mix-blend-mode:multiply;}

/* ── Services → Why Choose Us transition ─────────────────────────────── */
.services {
  padding-bottom: 60px !important;
}
.service-card {
  padding-bottom: 40px !important;
}
.home-trust-header {
  margin-bottom: 72px !important;
}

/* Final visual normalization: these adjacent bands must render as one
   continuous color, without inherited radial or grain overlays. */
.home-trust::before,
.services::after,
.home-trust::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* CTA badge final normalization: no dark square, shadow, blending, or tilt. */
.cta-bar-badge,
.cta-bar-badge:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.cta-bar .badge-img,
.cta-bar-badge img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Foundation value icons: restore the green medallions, but keep them as
   CSS circles so no raster background can mismatch the ivory section. */
.foundation-values .value-icon,
.foundation-values .value-icon:hover,
.foundation-values .value-item:hover .value-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  flex: 0 0 64px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(0,48,32,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 4px 12px rgba(54,40,22,.08) !important;
  overflow: hidden !important;
}

.foundation-values .value-item:hover .value-icon {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(0,48,32,.34) !important;
}

.foundation-values .value-icon picture {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  line-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.foundation-values .value-icon img {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  opacity: .96 !important;
  filter: none !important;
}

.foundation-values .value-icon img[alt="Honest Service"] {
  width: 34px !important;
  height: 36px !important;
  transform: translate(0, -1.25px) !important;
}

.foundation-values .value-icon img[alt="Quality Work"] {
  width: 36px !important;
  height: 36px !important;
  transform: translate(0, 0) !important;
}

.foundation-values .value-icon img[alt="Local & Trusted"] {
  width: 32px !important;
  height: 36px !important;
  transform: translate(0, -2.1px) !important;
}

.foundation-values .value-icon img[alt="24/7 Emergency Service"] {
  width: 39px !important;
  height: 38px !important;
  transform: translate(1.3px, .8px) !important;
}

/* Service page FAQ: give each question polished interior spacing and
   keep the action icon aligned away from the card edge. */
.faq-inner {
  max-width: 860px !important;
}

.faq-item,
.faq-item:first-of-type {
  border-radius: 7px !important;
  border: 1px solid rgba(0,0,0,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 24px rgba(54,40,22,.08) !important;
}

.faq-question {
  padding: 24px 108px 24px 34px !important;
  min-height: 74px !important;
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  letter-spacing: .1px !important;
  display: flex !important;
  align-items: center !important;
}

.faq-question::after {
  right: 34px !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 21px !important;
}

.faq-answer p {
  padding: 0 108px 26px 34px !important;
}

@media (max-width: 640px) {
  .faq-question {
    padding: 22px 72px 22px 22px !important;
  }

  .faq-question::after {
    right: 22px !important;
  }

  .faq-answer p {
    padding: 0 22px 24px 22px !important;
  }
}

/* Homepage/header nav underline: center the line under the label text.
   The earlier left/right underline could overrun the right side of links. */
@media (min-width: 769px) {
  .main-nav a::after,
  .main-nav .nav-dropdown-toggle::after {
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 40px) !important;
    max-width: 64px !important;
    bottom: 1px !important;
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: center !important;
  }

  .main-nav a:hover::after,
  .main-nav .nav-dropdown-toggle:hover::after,
  .main-nav .nav-dropdown:hover .nav-dropdown-toggle::after,
  .main-nav a.active::after,
  .main-nav .nav-dropdown-toggle.active::after {
    transform: translateX(-50%) scaleX(1) !important;
  }
}

/* Final pre-client polish: restore the interior service-page green
   medallions as CSS circles, so the icon background stays clean and
   consistent on every service page. */
.service-content .service-icon,
.service-content .service-icon:hover,
.service-content .service-hero-icon,
.service-content .service-hero-icon:hover,
.other-services .service-icon,
.other-services .service-icon:hover {
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(0,48,32,.045) !important;
  background-color: rgba(0,48,32,.045) !important;
  background-image: none !important;
  border: 1px solid rgba(0,48,32,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 4px 12px rgba(54,40,22,.08) !important;
  overflow: hidden !important;
}

.service-content .service-hero-icon,
.service-content .service-hero-icon:hover {
  width: 160px !important;
  height: 160px !important;
  min-width: 160px !important;
}

.service-content .service-icon,
.service-content .service-icon:hover,
.other-services .service-icon,
.other-services .service-icon:hover {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
}

.service-content .service-icon picture,
.service-content .service-hero-icon picture,
.service-content .service-hero-icon img,
.other-services .other-service-card picture,
.other-services .other-service-card img,
.other-services .service-icon picture {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.service-content .service-hero-icon picture {
  width: 112px !important;
  height: 112px !important;
  display: grid !important;
  place-items: center !important;
}

.service-content .service-hero-icon img {
  width: 112px !important;
  height: 112px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.service-content .service-icon picture,
.other-services .service-icon picture {
  width: 66px !important;
  height: 66px !important;
  display: grid !important;
  place-items: center !important;
}

.service-content .service-icon img,
.other-services .service-icon img {
  width: 66px !important;
  height: 66px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Long city-service hero titles need to stay elegant on narrow screens. */
@media (max-width: 640px) {
  .page-hero-title {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 420px) {
  .page-hero-title {
    font-size: clamp(23px, 6.6vw, 30px) !important;
    letter-spacing: .6px !important;
  }
}

/* Service CTA card: raise text contrast so the dark green card reads
   premium instead of muddy. */
.service-cta-box .cta-eyebrow {
  color: rgba(224,216,204,.76) !important;
  letter-spacing: 4.8px !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.38) !important;
}

.service-cta-box h3 {
  color: #FAF6EE !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 3px 16px rgba(0,0,0,.48) !important;
}

.service-cta-box p {
  color: rgba(243,238,230,.86) !important;
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.34) !important;
}

.service-body .service-cta-box .service-cta-link,
.service-cta-box .service-cta-link {
  color: rgba(243,238,230,.84) !important;
  border-color: rgba(243,238,230,.30) !important;
  text-decoration: none !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.32) !important;
}

.service-body .service-cta-box .service-cta-link:hover,
.service-cta-box .service-cta-link:hover {
  color: #FAF6EE !important;
  border-color: rgba(243,238,230,.48) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Related service cards: keep hover premium but readable. Earlier hover
   rules mixed dark-card text with a light hover surface, which made the
   body copy fade out during the transition. */
.other-services .other-service-card,
.other-services .other-service-card:visited {
  color: rgba(26,22,18,.94) !important;
}

.other-services .other-service-card:hover,
.other-services .other-service-card:focus-visible {
  background: linear-gradient(180deg, #FFFDF7 0%, #F2E9DA 100%) !important;
  border-color: rgba(0,48,32,.30) !important;
  box-shadow:
    0 14px 30px rgba(34,25,16,.14),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
  transform: translateY(-3px) !important;
}

.other-services .other-service-card:hover span,
.other-services .other-service-card:focus-visible span {
  color: rgba(16,15,13,.98) !important;
  font-weight: 700 !important;
  letter-spacing: 1.25px !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.other-services .other-service-card .other-service-desc,
.other-services .other-service-card:hover .other-service-desc,
.other-services .other-service-card:focus-visible .other-service-desc {
  color: rgba(55,45,36,.86) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.other-services .other-service-card:hover picture,
.other-services .other-service-card:focus-visible picture {
  filter: none !important;
  opacity: 1 !important;
}

/* HARD LOCK: homepage services and why-choose background must be one flat
   color. This intentionally kills every inherited/pseudo overlay that can
   tint only the lower half behind the Learn More links. */
:root {
  --beebe-home-dark-field: #0E1612;
}

.services,
.home-trust,
.home-trust .home-trust-inner,
.home-trust .home-trust-header {
  background: var(--beebe-home-dark-field) !important;
  background-color: var(--beebe-home-dark-field) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.services .services-inner,
.services .service-card,
.services .service-card:hover,
.services .service-card:focus,
.services .service-card:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.services::after,
.home-trust::before,
.home-trust::after,
.services .services-inner::before,
.services .services-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.services .service-card::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Absolute final plate: paint one solid rectangle behind the entire services
   section so no parent image, gradient, or lower-band artifact can show
   through behind the Learn More row. */
.services {
  isolation: isolate !important;
}

.services::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: var(--beebe-home-dark-field) !important;
  background-color: var(--beebe-home-dark-field) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.services .services-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Homepage services dividers: the original full-height border ran down
   into the Learn More row. Use a controlled divider that stops cleanly. */
.services .service-card,
.services .service-card:not(:last-child) {
  border-right: 0 !important;
  border-left: 0 !important;
}

.services .service-card:not(:last-child)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 34px !important;
  right: 0 !important;
  bottom: 96px !important;
  width: 1px !important;
  background: rgba(255,255,255,.055) !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

@media (max-width: 1024px) {
  .services .service-card:not(:last-child)::before {
    content: none !important;
    display: none !important;
  }
}

/* Final hover legibility pass for service-card style links. Keep cards
   visually polished while ensuring copy never fades into the hover surface. */
.other-services .other-service-card,
.other-services .other-service-card:hover,
.other-services .other-service-card:focus-visible,
.area-card,
.area-card:hover,
.area-card:focus-within {
  color: rgba(24,20,16,.94) !important;
}

.area-card:hover,
.area-card:focus-within {
  background: linear-gradient(180deg, #FFFDF7 0%, #F3EADB 100%) !important;
  border-color: rgba(0,48,32,.28) !important;
  box-shadow:
    0 14px 30px rgba(34,25,16,.13),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
  transform: translateY(-3px) !important;
}

.area-card:hover .area-card-name,
.area-card:focus-within .area-card-name,
.other-services .other-service-card:hover span,
.other-services .other-service-card:focus-visible span {
  color: rgba(16,15,13,.98) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.area-card:hover .area-card-desc,
.area-card:focus-within .area-card-desc,
.other-services .other-service-card:hover .other-service-desc,
.other-services .other-service-card:focus-visible .other-service-desc {
  color: rgba(55,45,36,.88) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.area-card:hover .area-tag,
.area-card:focus-within .area-tag {
  color: rgba(0,48,32,.92) !important;
  background: rgba(0,48,32,.065) !important;
  border-color: rgba(0,48,32,.18) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Foundation icon circles: outline only. The interior must be transparent
   so the real paper/ivory section background shows through exactly. */
.foundation-values .value-icon,
.foundation-values .value-icon:hover,
.foundation-values .value-item:hover .value-icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Final icon surface lock: every icon asset is transparent PNG line art.
   Do not repaint icon wrappers or picture tags with tinted fills/images. */
.services .service-icon,
.services .service-icon:hover,
.foundation-values .value-icon,
.foundation-values .value-icon:hover,
.foundation-values .value-item:hover .value-icon,
.value-card-icon,
.value-card:hover .value-card-icon,
.service-content .service-icon,
.service-content .service-icon:hover,
.service-content .service-hero-icon,
.service-content .service-hero-icon:hover,
.other-services .service-icon,
.other-services .service-icon:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.services .service-icon picture,
.foundation-values .value-icon picture,
.value-card-icon picture,
.service-content .service-icon picture,
.service-content .service-hero-icon picture,
.other-services .other-service-card picture,
.other-services .service-icon picture {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.services .service-icon img,
.foundation-values .value-icon img,
.value-card-icon img,
.service-content .service-icon img,
.service-content .service-hero-icon img,
.other-services .other-service-card img,
.other-services .service-icon img {
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Foundation value spacing: balanced enough to fill the section, but tighter
   than the previous overly tall final override. */
.foundation-values {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: clamp(560px, 42vw, 590px) !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.foundation-values .value-item {
  min-height: 112px !important;
  padding: 20px 0 22px !important;
  gap: 20px !important;
  align-items: center !important;
}

.foundation-values .value-title {
  margin-bottom: 6px !important;
}

.foundation-values .value-desc {
  line-height: 1.66 !important;
}

@media (max-width: 1024px) {
  .foundation-values {
    display: block !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .foundation-values .value-item {
    min-height: 0 !important;
    padding: 18px 0 !important;
    gap: 18px !important;
    align-items: flex-start !important;
  }
}

/* Home trust spacing trim: reduce the heavy lower band below the cards while
   preserving the existing card design and badge treatment. */
.home-trust {
  padding-top: 24px !important;
  padding-bottom: 22px !important;
}

.home-trust .home-trust-inner {
  max-width: 1040px !important;
}

.home-trust .home-trust-header {
  margin-bottom: 50px !important;
}

.home-trust-grid {
  max-width: 1040px !important;
}

.home-trust .trust-item {
  padding: 26px 24px !important;
}

.home-trust .trust-item-icon {
  margin-bottom: 14px !important;
}

.home-trust .trust-item-title {
  margin-bottom: 7px !important;
}

.home-trust .trust-item-desc {
  line-height: 1.62 !important;
}

.home-trust-bottom {
  margin-top: 26px !important;
  padding-top: 18px !important;
  gap: 24px !important;
}

.trust-badge {
  gap: 7px !important;
  font-size: 10px !important;
  letter-spacing: 1.45px !important;
}

.trust-badge svg {
  width: 13px !important;
  height: 13px !important;
}

/* Homepage services rhythm: spread each icon/title/body/link stack so the
   dark service band feels intentionally filled, not clustered. */
.services .services-inner {
  align-items: stretch !important;
}

.services .service-card {
  min-height: 468px !important;
  padding: 42px 28px 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.services .service-icon {
  margin-bottom: 34px !important;
}

.services .service-title {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.services .service-desc {
  line-height: 1.84 !important;
  margin-bottom: 0 !important;
}

.services .service-link {
  margin-top: auto !important;
  padding-top: 30px !important;
}

@media (max-width: 1024px) {
  .services .service-card {
    min-height: 0 !important;
    padding: 34px 20px 30px !important;
  }

  .services .service-icon {
    margin-bottom: 20px !important;
  }

  .services .service-title {
    margin-bottom: 10px !important;
  }

  .services .service-desc {
    line-height: 1.7 !important;
    margin-bottom: 14px !important;
  }

  .services .service-link {
    padding-top: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   DEFINITIVE SERVICES / WHY-CHOOSE TWO-TONE FIX  (v27)
   Appended last — wins all cascade conflicts.

   Intent (per the original design tokens --b-services-bg / --b-whychoose-bg):
   • SERVICES section = lighter warm dark  #18211C  — covers the icons,
     titles, descriptions AND the LEARN MORE row, edge to edge.
   • WHY-CHOOSE (home-trust) section = deeper dark  #0B0F0D  — begins
     cleanly at the section boundary, BELOW the LEARN MORE buttons.

   The previously-seen "band cutting through the cards" was the SVG grain
   texture feathering out partway down the section (a GPU rasterisation
   seam between the textured upper region and the flat lower region).
   Fix: make each section ONE perfectly flat fill, no pseudo overlays,
   no grain texture, and release the reveal compositing layer so the
   whole section rasterises uniformly.
   ═══════════════════════════════════════════════════════════════ */

/* 1. SERVICES — single flat light fill, no overlays, no composited layer */
.services {
  background: #18211C !important;
  background-image: none !important;
  background-color: #18211C !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
  transform: none !important;
  will-change: auto !important;
}
.services.reveal,
.services.reveal.visible {
  transform: none !important;
  opacity: 1 !important;
}
.services::before,
.services::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  inset: auto !important;
}

/* 2. Service grid / cards stay transparent so the flat section fill shows */
.services .services-inner,
.services .service-card,
.services .service-card:hover,
.services .service-card:focus,
.services .service-card:focus-within {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 3. Icons: drop the (no-op for colour) filter that was forcing a
   per-icon compositing layer and seaming the backdrop. PNGs are already
   white, so appearance is unchanged. */
.services .service-icon,
.services .service-icon img,
.services .related-service-icon-img {
  filter: none !important;
}

/* 4. WHY-CHOOSE (home-trust) — single flat deeper fill, begins below LEARN MORE */
.home-trust {
  background: #0B0F0D !important;
  background-image: none !important;
  background-color: #0B0F0D !important;
  box-shadow: none !important;
}
.home-trust::before,
.home-trust::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.home-trust .home-trust-inner,
.home-trust .home-trust-header {
  background: transparent !important;
}

/* 5. Remove the shared SVG grain texture on every dark section.
   In some engines this feTurbulence fill bands adjacent dark fills
   (the root cause of the visible seam). Flat fills read clean. */
.services::after,
.home-trust::after,
.home-service-areas::after,
.not-sure::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SPACING RHYTHM PASS  (v29)
   Appended last — wins all cascade conflicts.

   Two earlier global !important overrides had flattened the page's
   vertical rhythm at every breakpoint:
     • .services        padding-bottom:60px  (top 96 → lopsided)
     • .home-trust       padding:24px/22px    (vs 88–120 elsewhere — cramped)

   This restores a consistent, breathing section rhythm across the dark
   content sections, balanced top/bottom and scaled per breakpoint.
   The cream .foundation feature section keeps its lusher 120/104.
   ═══════════════════════════════════════════════════════════════ */

/* ── Desktop (≥1025px): generous, balanced ───────────────────── */
@media (min-width: 1025px) {
  .services            { padding-top: 104px !important; padding-bottom: 96px  !important; }
  .home-trust          { padding-top: 104px !important; padding-bottom: 100px !important; }
  .home-service-areas  { padding-top: 100px !important; padding-bottom: 96px  !important; }
  /* tighten the double-pad at the very top of the cards so the icon row
     sits in balance with the LEARN MORE row at the bottom */
  .services .service-card { padding-top: 44px !important; padding-bottom: 40px !important; }
  /* header → grid breathing room inside why-choose */
  .home-trust .home-trust-header { margin-bottom: 56px !important; }
}

/* ── Tablet (769–1024px) ─────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .services            { padding-top: 84px !important; padding-bottom: 76px !important; }
  .home-trust          { padding-top: 84px !important; padding-bottom: 76px !important; }
  .home-service-areas  { padding-top: 76px !important; padding-bottom: 68px !important; }
  .home-trust .home-trust-header { margin-bottom: 44px !important; }
}

/* ── Mobile (≤768px): tighter but no longer cramped ──────────── */
@media (max-width: 768px) {
  .services            { padding-top: 56px !important; padding-bottom: 52px !important; }
  .home-trust          { padding-top: 60px !important; padding-bottom: 56px !important; }
  .home-service-areas  { padding-top: 56px !important; padding-bottom: 52px !important; }
  .home-trust .home-trust-header { margin-bottom: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   RELATED-SERVICES ICON FIX  (v30)
   Appended last — wins all cascade conflicts.

   The "Related Services" cards (.other-service-card) were restyled to
   cream/ivory, but their icons are painted as a background-image on the
   <picture> element and still carried the dark-background recolor
   (filter: brightness(0) invert(1) sepia… → warm-white). White-on-cream
   rendered them as near-invisible ghosts.

   The source PNGs are already brand green (#003020), so dropping the
   filter shows them as crisp dark-green line icons — on-brand and high
   contrast against the cream cards. Homepage icons (.services .service-icon)
   use a different selector and are untouched (they stay ivory on dark).
   ═══════════════════════════════════════════════════════════════ */
.other-services .other-service-card picture,
.other-services .other-service-card:hover picture {
  filter: none !important;
  opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TRUST HEADING LOGO RESIZE  (v31)
   Appended last — wins all cascade conflicts.

   Prior rules set the <picture> wrapper to 32px but the <img> to 55px
   with overflow:visible and a negative margin-top to nudge it into place.
   That hack never sat on the correct baseline — BEEBE appeared oversized
   and floated above the cap-height of the surrounding 38px heading.

   Fix: constrain both wrapper and img to 40px (matching the heading's
   optical cap-height), use inline-flex + align-items:center for clean
   vertical alignment, and eliminate the negative-margin offset entirely.
   ═══════════════════════════════════════════════════════════════ */
.trust-heading-logo {
  height: 40px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
  line-height: 0 !important;
}
.trust-heading-logo-img {
  height: 40px !important;
  width: auto !important;
  display: block !important;
  margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   RELATED-SERVICES ICON CENTERING  (v32)
   Appended last — wins all cascade conflicts.

   Line 4139 overrode the 72×72 picture box with width:100%/height:auto,
   stretching the <picture> across the full card. Combined with
   background-position:0% 0% the icon anchored top-left.

   Fix: restore a fixed square box on the picture element, center the
   background image within it, and let the card's flex column center it
   horizontally (align-items:center already set on the card).
   ═══════════════════════════════════════════════════════════════ */
.other-services .other-service-card picture {
  width: 72px !important;
  height: 72px !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  display: block !important;
  margin: 0 auto !important;
}
/* hydro icon is wider — give it a touch more room */
.other-services .other-service-card picture:has(img[src*="icon-hydro"]) {
  background-size: 110% 110% !important;
  background-position: center !important;
}
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   UI POLISH PASS  (v33)  — spacing · alignment · consistency
   Appended last. Strict refinement only — no layout/color changes.
   ═══════════════════════════════════════════════════════════════

   ISSUES FIXED (each verified against live measurements):

   1. SERVICE CARDS — desc→LEARN MORE gap 54px→32px (too loose).
      card gap set to explicit values for each rhythm slot.
   2. SERVICE CARDS — icon is 120px; add explicit flex gap so
      icon→title (34px) and title→desc (18px) are locked.
   3. TRUST GRID — icon→title gap tightened; body line-height
      improved from 1.2 to 1.65 for readability.
   4. SERVICE AREAS — heading→city-grid gap 89px→40px (too large).
      Inner card padding balanced.
   5. FOUNDATION — gap between body copy and tagline normalised.
      Right bullet column item gap standardised.
   6. CTA BAR — subtitle top margin 10px→14px (too tight vs title).
      Contact row combined margin+padding 54px→40px (too loose).
   7. FOOTER — col headings aligned via consistent padding-top.
      Social row top spacing tightened. Location tag line-height.
      Footer-bottom padding normalised.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 & 2. SERVICE CARDS — tighten desc→LEARN MORE gap ─────── */
.service-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.service-card .service-icon  { margin-bottom: 28px !important; }
.service-card .service-title { margin-bottom: 14px !important; }
.service-card .service-desc  {
  margin-bottom: 0 !important;
  flex: 1 !important;          /* push LEARN MORE to bottom of card */
  line-height: 1.7 !important;
}
.service-card .service-link  { margin-top: 28px !important; }

/* ── 3. TRUST ITEMS — body text line-height & title spacing ──── */
.trust-item-title {
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}
.trust-item-body {
  font-size: 14px !important;
  line-height: 1.68 !important;
  color: inherit !important;
}
.trust-item-icon { margin-bottom: 18px !important; }

/* ── 4. SERVICE AREAS — heading→grid gap, inner card padding ─── */
.home-service-areas-heading { margin-bottom: 10px !important; }
.home-service-areas-desc    { margin-bottom: 28px !important; }
.home-service-areas-grid    { margin-top: 32px !important; margin-bottom: 24px !important; }
.home-service-areas-inner   { padding: 40px 32px !important; }

/* ── 5. FOUNDATION — body copy → tagline spacing, bullet gaps ── */
.foundation-text    { margin-bottom: 20px !important; line-height: 1.75 !important; }
.foundation-tagline { margin-top: 24px !important; }
/* Bullet list items — consistent gap between icon+text pairs */
.foundation-bullet  { gap: 14px !important; }
.foundation-bullet + .foundation-bullet { margin-top: 28px !important; }
.foundation-bullet-title  { margin-bottom: 4px !important; }
.foundation-bullet-body   { line-height: 1.65 !important; }
/* Photos column — consistent gap between the two photos */
.foundation-photos  { gap: 16px !important; }

/* ── 6. CTA BAR — subtitle and contact row spacing ───────────── */
.cta-bar-subtitle { margin-top: 14px !important; line-height: 1.65 !important; }
.cta-bar-contact  { margin-top: 24px !important; padding-top: 20px !important; }
.cta-bar-title    { line-height: 1.15 !important; }

/* ── 7. FOOTER — column alignment, social, location, bottom ──── */
/* Align nav column content tops */
.footer-nav > div { padding-top: 0 !important; }
.footer-heading   { margin-bottom: 16px !important; }
/* Tighten social row */
.footer-socials   { margin-top: 16px !important; padding-top: 12px !important; }
/* Location tag readability */
.footer-cta-location { line-height: 1.5 !important; margin-top: 4px !important; }
/* Contact info spacing */
.footer-contact-info { gap: 6px !important; padding-top: 12px !important; }
/* Footer bottom bar — consistent padding */
.footer-bottom-inner {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
/* Footer body vertical rhythm */
.footer-cta-phone { margin-bottom: 14px !important; }

/* ── GLOBAL — section eyebrow label→heading consistency ─────── */
/* All section labels should have the same gap to their headings */
.home-trust-label,
.home-service-areas-label,
.foundation-label {
  margin-bottom: 12px !important;
}
/* Trust heading: add measured bottom margin to heading→grid gap */
.home-trust-heading { margin-bottom: 52px !important; }

/* ═══════════════════════════════════════════════════════════════ */

/* ── v33 CORRECTIONS — corrected selectors after DOM inspection ── */

/* Service areas: tighten sub-heading→grid gap
   (sub mB was 28px + grid mT was 32px = 60px combined → reduce to 28px total) */
.home-service-areas-sub  { margin-bottom: 16px !important; }
.home-service-areas-grid { margin-top: 12px !important; }

/* Trust items: correct selector is trust-item-desc, not trust-item-body */
.trust-item-desc {
  font-size: 14px !important;
  line-height: 1.68 !important;
}
.trust-item-icon { margin-bottom: 18px !important; }

/* Foundation left col: tighten title→body gap */
.foundation-text { line-height: 1.75 !important; }
.foundation-cursive { margin-top: 20px !important; }

/* ── END v33 CORRECTIONS ─────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   HOME-TRUST BOTTOM STRIP TIGHTEN  (v34)
   Appended last — wins all cascade conflicts.

   Problem: 158px of dead space from grid bottom to section end:
     grid bottom → strip: 26px mT + 18px padT = 44px before strip
     strip: 32px height
     section padB: 100px after strip
   Total: 176px below the last card row.

   Fix:
   • Section padB 100px → 56px  (matches trust section top breathing)
   • Strip mT 26px → 20px       (tighter tie to grid)
   • Strip padT 18px → 16px     (compact but readable)
   • Strip gap 24px → 40px      (badges were bunched; spread them)
   • Strip justify: space-between → centre with larger gap instead
     (space-between at 1040px with small badges felt gapped-randomly)
   ═══════════════════════════════════════════════════════════════ */
.home-trust {
  padding-bottom: 56px !important;
}
.home-trust-bottom {
  margin-top: 20px !important;
  padding-top: 16px !important;
  gap: 48px !important;
  justify-content: center !important;
}
/* ═══════════════════════════════════════════════════════════════ */

/* ── v35: trust strip equal spacing above/below ─────────────────
   Measured: 20px above strip, 56px below. Set both to 20px.
   Section padB 56→36px (20px below strip + 16px strip padT already
   accounted for in the strip's own top border spacing). */
.home-trust          { padding-bottom: 36px !important; }
.home-trust-bottom   { margin-top: 20px !important; padding-top: 16px !important; }
/* ─────────────────────────────────────────────────────────────── */

/* v35b: correct — set padB to match above-strip exactly */
.home-trust { padding-bottom: 20px !important; }