/* ─────────────────────────────────────────────
       DESIGN SYSTEM TOKENS
    ───────────────────────────────────────────── */
    :root {
      --color-primary:               #1c69d4;
      --color-primary-active:        #0653b6;
      --color-canvas:                #ffffff;
      --color-surface-soft:          #f7f7f7;
      --color-surface-card:          #fafafa;
      --color-surface-strong:        #ebebeb;
      --color-surface-dark:          #1a2129;
      --color-surface-dark-elevated: #262e38;
      --color-hairline:              #e6e6e6;
      --color-hairline-strong:       #cccccc;
      --color-ink:                   #262626;
      --color-body:                  #3c3c3c;
      --color-muted:                 #6b6b6b;
      --color-muted-soft:            #9a9a9a;
      --color-on-primary:            #ffffff;
      --color-on-dark:               #ffffff;
      --color-on-dark-soft:          #bbbbbb;
      --color-success:               #22c55e;
      --color-m-blue-light:          #0066b1;
      --color-m-blue-dark:           #1c69d4;
      --color-m-red:                 #e22718;

      /* Hero background — near-black like the screenshot */
      --color-hero-bg:               #0d0f12;

      --font-display: "Inter", system-ui, -apple-system, sans-serif;
      --font-body:    "Inter", system-ui, -apple-system, sans-serif;
      --weight-display: 700;
      --weight-utility: 400;
      --weight-body:    300;

      --type-display-xl-size: 64px;  --type-display-xl-lh: 1.05;
      --type-display-lg-size: 48px;  --type-display-lg-lh: 1.1;
      --type-display-md-size: 32px;  --type-display-md-lh: 1.15;
      --type-display-sm-size: 24px;  --type-display-sm-lh: 1.25;
      --type-title-lg-size:   20px;  --type-title-lg-lh: 1.3;
      --type-title-md-size:   18px;  --type-title-md-lh: 1.4;
      --type-title-sm-size:   16px;  --type-title-sm-lh: 1.4;
      --type-body-md-size:    16px;  --type-body-md-lh: 1.55;
      --type-body-sm-size:    14px;  --type-body-sm-lh: 1.55;
      --type-caption-size:    12px;  --type-caption-lh: 1.4;
      --type-caption-tracking: 0.5px;
      --type-label-size:      13px;  --type-label-lh: 1.3;
      --type-label-tracking:  1.5px;
      --type-button-size:     14px;  --type-button-lh: 1.0;
      --type-button-tracking: 0.5px;
      --type-nav-size:        14px;  --type-nav-lh: 1.4;
      --type-nav-tracking:    0.3px;

      --space-xxs: 4px;  --space-xs: 8px;  --space-sm: 12px;  --space-md: 16px;
      --space-lg:  24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 80px;
      --container-max: 1440px;

      --radius-none: 0px;
      --radius-full: 9999px;
    }

    /* ─────────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      font-weight: var(--weight-body);
      font-size: var(--type-body-md-size);
      line-height: var(--type-body-md-lh);
      color: var(--color-on-dark-soft);
      background: var(--color-hero-bg);
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; font-family: inherit; background: none; border: none; }
    input, textarea, select { font-family: inherit; }

    /* ─────────────────────────────────────────────
       LAYOUT
    ───────────────────────────────────────────── */
    .container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 var(--space-xl);
    }

    /* ─────────────────────────────────────────────
       PAGE ROUTING
    ───────────────────────────────────────────── */
    .page { display: none; }
    .page.active { display: block; }
    .page.active { animation: fadeUp 0.2s ease both; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ═══════════════════════════════════════════════════
       TOP NAV  — dark, 64px, matches screenshot exactly
    ═══════════════════════════════════════════════════ */
    .top-nav {
      position: sticky; top: 0; z-index: 100;
      height: 96px;
      background: var(--color-hero-bg);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    /* Inner column — identical to .container so the header lines up with every section */
    .top-nav__container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 var(--space-xl);
      height: 100%;
      display: flex; align-items: center;
    }

    /* Logo — pinned to the column's left edge */
    .top-nav__logo {
      display: flex; align-items: center;
      text-decoration: none; flex: 0 0 auto; min-width: 0;
    }
    /* Links + phone + CTA — pushed to the column's right edge */
    .top-nav__cluster {
      display: flex; align-items: center; gap: var(--space-xxl);
      margin-left: auto;
    }
    .top-nav__logo-img {
      height: 82px;
      width: auto;
      display: block;
    }

    /* Nav links — centered middle third */
    .top-nav__menu {
      display: flex; align-items: center; justify-content: center;
      gap: 8px;
      flex: 0 1 auto;
    }
    .top-nav__link {
      position: relative;
      font-family: var(--font-display);
      font-weight: var(--weight-utility);
      font-size: 16px;
      letter-spacing: 0.4px;
      color: var(--color-on-dark-soft);
      text-decoration: none; background: none; border: none;
      padding: 10px 16px; cursor: pointer;
      transition: color 0.15s ease;
    }
    .top-nav__link::after {
      content: ""; position: absolute;
      left: 16px; right: 16px; bottom: 2px;
      height: 2px; background: var(--color-primary);
      transform: scaleX(0); transform-origin: center;
      transition: transform 0.18s ease;
    }
    .top-nav__link:hover { color: var(--color-on-dark); }
    .top-nav__link.active { color: var(--color-on-dark); }
    .top-nav__link.active::after { transform: scaleX(1); }

    /* Phone + CTA, tight together */
    .top-nav__right {
      display: flex; align-items: center; gap: var(--space-lg);
      flex: 0 0 auto;
    }
    .top-nav__phone {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-display);
      font-weight: var(--weight-display);
      font-size: 15px; letter-spacing: 0.3px;
      color: var(--color-on-dark);
      white-space: nowrap;
      transition: color 0.15s ease;
    }
    .top-nav__phone:hover { color: var(--color-primary); }
    .top-nav__phone svg { width: 17px; height: 17px; flex-shrink: 0; }

    /* CTA button in nav */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      height: 44px; padding: 0 24px;
      border: 1.5px solid transparent;
      border-radius: var(--radius-none);
      font-family: var(--font-display);
      font-weight: var(--weight-display);
      font-size: var(--type-button-size);
      letter-spacing: var(--type-button-tracking);
      white-space: nowrap; cursor: pointer;
      text-decoration: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .btn--primary {
      background: var(--color-primary);
      color: var(--color-on-primary);
      border-color: var(--color-primary);
    }
    .btn--primary:hover { background: var(--color-primary-active); border-color: var(--color-primary-active); }
    .btn--outline-dark {
      background: transparent;
      color: var(--color-on-dark);
      border-color: rgba(255,255,255,0.35);
    }
    .btn--outline-dark:hover { border-color: rgba(255,255,255,0.65); }
    .btn--outline-light {
      background: transparent;
      color: var(--color-ink);
      border-color: var(--color-hairline-strong);
    }
    .btn--outline-light:hover { border-color: var(--color-ink); }
    .btn--lg { height: 52px; padding: 0 32px; font-size: 15px; }

    /* Hamburger */
    .top-nav__hamburger { display: none; color: var(--color-on-dark); padding: 4px; }
    .mobile-menu {
      display: none; position: fixed;
      top: 96px; left: 0; right: 0; bottom: 0;
      background: var(--color-hero-bg);
      flex-direction: column; padding: var(--space-xl);
      border-top: 1px solid rgba(255,255,255,0.08);
      z-index: 99;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu__link {
      padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-sm-size); color: var(--color-on-dark-soft);
      text-align: left; cursor: pointer;
    }
    .mobile-menu__link.active { color: var(--color-primary); }
    .mobile-menu__cta { margin-top: var(--space-xl); }

    /* ═══════════════════════════════════════════════════
       HERO — dark full-bleed, matches screenshot
    ═══════════════════════════════════════════════════ */
    .hero {
      position: relative; overflow: hidden;
      background: var(--color-hero-bg);
      min-height: 520px;
      display: flex; align-items: center;
    }

    /* Dark, moody automotive texture background — CSS-only */
    .hero__bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 75% 50%, rgba(20,25,35,0.4) 0%, transparent 70%),
        var(--color-hero-bg);
    }
    /* Subtle chrome/metal vertical streaks like the screenshot */
    .hero__bg::before {
      content: '';
      position: absolute; inset: 0;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(255,255,255,0.013) 38px,
          rgba(255,255,255,0.013) 39px
        );
    }
    /* Vignette edges */
    .hero__bg::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
    }

    /* Right-side decorative chrome lines (mimics the door/window trim in screenshot) */
    .hero__chrome {
      position: absolute; right: 0; top: 0; bottom: 0;
      width: 45%; pointer-events: none; overflow: hidden;
    }
    .hero__chrome svg { width: 100%; height: 100%; }

    .hero__content {
      position: relative; z-index: 2;
      width: 100%; max-width: var(--container-max);
      margin: 0 auto;
      padding: var(--space-xxl) var(--space-xl);
    }
    .hero__inner { max-width: 940px; }

    /* Location kicker — "— LOMBARD, IL · DUPAGE COUNTY" */
    .hero__kicker {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 28px;
    }
    .hero__kicker-line {
      width: 36px; height: 2px;
      background: var(--color-primary);
      flex-shrink: 0;
    }
    .hero__kicker-text {
      font-family: var(--font-display);
      font-weight: var(--weight-display);
      font-size: 16px;
      letter-spacing: var(--type-label-tracking);
      text-transform: uppercase;
      color: var(--color-primary);
    }

    /* Headline — white + blue accent words */
    .hero__title {
      font-family: var(--font-display);
      font-weight: var(--weight-display);
      font-size: clamp(52px, 7vw, 92px);
      line-height: 1.0;
      color: var(--color-on-dark);
      margin-bottom: 24px;
      letter-spacing: -0.5px;
    }
    .hero__title .accent { color: var(--color-primary); }

    /* Sub copy */
    .hero__sub {
      font-family: var(--font-body);
      font-weight: var(--weight-body);
      font-size: var(--type-body-md-size);
      line-height: 1.65;
      color: var(--color-on-dark-soft);
      margin-bottom: 40px;
      max-width: 480px;
    }

    /* CTA row */
    .hero__actions {
      display: flex; gap: 16px; flex-wrap: wrap;
      margin-bottom: 48px;
    }
    /* Phone button — outline with phone icon, like screenshot */
    .btn--phone {
      background: rgba(255,255,255,0.06);
      color: var(--color-on-dark);
      border-color: rgba(255,255,255,0.3);
    }
    .btn--phone:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

    /* Trust badges */
    .hero__trust {
      display: flex; gap: 32px; flex-wrap: wrap;
    }
    .hero__trust-item {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-body);
      font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size);
      color: rgba(255,255,255,0.45);
    }
    .hero__trust-item svg { flex-shrink: 0; }

    /* ═══════════════════════════════════════════════════
       STATS BAND — dark, 4-up numbers
    ═══════════════════════════════════════════════════ */
    .stats-band {
      background: var(--color-hero-bg);
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .stats-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
    }
    .stat-cell {
      padding: var(--space-xxl) var(--space-lg);
      text-align: center;
    }
    .stat-cell + .stat-cell {
      border-left: 1px solid rgba(255,255,255,0.08);
    }
    .stat-cell__value {
      font-family: var(--font-display);
      font-weight: var(--weight-display);
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.05;
      color: var(--color-on-dark);
      margin-bottom: 6px;
    }
    .stat-cell__value span {
      color: var(--color-primary);
    }
    .stat-cell__label {
      font-family: var(--font-body);
      font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size);
      color: var(--color-on-dark-soft);
    }

    /* ═══════════════════════════════════════════════════
       SECTION HEADER
    ═══════════════════════════════════════════════════ */
    .section-head { margin-bottom: var(--space-xl); }
    .section-head__kicker {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 12px;
    }
    .section-head__kicker-line {
      width: 32px; height: 2px; background: var(--color-primary); flex-shrink: 0;
    }
    .section-head__kicker-text {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 14px; letter-spacing: 2px;
      text-transform: uppercase; color: var(--color-primary);
    }
    .section-head__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: clamp(40px, 5vw, 60px); line-height: 1.08;
      color: var(--color-on-dark);
    }
    .section-head__title--light { color: var(--color-on-dark); }
    .section-head__sub {
      margin-top: 12px;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); line-height: 1.65;
      color: var(--color-on-dark-soft); max-width: 540px;
    }
    .section-head__sub--light { color: var(--color-on-dark-soft); }

    /* ═══════════════════════════════════════════════════
       SERVICES SECTION — light canvas
    ═══════════════════════════════════════════════════ */
    .services-section {
      background: var(--color-surface-dark);
      padding: 56px 0;
    }
    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.06);
      margin-top: var(--space-xl);
    }
    .service-card {
      background: var(--color-surface-dark);
      padding: var(--space-xl) var(--space-xl) var(--space-xxl);
      display: flex; flex-direction: column; gap: 12px;
      transition: background 0.15s ease;
    }
    .service-card:hover { background: var(--color-surface-dark-elevated); }
    .service-card__icon {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-primary); margin-bottom: 4px;
    }
    .service-card__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh);
      color: var(--color-on-dark);
    }
    .service-card__body {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.65;
      color: var(--color-on-dark-soft); flex: 1;
    }
    .text-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking);
      text-transform: uppercase; color: var(--color-on-dark);
      background: none; border: none; cursor: pointer; padding: 0;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .text-link:hover { color: var(--color-primary); }
    .text-link--blue { color: var(--color-primary); }
    .text-link--ink  { color: var(--color-on-dark); }
    .text-link--ink:hover { color: var(--color-primary); }

    /* ═══════════════════════════════════════════════════
       WHY GLENBARD — dark band, split layout
    ═══════════════════════════════════════════════════ */
    .why-section {
      background: var(--color-hero-bg);
      padding: 56px 0;
    }
    .why-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl);
      align-items: center;
    }
    .why-points { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-xl); }
    .why-point {
      display: flex; gap: var(--space-md);
      padding-bottom: var(--space-lg);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .why-point:last-child { border-bottom: none; padding-bottom: 0; }
    .why-point__num {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-display-sm-size); color: var(--color-primary);
      line-height: 1; min-width: 32px; flex-shrink: 0; padding-top: 2px;
    }
    .why-point__text {}
    .why-point__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-sm-size); color: var(--color-on-dark);
      margin-bottom: 6px;
    }
    .why-point__body {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.65;
      color: var(--color-on-dark-soft);
    }
    /* Visual panel — dark plate with abstract car geometry */
    .why-visual {
      position: relative;
      aspect-ratio: 4/5;
      background: #ffffff;
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .why-visual__img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: var(--space-xl);
      box-sizing: border-box;
    }
    .why-visual__badge {
      position: absolute; bottom: var(--space-lg); left: var(--space-lg);
      background: var(--color-primary); color: var(--color-on-primary);
      padding: var(--space-sm) var(--space-md);
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-label-tracking);
      text-transform: uppercase;
    }

    /* ═══════════════════════════════════════════════════
       PROCESS — light, numbered steps
    ═══════════════════════════════════════════════════ */
    .process-section {
      background: var(--color-surface-dark);
      padding: 56px 0;
    }
    .process-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0; margin-top: var(--space-xl);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .process-step {
      padding: var(--space-xl);
      border-right: 1px solid rgba(255,255,255,0.08);
      position: relative;
    }
    .process-step:last-child { border-right: none; }
    .process-step__num {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: clamp(40px, 4vw, 56px); line-height: 1;
      color: rgba(255,255,255,0.08); margin-bottom: 16px;
    }
    .process-step__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-sm-size); color: var(--color-on-dark); margin-bottom: 8px;
    }
    .process-step__body {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.65; color: var(--color-on-dark-soft);
    }

    /* ═══════════════════════════════════════════════════
       INSURANCE — soft grey band
    ═══════════════════════════════════════════════════ */
    .insurance-section {
      background: var(--color-hero-bg);
      padding: 56px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .insurance-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl);
      align-items: center;
    }
    .insurance-logos {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      margin-top: var(--space-xl);
    }
    .insurance-logo {
      background: var(--color-surface-dark-elevated);
      padding: var(--space-lg) var(--space-md);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-caption-tracking);
      text-transform: uppercase; color: var(--color-on-dark-soft);
      aspect-ratio: 2/1; text-align: center; line-height: 1.4;
    }
    /* Right side — checklist */
    .insurance-list { display: flex; flex-direction: column; gap: 16px; margin-top: var(--space-xl); }
    .insurance-item {
      display: flex; align-items: flex-start; gap: 12px;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.55; color: var(--color-on-dark-soft);
    }
    .insurance-item__check {
      width: 18px; height: 18px; background: var(--color-primary);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }

    /* ═══════════════════════════════════════════════════
       TESTIMONIALS — dark band
    ═══════════════════════════════════════════════════ */
    /* ═══════════════════════════════════════════════════
       TESTIMONIALS CAROUSEL
    ═══════════════════════════════════════════════════ */
    .testimonials-section {
      background: var(--color-surface-dark);
      padding: var(--space-xxl) 0;
    }
    .reviews-carousel {
      position: relative;
      margin-top: var(--space-xl);
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }
    .reviews-track-wrap {
      overflow: hidden;
      flex: 1;
      min-width: 0;
      /* Soft fade at both edges so cards ease in and out of view */
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
    .reviews-track {
      display: flex;
      gap: var(--space-lg);
      width: max-content;
      will-change: transform;
    }
    .testimonial {
      flex: 0 0 auto;
      width: clamp(300px, 78vw, 360px);
      background: var(--color-surface-dark-elevated);
      border: 1px solid rgba(255,255,255,0.07);
      padding: var(--space-lg);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 360px;
      overflow: hidden;
    }
    .testimonial__avatar {
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 13px; color: #fff;
      margin-bottom: 10px; flex-shrink: 0;
    }
    .testimonial__meta {
      margin-bottom: 4px;
    }
    .testimonial__author {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark);
    }
    .testimonial__reviewer-info {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-caption-size); color: var(--color-on-dark-soft);
      margin-top: 2px;
    }
    .testimonial__stars {
      display: flex; gap: 2px; margin-bottom: 8px; margin-top: 6px;
    }
    .testimonial__star { color: #f59e0b; font-size: 13px; }
    .testimonial__quote {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: 13px; line-height: 1.6;
      color: var(--color-on-dark-soft);
      flex: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 7;
      -webkit-box-orient: vertical;
      max-height: calc(7 * 13px * 1.6);
    }
    .testimonial__time {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-caption-size); color: rgba(255,255,255,0.3);
      margin-top: 8px;
      flex-shrink: 0;
    }
    /* Continuous marquee — arrows & dots hidden (motion is automatic) */
    #reviewsPrev, #reviewsNext { display: none; }
    /* Nav buttons — sit on left/right sides of the track */
    .reviews-nav {
      display: none;
      align-items: center; justify-content: center;
      gap: var(--space-md); margin-top: var(--space-lg);
    }
    .reviews-btn {
      width: 40px; height: 40px;
      border: 1.5px solid rgba(255,255,255,0.18);
      background: var(--color-surface-dark-elevated);
      color: var(--color-on-dark);
      border-radius: var(--radius-none);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
    }
    .reviews-btn:hover {
      border-color: var(--color-primary);
      background: rgba(28,105,212,0.15);
      color: var(--color-primary);
    }
    .reviews-btn:disabled {
      opacity: 0.2; cursor: default;
      pointer-events: none;
    }
    .reviews-dots {
      display: flex; gap: 8px; align-items: center;
    }
    .reviews-dot {
      width: 6px; height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.2);
      border: none; cursor: pointer; padding: 0;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .reviews-dot.active {
      background: var(--color-primary);
      transform: scale(1.4);
    }
    /* Google badge */
    .reviews-google-badge {
      display: inline-flex; align-items: center; gap: 8px;
      margin-bottom: var(--space-xs);
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
    }
    .reviews-google-badge svg { flex-shrink: 0; }

    /* ═══════════════════════════════════════════════════
       ESTIMATE CTA BAND
    ═══════════════════════════════════════════════════ */
    .estimate-band {
      position: relative; overflow: hidden;
      background: var(--color-hero-bg);
      padding: clamp(64px, 9vw, 112px) 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .estimate-band::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(60% 130% at 50% 0%, rgba(28,105,212,0.28), transparent 62%),
        radial-gradient(45% 120% at 88% 110%, rgba(28,105,212,0.16), transparent 70%);
    }
    .estimate-band .container { position: relative; z-index: 1; }
    .estimate-inner {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: var(--space-lg);
    }
    .estimate-band__kicker { display: flex; align-items: center; gap: 14px; }
    .estimate-band__kicker-line { width: 28px; height: 2px; background: var(--color-primary); }
    .estimate-band__kicker-text {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--color-primary);
    }
    .estimate-inner__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: clamp(32px, 5vw, 54px); line-height: 1.05;
      letter-spacing: -0.5px; color: var(--color-on-dark); max-width: 760px;
    }
    .estimate-inner__sub {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); line-height: 1.6;
      color: var(--color-on-dark-soft); max-width: 520px;
    }
    .estimate-actions {
      display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center;
      margin-top: var(--space-xs);
    }
    .btn--white {
      background: var(--color-on-primary); color: var(--color-primary);
      border-color: var(--color-on-primary);
    }
    .btn--white:hover { background: #f0f0f0; }

    /* ═══════════════════════════════════════════════════
       ABOUT PAGE
    ═══════════════════════════════════════════════════ */
    .about-hero {
      position: relative; overflow: hidden;
      background: var(--color-surface-dark);
      padding: var(--space-section) 0;
    }
    .about-hero::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(70% 130% at 6% 0%, rgba(28,105,212,0.22), transparent 58%),
        radial-gradient(50% 120% at 100% 100%, rgba(28,105,212,0.10), transparent 70%);
    }
    .about-hero .container { position: relative; z-index: 1; }
    .about-hero__content { max-width: 900px; }
    .about-body { background: var(--color-hero-bg); padding: var(--space-section) 0; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: start; }
    .about-text__p {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); line-height: 1.7;
      color: var(--color-on-dark-soft); margin-bottom: var(--space-md);
    }
    .team-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
    }
    .team-card {
      background: var(--color-surface-dark-elevated);
      padding: var(--space-xl);
    }
    .team-card__name {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-sm-size); color: var(--color-on-dark); margin-bottom: 4px;
    }
    .team-card__role {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft); margin-bottom: 10px;
    }
    .team-card__bio {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.65; color: var(--color-on-dark-soft);
    }
    .cert-row {
      display: flex; gap: 1px; background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08); margin-top: var(--space-xl);
    }
    .cert-badge {
      flex: 1; background: var(--color-surface-dark-elevated);
      padding: var(--space-md) var(--space-lg);
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-caption-tracking);
      text-transform: uppercase; color: var(--color-on-dark-soft); text-align: center;
    }

    /* ═══════════════════════════════════════════════════
       ABOUT — founder bio, values, heritage
    ═══════════════════════════════════════════════════ */
    .bio-section { background: var(--color-hero-bg); padding: var(--space-section) 0; }
    .bio-grid {
      display: grid; grid-template-columns: 1.05fr 0.95fr;
      gap: var(--space-xxl); align-items: center;
    }
    .bio-lead {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-lg-size); line-height: 1.4;
      color: var(--color-on-dark); margin: 0 0 var(--space-md);
    }
    .bio-photo {
      position: relative; aspect-ratio: 4/5; border-radius: 14px;
      background: var(--color-surface-dark-elevated);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .bio-photo__note {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-label-tracking);
      text-transform: uppercase; color: var(--color-muted-soft);
    }

    .values-section { background: var(--color-surface-dark); padding: var(--space-section) 0; }
    .values-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
      margin-top: var(--space-xl);
    }
    .value-item { background: var(--color-surface-dark); padding: var(--space-xl); }
    .value-item__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--color-primary); margin-bottom: 10px;
    }
    .value-item__body {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.65; color: var(--color-on-dark-soft);
    }

    .certs-section { background: var(--color-surface-dark); padding: var(--space-section) 0; }

    @media (max-width: 768px) {
      .bio-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
      .bio-photo { aspect-ratio: 16/11; }
      .values-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════
       SERVICES PAGE
    ═══════════════════════════════════════════════════ */
    .services-page-hero {
      position: relative; overflow: hidden;
      background: var(--color-surface-dark); padding: var(--space-section) 0;
    }
    .services-page-hero::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(70% 130% at 6% 0%, rgba(28,105,212,0.22), transparent 58%),
        radial-gradient(50% 120% at 100% 100%, rgba(28,105,212,0.10), transparent 70%);
    }
    .services-page-hero .container { position: relative; z-index: 1; }
    .service-detail-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
      margin-top: var(--space-xl);
    }
    .service-detail-card {
      background: var(--color-surface-dark-elevated);
      padding: var(--space-xxl) var(--space-xl);
      display: flex; flex-direction: column;
    }
    .service-detail-card .btn { margin-top: auto; align-self: flex-start; }
    .service-detail-card__icon { color: var(--color-primary); margin-bottom: 16px; }
    .service-detail-card__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-lg-size); color: var(--color-on-dark); margin-bottom: 10px;
    }
    .service-detail-card__body {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.7; color: var(--color-on-dark-soft);
      margin-bottom: 16px;
    }
    .service-detail-card__list {
      display: flex; flex-direction: column; gap: 6px;
      margin-bottom: var(--space-lg);
    }
    .service-detail-card__list li {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
    }
    .service-detail-card__list li::before {
      content: '';
      width: 4px; height: 4px; border-radius: var(--radius-full);
      background: var(--color-primary); flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════════════
       SPECIALIST DIFFERENCE — comparison table
    ═══════════════════════════════════════════════════ */
    .compare-section { background: var(--color-hero-bg); padding: var(--space-section) 0; }
    .compare-table {
      margin-top: var(--space-xl);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .compare-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
    .compare-row + .compare-row { border-top: 1px solid rgba(255,255,255,0.08); }
    .compare-row--head { background: var(--color-surface-dark-elevated); }
    .compare-cell {
      padding: var(--space-md) var(--space-lg);
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.4;
      color: var(--color-on-dark-soft);
    }
    .compare-cell + .compare-cell { border-left: 1px solid rgba(255,255,255,0.08); }
    .compare-cell--label {
      font-family: var(--font-display); font-weight: var(--weight-display);
      color: var(--color-primary);
    }
    .compare-head {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--color-on-dark);
    }
    .compare-head--muted { color: var(--color-muted-soft); }
    .compare-no { color: var(--color-muted-soft); }
    .compare-ico { width: 16px; height: 16px; flex-shrink: 0; }
    .compare-ico--yes { color: var(--color-primary); }
    .compare-ico--no { color: var(--color-muted-soft); }

    /* ═══════════════════════════════════════════════════
       FAQ — accordion
    ═══════════════════════════════════════════════════ */
    .faq-section { background: var(--color-hero-bg); padding: var(--space-section) 0; }
    .faq-list { margin-top: var(--space-xl); border-top: 1px solid rgba(255,255,255,0.08); max-width: 880px; margin-left: auto; margin-right: auto; }
    .faq-section .section-head__kicker { justify-content: center; }
    .faq-section .section-head__title { text-align: center; }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .faq-item summary {
      list-style: none; cursor: pointer;
      padding: var(--space-lg) 0;
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-md-size); color: var(--color-on-dark);
      transition: color 0.15s ease;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: var(--color-primary); }
    .faq-item[open] summary { color: var(--color-primary); }
    .faq-item__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
    .faq-item__icon::before, .faq-item__icon::after {
      content: ""; position: absolute; background: currentColor;
      transition: opacity 0.2s ease;
    }
    .faq-item__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
    .faq-item__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
    .faq-item[open] .faq-item__icon::after { opacity: 0; }
    .faq-item__body {
      padding: 0 0 var(--space-lg);
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); line-height: 1.7;
      color: var(--color-on-dark-soft); max-width: 760px;
    }

    @media (max-width: 768px) {
      .compare-row { grid-template-columns: 1.3fr 0.85fr 0.85fr; }
      .compare-cell { padding: var(--space-sm) var(--space-md); }
      .faq-item summary { font-size: var(--type-title-sm-size); }
    }

    /* ═══════════════════════════════════════════════════
       CONTACT PAGE
    ═══════════════════════════════════════════════════ */
    /* Contact hero — big, bold, tone-on-black */
    .contact-hero {
      position: relative; overflow: hidden;
      background: var(--color-hero-bg);
      padding: clamp(48px, 7vw, 100px) 0 clamp(44px, 6vw, 80px);
    }
    .contact-hero::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(70% 130% at 6% 0%, rgba(28,105,212,0.22), transparent 58%),
        radial-gradient(50% 120% at 100% 100%, rgba(28,105,212,0.10), transparent 70%);
    }
    .contact-hero .container { position: relative; z-index: 1; }
    .contact-hero__crumb, .page-crumb {
      display: flex; align-items: center; gap: 10px; margin-bottom: 26px;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
    }
    .contact-hero__crumb a, .page-crumb a { color: inherit; text-decoration: none; }
    .contact-hero__crumb a:hover, .page-crumb a:hover { color: var(--color-on-dark); }
    .contact-hero__crumb .sep, .page-crumb .sep { color: var(--color-primary); }
    .contact-hero__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: clamp(40px, 6.5vw, 76px); line-height: 1.02;
      letter-spacing: -0.5px; color: var(--color-on-dark); margin-top: 14px;
    }
    .contact-hero__sub {
      margin-top: 20px; max-width: 560px;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); line-height: 1.6;
      color: var(--color-on-dark-soft);
    }

    /* Details + form — dark */
    .contact-page {
      position: relative; overflow: hidden;
      background: var(--color-surface-dark);
      padding: var(--space-section) 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .contact-page::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(45% 80% at 100% 0%, rgba(28,105,212,0.10), transparent 70%);
    }
    .contact-page .container { position: relative; z-index: 1; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: start; }
    .contact-section-title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-display-sm-size); color: var(--color-on-dark);
      margin: 12px 0 var(--space-lg);
    }

    .contact-info__item {
      display: flex; gap: 16px; align-items: flex-start;
      padding: var(--space-lg) 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .contact-info__icon {
      flex: 0 0 auto; width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(28,105,212,0.14); color: var(--color-primary);
    }
    .contact-info__icon svg { width: 20px; height: 20px; }
    .contact-info__body { min-width: 0; }
    .contact-info__label {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 13px; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px;
    }
    .contact-info__value {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); color: var(--color-on-dark); line-height: 1.5;
    }
    .contact-info__value a { color: inherit; text-decoration: none; }
    .contact-info__value a:hover { color: var(--color-primary); }
    .contact-info__sub {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft); margin-top: 4px;
    }

    /* Hours mini-table */
    .hours-label {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--color-on-dark-soft); margin: var(--space-xl) 0 var(--space-xs);
    }
    .hours-row {
      display: flex; justify-content: space-between; gap: 16px;
      padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
      font-family: var(--font-body); font-size: var(--type-body-sm-size);
      color: var(--color-on-dark);
    }
    .hours-row span:last-child { color: var(--color-on-dark-soft); }
    .hours-row--closed span:last-child { color: var(--color-m-red); }

    /* Social icons under hours */
    .contact-social { display: flex; gap: 8px; margin-top: var(--space-xl); }
    .contact-social__link {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.55);
      text-decoration: none; background: transparent;
      transition: all 0.15s ease;
    }
    .contact-social__link svg { width: 18px; height: 18px; }
    .contact-social__link--fb   { color: #1877f2; }
    .contact-social__link--nd   { color: #00b347; }
    .contact-social__link--yelp { color: #d32323; }
    .contact-social__link--ig   { color: #e1306c; }

    /* Form card */
    .contact-form-card {
      background: var(--color-surface-dark-elevated);
      border: 1px solid rgba(255,255,255,0.08);
      padding: clamp(24px, 3vw, 40px);
    }
    .form { display: flex; flex-direction: column; gap: var(--space-md); }
    .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
    .form__group { display: flex; flex-direction: column; gap: 6px; }
    .form__label {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-caption-tracking);
      text-transform: uppercase; color: var(--color-on-dark);
    }
    .form__input, .form__select, .form__textarea {
      height: 48px; padding: 0 var(--space-md);
      background: var(--color-hero-bg); color: var(--color-on-dark);
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius-none); outline: none;
      transition: border-color 0.15s ease; width: 100%;
    }
    .form__input::placeholder, .form__textarea::placeholder { color: var(--color-muted-soft); }
    .form__textarea { height: 120px; padding: var(--space-md); resize: vertical; }
    .form__input:focus, .form__select:focus, .form__textarea:focus {
      border-color: var(--color-primary);
    }
    .form__submit { margin-top: var(--space-xs); }

    /* Map section — tone-on-black frame around a Google map */
    .map-section {
      position: relative; overflow: hidden;
      background: var(--color-hero-bg);
      padding: var(--space-section) 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .map-section__head {
      display: flex; justify-content: space-between; align-items: flex-end;
      flex-wrap: wrap; gap: 16px; margin-bottom: var(--space-xl);
    }
    .map-section__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-display-sm-size); color: var(--color-on-dark); margin-top: 12px;
    }
    .map-section__sub {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft); margin-top: 6px;
    }
    .map-directions {
      display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking);
      text-transform: uppercase; color: var(--color-primary);
    }
    .map-frame {
      width: 100%; height: 460px; display: block; line-height: 0;
      border: 1px solid rgba(255,255,255,0.10);
    }
    .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

    /* ═══════════════════════════════════════════════════
       MAP PLACEHOLDER
    ═══════════════════════════════════════════════════ */
    /* map embed — full-width iframe, no extra CSS needed */

    /* ═══════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════ */
    .site-footer {
      background: var(--color-hero-bg);
      padding: var(--space-section) 0 var(--space-xxl);
    }
    .footer-top {
      display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: var(--space-xl); padding-bottom: var(--space-xxl);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: var(--space-xxl);
    }
    .footer-brand__name {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-sm-size); color: var(--color-on-dark); margin-bottom: 4px;
    }
    .footer-brand__sub {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft); margin-bottom: 20px;
    }
    .footer-logo-img {
      width: auto;
      height: 120px;
      display: block;
      margin-bottom: var(--space-lg);
    }
    .footer-brand__contact {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft); line-height: 1.9;
    }
    .footer-brand__contact a { color: inherit; }
    .footer-brand__tagline {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.7;
      color: var(--color-on-dark-soft); max-width: 300px; margin-bottom: var(--space-lg);
    }
    .footer-contact { display: flex; flex-direction: column; gap: var(--space-md); }
    .footer-contact__group { display: flex; flex-direction: column; gap: 4px; }
    .footer-contact__label {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--color-muted-soft);
    }
    .footer-contact__value {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark);
      text-decoration: none; line-height: 1.5;
    }
    a.footer-contact__value:hover { color: var(--color-primary); }
    .footer-contact__cta { margin-top: var(--space-lg); }
    .footer-col__head {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-label-tracking);
      text-transform: uppercase; color: var(--color-on-dark);
      margin-bottom: var(--space-md);
    }
    .footer-col__list { display: flex; flex-direction: column; gap: 10px; }
    .footer-col__link {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
      text-decoration: none; background: none; border: none;
      cursor: pointer; padding: 0; text-align: left;
      transition: color 0.15s ease;
    }
    .footer-col__link:hover { color: var(--color-on-dark); }
    /* ── Rate & review us ─────────────────────────────── */
    .footer-review {
      padding-bottom: var(--space-xl);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: var(--space-xl);
    }
    .footer-review__head {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-caption-size); letter-spacing: var(--type-label-tracking);
      text-transform: uppercase; color: var(--color-on-dark);
      margin-bottom: var(--space-md);
    }
    .footer-review__list {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .footer-review__link {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 18px;
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--color-on-dark-soft); text-decoration: none;
      background: transparent;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .footer-review__link svg { flex: 0 0 auto; }
    .footer-review__link:hover { color: var(--color-on-dark); }
    /* Review platform icons in brand color; flip to white on hover fill */
    .footer-review__link--yelp svg      { color: #d32323; }
    .footer-review__link--facebook svg  { color: #1877f2; }
    .footer-review__link--nextdoor svg  { color: #00b347; }
    .footer-review__link--instagram svg { color: #e1306c; }
    .footer-review__link:hover svg      { color: #fff; }

    .footer-bottom {
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    }
    .footer-bottom__copy, .footer-bottom__links {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-caption-size); color: rgba(255,255,255,0.25);
    }
    .footer-bottom__links { display: flex; gap: var(--space-md); }
    .footer-bottom__right { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; justify-content: flex-end; }
    .footer-credit { color: rgba(255,255,255,0.5); display: inline-flex; }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .stats-grid      { grid-template-columns: repeat(2, 1fr); }
      .services-grid   { grid-template-columns: repeat(2, 1fr); }
      .process-grid    { grid-template-columns: repeat(2, 1fr); }
      .process-step    { border-bottom: 1px solid var(--color-hairline); }
      .why-grid        { grid-template-columns: 1fr; }
      .why-visual      { display: none; }
      .about-grid      { grid-template-columns: 1fr; }
      .contact-grid    { grid-template-columns: 1fr; }
      .benefit-grid    { grid-template-columns: repeat(2, 1fr); }
      .footer-top      { grid-template-columns: 1fr 1fr; }
      .service-detail-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 1080px) {
      .top-nav__phone { display: none; }
    }
    @media (max-width: 768px) {
      .top-nav__menu, .top-nav__cluster { display: none; }
      .top-nav__hamburger { display: flex; margin-left: auto; }
      .top-nav__logo-img { height: 58px; }
      .services-grid   { grid-template-columns: 1fr; }
      .stats-grid      { grid-template-columns: repeat(2, 1fr); }
      .process-grid    { grid-template-columns: 1fr; }
      .testimonial { width: clamp(280px, 82vw, 340px); }
      .footer-top      { grid-template-columns: 1fr; }
      .insurance-grid  { grid-template-columns: 1fr; }
      .form__row       { grid-template-columns: 1fr; }
      .benefit-grid    { grid-template-columns: 1fr; }
      .hero__title     { font-size: 42px; }
      .team-grid       { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .container { padding: 0 var(--space-md); }
      .hero__actions { flex-direction: column; }
      .hero__trust   { flex-direction: column; gap: 12px; }
      .estimate-inner { text-align: center; justify-content: center; }
    }
  
    /* ═══════════════════════════════════════════════════
       SOCIAL SIDEBAR — fixed right edge on hero sections
    ═══════════════════════════════════════════════════ */
    .social-sidebar {
      position: absolute;
      right: max(24px, calc((100% - var(--container-max)) / 2 + var(--space-xl)));
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 10;
    }
    .social-sidebar__link {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(10,12,16,0.6);
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .social-sidebar__link svg {
      width: 18px; height: 18px;
      flex-shrink: 0;
    }
    .social-sidebar__link span { display: none; }
    /* Platform brand colors at rest; hover fills the tile and flips the icon white */
    .social-sidebar__link--fb     { color: #1877f2; }
    .social-sidebar__link--nd     { color: #00b347; }
    .social-sidebar__link--yelp   { color: #d32323; }
    .social-sidebar__link--ig     { color: #e1306c; }
    .social-sidebar__link--fb:hover   { background: #1877f2; border-color: #1877f2; color: #fff; }
    .social-sidebar__link--nd:hover   { background: #00b347; border-color: #00b347; color: #fff; }
    .social-sidebar__link--yelp:hover { background: #d32323; border-color: #d32323; color: #fff; }
    .social-sidebar__link--google:hover { background: #4285f4; border-color: #4285f4; color: #fff; }
    .social-sidebar__link--ig:hover   { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #dc2743; color: #fff; }
    @media (max-width: 768px) {
      .social-sidebar { display: none; }
    }
    /* ── Coupon pop-up (TEST) ────────────────────────────────────── */
    .coupon-overlay {
      position: fixed; inset: 0; z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(5,7,10,0.78);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      opacity: 0; visibility: hidden;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .coupon-overlay.open { opacity: 1; visibility: visible; }
    .coupon-card {
      position: relative; width: 100%; max-width: 520px;
      background: var(--color-surface-dark);
      border: 1px solid rgba(28,105,212,0.45);
      box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
      padding: 56px 48px 46px; text-align: center;
      transform: translateY(16px) scale(0.98);
      transition: transform .3s ease;
    }
    .coupon-overlay.open .coupon-card { transform: translateY(0) scale(1); }
    .coupon-card::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(120% 70% at 50% 0%, rgba(28,105,212,0.18), transparent 60%);
    }
    .coupon-card > * { position: relative; }
    .coupon-close {
      position: absolute; top: 14px; right: 14px;
      width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
      background: transparent; border: none; cursor: pointer;
      color: var(--color-on-dark-soft); border-radius: 50%;
      transition: background .15s ease, color .15s ease;
    }
    .coupon-close:hover { background: rgba(255,255,255,0.08); color: var(--color-on-dark); }
    .coupon-kicker {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--color-primary); margin-bottom: 14px;
    }
    .coupon-amount {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 64px; line-height: 1; letter-spacing: -1px;
      color: var(--color-on-dark); margin-bottom: 6px;
    }
    .coupon-amount span { color: var(--color-primary); }
    .coupon-alert-badge {
      width: 74px; height: 74px; margin: 0 auto 22px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: rgba(28,105,212,0.12);
      border: 1px solid rgba(28,105,212,0.45);
    }
    .coupon-alert-badge svg { width: 34px; height: 34px; color: var(--color-primary); }
    .coupon-headline--lg { font-size: 28px; margin-bottom: 16px; }
    .coupon-headline {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 20px; line-height: 1.3; color: var(--color-on-dark); margin-bottom: 14px;
    }
    .coupon-sub {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: 16px; line-height: 1.65; color: var(--color-on-dark-soft);
      margin: 0 auto 24px; max-width: 400px;
    }
    .coupon-code {
      display: inline-flex; align-items: center; gap: 10px;
      border: 1px dashed rgba(255,255,255,0.3); padding: 12px 20px; margin-bottom: 28px;
      font-family: var(--font-display); font-weight: var(--weight-display);
      letter-spacing: 3px; font-size: 18px; color: var(--color-on-dark);
    }
    .coupon-code small { font-size: 11px; letter-spacing: 1.5px; color: var(--color-on-dark-soft); font-weight: 400; }
    .coupon-actions { display: flex; flex-direction: column; gap: 14px; }
    .coupon-dismiss {
      background: none; border: none; cursor: pointer;
      font-family: var(--font-body); font-size: 13px;
      color: var(--color-on-dark-soft); text-decoration: underline; text-underline-offset: 3px;
    }
    .coupon-dismiss:hover { color: var(--color-on-dark); }
    .coupon-fineprint {
      margin-top: 20px; font-family: var(--font-body); font-size: 11px;
      line-height: 1.5; color: rgba(255,255,255,0.4);
    }
    @media (max-width: 480px) {
      .coupon-card { padding: 44px 24px 32px; }
      .coupon-amount { font-size: 52px; }
    }
    /* Reminder button — floats at the bottom-right, always visible on scroll */
    .coupon-tab {
      position: fixed; right: 20px; bottom: 20px;
      z-index: 9998;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 13px 18px;
      background: var(--color-primary); color: #fff;
      border: none; cursor: pointer;
      box-shadow: 0 12px 32px rgba(0,0,0,0.45);
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
      transform: translateY(150%); opacity: 0;
      transition: transform .4s cubic-bezier(.34,1.2,.64,1), opacity .3s ease, background .15s ease;
    }
    .coupon-tab.show { transform: translateY(0); opacity: 1; }
    .coupon-tab:hover { background: var(--color-primary-active); }
    .coupon-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
    @media (max-width: 480px) {
      .coupon-tab { right: 14px; bottom: 14px; padding: 12px 16px; font-size: 12px; }
    }

    /* ═══════════════════════════════════════════════════
       CAREERS — benefit cards + openings accordion
    ═══════════════════════════════════════════════════ */
    .careers-benefits {
      position: relative; overflow: hidden;
      background: var(--color-surface-dark);
      padding: var(--space-section) 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .careers-benefits::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(45% 80% at 0% 0%, rgba(28,105,212,0.10), transparent 70%);
    }
    .careers-benefits .container { position: relative; z-index: 1; }
    .benefit-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 1px; background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .benefit-card {
      background: var(--color-surface-dark-elevated);
      padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    }
    .benefit-card__num {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-lg-size); color: var(--color-primary);
      margin-bottom: var(--space-lg);
    }
    .benefit-card__title {
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-md-size); text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--color-on-dark); margin: 0 0 12px; line-height: 1.25;
    }
    .benefit-card__body {
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.6; color: var(--color-on-dark-soft); margin: 0;
    }

    /* Openings accordion */
    .careers-openings {
      position: relative; overflow: hidden;
      background: var(--color-hero-bg);
      padding: var(--space-section) 0;
    }
    .careers-openings::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(50% 70% at 50% 0%, rgba(28,105,212,0.10), transparent 70%);
    }
    .careers-openings .container { position: relative; z-index: 1; }
    .openings-head { text-align: center; margin-bottom: var(--space-xl); }
    .openings-head .section-head__kicker { justify-content: center; }
    .openings-list { max-width: 860px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.10); }
    .opening { border-bottom: 1px solid rgba(255,255,255,0.10); }
    .opening__head {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
      background: transparent; border: none; cursor: pointer;
      padding: var(--space-lg) 4px; text-align: left;
      font-family: var(--font-display); font-weight: var(--weight-display);
      font-size: var(--type-title-sm-size); letter-spacing: 0.5px; text-transform: uppercase;
      color: var(--color-on-dark); transition: color 0.15s ease;
    }
    .opening__head:hover { color: var(--color-primary); }
    .opening__icon {
      flex: 0 0 auto; width: 22px; height: 22px; position: relative; color: var(--color-primary);
    }
    .opening__icon::before, .opening__icon::after {
      content: ""; position: absolute; background: currentColor;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
    }
    .opening__icon::before { width: 16px; height: 2px; }
    .opening__icon::after  { width: 2px; height: 16px; transition: transform 0.2s ease, opacity 0.2s ease; }
    .opening.open .opening__icon::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; }
    .opening__panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
    .opening.open .opening__panel { max-height: 520px; }
    .opening__body {
      padding: 0 4px var(--space-lg);
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-md-size); line-height: 1.7; color: var(--color-on-dark-soft); margin: 0;
    }
    .openings-note {
      text-align: center; max-width: 560px; margin: var(--space-xl) auto 0;
      font-family: var(--font-body); font-weight: var(--weight-body);
      font-size: var(--type-body-sm-size); line-height: 1.6; color: var(--color-muted-soft);
    }
    .openings-note a { color: var(--color-primary); text-decoration: none; }

    /* Centered application form */
    .careers-apply .section-head__kicker { justify-content: center; }
    .careers-apply .contact-section-title { text-align: center; }
    .careers-apply .contact-form-card { max-width: 720px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════
   MULTI-PAGE BUILD — nav/footer links are now <a>
═══════════════════════════════════════════════════ */
.top-nav__link, .mobile-menu__link, .footer-col__link, .text-link { text-decoration: none; }
a.top-nav__link { display: inline-flex; align-items: center; }
a.mobile-menu__link { display: block; }
a.btn { text-decoration: none; }
a.footer-contact__cta { display: inline-flex; }

/* ═══════════════════════════════════════════════════
   SERVICE SUB-PAGES
═══════════════════════════════════════════════════ */
.svc-hero {
  position: relative;
  background: var(--color-hero-bg);
  padding: var(--space-xxl) 0 var(--space-section);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.svc-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 130% at 6% 0%, rgba(28,105,212,0.22), transparent 58%),
    radial-gradient(50% 120% at 100% 100%, rgba(28,105,212,0.10), transparent 70%);
}
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xxl); align-items: center; margin-top: var(--space-xl);
}
.svc-hero__kicker {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking);
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 14px;
}
.svc-hero__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(34px, 4vw, 52px); line-height: 1.08;
  color: var(--color-on-dark); margin: 0 0 16px;
}
.svc-hero__lead {
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-md-size); line-height: 1.7;
  color: var(--color-on-dark-soft); max-width: 46ch; margin: 0 0 var(--space-lg);
}
.svc-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.svc-hero__card {
  background: var(--color-surface-dark-elevated);
  border: 1px solid rgba(255,255,255,0.08);
}
.svc-hero__plate {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.22);
  background:
    linear-gradient(140deg, rgba(28,105,212,0.16), transparent 60%),
    #14181e;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.svc-hero__plate svg { width: 84px; height: 84px; }
.svc-hero__cardbody { padding: var(--space-lg); text-align: center; }
.svc-hero__cardtitle {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-title-sm-size); color: var(--color-on-dark); margin-bottom: 6px;
}
.svc-hero__cardtext {
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-sm-size); line-height: 1.6;
  color: var(--color-on-dark-soft); margin: 0;
}

