/* =========================================================
     0. DESIGN TOKENS
     ========================================================= */
     :root {
        /* Brand — Eco forest green */
        --green-900: #1B4332;
        --green-800: #20573F;
        --green-700: #2D6A4F;
        --green-600: #40916C;
        --green-500: #52B788;
        --green-050: #E9F5EF;
  
        /* Accent — Safety orange / gold */
        --orange-600: #E65100;
        --orange-500: #FF7A00;
        --orange-400: #FF9838;
        --orange-050: #FFF1E3;
  
        /* Neutrals */
        --charcoal: #1E293B;
        --ink: #0F172A;
        --slate-700: #334155;
        --slate-600: #475569;
        --slate-400: #94A3B8;
        --off-white: #F8F9FA;
        --white: #FFFFFF;
        --border: #E2E8F0;
        --gold: #F2B705;
  
        /* Typography */
        --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
        --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  
        /* Radii */
        --r-sm: 10px;
        --r: 16px;
        --r-lg: 24px;
        --r-full: 999px;
  
        /* Shadows */
        --sh-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .10);
        --sh: 0 10px 25px -8px rgba(15, 23, 42, .18);
        --sh-lg: 0 26px 55px -18px rgba(15, 23, 42, .32);
        --glow-orange: 0 12px 30px -6px rgba(255, 122, 0, .55);
        --glow-green: 0 12px 30px -8px rgba(45, 106, 79, .45);
  
        /* Layout */
        --container: 1180px;
        --ease: cubic-bezier(.22, .61, .36, 1);
      }
  
      /* =========================================================
       1. RESET & BASE
       ========================================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
      }
  
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%
      }
  
      body {
        font-family: var(--font-body);
        color: var(--charcoal);
        background: var(--off-white);
        line-height: 1.6;
        font-size: 16px;
        overflow-x: hidden;
      }
  
      img {
        max-width: 100%;
        display: block
      }
  
      a {
        color: inherit;
        text-decoration: none
      }
  
      button {
        font-family: inherit;
        cursor: pointer;
        border: 0;
        background: none
      }
  
      ul {
        list-style: none
      }
  
      h1,
      h2,
      h3,
      h4 {
        font-family: var(--font-display);
        line-height: 1.04;
        font-weight: 800;
        letter-spacing: .4px;
        color: var(--ink)
      }
  
      :focus-visible {
        outline: 3px solid var(--orange-500);
        outline-offset: 3px;
        border-radius: 6px
      }
  
      /* =========================================================
       2. LAYOUT HELPERS
       ========================================================= */
      .container {
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: 20px
      }
  
      .section {
        padding: 76px 0
      }
  
      .section,
      .contact-section {
        scroll-margin-top: 88px
      }
  
      .section-alt {
        background: var(--white)
      }
  
      .section-head {
        max-width: 660px;
        margin: 0 auto 48px;
        text-align: center
      }
  
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: .78rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--green-700);
        background: var(--green-050);
        border: 1px solid #CDE8DC;
        padding: 7px 14px;
        border-radius: var(--r-full);
        margin-bottom: 16px;
      }
  
      .section-head h2 {
        font-size: clamp(2.1rem, 4.6vw, 3.3rem);
        text-transform: uppercase
      }
  
      .section-head p {
        color: var(--slate-600);
        font-size: 1.06rem;
        margin-top: 14px
      }
  
      .accent {
        color: var(--orange-600)
      }
  
      .txt-green {
        color: var(--green-700)
      }
  
      /* =========================================================
       3. BUTTONS & PILLS
       ========================================================= */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-weight: 700;
        font-size: 1rem;
        padding: 15px 26px;
        border-radius: var(--r-full);
        transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease;
        white-space: nowrap;
        line-height: 1;
      }
  
      .btn svg {
        width: 19px;
        height: 19px
      }
  
      .btn-orange {
        background: var(--orange-500);
        color: var(--ink);
        box-shadow: var(--glow-orange)
      }
  
      .btn-orange:hover {
        background: var(--orange-400);
        transform: translateY(-3px);
        box-shadow: 0 18px 38px -8px rgba(255, 122, 0, .65)
      }
  
      .btn-green {
        background: var(--green-700);
        color: var(--white);
        box-shadow: var(--glow-green)
      }
  
      .btn-green:hover {
        background: var(--green-600);
        transform: translateY(-3px)
      }
  
      .btn-outline {
        background: transparent;
        color: var(--white);
        border: 2px solid rgba(255, 255, 255, .55)
      }
  
      .btn-outline:hover {
        background: rgba(255, 255, 255, .12);
        border-color: #fff;
        transform: translateY(-3px)
      }
  
      .btn-ghost {
        background: var(--white);
        color: var(--green-800);
        border: 1.5px solid var(--border);
        box-shadow: var(--sh-sm)
      }
  
      .btn-ghost:hover {
        border-color: var(--green-500);
        transform: translateY(-3px)
      }
  
      .btn-lg {
        padding: 18px 34px;
        font-size: 1.08rem
      }
  
      .btn-block {
        width: 100%
      }
  
      /* Pulse ring on Call-Now buttons */
      .pulse {
        position: relative
      }
  
      .pulse::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        animation: pulseRing 2.2s var(--ease) infinite;
        pointer-events: none;
      }
  
      @keyframes pulseRing {
        0% {
          box-shadow: 0 0 0 0 rgba(255, 122, 0, .55)
        }
  
        70% {
          box-shadow: 0 0 0 18px rgba(255, 122, 0, 0)
        }
  
        100% {
          box-shadow: 0 0 0 0 rgba(255, 122, 0, 0)
        }
      }
  
      /* =========================================================
       4. TOP BAR + STICKY HEADER
       ========================================================= */
      .topbar {
        background: var(--ink);
        color: #CBD5E1;
        font-size: .86rem
      }
  
      .topbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-block: 9px
      }
  
      .topbar .tb-hours {
        display: inline-flex;
        align-items: center;
        gap: 8px
      }
  
      .topbar .tb-right {
        display: inline-flex;
        align-items: center;
        gap: 22px
      }
  
      .topbar svg {
        width: 16px;
        height: 16px;
        color: var(--green-500)
      }
  
      .tb-phone {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        color: #fff
      }
  
      .tb-phone svg {
        color: var(--orange-400);
        animation: ring 2.4s ease-in-out infinite
      }
  
      @keyframes ring {
  
        0%,
        60%,
        100% {
          transform: rotate(0)
        }
  
        70% {
          transform: rotate(-12deg)
        }
  
        80% {
          transform: rotate(12deg)
        }
  
        90% {
          transform: rotate(-8deg)
        }
      }
  
      .cleaning-archetype .site-header,
      .site-header {
        position: sticky;
        top: 0;
        z-index: 60;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
        transition: box-shadow .3s ease
      }

      body.admin-bar .site-header {
        top: 32px
      }
  
      .site-header.scrolled {
        box-shadow: var(--sh)
      }
  
      /* Keep nav in document flow (main theme .nav is fixed — must not win here) */
      .cleaning-archetype .site-header .nav,
      .site-header .nav {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding-block: 14px
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding-block: 14px
      }
  
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.55rem;
        letter-spacing: .5px;
        color: var(--green-900);
        text-transform: uppercase
      }
  
      .brand .logo {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--green-700), var(--green-900));
        box-shadow: var(--sh-sm)
      }
  
      .brand .logo svg {
        width: 26px;
        height: 26px;
        color: var(--orange-400)
      }
  
      .brand small {
        display: block;
        font-family: var(--font-body);
        font-size: .6rem;
        letter-spacing: .22em;
        color: var(--orange-600);
        font-weight: 700;
        margin-top: -3px
      }
  
      .nav-links {
        display: flex;
        align-items: center;
        gap: 6px
      }
  
      .nav-links a {
        padding: 10px 14px;
        border-radius: 10px;
        font-weight: 600;
        font-size: .96rem;
        color: var(--slate-700);
        transition: color .2s, background .2s
      }
  
      .nav-links a:hover {
        color: var(--green-800);
        background: var(--green-050)
      }
  
      .nav-cta {
        display: flex;
        align-items: center;
        gap: 12px
      }
  
      .nav-toggle {
        display: none;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        border: 1.5px solid var(--border);
        color: var(--green-900)
      }
  
      .nav-toggle svg {
        width: 24px;
        height: 24px;
        margin: auto
      }
  
      /* =========================================================
       5. HERO — centered background banner
       ========================================================= */
      .hero {
        position: relative;
        width: 100%;
        min-height: 550px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);
        background-color: var(--green-900);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(15, 36, 25, .35);
        pointer-events: none
      }

      .hero .container {
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 72px 84px
      }

      .hero-card {
        width: min(100%, 720px);
        margin-inline: auto;
        text-align: center;
        padding: 40px 36px;
        border-radius: var(--r-lg);
        background: rgba(255, 255, 255, .72);
        border: 1px solid rgba(255, 255, 255, .55);
        box-shadow: var(--sh);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px)
      }

      .hero-subtitle {
        margin: 0 0 14px;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--slate-700)
      }

      .hero h1 {
        margin: 0;
        font-size: clamp(2.2rem, 5vw, 3.4rem);
        text-transform: uppercase;
        color: var(--green-900);
        letter-spacing: .5px;
        line-height: 1.08
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
        justify-content: center;
        margin-top: 28px
      }

      /* Shared form fields */
      .field {
        margin-bottom: 0
      }
  
      .field label {
        display: block;
        font-size: .82rem;
        font-weight: 600;
        color: var(--slate-700);
        margin-bottom: 6px
      }
  
      .field label .optional {
        font-weight: 500;
        color: var(--slate-400)
      }
  
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        padding: 14px 15px;
        border: 1.5px solid var(--border);
        border-radius: 12px;
        font-family: inherit;
        font-size: 1rem;
        color: var(--ink);
        background: var(--off-white);
        transition: border .2s, box-shadow .2s
      }
  
      .field textarea {
        resize: vertical;
        min-height: 120px;
        line-height: 1.5
      }
  
      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--green-600);
        box-shadow: 0 0 0 4px rgba(64, 145, 108, .15);
        background: #fff
      }
  
      .field input.is-invalid,
      .field textarea.is-invalid {
        border-color: #DC2626
      }
  
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(14px)
        }
  
        to {
          opacity: 1;
          transform: none
        }
      }

      /* =========================================================
       5b. SERVICES 3D COVERFLOW
       ========================================================= */
      .services-coverflow {
        overflow: hidden
      }

      .services-coverflow .section-head h2 .accent {
        background: linear-gradient(90deg, var(--orange-500), var(--orange-400));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
      }

      .cf-root {
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
        user-select: none;
        -webkit-user-select: none
      }

      .cf-viewport {
        perspective: 1400px;
        perspective-origin: 50% 45%;
        overflow: visible;
        padding: 36px 16px 48px;
        cursor: grab;
        touch-action: pan-y
      }

      .cf-root.is-dragging .cf-viewport {
        cursor: grabbing
      }

      .cf-stage {
        position: relative;
        height: clamp(380px, 42vw, 520px);
        transform-style: preserve-3d;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .cf-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(460px, 85vw);
        max-width: 480px;
        aspect-ratio: 4 / 3;
        min-height: 320px;
        margin: 0;
        border-radius: 28px;
        overflow: hidden;
        background-color: var(--green-900);
        background-size: cover;
        background-position: center;
        box-shadow: var(--sh-lg);
        transform-origin: center center;
        transform: translate(-50%, -50%) scale(.9);
        opacity: .6;
        transition: transform .55s var(--ease), opacity .45s ease, box-shadow .45s ease;
        will-change: transform, opacity;
        border: 1px solid rgba(255, 255, 255, .12)
      }

      .cf-card.is-active {
        opacity: 1;
        z-index: 5;
        box-shadow:
          0 28px 60px -18px rgba(15, 23, 42, .45),
          0 0 0 1px rgba(255, 255, 255, .16)
      }

      .cf-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .18) 62%, transparent 82%);
        pointer-events: none
      }

      .cf-card-body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 26px 26px 28px;
        color: #fff;
        text-align: left
      }

      .cf-card-badge {
        display: inline-flex;
        align-items: center;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: 6px 10px;
        border-radius: var(--r-full);
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .28);
        backdrop-filter: blur(6px);
        margin-bottom: 10px
      }

      .cf-card-title {
        font-family: var(--font-display);
        font-size: clamp(1.65rem, 2.6vw, 2.15rem);
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.08;
        letter-spacing: .3px;
        margin: 0 0 10px;
        color: #fff;
        max-width: 22ch
      }

      .cf-card-desc {
        margin: 0;
        font-size: .95rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, .88);
        max-width: 36ch
      }

      .cf-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 8px
      }

      .cf-nav {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1.5px solid var(--border);
        background: var(--white);
        color: var(--green-800);
        display: grid;
        place-items: center;
        cursor: pointer;
        box-shadow: var(--sh-sm);
        transition: transform .2s var(--ease), background .2s ease, border-color .2s ease
      }

      .cf-nav:hover {
        transform: translateY(-2px);
        border-color: var(--green-600);
        background: var(--green-050)
      }

      .cf-nav svg {
        width: 20px;
        height: 20px
      }

      .cf-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 14px
      }

      .cf-dot {
        width: 8px;
        height: 8px;
        border-radius: var(--r-full);
        border: 0;
        padding: 0;
        background: #CBD5E1;
        cursor: pointer;
        transition: width .3s var(--ease), background .25s ease
      }

      .cf-dot.is-active {
        width: 28px;
        background: var(--orange-500)
      }
  
      /* =========================================================
       6. TRUST STRIP
       ========================================================= */
      .trust-strip {
        background: var(--white);
        border-bottom: 1px solid var(--border)
      }
  
      .trust-strip .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 22px 34px;
        padding-block: 24px
      }
  
      .trust-item {
        display: flex;
        align-items: center;
        gap: 12px
      }
  
      .trust-item svg {
        width: 30px;
        height: 30px;
        color: var(--green-600);
        flex-shrink: 0
      }
  
      .trust-item b {
        font-family: var(--font-display);
        font-size: 1.45rem;
        color: var(--green-900);
        display: block;
        line-height: 1;
        text-transform: uppercase
      }
  
      .trust-item span {
        font-size: .82rem;
        color: var(--slate-600)
      }
  
      /* =========================================================
       7. SERVICES GRID
       ========================================================= */
      .eco-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        margin: -24px auto 40px;
        max-width: 640px;
        background: var(--green-050);
        border: 1px dashed var(--green-500);
        color: var(--green-800);
        font-weight: 600;
        font-size: .95rem;
        padding: 12px 18px;
        border-radius: var(--r-full)
      }
  
      .eco-notice svg {
        width: 22px;
        height: 22px;
        color: var(--green-600);
        flex-shrink: 0
      }
  
      .grid {
        display: grid;
        gap: 24px
      }
  
      .services-grid {
        grid-template-columns: repeat(4, 1fr)
      }
  
      .svc-card {
        position: relative;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r);
        padding: 28px 24px;
        overflow: hidden;
        transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease
      }
  
      .svc-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--green-600), var(--orange-500));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s var(--ease)
      }
  
      .svc-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--sh-lg);
        border-color: var(--green-500)
      }
  
      .svc-card:hover::before {
        transform: scaleX(1)
      }
  
      .svc-ic {
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        border-radius: 16px;
        background: var(--green-050);
        color: var(--green-700);
        margin-bottom: 18px;
        transition: transform .35s var(--ease), background .35s ease
      }
  
      .svc-card:hover .svc-ic {
        transform: scale(1.1) rotate(-4deg);
        background: var(--green-700);
        color: #fff
      }
  
      .svc-ic svg {
        width: 32px;
        height: 32px
      }
  
      .svc-card h3 {
        font-size: 1.42rem;
        text-transform: uppercase;
        color: var(--green-900);
        margin-bottom: 9px
      }
  
      .svc-card p {
        font-size: .94rem;
        color: var(--slate-600)
      }
  
      .svc-card .more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 16px;
        font-weight: 700;
        font-size: .9rem;
        color: var(--orange-600)
      }
  
      .svc-card .more svg {
        width: 16px;
        height: 16px;
        transition: transform .25s
      }
  
      .svc-card:hover .more svg {
        transform: translateX(4px)
      }
  
      /* =========================================================
       8. PRICING / TRUCK LOAD ESTIMATOR
       ========================================================= */
      .est-foot {
        text-align: center;
        margin-top: 34px;
        color: var(--slate-600);
        font-size: .95rem
      }
  
      /* =========================================================
       9. HOW IT WORKS
       ========================================================= */
      .how {
        background: var(--green-900);
        color: #E7F1EB;
        position: relative;
        overflow: hidden
      }
  
      .how::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .4;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E")
      }
  
      .how .eyebrow {
        background: rgba(255, 255, 255, .10);
        color: var(--green-500);
        border-color: rgba(255, 255, 255, .15)
      }
  
      .how .section-head h2 {
        color: #fff
      }
  
      .how .section-head p {
        color: #BFD6CB
      }
  
      .steps-grid {
        grid-template-columns: repeat(4, 1fr);
        position: relative
      }
  
      .step {
        position: relative;
        text-align: center;
        padding: 14px
      }
  
      .step-num {
        width: 74px;
        height: 74px;
        margin: 0 auto 18px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        position: relative;
        background: linear-gradient(160deg, var(--green-600), var(--green-800));
        border: 2px solid rgba(82, 183, 136, .5);
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5)
      }
  
      .step-num svg {
        width: 32px;
        height: 32px;
        color: #fff
      }
  
      .step-num b {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--orange-500);
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 1.05rem;
        display: grid;
        place-items: center;
        box-shadow: var(--sh-sm)
      }
  
      .step h3 {
        color: #fff;
        font-size: 1.3rem;
        text-transform: uppercase;
        margin-bottom: 8px
      }
  
      .step p {
        font-size: .92rem;
        color: #BFD6CB
      }
  
      .step-line {
        display: none
      }
  
      /* =========================================================
       10. BEFORE & AFTER
       ========================================================= */
      .ba-grid {
        grid-template-columns: repeat(2, 1fr)
      }
  
      .ba-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
        box-shadow: var(--sh-sm);
        transition: transform .35s var(--ease), box-shadow .35s var(--ease)
      }
  
      .ba-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh-lg)
      }
  
      .ba-media {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 250px
      }
  
      .ba-pane {
        position: relative;
        overflow: hidden;
        display: grid;
        place-items: center;
        color: #fff
      }
  
      .ba-img {
        position: absolute;
        inset: 0;
        transition: transform .5s var(--ease);
        background-size: cover;
        background-position: center
      }
  
      .ba-card:hover .ba-img {
        transform: scale(1.08)
      }
  
      .ba-before .ba-img {
        background: linear-gradient(150deg, #6b5b4a, #403528), repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 12px, transparent 12px 24px)
      }
  
      .ba-after .ba-img {
        background: linear-gradient(150deg, var(--green-600), var(--green-800))
      }
  
      .ba-pane span {
        position: relative;
        z-index: 2;
        font-family: var(--font-display);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 1.05rem;
        padding: 6px 14px;
        border-radius: var(--r-full);
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(2px)
      }
  
      .ba-after span {
        background: rgba(27, 67, 50, .6)
      }
  
      .ba-divider,
      .vs-divider {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: #fff;
        transform: translateX(-50%);
        z-index: 3;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .25)
      }
  
      .ba-divider::after,
      .vs-divider::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        box-shadow: var(--sh)
      }
  
      .ba-divider b,
      .vs-divider b {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
        color: var(--green-700);
        font-family: var(--font-display);
        font-size: .8rem;
        font-weight: 800
      }
  
      .ba-body {
        padding: 20px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px
      }
  
      .ba-body h3 {
        font-size: 1.32rem;
        text-transform: uppercase;
        color: var(--green-900)
      }
  
      .ba-body p {
        font-size: .88rem;
        color: var(--slate-600)
      }
  
      .ba-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--orange-050);
        color: var(--orange-600);
        font-weight: 700;
        font-size: .8rem;
        padding: 7px 12px;
        border-radius: var(--r-full);
        white-space: nowrap
      }
  
      .ba-badge svg {
        width: 15px;
        height: 15px
      }
  
      /* =========================================================
       11. WHY CHOOSE US
       ========================================================= */
      .why-grid {
        grid-template-columns: repeat(4, 1fr)
      }
  
      .why-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r);
        padding: 26px;
        text-align: center;
        transition: transform .3s var(--ease), box-shadow .3s var(--ease)
      }
  
      .why-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh)
      }
  
      .why-ic {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--orange-050);
        color: var(--orange-600)
      }
  
      .why-ic svg {
        width: 32px;
        height: 32px
      }
  
      .why-card h3 {
        font-size: 1.3rem;
        text-transform: uppercase;
        color: var(--green-900);
        margin-bottom: 8px
      }
  
      .why-card p {
        font-size: .9rem;
        color: var(--slate-600)
      }
  
      /* =========================================================
       12. TESTIMONIALS
       ========================================================= */
      .rev-grid {
        grid-template-columns: repeat(3, 1fr)
      }
  
      .rev-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px;
        box-shadow: var(--sh-sm);
        position: relative;
        transition: transform .3s var(--ease), box-shadow .3s var(--ease)
      }
  
      .rev-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh-lg)
      }
  
      .rev-quote {
        position: absolute;
        top: 20px;
        right: 24px;
        font-family: var(--font-display);
        font-size: 4.5rem;
        line-height: 1;
        color: var(--green-050)
      }
  
      .rev-stars {
        display: flex;
        gap: 3px;
        color: var(--gold);
        margin-bottom: 14px
      }
  
      .rev-stars svg {
        width: 20px;
        height: 20px
      }
  
      .rev-card p {
        font-size: .98rem;
        color: var(--slate-700);
        position: relative;
        z-index: 1;
        margin-bottom: 20px
      }
  
      .rev-person {
        display: flex;
        align-items: center;
        gap: 13px
      }
  
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.3rem;
        color: #fff;
        flex-shrink: 0
      }
  
      .rev-person h4 {
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 6px
      }
  
      .rev-person h4 svg {
        width: 16px;
        height: 16px;
        color: var(--green-600)
      }
  
      .rev-person span {
        font-size: .83rem;
        color: var(--slate-500);
        display: flex;
        align-items: center;
        gap: 5px
      }
  
      .rev-person span svg {
        width: 13px;
        height: 13px;
        color: var(--orange-500)
      }
  
      /* =========================================================
       13. EDITORIAL DEEP CONTENT BANDS
       ========================================================= */
      .editorial-bands {
        background: var(--green-050)
      }

      .editorial-band + .editorial-band {
        margin-top: 72px
      }

      .editorial-band__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        align-items: center
      }

      @media (min-width:1024px) {
        .editorial-band__grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 3rem
        }
      }

      .editorial-band__copy .eyebrow {
        display: inline-block;
        margin-bottom: 12px
      }

      .editorial-band__copy h2 {
        margin: 0 0 18px;
        max-width: 34ch
      }

      .editorial-band__body {
        color: var(--muted, #4b5563);
        font-size: 1.05rem;
        line-height: 1.75
      }

      .editorial-band__body p {
        margin: 0 0 1rem
      }

      .editorial-band__body p:last-child {
        margin-bottom: 0
      }

      .editorial-band__body ul,
      .editorial-band__body ol {
        margin: 0 0 1rem;
        padding-left: 1.25rem
      }

      .editorial-band__body h3,
      .editorial-band__body h4 {
        margin: 1.25rem 0 .65rem;
        color: var(--green-900, #0b3d2e)
      }

      .editorial-band__stat {
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 22px;
        padding: 12px 18px;
        border-radius: var(--r-full);
        background: #fff;
        border: 1px solid #CDE8DC;
        box-shadow: var(--sh-sm)
      }

      .editorial-band__stat strong {
        color: var(--green-700);
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: -.02em
      }

      .editorial-band__stat span {
        color: var(--green-800);
        font-size: .92rem;
        font-weight: 600
      }

      .editorial-band__media {
        border-radius: calc(var(--r) + 4px);
        overflow: hidden;
        box-shadow: var(--sh-lg);
        background: #fff
      }

      .editorial-band__media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover
      }

      .pill-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        max-width: 900px;
        margin: 0 auto
      }

      .pill-wrap--footer {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        max-width: none;
        margin: 0
      }

      .pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid #CDE8DC;
        color: var(--green-800);
        font-weight: 600;
        font-size: .95rem;
        padding: 11px 18px;
        border-radius: var(--r-full);
        box-shadow: var(--sh-sm);
        text-decoration: none;
        transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s
      }

      .pill svg {
        width: 16px;
        height: 16px;
        color: var(--green-600);
        transition: color .2s
      }

      .pill:hover {
        background: var(--green-700);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: var(--glow-green)
      }

      .pill:hover svg {
        color: var(--orange-400)
      }

      .footer-areas__title {
        margin: 0 0 18px;
        color: #fff;
        font-family: var(--font-display);
        font-size: 1.15rem;
        letter-spacing: .05em;
        text-transform: uppercase
      }

      .footer-trust {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap
      }

      .footer-trust__link {
        display: inline-flex;
        align-items: center;
        line-height: 0;
        text-decoration: none;
        transition: transform .2s var(--ease), opacity .2s
      }

      .footer-trust__link:hover {
        transform: translateY(-2px);
        opacity: .95
      }

      .footer-trust__logo {
        display: block;
        height: 2.5rem;
        width: auto;
        max-height: 3rem;
        object-fit: contain;
        border-radius: 8px;
        background: #fff;
        padding: 6px 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
      }

      @media (min-width:768px) {
        .footer-trust__logo {
          height: 3rem
        }
      }

      .footer .pill {
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .88);
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        padding: 9px 14px;
        font-size: .88rem;
        transform: none
      }

      .footer .pill svg {
        color: var(--orange-400);
        flex-shrink: 0
      }

      .footer .pill:hover {
        background: var(--green-600);
        color: #fff;
        box-shadow: var(--glow-green);
        transform: translateY(-2px)
      }
  
      /* =========================================================
       14. FAQ ACCORDION
       ========================================================= */
      .faq-wrap {
        max-width: 800px;
        margin: 0 auto;
        display: grid;
        gap: 14px
      }
  
      .faq-item {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r);
        overflow: hidden;
        transition: border-color .3s, box-shadow .3s
      }
  
      .faq-item.open {
        border-color: var(--green-500);
        box-shadow: var(--sh)
      }
  
      .faq-q {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        text-align: left;
        padding: 20px 22px;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--green-900)
      }
  
      .faq-q .chev {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--green-050);
        color: var(--green-700);
        display: grid;
        place-items: center;
        transition: transform .35s var(--ease), background .3s
      }
  
      .faq-q .chev svg {
        width: 20px;
        height: 20px
      }
  
      .faq-item.open .faq-q .chev {
        transform: rotate(180deg);
        background: var(--orange-500);
        color: var(--ink)
      }
  
      .faq-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .35s var(--ease)
      }
  
      .faq-item.open .faq-panel {
        grid-template-rows: 1fr
      }
  
      .faq-panel>div {
        overflow: hidden
      }
  
      .faq-panel p {
        padding: 0 22px 22px;
        color: var(--slate-600);
        font-size: .98rem
      }
  
      /* =========================================================
       15. FINAL CTA BANNER
       ========================================================= */
      .cta-banner {
        position: relative;
        overflow: hidden;
        color: #fff;
        text-align: center;
        background: radial-gradient(900px 400px at 90% 10%, rgba(255, 122, 0, .35), transparent 60%), linear-gradient(135deg, var(--green-800), var(--green-900))
      }
  
      .cta-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .35;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 59h60M59 0v60' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3C/svg%3E")
      }
  
      .cta-banner .container {
        position: relative;
        padding-block: 70px
      }
  
      .cta-banner h2 {
        font-size: clamp(2.2rem, 5vw, 3.6rem);
        text-transform: uppercase;
        color: #fff
      }
  
      .cta-banner h2 .accent {
        color: var(--orange-400)
      }
  
      .cta-banner p {
        color: #D6E6DE;
        font-size: 1.12rem;
        margin: 16px auto 30px;
        max-width: 560px
      }
  
      .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center
      }
  
      .cta-phone {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 800;
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 22px
      }
  
      .cta-phone svg {
        width: 26px;
        height: 26px;
        color: var(--orange-400)
      }
  
      /* =========================================================
       16. CONTACT / QUOTE FORM
       ========================================================= */
      .contact-section {
        background: var(--off-white);
        border-top: 1px solid var(--border)
      }
  
      .contact-card {
        background: #fff;
        border-radius: var(--r-lg);
        padding: clamp(28px, 5vw, 44px);
        box-shadow: var(--sh-lg);
        border: 1px solid var(--border);
        width: 100%
      }
  
      .contact-head {
        text-align: center;
        margin-bottom: 32px
      }
  
      .contact-head h2 {
        font-size: clamp(1.55rem, 3.4vw, 2.15rem);
        text-transform: uppercase;
        color: var(--green-900);
        margin-bottom: 10px;
        line-height: 1.08
      }
  
      .contact-head p {
        color: var(--slate-600);
        font-size: 1.02rem;
        max-width: 540px;
        margin: 0 auto
      }
  
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 20px;
        margin-bottom: 24px
      }
  
      .field-full {
        grid-column: 1 / -1
      }
  
      .contact-submit {
        width: 100%;
        margin-top: 4px
      }

      /* CF7 uses existing .contact-grid / .field / .contact-submit (PHP restructures markup) */
      .contact-form--cf7 .wpcf7 {
        margin: 0
      }

      .contact-form--cf7 .wpcf7-form > p {
        margin: 0
      }

      .contact-form--cf7 .contact-grid {
        margin-bottom: 24px
      }

      .contact-form--cf7 .wpcf7-spinner {
        margin: 0 0 0 12px
      }

      .contact-fine {
        text-align: center;
        font-size: .76rem;
        color: var(--slate-400);
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px
      }
  
      .contact-fine svg {
        width: 14px;
        height: 14px;
        color: var(--green-600)
      }
  
      .contact-success {
        display: none;
        text-align: center;
        padding: 20px 6px
      }
  
      .contact-success.show {
        display: block;
        animation: fadeUp .4s var(--ease)
      }
  
      .contact-success .ok {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background: var(--green-050);
        color: var(--green-600);
        display: grid;
        place-items: center;
        margin: 0 auto 14px
      }
  
      .contact-success .ok svg {
        width: 34px;
        height: 34px
      }
  
      .contact-success h3 {
        color: var(--green-900);
        text-transform: uppercase;
        margin-bottom: 6px
      }
  
      .contact-success p {
        color: var(--slate-600)
      }
  
      /* =========================================================
       17. FOOTER
       ========================================================= */
      .footer {
        background: var(--ink);
        color: #94A3B8;
        padding-top: 60px
      }
  
      .footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 44px
      }

      @media (min-width: 768px) {
        .footer-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 32px
        }
      }

      @media (min-width: 1025px) {
        .footer-grid {
          grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
          gap: 38px
        }
      }
  
      .footer .brand {
        color: #fff;
        margin-bottom: 16px
      }
  
      .footer .brand .logo {
        background: linear-gradient(135deg, var(--green-600), var(--green-800))
      }
  
      .footer p {
        font-size: .92rem;
        line-height: 1.7
      }
  
      .footer h4 {
        color: #fff;
        font-family: var(--font-display);
        font-size: 1.15rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 18px
      }
  
      .footer ul {
        display: grid;
        gap: 11px
      }
  
      .footer ul a {
        font-size: .92rem;
        transition: color .2s, padding .2s
      }
  
      .footer ul a:hover {
        color: var(--orange-400);
        padding-left: 4px
      }
  
      .foot-contact li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: .92rem;
        margin-bottom: 12px
      }
  
      .foot-contact svg {
        width: 18px;
        height: 18px;
        color: var(--green-500);
        flex-shrink: 0;
        margin-top: 2px
      }
  
      .foot-social {
        display: flex;
        gap: 10px;
        margin-top: 8px
      }
  
      .foot-social a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .06);
        display: grid;
        place-items: center;
        transition: background .2s, transform .2s
      }
  
      .foot-social a:hover {
        background: var(--green-700);
        transform: translateY(-3px)
      }
  
      .foot-social svg {
        width: 19px;
        height: 19px;
        color: #fff
      }
  
      .foot-bottom {
        border-top: 1px solid rgba(255, 255, 255, .09);
        padding: 22px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
        font-size: .85rem
      }
  
      .foot-bottom a:hover {
        color: #fff
      }
  
      /* =========================================================
       17. SCROLL REVEAL
       ========================================================= */
      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .6s var(--ease), transform .6s var(--ease);
        transition-delay: var(--d, 0s)
      }
  
      .reveal.in {
        opacity: 1;
        transform: none
      }
  
      /* =========================================================
       18. RESPONSIVE
       ========================================================= */
      @media (max-width:1024px) {

        .services-grid,
        .why-grid {
          grid-template-columns: repeat(2, 1fr)
        }

        .steps-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 34px
        }

        .hero .container {
          padding-block: 56px 64px
        }

        .cf-stage {
          height: clamp(320px, 48vw, 420px)
        }

        .cf-card {
          width: min(400px, 78vw);
          max-width: 420px
        }

      }

      @media (max-width:767px) {

        .ba-divider,
        .vs-divider {
          display: none
        }

        .ba-media {
          height: auto;
          min-height: 200px;
          column-gap: 6px
        }

        .ba-pane {
          min-height: 120px
        }

        /* Keep sticky header clear of admin bar + give hero room below nav */
        body.admin-bar .site-header {
          top: 46px
        }

        .hero {
          min-height: 480px
        }

        .cf-stage {
          height: 300px
        }

        .cf-card {
          width: min(340px, 88vw);
          max-width: 360px;
          aspect-ratio: 4 / 3;
          min-height: 240px;
          border-radius: 22px
        }

        .cf-card-body {
          padding: 18px 18px 20px
        }

        .cf-card-desc {
          max-width: 30ch;
          font-size: .88rem
        }

        .cf-controls {
          gap: 12px
        }

        .cf-nav {
          width: 44px;
          height: 44px
        }

        .hero .container {
          padding-block: 40px 52px
        }

        .hero-card {
          padding: 28px 22px
        }

        .hero h1 {
          font-size: clamp(2rem, 8vw, 2.6rem)
        }

        .hero-actions {
          gap: 12px;
          width: 100%
        }
      }

      @media (max-width:820px) {
        .topbar .tb-hours {
          display: none
        }

        .nav-links,
        .nav .btn-ghost {
          display: none
        }

        .nav-toggle {
          display: grid;
          place-items: center
        }

        .site-header.open .nav-links {
          display: flex;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          flex-direction: column;
          align-items: stretch;
          gap: 4px;
          background: #fff;
          border-bottom: 1px solid var(--border);
          padding: 14px 20px 20px;
          box-shadow: var(--sh)
        }

        .site-header.open .nav-links a {
          padding: 13px 14px
        }

        .rev-grid,
        .ba-grid {
          grid-template-columns: 1fr
        }

        .section {
          padding: 58px 0
        }

        /* Anchors land below sticky nav */
        html {
          scroll-padding-top: 88px
        }

        body.admin-bar {
          scroll-padding-top: 134px
        }

        #home,
        #about,
        #services,
        #contact,
        #process,
        #results,
        #reviews,
        #faq,
        #areas,
        #pricing {
          scroll-margin-top: 88px
        }

        body.admin-bar #home,
        body.admin-bar #about,
        body.admin-bar #services,
        body.admin-bar #contact,
        body.admin-bar #process,
        body.admin-bar #results,
        body.admin-bar #reviews,
        body.admin-bar #faq,
        body.admin-bar #areas,
        body.admin-bar #pricing {
          scroll-margin-top: 134px
        }
      }

      @media (max-width:560px) {

        .services-grid,
        .why-grid,
        .steps-grid {
          grid-template-columns: 1fr
        }

        .trust-strip .container {
          gap: 18px 20px
        }

        .trust-item {
          width: 44%
        }

        .ba-body {
          flex-direction: column;
          align-items: flex-start
        }

        .hero .container {
          padding-block: 36px 44px
        }

        .hero-actions {
          flex-direction: column;
          align-items: stretch;
          gap: 12px
        }

        .hero-actions .btn,
        .cta-actions .btn,
        .contact-submit {
          width: 100%
        }

        .contact-grid {
          grid-template-columns: 1fr
        }

        .contact-card {
          padding: 24px 18px
        }

        .rev-quote {
          display: none
        }

        .nav {
          gap: 10px;
          padding-block: 12px
        }

        .nav-cta .btn-orange {
          padding: 12px 16px;
          font-size: .9rem
        }

        .brand {
          font-size: 1.3rem
        }

        .brand .logo {
          width: 40px;
          height: 40px
        }
      }
  
      @media (max-width:380px) {
        .nav-cta .btn-orange svg {
          display: none
        }
      }
  
      /* Reduced motion */
      @media (prefers-reduced-motion:reduce) {
  
        *,
        *::before,
        *::after {
          animation: none !important;
          transition-duration: .01ms !important;
          scroll-behavior: auto !important
        }
  
        .reveal {
          opacity: 1;
          transform: none
        }
      }