/* Self-hosted fonts (latin subset) — formerly loaded from Google Fonts */
    @font-face {
      font-family: 'Barlow Condensed';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Barlow Condensed';
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: url('../fonts/barlow-condensed-900-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url('../fonts/inter-latin.woff2') format('woff2');
    }

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

    html { scroll-behavior: smooth; }

    :root {
      --black:       #d4eeff;  /* page background (now light blue) */
      --blue:        #005A8B;
      --sky:         #0077B6;
      --offwhite:    #0d1b2a;  /* primary text / headlines (dark navy) */
      --gray:        #46607a;  /* muted / secondary text (slate) */
      --card-bg:     #ffffff;  /* cards / panels / form fields */
      --border:      #c3e0f4;  /* dividers / hairline borders */
      --card-border: #bcdff2;  /* soft light-blue card border */
      --header-h:    64px;     /* sticky header height */
    }

    /* Accessible skip link */
    .skip-link {
      position: absolute;
      left: 12px;
      top: -64px;
      z-index: 3000;
      background: var(--blue);
      color: #fff;
      padding: 10px 16px;
      border-radius: 4px;
      font-weight: 600;
      text-decoration: none;
      transition: top 0.2s ease;
    }
    .skip-link:focus { top: 10px; }

    /* Visually hidden, available to screen readers */
    .sr-only {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; border: 0;
    }

    body {
      background: var(--black);
      color: var(--offwhite);
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
    }

    /* ── SEASONAL BANNER (in normal flow; scrolls away above the sticky header) ── */
    .seasonal-banner {
      position: relative;
      min-height: 44px;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 500;
      padding: 9px 52px;
      text-align: center;
    }
    .seasonal-banner strong { font-weight: 700; }
    .seasonal-banner svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
    .seasonal-banner.dismissed,
    .banner-hidden .seasonal-banner { display: none; }
    .banner-close {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(255,255,255,0.7);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 4px 8px;
      transition: color 0.2s;
    }
    .banner-close:hover { color: #fff; }
    .banner-close:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

    /* ── SCROLL PROGRESS ── */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 3px;
      background: var(--sky);
      z-index: 2000;
      transition: width 0.1s linear;
      pointer-events: none;
    }

    /* ── HERO ── */
    .hero {
      background: var(--black);
      border-bottom: 3px solid var(--blue);
      padding: clamp(48px, 7vw, 88px) 24px 72px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero::before,
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .hero::before {
      z-index: 0;
      background:
        radial-gradient(ellipse at 25% 60%, rgba(0,90,139,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 25%, rgba(0,119,182,0.1) 0%, transparent 50%);
      animation: heroBreath 10s ease-in-out infinite alternate;
    }

    .hero::after {
      z-index: 1;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 300px 300px;
      opacity: 0.04;
      mix-blend-mode: overlay;
    }

    .hero > * { position: relative; z-index: 2; }

    @keyframes heroBreath {
      from { opacity: 0.5; }
      to   { opacity: 1; }
    }

    .hero-eyebrow,
    .section-label {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--blue);
    }
    .hero-eyebrow  { margin-bottom: 18px; }
    .section-label { margin-bottom: 10px; }

    .hero h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(52px, 12vw, 96px);
      line-height: 0.92;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: var(--offwhite);
    }

    .hero h1 span { color: var(--sky); display: block; }

    .hero-tagline {
      margin-top: 22px;
      font-size: 17px;
      color: #46607a;
      font-style: italic;
      letter-spacing: 0.01em;
    }

    .hero-cta {
      display: inline-block;
      margin-top: 32px;
      background: var(--blue);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 16px 40px;
      border-radius: 3px;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s;
    }
    .hero-cta:hover { background: var(--sky); transform: translateY(-2px); }
    .hero-cta:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

    .hero-cta-note {
      font-size: 12px;
      color: #46607a;
      letter-spacing: 0.05em;
      margin-top: 10px;
    }

    /* ── SCROLL ARROW ── */
    .scroll-arrow {
      display: flex;
      justify-content: center;
      margin-top: 36px;
      color: var(--sky);
      opacity: 0.55;
      animation: bounceArrow 2.2s ease-in-out infinite;
      cursor: pointer;
    }

    .scroll-arrow svg { width: 28px; height: 28px; }

    @keyframes bounceArrow {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(7px); }
    }

    /* ── SERVICES STRIP ── */
    .services-strip {
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #c3e0f4;
      overflow-x: auto;
    }

    .service-pill {
      flex: 1;
      min-width: 140px;
      text-align: center;
      padding: 22px 16px;
      border-right: 1px solid #c3e0f4;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #46607a;
      transition: background 0.2s, color 0.2s;
    }
    .service-pill:last-child { border-right: none; }
    .service-pill:hover { background: var(--sky); color: #fff; }
    .service-pill .icon { display: block; margin-bottom: 6px; line-height: 0; }
    .service-pill .icon svg { width: 26px; height: 26px; }

    /* Compact 2×2 grid so the strip never overflows on small screens */
    @media (max-width: 600px) {
      .services-strip { flex-wrap: wrap; overflow-x: visible; }
      .service-pill {
        flex: 1 1 50%;
        min-width: 0;
        padding: 15px 10px;
        font-size: 13px;
        border-bottom: 1px solid #c3e0f4;
      }
      .service-pill:nth-child(2) { border-right: none; }
      .service-pill:nth-child(3),
      .service-pill:nth-child(4) { border-bottom: none; }
      .service-pill .icon svg { width: 22px; height: 22px; }
    }

    /* ── TRUST BADGES ── */
    .trust-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-bottom: 1px solid #c3e0f4;
    }

    @media (max-width: 600px) {
      .trust-strip { grid-template-columns: repeat(2, 1fr); }
      .trust-badge:nth-child(2) { border-right: none; }
      .trust-badge:nth-child(3),
      .trust-badge:nth-child(4) { border-top: 1px solid #c3e0f4; }
    }

    .trust-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 16px 12px;
      border-right: 1px solid #c3e0f4;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #46607a;
    }
    .trust-badge:last-child { border-right: none; }
    a.trust-badge { text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; }
    a.trust-badge:hover { background: var(--sky); color: #fff; }
    a.trust-badge:hover .trust-icon { color: #fff; }
    a.trust-badge:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
    .trust-icon { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; color: var(--sky); }
    .trust-icon svg { width: 18px; height: 18px; }

    /* ── PRICING ── */
    .section {
      max-width: 860px;
      margin: 0 auto;
      padding: 64px 24px;
    }

    #powerwashing { padding-top: 0; }

    .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(36px, 7vw, 58px);
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 40px;
    }

    .section-desc {
      color: #46607a;
      font-size: 14px;
      margin-top: -20px;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }

    .price-card {
      background: var(--card-bg);
      border: 1px solid #bcdff2;
      border-radius: 4px;
      padding: 28px 24px;
      position: relative;
      transition: border-color 0.2s, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .price-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,90,139,0.2);
    }

    @keyframes featuredPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0,90,139,0); }
      50%       { box-shadow: 0 0 22px 4px rgba(0,90,139,0.28); }
    }

    .price-card.featured {
      border-color: var(--blue);
    }

    /* Pulse once when scrolled into view (class set by site.js), then rest. */
    .price-card.featured.in-view {
      animation: featuredPulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
    }

    .price-card.featured::before {
      content: "MOST POPULAR";
      position: absolute;
      top: -12px;
      left: 20px;
      background: var(--blue);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.15em;
      padding: 3px 10px;
      border-radius: 2px;
    }

    .card-service {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 8px;
    }

    .card-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 22px;
      text-transform: uppercase;
      color: var(--offwhite);
      margin-bottom: 16px;
    }

    .card-price {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 42px;
      color: var(--offwhite);
      line-height: 1;
    }

    .card-price sup {
      font-size: 22px;
      vertical-align: top;
      margin-top: 6px;
      display: inline-block;
      color: var(--sky);
    }

    .card-price sub {
      font-size: 13px;
      font-weight: 500;
      color: var(--gray);
      font-family: 'Inter', sans-serif;
    }

    .card-from {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 4px;
    }

    .card-divider {
      border: none;
      border-top: 1px solid #bcdff2;
      margin: 18px 0;
    }

    .card-includes {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .card-includes li {
      font-size: 14px;
      color: #46607a;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .card-includes li::before {
      content: "✓";
      color: var(--sky);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* ── CLICKABLE PRICING (jumps to quote page) ── */
    .price-card { cursor: pointer; }

    .card-quote-link {
      display: inline-block;
      margin-top: 18px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--sky);
      text-decoration: none;
    }
    .card-quote-link .arrow { display: inline-block; transition: transform 0.2s; }
    .price-card:hover .card-quote-link { color: var(--offwhite); }
    .price-card:hover .card-quote-link .arrow { transform: translateX(4px); }

    /* Stretched link: makes the whole card clickable while keeping a real <a> */
    .card-quote-link::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 4px;
    }
    .price-card:focus-within { outline: 2px solid var(--sky); outline-offset: 2px; }

    /* Clickable snow-removal rows */
    a.snow-pricing-row {
      text-decoration: none;
      cursor: pointer;
      transition: color 0.2s, padding-left 0.2s;
    }
    a.snow-pricing-row:hover { color: var(--offwhite); padding-left: 4px; }
    a.snow-pricing-row:hover strong { color: var(--sky); }
    a.snow-pricing-row:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

    /* ── POWER WASHING BEFORE / AFTER ── */
    .pw-ba { margin-top: 44px; }
    .pw-ba-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 22px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--offwhite);
      margin-bottom: 16px;
    }
    .pw-ba-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 600px) {
      .pw-ba-grid { grid-template-columns: 1fr; }
    }
    .pw-ba-item { display: flex; flex-direction: column; gap: 8px; margin: 0; }
    .pw-ba-frame {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #bcdff2;
      background: #eef7fd;
    }
    .pw-ba-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .pw-ba-frame .ba-label { position: absolute; top: 10px; left: 10px; }
    .pw-ba-frame[data-ba] { cursor: col-resize; user-select: none; -webkit-user-select: none; }
    .pw-ba-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      background: repeating-linear-gradient(45deg, #e9f3fb 0, #e9f3fb 12px, #f3f9fe 12px, #f3f9fe 24px);
    }
    .pw-ba-soon {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gray);
    }
    .pw-ba-cap {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--gray);
      text-align: center;
    }

    /* ── POWER WASHING PRICING COLUMNS ── */
    .pw-pricing-cols {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }
    .pw-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ── BEFORE/AFTER GALLERY ── */
    .ba-section {
      border-top: 1px solid #c3e0f4;
      padding: 64px 24px;
    }

    .ba-inner {
      max-width: 960px;
      margin: 0 auto;
    }

    .ba-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 8px;
    }

    .ba-card { display: flex; flex-direction: column; gap: 8px; }

    .ba-frame {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #bcdff2;
      cursor: col-resize;
      user-select: none;
      -webkit-user-select: none;
    }

    .ba-before,
    .ba-after {
      position: absolute;
      inset: 0;
    }

    .ba-after { clip-path: inset(0 0 0 50%); }

    .ba-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 40px;
      transform: translateX(-50%);
      cursor: col-resize;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-user-drag: none;
      touch-action: none;
    }

    .ba-divider::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: rgba(255,255,255,0.85);
    }

    .ba-handle {
      position: relative;
      z-index: 1;
      width: 34px;
      height: 34px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
      color: #111;
      flex-shrink: 0;
    }

    .ba-labels {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      pointer-events: none;
      z-index: 5;
    }

    .ba-label {
      background: rgba(0,0,0,0.65);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 2px;
    }

    .ba-caption {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--gray);
      text-align: center;
    }

    /* ── SNOW REMOVAL ── */
    .snow-section {
      border-top: 1px solid #c3e0f4;
      background: #ffffff;
    }

    .snow-band {
      max-width: 860px;
      margin: 0 auto;
      padding: 56px 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    @media (max-width: 600px) {
      .snow-band { grid-template-columns: 1fr; }
    }

    .snow-pricing-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #c3e0f4;
      font-size: 15px;
      color: #46607a;
    }
    .snow-pricing-row:last-child { border-bottom: none; }
    .snow-pricing-row strong {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      color: var(--offwhite);
    }

    .js-loaded .snow-pricing-row {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .js-loaded .snow-pricing-row.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── WHY US ── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-top: 8px;
    }

    .why-card {
      padding: 24px 20px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      position: relative;
    }

    .why-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: var(--blue);
      transform: scaleY(1);
      transform-origin: top;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay, 0s);
    }

    .js-loaded .why-card::before { transform: scaleY(0); }
    .js-loaded .why-card.visible::before { transform: scaleY(1); }

    .why-icon { margin-bottom: 12px; display: block; line-height: 0; color: var(--sky); }
    .why-icon svg { width: 28px; height: 28px; }
    .why-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 18px;
      text-transform: uppercase;
      color: var(--offwhite);
      margin-bottom: 6px;
    }
    .why-desc { font-size: 13px; color: #46607a; line-height: 1.55; }

    /* ── FAQ ── */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid #c3e0f4;
    }

    .faq-item { border-bottom: 1px solid #c3e0f4; }

    .faq-q {
      width: 100%;
      background: none;
      border: none;
      color: var(--offwhite);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      text-align: left;
      padding: 18px 0;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      line-height: 1.4;
      transition: color 0.2s;
    }
    .faq-q:hover { color: var(--sky); }
    .faq-q:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

    .faq-icon {
      position: relative;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
    }
    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      background: var(--sky);
      border-radius: 1px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .faq-icon::before { width: 2px; height: 14px; top: 3px; left: 9px; }
    .faq-icon::after  { width: 14px; height: 2px; top: 9px; left: 3px; }
    .faq-item.open .faq-icon::before { transform: rotate(90deg); opacity: 0; }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .faq-item.open .faq-a { max-height: 500px; }

    .faq-a p {
      padding-bottom: 18px;
      font-size: 14px;
      color: #46607a;
      line-height: 1.65;
      max-width: 640px;
    }

    /* ── CTA FOOTER ── */
    .cta-footer {
      background: var(--blue);
      padding: 56px 24px;
    }

    .cta-footer-inner {
      max-width: 960px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 52px;
      align-items: start;
    }

    @media (max-width: 720px) {
      .cta-footer-inner {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .cta-left { text-align: center; }
      .contact-row { justify-content: center; }
    }

    .cta-footer h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(32px, 7vw, 56px);
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 10px;
      color: #fff;
    }

    .cta-footer > .cta-footer-inner > .cta-left > p:not(.footer-note) {
      color: rgba(255,255,255,0.8);
      font-size: 15px;
      margin-bottom: 28px;
    }

    .contact-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
    }

    .contact-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      padding: 12px 20px;
      border-radius: 3px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 0.02em;
      white-space: nowrap;
      transition: background 0.2s;
    }
    .contact-chip svg { width: 17px; height: 17px; flex-shrink: 0; }
    .contact-chip:hover { background: rgba(0,0,0,0.4); }

    /* Keep contact chips on one line — let them shrink rather than stack on small screens */
    @media (max-width: 480px) {
      .contact-row { gap: 8px; }
      .contact-chip { padding: 10px 13px; font-size: 13px; gap: 6px; }
      .contact-chip svg { width: 15px; height: 15px; }
    }
    .contact-chip:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

    @keyframes chipPulse {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.045); }
      100% { transform: scale(1); }
    }
    .contact-chip.pulse { animation: chipPulse 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

    .cta-left .footer-note {
      margin-top: 24px;
      margin-bottom: 0;
      font-size: 12px;
      color: rgba(255,255,255,0.75);
    }

    /* ── QUOTE FORM ── */
    .quote-form-wrap {
      background: rgba(0,0,0,0.2);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px;
      padding: 28px 24px;
    }

    .quote-form-wrap h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: #fff;
      margin-bottom: 20px;
    }

    .form-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    @media (max-width: 480px) {
      .form-row-2 { grid-template-columns: 1fr; }
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px;
    }

    .form-field label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 3px;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      padding: 10px 12px;
      outline: 2px solid transparent;
      transition: border-color 0.2s, outline-color 0.2s;
      width: 100%;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder { color: rgba(255,255,255,0.3); }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus { border-color: rgba(255,255,255,0.5); }
    .form-field input:focus-visible,
    .form-field select:focus-visible,
    .form-field textarea:focus-visible { outline-color: rgba(0,119,182,0.8); }

    .form-field textarea { resize: vertical; min-height: 76px; }

    .form-field select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 7L11 1' stroke='rgba(255,255,255,0.45)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
      cursor: pointer;
    }

    .form-field select option { background: #111; color: #fff; }

    .field-error {
      font-size: 11px;
      color: #c0392b;
      display: none;
    }

    .form-field.has-error input,
    .form-field.has-error select,
    .form-field.has-error textarea { border-color: #c0392b; }

    .form-field.has-error .field-error { display: block; }

    .form-submit {
      width: 100%;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 14px;
      border-radius: 3px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      margin-top: 2px;
    }
    .form-submit:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }
    .form-submit:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

    #formSuccess {
      display: none;
      text-align: center;
      padding: 32px 16px;
    }
    #formSuccess.visible { display: block; }
    #formSuccess .success-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 28px;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 10px;
    }
    #formSuccess p {
      font-size: 14px;
      color: rgba(255,255,255,0.75);
      margin-bottom: 0;
    }

    /* ── STICKY SITE HEADER ── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 18px;
      height: var(--header-h);
      padding: 0 clamp(16px, 4vw, 32px);
      background: rgba(212, 238, 255, 0.92);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }

    .site-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      flex-shrink: 0;
    }
    .site-brand img { width: 38px; height: 38px; object-fit: contain; display: block; }
    .site-brand-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 20px;
      line-height: 0.95;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--offwhite);
    }
    .site-brand-name span { color: var(--sky); }
    .site-brand-name small {
      display: block;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 9px;
      letter-spacing: 0.16em;
      color: var(--gray);
    }

    .header-spacer { flex: 1 1 auto; }

    /* primary horizontal nav — desktop only */
    .primary-nav { display: none; }
    .primary-nav ul { list-style: none; display: flex; align-items: center; gap: 2px; }
    .primary-nav a {
      display: block;
      padding: 8px 13px;
      border-radius: 4px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--gray);
      text-decoration: none;
      transition: color 0.2s, background 0.2s;
    }
    .primary-nav a:hover,
    .primary-nav a[aria-current="page"] { color: var(--offwhite); background: rgba(0,119,182,0.1); }
    .primary-nav a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

    .nav-phone {
      display: none;
      align-items: center;
      gap: 8px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 19px;
      letter-spacing: 0.02em;
      color: var(--blue);
      text-decoration: none;
      white-space: nowrap;
    }
    .nav-phone svg { width: 17px; height: 17px; flex-shrink: 0; }
    .nav-phone:hover { color: var(--sky); }
    .nav-phone:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 3px; }

    .nav-cta {
      display: none;
      align-items: center;
      gap: 8px;
      background: var(--blue);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 10px 18px;
      border-radius: 4px;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s, transform 0.15s;
    }
    .nav-cta svg { width: 15px; height: 15px; }
    .nav-cta:hover { background: var(--sky); transform: translateY(-1px); }
    .nav-cta:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

    /* mobile one-tap call button */
    .nav-call {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background: rgba(0,119,182,0.12);
      color: var(--blue);
      flex-shrink: 0;
    }
    .nav-call svg { width: 20px; height: 20px; }
    .nav-call:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

    /* hamburger */
    .menu-toggle {
      background: var(--blue);
      border: none;
      cursor: pointer;
      width: 42px;
      height: 42px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .menu-toggle:hover { background: var(--sky); }
    .menu-toggle:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
    .menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: transform 0.3s, opacity 0.3s;
      transform-origin: center;
    }
    .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* desktop: show full nav, hide mobile controls */
    @media (min-width: 880px) {
      .primary-nav { display: block; }
      .nav-phone { display: inline-flex; }
      .nav-cta { display: inline-flex; }
      .nav-call,
      .menu-toggle { display: none; }
      .site-brand-name { font-size: 21px; }
    }

    /* ── MOBILE DRAWER ── */
    .side-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1400;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    .side-overlay.open { opacity: 1; pointer-events: auto; }

    .side-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: min(300px, 84vw);
      height: 100%;
      background: #ffffff;
      border-left: 1px solid #c3e0f4;
      z-index: 1500;
      transform: translateX(100%);
      visibility: hidden;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
      display: flex;
      flex-direction: column;
      padding: 22px 0 32px;
      overflow-y: auto;
    }
    .side-menu.open { transform: translateX(0); visibility: visible; }

    .side-menu-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 0 24px 20px;
      margin-bottom: 8px;
      border-bottom: 1px solid #c3e0f4;
    }
    .side-menu-brand p {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 20px;
      text-transform: uppercase;
      color: var(--offwhite);
      line-height: 1.1;
    }
    .side-menu-brand p span { color: var(--sky); display: block; }
    .side-menu-brand small {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #46607a;
      font-weight: 600;
    }
    .side-menu-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--gray);
      padding: 2px;
      line-height: 0;
      flex-shrink: 0;
    }
    .side-menu-close svg { width: 24px; height: 24px; }
    .side-menu-close:hover { color: var(--offwhite); }
    .side-menu-close:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

    .side-nav { list-style: none; flex: 1; }

    .side-nav li a {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 24px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 17px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #46607a;
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .side-nav li a:hover,
    .side-nav li a.active,
    .side-nav li a[aria-current="page"] {
      color: var(--offwhite);
      border-left-color: var(--sky);
      background: rgba(0,119,182,0.08);
    }
    .side-nav li a:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
    .side-nav li a .nav-icon { width: 22px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
    .side-nav li a .nav-icon svg { width: 18px; height: 18px; }

    @keyframes navSlideIn {
      from { opacity: 0; transform: translateX(16px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .side-menu.open .side-nav li a {
      animation: navSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both;
    }

    .side-menu-phone {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 10px 24px 0;
      padding: 13px 16px;
      border: 1px solid var(--border);
      border-radius: 6px;
      text-decoration: none;
    }
    .side-menu-phone svg { width: 20px; height: 20px; color: var(--sky); flex-shrink: 0; }
    .side-menu-phone .lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); font-weight: 600; }
    .side-menu-phone .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; color: var(--offwhite); line-height: 1.1; }

    .side-menu-cta {
      margin: 12px 24px 0;
      background: var(--blue);
      color: #fff;
      text-align: center;
      padding: 14px;
      border-radius: 4px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: background 0.2s;
    }
    .side-menu-cta svg { width: 16px; height: 16px; }
    .side-menu-cta:hover { background: var(--sky); }

    /* ── HOW IT WORKS ── */
    .process-section {
      border-top: 1px solid #c3e0f4;
      background: #ffffff;
    }

    .process-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 64px 24px;
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 8px;
    }

    @media (max-width: 720px) {
      .process-steps { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 440px) {
      .process-steps { grid-template-columns: 1fr; }
    }

    .process-step {
      padding: 28px 32px 28px 0;
      border-right: 1px solid #c3e0f4;
    }

    .process-step:last-child {
      border-right: none;
      padding-right: 0;
    }

    .process-step:not(:first-child) {
      padding-left: 28px;
    }

    @media (max-width: 720px) {
      .process-step:nth-child(2) { border-right: none; }
      .process-step:nth-child(3) {
        border-right: 1px solid #c3e0f4;
        border-top: 1px solid #c3e0f4;
      }
      .process-step:nth-child(4) {
        border-right: none;
        border-top: 1px solid #c3e0f4;
      }
      .process-step:nth-child(3),
      .process-step:nth-child(4) { padding-top: 28px; }
      .process-step:nth-child(odd) { padding-left: 0; }
    }

    @media (max-width: 440px) {
      .process-step {
        border-right: none;
        border-top: 1px solid #c3e0f4;
        padding: 24px 0;
      }
      .process-step:first-child { border-top: none; }
    }

    .step-num {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 56px;
      line-height: 1;
      color: var(--blue);
      opacity: 0.8;
      margin-bottom: -4px;
    }

    .step-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--offwhite);
      margin-bottom: 8px;
    }

    .step-desc {
      font-size: 13px;
      color: #46607a;
      line-height: 1.6;
    }

    /* ── ABOUT ── */
    .about-section {
      border-top: 1px solid #c3e0f4;
      border-bottom: 1px solid #c3e0f4;
      background: #ffffff;
    }

    .about-inner {
      max-width: 960px;
      margin: 0 auto;
      padding: 72px 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }

    @media (max-width: 720px) {
      .about-inner { grid-template-columns: 1fr; gap: 40px; }
    }

    .about-text .section-title { margin-bottom: 24px; }

    .about-body {
      font-size: 15px;
      color: #46607a;
      line-height: 1.7;
      max-width: 400px;
    }

    .about-btn {
      display: inline-block;
      margin-top: 20px;
      border: 1.5px solid var(--blue);
      color: var(--sky);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 10px 24px;
      border-radius: 3px;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }
    .about-btn:hover { background: var(--blue); color: #fff; }
    .about-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

    .about-body + .about-body { margin-top: 14px; }

    .about-services {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid #c3e0f4;
    }

    .about-service-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 0;
      border-bottom: 1px solid #c3e0f4;
    }

    .about-service-icon {
      flex-shrink: 0;
      margin-top: 2px;
      line-height: 0;
      color: var(--sky);
    }
    .about-service-icon svg { width: 22px; height: 22px; }

    .about-service-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 17px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--offwhite);
      margin-bottom: 4px;
    }

    .about-service-desc {
      font-size: 13px;
      color: #46607a;
      line-height: 1.55;
    }

    /* ── SCROLL MARGIN — keep anchor targets clear of the sticky header ── */
    [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

    /* ── REDUCED MOTION ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
    }

    /* ── SITE FOOTER ── */
    .site-footer {
      border-top: 1px solid #c3e0f4;
      padding: 18px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 11px;
      color: #46607a;
      letter-spacing: 0.04em;
    }
    .site-footer a { color: #46607a; text-decoration: none; transition: color 0.2s; }
    .site-footer a:hover { color: var(--offwhite); }
    .site-footer .footer-phone { font-weight: 700; color: var(--blue); }

    /* ── HERO PHONE + FORM FALLBACK ── */
    .hero-phone { margin-top: 12px; font-size: 14px; color: var(--gray); }
    .hero-phone a { color: var(--blue); font-weight: 700; text-decoration: none; }
    .hero-phone a:hover { color: var(--sky); text-decoration: underline; }

    .quote-form-wrap .form-alt {
      margin-top: 14px;
      font-size: 13px;
      text-align: center;
      color: rgba(255,255,255,0.82);
    }
    .quote-form-wrap .form-alt a { color: #fff; text-decoration: underline; font-weight: 600; }