.svc-body { background: var(--color-surface-dark); padding: var(--space-section) 0; }
.svc-body__grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: var(--space-xxl); }
.svc-body__main h2 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-display-sm-size); color: var(--color-on-dark); margin: 0 0 16px;
}
.svc-body__main h3 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-title-md-size); color: var(--color-on-dark); margin: var(--space-xl) 0 14px;
}
.svc-body__main p {
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-md-size); line-height: 1.75;
  color: var(--color-on-dark-soft); margin: 0 0 16px; max-width: 62ch;
}
.svc-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-check li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
}
.svc-check li::before {
  content: '✓'; color: var(--color-primary); font-weight: 700; line-height: 1.5; flex-shrink: 0;
}
.svc-aside {
  background: var(--color-surface-dark-elevated);
  border: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-lg); align-self: start;
}
.svc-aside__head {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-title-sm-size); color: var(--color-on-dark); margin-bottom: 14px;
}
.related-list { display: flex; flex-direction: column; gap: 8px; }
.related-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.related-link svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }
.related-link:hover { border-color: var(--color-primary); color: var(--color-on-dark); background: rgba(28,105,212,0.08); }

.areas-band { background: var(--color-hero-bg); padding: var(--space-section) 0; text-align: center; }
.areas-band__kicker {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking);
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 12px;
}
.areas-band__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh);
  color: var(--color-on-dark); margin: 0 0 14px;
}
.areas-band__sub {
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-md-size); line-height: 1.7; color: var(--color-on-dark-soft);
  max-width: 58ch; margin: 0 auto var(--space-xxl);
}
.areas-band__list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.area-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-md-size); color: var(--color-on-dark-soft);
}
.area-chip svg { width: 16px; height: 16px; color: var(--color-primary); }

