/* ================================================================
   HOME.CSS — homepage-only styles. Load base.css first (it defines
   the :root tokens and section-header system this file relies on).
   ================================================================ */

/* ================================================================
   HERO SECTION — Wide, Balanced, Centered & Highly Professional
   ================================================================ */
.hero-section {
  position: relative;
  background: radial-gradient(ellipse 90% 50% at 50% -5%, rgba(255, 90, 10, 0.22), transparent 70%),
              linear-gradient(180deg, var(--primary, #062A5E) 0%, #031530 100%);
  padding: clamp(4rem, 7.5vw, 6rem) 0 clamp(3.5rem, 6.5vw, 5.25rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 3px solid var(--accent, #ff5a0a);
  text-align: center;
}

.hero-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 90, 10, 0.16) 0%, rgba(255, 90, 10, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-title {
  color: #ffffff;
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0 auto 1.4rem;
  max-width: 1040px;
  text-wrap: balance;
}

.hero-title .highlight {
  color: var(--accent, #ff5a0a);
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero-desc {
  color: #f1f5f9;
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  font-weight: 400;
  line-height: 1.68;
  text-align: center;
  margin: 0 auto 2.1rem;
  max-width: 960px;
  text-wrap: pretty;
}

.hero-desc strong {
  color: #ffffff;
  font-weight: 600;
}

.hero-cta-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2.2rem;
  width: 100%;
}

.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--grad-red, linear-gradient(135deg, #ff5a0a 0%, #d42200 100%));
  color: #ffffff;
  padding: 0.75rem 2.4rem 0.75rem 0.8rem;
  border-radius: 60px;
  box-shadow: 0 10px 28px rgba(255, 90, 10, 0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}

.btn-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255, 90, 10, 0.52);
}

.btn-call .ring {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.btn-call svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

.btn-call .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.btn-call .lbl {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.btn-call .num {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.hero-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem 1.4rem;
  color: #cbd5e1;
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 auto;
  max-width: 1040px;
}

.hero-trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-trust-bar svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent, #ff5a0a);
  fill: none;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.hero-trust-bar .sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 800;
}

/* --- Hero Mobile Responsiveness --- */
@media (max-width: 768px) {
  .hero-section {
    padding: clamp(3.2rem, 8vw, 4.25rem) 0 clamp(2.6rem, 6vw, 3.5rem);
  }
  .hero-container {
    padding: 0 1.25rem;
  }
  .hero-title {
    font-size: clamp(2rem, 7vw, 2.65rem);
    line-height: 1.15;
    margin-bottom: 1.1rem;
  }
  .hero-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
  }
  .hero-cta-group {
    margin-bottom: 1.5rem;
  }
  .btn-call {
    width: 100%;
    max-width: 380px;
    justify-content: center;
    padding: 0.75rem 1.6rem 0.75rem 0.75rem;
  }
  .hero-trust-bar {
    font-size: 0.85rem;
    gap: 0.5rem 1.1rem;
  }
}

@media (max-width: 520px) {
  .hero-section {
    padding: 2.75rem 0 2.25rem;
  }
  .hero-container {
    padding: 0 1rem;
  }
  .hero-title {
    font-size: clamp(1.8rem, 7.5vw, 2.2rem);
    line-height: 1.18;
    margin-bottom: 0.95rem;
  }
  .hero-desc {
    font-size: 0.94rem;
    line-height: 1.52;
    margin-bottom: 1.4rem;
  }
  .hero-cta-group {
    width: 100%;
    margin-bottom: 1.35rem;
  }
  .btn-call {
    width: 100%;
    max-width: 350px;
    padding: 0.65rem 1.2rem 0.65rem 0.65rem;
  }
  .btn-call .ring {
    width: 38px;
    height: 38px;
  }
  .btn-call svg {
    width: 17px;
    height: 17px;
  }
  .btn-call .lbl {
    font-size: 0.58rem;
  }
  .btn-call .num {
    font-size: 1.02rem;
  }
  .hero-trust-bar {
    font-size: 0.78rem;
    gap: 0.45rem 0.85rem;
  }
  .hero-trust-bar .sep {
    display: none;
  }
}

    /* ============================================================
       ABOUT SECTION — asymmetric grid: copy column + navy proof card
       ============================================================ */
    /* full-width navy band, echoing the brand's other dark panels (ab-card,
       final CTA) — same faint dot-grid + soft glow, just inverted for a
       dark ground instead of the light grey it replaced */
    .about {
      position: relative;
      overflow: hidden;
      background: var(--grad-navy);
      padding: var(--sec-pad) 0;
    }
    .about::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 22px 22px;
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
      mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
      pointer-events: none;
    }
    .about::after {
      content: '';
      position: absolute; left: -10%; top: -15%;
      width: 55%; height: 70%;
      background: radial-gradient(circle, rgba(245, 179, 66, 0.14) 0%, rgba(245, 179, 66, 0) 70%);
      pointer-events: none;
    }
    .about .container { position: relative; z-index: 1; }
    .about-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: start;
    }

    /* --- left: the story — light text on the navy ground --- */
    .about .s-eyebrow { color: var(--gold); }
    .about h2 { color: #fff; }
    .about h2 .hl { color: var(--gold); }
    .about .ab-lead,
    .about .s-lead,
    .about-copy p:not(.s-eyebrow) {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 1.6rem;
    }
    .about .ab-lead strong,
    .about .s-lead strong,
    .about-copy strong {
      color: #fff;
      font-weight: 700;
    }

    /* stat row */
    .ab-stats {
      display: flex; flex-wrap: wrap;
      gap: 1.4rem; margin-bottom: 1.6rem;
    }
    .ab-stats li {
      position: relative;
      display: flex; flex-direction: column;
      padding-right: 1.4rem;
    }
    .ab-stats li + li::before {
      content: '';
      position: absolute; left: -1.4rem; top: 50%;
      transform: translateY(-50%);
      width: 1px; height: 34px; background: rgba(255, 255, 255, 0.25);
    }
    .about .ab-stats strong {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.65rem; font-weight: 700;
      color: var(--gold); line-height: 1;
      letter-spacing: -0.03em;
    }
    .about .ab-stats span {
      font-size: 0.82rem; font-weight: 600;
      color: rgba(255, 255, 255, 0.9); margin-top: 0.28rem;
    }

    /* closing line before the CTA */

    /* --- right: proof card — now a lighter panel so it still stands
       apart from the navy section behind it instead of blending in --- */
    .ab-card {
      position: relative; overflow: hidden;
      background: #fff;
      color: var(--text-dark);
      border-radius: 6px;
      padding: clamp(1.75rem, 3vw, 2.5rem);
      box-shadow: none;
    }
    /* faint dot-grid on the card, mirroring the section's own texture
       so both surfaces read as one designed system */
    .ab-card::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(1, 41, 81, 0.05) 1px, transparent 1px);
      background-size: 20px 20px;
      pointer-events: none;
    }
    /* oversized year watermark, drawn as text so it costs no request */
    .ab-card::after {
      content: '28';
      position: absolute; right: -0.6rem; bottom: -2.5rem;
      font-family: 'Inter Tight', sans-serif;
      font-size: 10rem; font-weight: 700; line-height: 1;
      color: rgba(1, 41, 81, 0.04);
      pointer-events: none;
    }
    .ab-card > * { position: relative; z-index: 1; }
    .ab-card h3 {
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 700; letter-spacing: -0.02em;
      color: var(--primary); margin-bottom: 1rem;
    }

    .ab-card h4 {
      font-size: 0.82rem; font-weight: 700;
      letter-spacing: 1.3px; text-transform: uppercase;
      color: var(--accent-text); margin-bottom: 0.9rem;
    }
    .ab-services { display: flex; flex-direction: column; gap: 0.7rem; }
    .ab-services li {
      display: flex; align-items: flex-start; gap: 0.65rem;
      font-size: 0.95rem; line-height: 1.5;
      color: var(--text-dark);
    }
    .ab-services svg {
      width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px;
      fill: var(--accent);
    }

    @media (max-width: 992px) {
      .about-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .ab-stats { gap: 1rem; }
      .ab-stats li { padding-right: 1rem; }
      .ab-stats li + li::before { left: -1rem; height: 30px; }
      .ab-stats strong { font-size: 1.4rem; }
      .about .btn { width: 100%; }
      .ab-card::after { font-size: 7.5rem; }
    }

    /* ============================================================
       SERVICES GRID
       ============================================================ */
    /* sticky header would otherwise cover anchored sections */

    .services { background: #fff; padding: var(--sec-pad) 0; }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
    }
    .svc-grid > .svc-card { grid-column: span 1; }
    .svc-card {
      position: relative;
      overflow: hidden;
      display: flex; flex-direction: column;
      background: var(--grad-navy);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 6px;
      padding: 1.75rem;
      cursor: pointer;
      color: #fff;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }
    /* faint diagonal weave texture matching .svc-commercial */
    .svc-card::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0 2px,
        rgba(255, 255, 255, 0) 2px 8px);
      pointer-events: none;
    }
    .svc-card:hover {
      transform: translateY(-3px);
      border-color: var(--gold);
      box-shadow: 0 8px 24px rgba(1, 41, 81, 0.35);
    }
    .svc-card > * { position: relative; z-index: 1; }

    /* emergency card accent border & glow */
    .svc-card--urgent {
      border: 1.5px solid rgba(255, 90, 10, 0.65);
      box-shadow: 0 0 16px rgba(255, 90, 10, 0.18);
    }
    .svc-card--urgent:hover {
      border-color: var(--accent);
      box-shadow: 0 8px 24px rgba(255, 90, 10, 0.35);
    }

    .svc-card h3 {
      font-size: 1.2rem; font-weight: 700;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 0.5rem;
    }

    .svc-desc { font-size: 0.92rem; color: rgba(255, 255, 255, 0.84); line-height: 1.6; }

    .svc-cta {
      display: inline-flex; align-items: center; gap: 0.4rem;
      margin-top: auto; padding-top: 1.1rem;
      color: var(--gold); font-weight: 700; font-size: 0.9rem;
      transition: color 0.15s ease, gap 0.15s ease;
    }
    .svc-cta:hover, .svc-cta:focus-visible { color: #fff; gap: 0.65rem; }
    /* stretches the link's hit area over the whole card, so clicking
       anywhere navigates while only "Read More" reads as the visible link */
    .svc-cta::before { content: ''; position: absolute; inset: 0; z-index: 1; }
    .svc-card h3, .svc-card .svc-desc { position: relative; z-index: 1; }
    .svc-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    /* arrow drawn with a mask so it inherits colour and adds no DOM nodes.
       Guarded: without mask support it stays an empty box rather than a
       solid currentColor square. */
    .svc-cta::after {
      content: '';
      width: 15px; height: 15px;
      transition: transform 0.2s ease;
    }
    @supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
      .svc-cta::after {
        background: currentColor;
        -webkit-mask: var(--arrow) center / contain no-repeat;
        mask: var(--arrow) center / contain no-repeat;
      }
    }
    .svc-cta:hover::after, .svc-cta:focus-visible::after { transform: translateX(4px); }
    :root {
      --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    @media (max-width: 992px) {
      .svc-grid { grid-template-columns: repeat(2, 1fr); }
      .svc-grid > .svc-card { grid-column: span 1; }
    }
    @media (max-width: 620px) {
      .svc-grid { grid-template-columns: 1fr; gap: 1rem; }
      .svc-card { padding: 1.4rem; }
    }

    .svc-commercial {
      position: relative;
      overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      margin-top: 1.4rem;
      background: var(--grad-navy);
      border-radius: 6px;
      padding: clamp(2rem, 4vw, 2.75rem);
      text-align: center;
      color: #fff;
    }
    /* faint diagonal weave keeps the flat navy from looking printed-on,
       same technique as the trustbar above */
    .svc-commercial::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0 2px,
        rgba(255, 255, 255, 0) 2px 8px);
      pointer-events: none;
    }
    /* soft glow anchored behind the icon, echoes the final CTA's radial accent */
    .svc-commercial::after {
      content: '';
      position: absolute; left: 50%; top: -40%;
      width: 320px; height: 320px;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(245, 179, 66, 0.16) 0%, rgba(245, 179, 66, 0) 70%);
      pointer-events: none;
    }
    .svc-commercial > * { position: relative; z-index: 1; }

    .svc-commercial-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 52px; height: 52px; margin-bottom: 1.1rem;
      border-radius: 50%;
      background: rgba(245, 179, 66, 0.14);
      border: 1px solid rgba(245, 179, 66, 0.35);
    }
    .svc-commercial-icon svg { width: 24px; height: 24px; fill: var(--gold); }

    .svc-commercial h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.6rem; }
    .svc-commercial p { color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; line-height: 1.65; max-width: 60ch; margin: 0 auto 1.5rem; }

    .svc-commercial-cta {
      display: inline-flex; align-items: center; gap: 0.5rem;
      color: var(--gold); font-weight: 700; font-size: 0.95rem;
      padding-bottom: 0.15rem;
      border-bottom: 1px solid rgba(245, 179, 66, 0.4);
      transition: color 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
    }
    .svc-commercial-cta:hover, .svc-commercial-cta:focus-visible {
      color: #fff;
      border-color: #fff;
      gap: 0.7rem;
    }
    .svc-commercial-cta svg {
      width: 15px; height: 15px;
      fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* ============================================================
       BRANDS WE REPAIR
       ============================================================ */
    .brands { background: var(--light-bg); padding: var(--sec-pad) 0; }
    .brand-group {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: clamp(1.75rem, 3vw, 2.25rem);
      display: flex; flex-direction: column; justify-content: center;
    }
    .brand-group-heading {
      font-size: 0.78rem; font-weight: 800;
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--accent-text);
      margin-bottom: 1.1rem;
    }
    /* .brand-tags pill-list component now lives in base.css so every page
       (home + service pages) shares one visual style. */
    .brand-note {
      display: flex; align-items: center; gap: 0.55rem;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line);
      font-size: 0.95rem; color: var(--slate); line-height: 1.5;
    }
    .brand-note::before {
      content: '';
      flex-shrink: 0;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--gold);
    }
    .brand-note a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    .brand-cta { margin-top: 1.1rem; }

    /* ============================================================
       RECENT REPAIRS — carousel of case-study cards. Each is numbered
       like a field report, with a coloured index rail down the left
       edge instead of the boxed/bannered treatment used elsewhere on
       the page, so this section reads as documentation, not a pitch.
       Native scroll-snap drives the track; prev/next + dots (wired in
       home.js) just call scrollIntoView, matching the Reviews carousel.
       ============================================================ */
    .recent-repairs { background: #fff; padding: var(--sec-pad) 0; }

    .rr-wrap { position: relative; padding: 0 3.25rem; }
    .case-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      gap: 1.5rem;
      margin: 0 -0.25rem;
      padding: 0.35rem 0.25rem 0.75rem;
      scrollbar-width: none;
      counter-reset: case;
    }
    .case-grid::-webkit-scrollbar { display: none; }

    .case-card {
      counter-increment: case;
      position: relative;
      flex: 0 0 calc(33.333% - 1rem);
      scroll-snap-align: start;
      padding: 1.75rem 1.5rem 1.5rem 1.9rem;
      background: var(--light-bg);
      border-radius: 8px;
    }
    /* colour-coded index rail, alternating navy/orange like the
       process section's numerals, tying the two together visually */
    .case-card::before {
      content: '';
      position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem;
      width: 4px; border-radius: 3px;
      background: var(--primary);
    }
    .case-card:nth-child(even)::before { background: var(--accent); }

    .case-card::after {
      content: counter(case, decimal-leading-zero);
      display: block;
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.75rem; font-weight: 800;
      letter-spacing: 1.5px;
      color: var(--accent-text);
      margin-bottom: 0.75rem;
    }
    .case-card:nth-child(even)::after { color: var(--primary); }

    .case-card h3 {
      font-size: 1.08rem; font-weight: 700;
      color: var(--primary);
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin-bottom: 0.85rem;
    }
    .case-text { font-size: 0.9rem; color: var(--slate); line-height: 1.65; }
    .case-text + .case-text { margin-top: 0.75rem; }

    /* --- carousel controls: round arrows either side of the track, dots below --- */
    .rr-controls { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; }
    .rr-nav {
      display: grid;
      position: absolute; top: 45%; transform: translateY(-50%);
      z-index: 2;
      width: 42px; height: 42px; flex-shrink: 0;
      place-items: center;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--line);
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .rr-prev { left: 0; }
    .rr-next { right: 0; }
    .rr-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .rr-nav:hover { background: var(--accent); border-color: var(--accent); }
    .rr-nav:hover svg { stroke: #fff; }
    .rr-dots { display: flex; align-items: center; gap: 0; }
    /* The button is a 24x24 transparent hit area (WCAG 2.5.8 / Lighthouse
       tap-target minimum); the visible 7px dot is drawn by ::before, so the
       pager looks exactly as before but is comfortably tappable. */
    .rr-dots button {
      width: 24px; height: 24px; padding: 0; border: 0;
      background: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }
    .rr-dots button::before {
      content: '';
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--primary-100);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .rr-dots button.active::before { background: var(--accent); transform: scale(1.25); }

    @media (max-width: 900px) {
      .case-card { flex-basis: calc(50% - 0.75rem); }
    }
    @media (max-width: 640px) {
      .rr-wrap { padding: 0 2.5rem; }
      .case-card { flex-basis: 88%; padding: 1.6rem 1.4rem 1.4rem 1.75rem; }
    }
    @media (max-width: 420px) {
      .rr-wrap { padding: 0 2.1rem; }
      .case-card { flex-basis: 94%; }
    }

    /* ============================================================
       SERVICE PROCESS — numbered timeline
       Horizontal 6-up on desktop, vertical timeline below 992px.
       Step numbers come from a CSS counter, so the <ol> stays the single
       source of order and screen readers don't hear the number twice.
       ============================================================ */
    /* Soft tinted ground (not solid orange) so body copy stays legible —
       a warm off-white wash with a faint dot texture, premium-SaaS style. */
    /* ============================================================
   COMMON REFRIGERATOR PROBLEMS & SYMPTOMS WE FIX
   ============================================================ */
.problems-svc {
  background: var(--light-bg, #f8fafc);
  padding: var(--sec-pad) 0;
}
.plist {
  display: grid;
  gap: 0.9rem;
  counter-reset: plist;
}
.plist-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.1rem;
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-left: 4px solid var(--line, #e2e8f0);
  border-radius: 4px 14px 14px 4px;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 2px 10px rgba(6, 42, 94, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.plist-item:hover {
  box-shadow: 0 14px 30px rgba(6, 42, 94, 0.1);
  transform: translateX(2px);
}
.plist-item--low { border-left-color: #22c55e; }
.plist-item--mid { border-left-color: var(--accent, #ff5a0a); }
.plist-item--high { border-left-color: var(--primary, #062a5e); }
.plist-index {
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--slate, #64748b);
  background: var(--light-bg, #f8fafc);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  align-self: start;
}
.plist-item--low .plist-index {
  color: #147638;
  background: rgba(34, 197, 94, 0.12);
}
.plist-item--mid .plist-index {
  color: var(--accent-text, #ff5a0a);
  background: rgba(255, 90, 10, 0.1);
}
.plist-item--high .plist-index {
  color: var(--primary, #062a5e);
  background: var(--primary-50, rgba(6, 42, 94, 0.08));
}
.plist-body { min-width: 0; }
.plist-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.plist-name {
  font-weight: 700;
  color: var(--text-dark, #0f172a);
  font-size: 1.05rem;
}
.plist-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: var(--light-bg, #f8fafc);
  color: var(--slate, #64748b);
}
.plist-item--low .plist-tag {
  background: rgba(34, 197, 94, 0.12);
  color: #147638;
}
.plist-item--mid .plist-tag {
  background: rgba(255, 90, 10, 0.1);
  color: var(--accent-text, #ff5a0a);
}
.plist-item--high .plist-tag {
  background: var(--primary-50, rgba(6, 42, 94, 0.08));
  color: var(--primary, #062a5e);
}
.plist-desc {
  color: var(--slate, #475569);
  font-size: 0.95rem;
  line-height: 1.65;
}
@media (max-width: 480px) {
  .plist-item {
    grid-template-columns: 40px 1fr;
    padding: 1.1rem;
    gap: 0.85rem;
  }
  .plist-index {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
}

.process {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #fff6ee 0%, #fef1e4 100%);
      padding: var(--sec-pad) 0;
    }
    .process::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255, 90, 10, 0.09) 1px, transparent 1px);
      background-size: 22px 22px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
      mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
      pointer-events: none;
    }
    .process::after {
      content: '';
      position: absolute; right: -10%; bottom: -20%;
      width: 420px; height: 420px;
      background: radial-gradient(circle, rgba(6, 42, 94, 0.06) 0%, rgba(6, 42, 94, 0) 70%);
      pointer-events: none;
    }
    .process .container { position: relative; z-index: 1; }

    /* --- modern card design: the number lives in a colour-blocked corner
       tab built from the card's own border-radius, not a floating disc,
       so nothing can overflow or misalign with a separate connector --- */
    .pr-steps {
      counter-reset: pr-step;
      list-style: none;   /* the global reset only covers ul; ol markers would
                             otherwise print "1." "2." along the connector line */
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-top: clamp(2rem, 4vw, 2.75rem);
    }
    .pr-step {
      counter-increment: pr-step;
      position: relative;
      display: flex; flex-direction: column;
      text-align: left;
      background: #fff;
      border: 1px solid rgba(6, 42, 94, 0.08);
      border-radius: 10px;
      padding: 1.6rem 1.4rem 1.5rem;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .pr-step:hover { transform: translateY(-3px); border-color: var(--accent); }

    /* big ghost numeral behind the heading — fixed height so the
       connector arrow (anchored to this same offset) lines up across
       every card regardless of how long each card's own copy runs */
    .pr-num {
      display: block;
      height: 2.75rem;
      font-family: 'Inter Tight', sans-serif;
      font-size: 2.75rem; font-weight: 800; line-height: 1;
      letter-spacing: -0.03em;
      color: var(--accent);
      opacity: 0.16;
      margin-bottom: 0.35rem;
    }
    .pr-num::before { content: counter(pr-step, decimal-leading-zero); }
    .pr-step:nth-child(even) .pr-num { color: var(--primary); }

    /* connector: a fixed-position chevron in the gap between cards,
       vertically pinned to the numeral row (not 50% of the card) so
       it stays level across cards of different content lengths.
       Drawn with the same currentColor-mask technique used by .svc-cta,
       so the arrow renders crisply at any size instead of relying on a
       rotated-gradient approximation. */
    .pr-step:not(:last-child)::after {
      content: '';
      position: absolute; z-index: 2;
      top: calc(1.6rem + 2.75rem / 2);
      right: 0;
      width: 16px; height: 16px;
      transform: translate(50%, -50%);
      color: var(--accent);
    }
    @supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
      .pr-step:not(:last-child)::after {
        background: currentColor;
        -webkit-mask: var(--arrow) center / contain no-repeat;
        mask: var(--arrow) center / contain no-repeat;
      }
    }

    .pr-step h3 {
      font-size: 1.02rem; font-weight: 700;
      color: var(--primary);
      letter-spacing: -0.01em;
      margin-bottom: 0.6rem;
    }
    .pr-step p { font-size: 0.87rem; color: var(--slate); line-height: 1.62; }
    .pr-step p + p { margin-top: 0.6rem; }

    /* closing line */
    .pr-foot {
      margin-top: clamp(2.25rem, 4vw, 3rem);
      padding-top: clamp(1.75rem, 3vw, 2.25rem);
      border-top: 1px solid rgba(6, 42, 94, 0.12);
      text-align: center;
    }

    /* --- vertical stack: the corner-arrow connector only fits a row --- */
    @media (max-width: 992px) {
      .pr-steps { grid-template-columns: 1fr; gap: 1.25rem; }
      .pr-step:not(:last-child)::after,
      .pr-step:not(:last-child)::before { display: none; }
    }

    /* ============================================================
       SERVICE AREAS + MAP — combined side by side so the borough-wide
       coverage list and the map share one section instead of two
       full-width bands stacked.
       ============================================================ */
    .areas { background: var(--light-bg); padding: var(--sec-pad) 0; }
    .areas .s-head p { margin-bottom: 0.6rem; }
    .areas .s-head p:last-of-type { margin-bottom: 0; }

    .areas-split {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(2rem, 4vw, 3rem);
    }
    .areas-col { min-width: 0; }
    @media (min-width: 900px) {
      .areas-split {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
      }
      .areas-col:last-child {
        padding-left: clamp(2rem, 4vw, 3rem);
        border-left: 1px solid var(--line);
      }
    }

    .area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
    .area-card {
      background: #fff;
      border: 1px solid var(--line);
      border-top: 3px solid var(--primary);
      border-radius: 6px;
      padding: 1.5rem 1.6rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .area-card:hover { transform: translateY(-3px); box-shadow: none; }
    .area-card h3 { font-size: 1rem; line-height: 1.4; margin-bottom: 0.7rem; }
    .area-card h3 span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--slate); margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
    .area-card p { font-size: 0.92rem; color: var(--slate); line-height: 1.6; }

    .ar-note {
      display: flex; align-items: flex-start; gap: 0.85rem;
      margin-top: 1.75rem;
      padding: 1.15rem 1.35rem;
      background: var(--grad-navy);
      border-radius: 8px;
      text-align: left;
      font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); line-height: 1.6;
    }
    .ar-note svg {
      width: 20px; height: 20px; flex-shrink: 0;
      margin-top: 0.15rem;
      fill: var(--gold);
    }
    .ar-note a {
      color: var(--gold); font-weight: 700;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .ar-note a:hover { color: #fff; }
    @media (max-width: 900px) {
      .area-grid { grid-template-columns: 1fr; }
    }

    /* ============================================================
       LOCATION / MAP
       ============================================================ */

    .loc-map {
      /* grid items default to min-width:auto, which for a box holding an
         <iframe> equals the iframe's intrinsic ~300px — wider than a phone's
         column, which forces the whole grid (and page) to scroll sideways */
      min-width: 0;
      border-radius: 6px; overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: none;
      min-height: 340px;
    }
    .loc-map iframe { width: 100%; max-width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }


    @media (max-width: 860px) {

      .loc-map { min-height: 300px; }
    }

    /* ============================================================
       TESTIMONIALS — full carousel at every breakpoint (previously a
       static 3-up grid on desktop that only became a slider on mobile).
       Native scroll-snap drives the track; prev/next + dots (in home.js)
       just call scrollIntoView, so no slider library is needed.
       ============================================================ */
    /* Rating summary under the Reviews heading. Gives the aggregateRating in
       the page's JSON-LD the visible counterpart Google requires. On the
       --primary #062A5E ground: white score text is 14:1, the muted count is
       still >7:1, and the decorative stars use --gold at 4.5:1, comfortably
       past the 3:1 needed for non-text. The stars are aria-hidden because the
       adjacent text already states the score. */
    .rating-summary {
      display: flex; flex-wrap: wrap;
      align-items: center; justify-content: center;
      gap: 0.3rem 0.7rem;
      margin-top: 1.1rem;
    }
    .rating-stars {
      color: var(--gold);
      font-size: 1.05rem;
      letter-spacing: 0.12em;
      line-height: 1;
    }
    .rating-score { color: #fff; font-size: 1rem; }
    .rating-score strong { font-weight: 800; font-size: 1.25rem; }
    .rating-count {
      color: rgba(255, 255, 255, 0.78);
      font-size: 0.92rem;
    }
    .rating-count::before {
      content: '';
      display: inline-block; vertical-align: middle;
      width: 4px; height: 4px; border-radius: 50%;
      background: rgba(255, 255, 255, 0.42);
      margin-right: 0.6rem;
    }

    .reviews {
      position: relative;
      overflow: hidden;
      background: var(--primary);
      padding: var(--sec-pad) 0;
    }
    .reviews::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 22px 22px;
      -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 30%, transparent 100%);
      mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 30%, transparent 100%);
      pointer-events: none;
    }
    .reviews .container { position: relative; z-index: 1; }

    .tm-wrap { position: relative; padding: 0 3.25rem; }
    .tm-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      gap: 1.25rem;
      margin: 0 -0.25rem;
      padding: 0.35rem 0.25rem 0.75rem;
      scrollbar-width: none;
    }
    .tm-grid::-webkit-scrollbar { display: none; }

    .tm-card {
      flex: 0 0 calc(33.333% - 0.85rem);
      scroll-snap-align: start;
      position: relative;
      display: flex; flex-direction: column;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 1.75rem 1.5rem 1.5rem;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .tm-card:hover { border-color: var(--primary-300); transform: translateY(-2px); }

    /* oversized quote mark anchors the card as a testimonial at a glance */
    .tm-card::before {
      content: '\201C';
      position: absolute; top: 0.6rem; right: 1.1rem;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 3.5rem; font-weight: 700; line-height: 1;
      color: var(--primary-50);
      pointer-events: none;
    }

    /* header row: case-type avatar + title + location, like a review's who/when row */
    .tm-head { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.9rem; }
    .tm-avatar {
      width: 42px; height: 42px; flex-shrink: 0;
      border-radius: 50%;
      display: grid; place-items: center;
    }
    .tm-avatar svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .tm-avatar--1 { background: var(--primary); }
    .tm-avatar--2 { background: var(--secondary); }
    .tm-avatar--3 { background: var(--accent); }
    .tm-head-text { min-width: 0; }
    .tm-name { display: block; font-size: 0.94rem; font-weight: 700; color: var(--text-dark); font-style: normal; line-height: 1.3; }
    .tm-meta {
      display: flex; align-items: center; gap: 0.3rem;
      margin-top: 0.2rem; font-size: 0.78rem; color: var(--slate); font-weight: 500;
    }
    .tm-meta svg { width: 11px; height: 11px; fill: var(--slate); flex-shrink: 0; }

    /* gold star rating */
    .tm-verified {
      display: inline-flex; align-self: flex-start;
      font-size: 0.85rem; letter-spacing: 1px;
      color: var(--gold);
      margin-bottom: 0.75rem;
    }

    .tm-card blockquote { position: relative; z-index: 1; font-size: 0.9rem; color: var(--text-dark); line-height: 1.62; }
    .tm-quote-body {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6;
      overflow: hidden;
    }
    .tm-quote-body p + p { margin-top: 0.55rem; }

    /* --- Carousel controls: round arrows either side of the track, dots below --- */
    .tm-controls { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; }
    .tm-nav {
      display: grid;
      position: absolute; top: 45%; transform: translateY(-50%);
      z-index: 2;
      width: 42px; height: 42px; flex-shrink: 0;
      place-items: center;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--line);
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .tm-prev { left: 0; }
    .tm-next { right: 0; }
    .tm-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .tm-nav:hover { background: var(--accent); border-color: var(--accent); }
    .tm-nav:hover svg { stroke: #fff; }
    .tm-dots { display: flex; align-items: center; gap: 0; }
    /* The button is a 24x24 transparent hit area (WCAG 2.5.8 / Lighthouse
       tap-target minimum); the visible 7px dot is drawn by ::before, so the
       pager looks exactly as before but is comfortably tappable. */
    .tm-dots button {
      width: 24px; height: 24px; padding: 0; border: 0;
      background: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }
    .tm-dots button::before {
      content: '';
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--primary-100);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .tm-dots button.active::before { background: var(--accent); transform: scale(1.25); }

    @media (max-width: 900px) {
      .tm-card { flex-basis: calc(50% - 0.625rem); }
    }
    @media (max-width: 640px) {
      .tm-wrap { padding: 0 2.5rem; }
      .tm-card { flex-basis: 88%; }
    }
    @media (max-width: 420px) {
      .tm-wrap { padding: 0 2.1rem; }
      .tm-card { flex-basis: 94%; }
    }

    /* ============================================================
       CREDENTIALS — four short bullet points in a clean, evenly
       aligned 2-up grid (2 rows of 2) instead of ragged, centered
       pills, so the columns line up and read at a glance.
       ============================================================ */
    .creds { background: var(--light-bg); padding: var(--sec-pad) 0; }
    .cr-label {
      text-align: center;
      font-size: 0.78rem; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--accent-text);
      margin-bottom: 1.25rem;
    }
    .cr-grid {
      list-style: none; margin: 0 auto; padding: 0;
      max-width: 760px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.9rem 3rem;
    }
    .cr-bullet {
      display: flex; align-items: flex-start; gap: 0.65rem;
      font-size: 0.95rem; font-weight: 600; color: var(--text-dark); line-height: 1.45;
      text-align: left;
    }
    .cr-bullet svg {
      width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.2rem;
      fill: none; stroke: var(--accent);
      stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    }
    @media (min-width: 640px) {
      .cr-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================================
       FAQ section background (home page). Accordion component itself
       (.faq-list / .faq-item) now lives in base.css as a shared,
       site-wide component — see base.css FAQ ACCORDION block.
       ============================================================ */
    .faq { background: var(--light-bg); padding: var(--sec-pad) 0; }

    /* ============================================================
       FINAL CTA — full-bleed navy
       ============================================================ */
    .final {
      position: relative; overflow: hidden;
      background: var(--grad-navy);
      padding: var(--sec-pad) 0;
      text-align: center;
    }
    .final::after {
      content: '';
      position: absolute; right: -80px; top: -80px;
      width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 179, 66, 0.14) 0%, rgba(245, 179, 66, 0) 70%);
      pointer-events: none;
    }
    .final > * { position: relative; z-index: 1; }
    .final .s-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
    .final .s-lead { max-width: 660px; margin-inline: auto; }
    .final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }

    @media (max-width: 560px) {

      .tm-card { padding: 1.35rem 1.25rem 1.2rem; }
      .final-actions .btn { width: 100%; }
    }