.svc-cta {
  background: var(--color-surface-dark);
  padding: var(--space-section) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.svc-cta__inner {
  background: linear-gradient(135deg, var(--color-primary), #0d47a1);
  padding: var(--space-section) var(--space-xl); text-align: center;
}
.svc-cta__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh);
  color: #fff; margin: 0 0 14px;
}
.svc-cta__sub {
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-md-size); line-height: 1.7; color: rgba(255,255,255,0.88);
  max-width: 58ch; margin: 0 auto var(--space-xl);
}
.svc-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.svc-cta__actions .btn--primary { background: #fff; color: var(--color-primary); border-color: #fff; }
.svc-cta__actions .btn--outline-dark { border-color: rgba(255,255,255,0.7); color: #fff; }

/* Clickable service boxes on the services page */
a.service-detail-card { text-decoration: none; transition: background .15s ease; }
a.service-detail-card:hover { background: #2c3641; }
a.service-detail-card:hover .service-detail-card__title { color: var(--color-primary); }
.service-detail-card__more {
  margin-top: auto;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking);
  text-transform: uppercase; color: var(--color-primary);
}

@media (max-width: 900px) {
  .svc-hero__grid, .svc-body__grid { grid-template-columns: 1fr; }
  .svc-hero__card { max-width: 420px; }
}

/* Careers: resume upload control */
.form__file {
  width: 100%;
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-sm-size); color: var(--color-on-dark-soft);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-none);
  padding: 10px 12px;
}
.form__file::file-selector-button {
  margin-right: 14px; padding: 10px 18px; cursor: pointer;
  border: none; border-radius: var(--radius-none);
  background: var(--color-primary); color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-button-size); letter-spacing: var(--type-button-tracking);
  text-transform: uppercase;
  transition: background-color .15s ease;
}
.form__file::file-selector-button:hover { background: var(--color-primary-active); }
.form__file:focus { outline: none; border-color: var(--color-primary); }
.form__help {
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-caption-size); line-height: 1.5;
  color: rgba(255,255,255,0.45); margin: 8px 0 0;
}

/* About page: service tiles that route to the estimate form */
.about-services { background: var(--color-surface-dark); padding: var(--space-section) 0; }
.svc-tile-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--space-xl);
}
.svc-tile {
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-lg); text-decoration: none;
  background: var(--color-surface-dark-elevated);
  transition: background .15s ease, color .15s ease;
}
.svc-tile__icon { color: var(--color-primary); display: flex; flex-shrink: 0; }
.svc-tile__icon svg { width: 26px; height: 26px; }
.svc-tile__name {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--type-title-sm-size); line-height: 1.3; color: var(--color-on-dark);
}
.svc-tile:hover { background: #2c3641; }
.svc-tile:hover .svc-tile__name { color: var(--color-primary); }
@media (max-width: 1100px) { .svc-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .svc-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .svc-tile-grid { grid-template-columns: 1fr; } }

/* City chips are links to the estimate form, same as the service tiles */
a.area-chip { text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; }
a.area-chip:hover {
  border-color: var(--color-primary);
  background: rgba(28,105,212,0.10);
  color: var(--color-on-dark);
}
a.area-chip:hover svg { color: var(--color-primary); }

/* About hero: copy on the left, storefront photo on the right */
.about-hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xxl); align-items: center;
}
.about-hero__photo { position: relative; }
.about-hero__photo img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
@media (max-width: 900px) {
  .about-hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .about-hero__photo { max-width: 560px; }
}

/* Alternating section backgrounds: blue-glow band vs flat black */
.band-glow {
  position: relative; overflow: hidden;
  background: var(--color-hero-bg);
  padding: var(--space-section) 0;
}
.band-glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 130% at 6% 0%, rgba(28,105,212,0.20), transparent 58%),
    radial-gradient(50% 120% at 100% 100%, rgba(28,105,212,0.10), transparent 70%);
}
/* mirrored, so two glow bands on one page do not read as the same tile */
.band-glow--right::before {
  background:
    radial-gradient(70% 130% at 94% 0%, rgba(28,105,212,0.18), transparent 58%),
    radial-gradient(52% 120% at 0% 100%, rgba(28,105,212,0.10), transparent 70%);
}
.band-glow > .container { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════
   SECTION RHYTHM — home & about alternate glow / black
═══════════════════════════════════════════════════ */
.services-section, .process-section, .testimonials-section,
.bio-section, .about-services {
  position: relative; overflow: hidden;
  background: var(--color-hero-bg);
}
.services-section::before, .process-section::before, .testimonials-section::before,
.bio-section::before, .about-services::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 130% at 6% 0%, rgba(28,105,212,0.20), transparent 58%),
    radial-gradient(50% 120% at 100% 100%, rgba(28,105,212,0.10), transparent 70%);
}
/* mirrored on alternating glow bands so no two read as the same tile */
.services-section::before, .testimonials-section::before, .bio-section::before {
  background:
    radial-gradient(70% 130% at 94% 0%, rgba(28,105,212,0.18), transparent 58%),
    radial-gradient(52% 120% at 0% 100%, rgba(28,105,212,0.10), transparent 70%);
}
.services-section > .container, .process-section > .container,
.testimonials-section > .container, .bio-section > .container,
.about-services > .container { position: relative; z-index: 1; }
.testimonials-section > .reviews-carousel,
.testimonials-section > * { position: relative; z-index: 1; }

/* black bands between the glows */
.values-section { background: var(--color-hero-bg); }

/* ═══════════════════════════════════════════════════
   HOME HERO — copy left, photo carousel right
═══════════════════════════════════════════════════ */
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xxl); align-items: center;
}
.hero__grid .hero__inner { max-width: none; }

.hero-carousel { position: relative; }
.hero-carousel__frame {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--color-surface-dark-elevated);
}
.hero-carousel__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .6s ease;
}
.hero-carousel__slide.is-active { opacity: 1; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* location badge, bottom left over the photo */
.hero-carousel__place {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(13,15,18,0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-body-sm-size); line-height: 1; color: var(--color-on-dark);
  transition: background .15s ease, border-color .15s ease;
}
.hero-carousel__place svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; }
.hero-carousel__place:hover { background: rgba(13,15,18,0.94); border-color: var(--color-primary); }

.hero-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.hero-carousel__dot {
  width: 28px; height: 4px; padding: 0; cursor: pointer;
  border: none; border-radius: 999px;
  background: rgba(255,255,255,0.20);
  transition: background .2s ease, width .2s ease;
}
.hero-carousel__dot.is-active { background: var(--color-primary); width: 40px; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero-carousel { max-width: 620px; }
}

/* Web3Forms advanced uploader (FilePond) restyled for the dark form */
.filepond--root { margin-bottom: 0; font-family: var(--font-body); }
.filepond--panel-root {
  background-color: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-none);
}
.filepond--drop-label { color: rgba(255,255,255,0.55); }
.filepond--drop-label label { font-size: var(--type-body-sm-size); }
.filepond--label-action { color: var(--color-primary); text-decoration-color: var(--color-primary); }
.filepond--item-panel { background-color: var(--color-surface-dark-elevated); }
.filepond--file { color: var(--color-on-dark); }
.filepond--file-action-button { cursor: pointer; }
.filepond--file-action-button:hover { background-color: var(--color-primary); }
.filepond--credits { display: none; }

.form__fineprint {
  margin: 14px 0 0;
  font-family: var(--font-body); font-weight: var(--weight-body);
  font-size: var(--type-caption-size); line-height: 1.6;
  color: rgba(255,255,255,0.45);
}