/* ================================================================
   BASE.CSS — shared across every page (reset, tokens, buttons,
   top bar, site header, site footer, and their responsive rules).
   Load this on every page; add a page-specific stylesheet after it.
   ================================================================ */

    /* ----- FONT: self-hosted Inter Tight -----
       One variable-weight WOFF2 (public/fonts/inter-tight-latin.woff2,
       pulled directly from Google's own CDN file, latin subset) covers the
       whole 400-900 weight range the site uses, so a single font-face
       declaration replaces what used to be a fonts.googleapis.com stylesheet
       + fonts.gstatic.com file request. Same font, same weights, same look —
       just no external request. */
    @font-face {
      font-family: 'Inter Tight';
      font-style: normal;
      font-weight: 400 900;
      font-display: swap;
      src: url('/fonts/inter-tight-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* ----- RESET & BASE ----- */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    /* <Picture> wraps its <img> in <picture>; display:contents keeps that
       wrapper from generating a box, so every existing rule that targets the
       <img> directly (.hero-bg img, .svc-hero-visual img) lays out unchanged. */
    picture { display: contents; }
    html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
    body {
      font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #f9fafb;
      color: var(--text-dark);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      max-width: 100%;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    img { max-width: 100%; display: block; }
    a, button { text-decoration: none; cursor: pointer; font: inherit; color: inherit; }

    /* ---- In-content links ----------------------------------------------
       The reset above strips all link styling so nav items, CTAs and cards
       can be built from scratch. That left genuine prose links looking
       identical to the text around them: nothing told a reader that
       "Staten Island Appliance Repair" was a link to another page. That
       fails WCAG 1.4.1 (Use of Color) and hides the site's internal linking.

       Scoped to unclassed <a> inside <main> paragraphs, which is exactly
       the 12 prose links and none of the breadcrumbs, legal table of
       contents, .btn CTAs or card links — those keep their own treatment.

       Colour comes from two tokens so the same rule works on both grounds.
       Default (light sections, e.g. .ab-areas-card #fff and .legal-article
       #eef2f8): --accent-text #B33A00 = 5.96:1 and 5.31:1, AA for body text.
       Dark navy sections override the tokens below: #fff = 14:1 on
       --primary, brighter than the rgba(255,255,255,.85) copy around it.
       The underline is a non-colour cue, so distinguishability never rests
       on hue alone. */
    main p a:not([class]) {
      color: var(--link-ink, var(--accent-text));
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--link-rule, rgba(179, 58, 0, 0.5));
      text-underline-offset: 3px;
      transition: color 0.15s ease, text-decoration-color 0.15s ease,
                  text-decoration-thickness 0.15s ease;
    }
    main p a:not([class]):hover,
    main p a:not([class]):focus-visible {
      color: var(--link-ink-hover, var(--accent-text-hover));
      text-decoration-color: currentColor;
      text-decoration-thickness: 2px;
    }
    /* Sections painted with --grad-navy. If a new dark section gains a prose
       link, add its selector here or the link inherits the light-ground
       colour and loses contrast. */
    .page-hero,
    .svc-hero,
    .ar-note {
      --link-ink: #fff;
      --link-ink-hover: var(--gold);
      --link-rule: var(--gold);
    }
    button { background: none; border: 0; }
    ul { list-style: none; }

    /* ONE shared measure for every band of the site: top bar, header, hero.
       width:100% matters — as a flex child of .hero-section it would otherwise
       shrink-wrap its content and `margin:0 auto` would centre a too-narrow box,
       throwing the hero copy out of alignment with the logo. */
    .container {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* ----- COLOR SCHEME ----- */
    :root {
      --primary: #062A5E;
      --primary-dark: #041c40;
      --secondary: #0B3F86;
      --accent: #FF5A0A;
      --accent-hover: #FF7A1A;
      /* Same orange family, darkened for use as small/normal-weight TEXT on
         light backgrounds — #FF5A0A only hits ~3.1:1 against white, short of
         WCAG AA's 4.5:1 for text. Keep --accent for large graphical uses
         (buttons, borders, big headings) where the relaxed 3:1 already
         applies; use these two for any color:/text usage instead. */
      --accent-text: #B33A00;
      --accent-text-hover: #943000;
      --light-bg: #F4F6F8;
      --text-dark: #0B1F3A;
      --text-light: #f2f4fb;
      /* navy tints + shades, used for the submenu */
      --primary-50: #eef2f8;
      --primary-100: #d8e1ee;
      --primary-300: #7c93b8;
      --primary-700: #0B3F86;
      /* highlight + support (aliased to the accent orange family) */
      --gold: #FF5A0A;
      --gold-deep: #E64E00;
      --grad-red: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
      --grad-navy: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      --green: #22c55e;
      --slate: #667085;
      --line: #e3e6ec;
    }

    /* Accessibility helpers */
    
    .skip-link {
      position: absolute; left: 0.5rem; top: -3rem; z-index: 200;
      background: var(--accent-text); color: #fff; padding: 0.6rem 1rem;
      border-radius: 0 0 8px 8px; font-weight: 700; font-size: 0.9rem;
      transition: top 0.15s;
    }
    .skip-link:focus { top: 0; }
    :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

    /* ============================================================
       TYPE SCALE + SECTION HEADER SYSTEM
       Single source of truth for section rhythm. Every section uses
       .s-head > .s-eyebrow + h2 + .s-lead, so headings can never drift
       apart again. Replaces 8 near-identical per-section header rules.
       ============================================================ */
    :root {
      --h2: clamp(1.65rem, 2.8vw, 2.25rem);
      --h3: 1.15rem;
      --lead: 1.03rem;
      --body: 0.95rem;
      --small: 0.86rem;
      --eyebrow: 0.74rem;
      --sec-pad: clamp(3rem, 5.5vw, 4.5rem);
      --header-h: 96px;
    }

    h2 {
      font-size: var(--h2);
      font-weight: 700;
      line-height: 1.14;
      letter-spacing: -0.03em;
      color: var(--text-dark);
      margin-bottom: 0.8rem;   /* global, so a heading outside .s-head still spaces */
    }
    h3 { font-weight: 700; letter-spacing: -0.015em; color: var(--text-dark); }

    .s-head {
      max-width: 800px;
      margin: 0 auto clamp(2rem, 4vw, 2.9rem);
      text-align: center;
    }
    .s-head--left { max-width: none; margin-inline: 0; text-align: left; }
    .s-eyebrow {
      display: inline-flex; align-items: center; gap: 0.55rem;
      margin-bottom: 0.85rem;
      font-size: var(--eyebrow); font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--accent-text);
    }
    .s-eyebrow::before {
      content: '';
      width: 22px; height: 2px; border-radius: 2px;
      background: currentColor; flex-shrink: 0;
    }
    /* covers both the explicit class and any bare <p> inside a section head,
       so a lead can never fall back to unstyled body text */
    .s-lead,
    .s-head p:not(.s-eyebrow) {
      font-size: var(--lead);
      color: var(--slate);
      line-height: 1.65;
    }
    /* one or two accent words inside a heading */
    .hl { color: var(--accent-text); }
    /* dark grounds flip the accents to gold for contrast */
    .s-head--dark h2 { color: #fff; }
    .s-head--dark .s-eyebrow,
    .s-head--dark .hl { color: var(--gold); }
    .s-head--dark .s-lead,
    .s-head--dark p:not(.s-eyebrow) { color: rgba(255, 255, 255, 0.84); }

    /* sticky header would otherwise cover anchored sections on any page */
    section[id] { scroll-margin-top: var(--header-h); }

    /* ============================================================
       BUTTON SYSTEM
       One base + modifiers, replacing 7 copies of the same gradient.
       ============================================================ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0.6rem;
      padding: 0.85rem 1.9rem;
      border-radius: 60px;
      font-weight: 700; font-size: 1rem;
      white-space: nowrap;
      transition: transform 0.15s ease, box-shadow 0.15s ease,
                  background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    }
    .btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
    .btn--red {
      background: var(--grad-red);
      color: #fff;
      box-shadow: 0 9px 22px rgba(255, 90, 10, 0.35);
    }
    .btn--red:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 90, 10, 0.48); }
    .btn--light { background: #fff; color: var(--accent-text); }
    .btn--light:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
    .btn--outline {
      border: 1.5px solid var(--primary-300); color: var(--primary);
    }
    .btn--outline:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }
    .btn--sm { padding: 0.7rem 1.4rem; font-size: 0.96rem; }
    /* longer CTA sentences need to wrap instead of forcing overflow on narrow screens */
    .btn--wrap { white-space: normal; text-align: center; line-height: 1.3; }
    .btn--sm svg { width: 16px; height: 16px; }

    /* ============================================================
       BRAND / TAG PILL LIST — shared chip-list component used for
       "Brands We Service", service-area neighborhoods, appliance
       types, etc. Works with either <span> or <li> children.
       ============================================================ */
    .brand-tags { display: flex; flex-wrap: wrap; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }
    .brand-tags span, .brand-tags li {
      display: inline-block;
      background: var(--light-bg); border: 1px solid var(--line);
      border-radius: 60px; padding: 0.55rem 1.15rem;
      font-size: 0.92rem; font-weight: 700; color: var(--text-dark);
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }
    .brand-tags span:hover, .brand-tags li:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      transform: translateY(-2px);
    }

    /* ============================================================
       USP BAND — 4-up icon + eyebrow + value strip that sits directly
       under the hero on the homepage and every service page. Shared
       here since the same visual pattern repeats across all of them;
       only the copy and icons per page change.
       ============================================================ */
    .usp-band {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
      padding: 1rem 0;
    }
    .usp-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem 1.5rem;
    }
    .usp-item { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
    .usp-item svg {
      width: 26px; height: 26px; flex-shrink: 0;
      fill: none; stroke: #fff;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .usp-text { display: flex; flex-direction: column; min-width: 0; }
    .usp-eyebrow {
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.6px; text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 0.15rem;
    }
    .usp-value { font-size: 0.96rem; font-weight: 800; color: #fff; line-height: 1.25; }
    @media (min-width: 860px) {
      .usp-grid { grid-template-columns: repeat(4, 1fr); }
    }
    /* stay a compact 2x2 grid on mobile instead of collapsing to one
       tall column — matches the "2 above, 2 below" reference layout */
    @media (max-width: 560px) {
      .usp-grid { gap: 0.7rem 0.85rem; }
      .usp-item { gap: 0.5rem; }
      .usp-item svg { width: 20px; height: 20px; }
      .usp-eyebrow { font-size: 0.58rem; }
      .usp-value { font-size: 0.8rem; }
    }

    /* ============ TOP TRUST BAR ============ */
    .top-bar {
      background: var(--accent-text);
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.78rem;
      padding: 0.4rem 0;
    }
    .top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;          /* stays on one line at every width */
      gap: 0.9rem;
      white-space: nowrap;
    }
    .top-bar-left {
      display: flex; align-items: center; gap: 0.6rem;
      font-weight: 500; min-width: 0;
    }
    
    .top-bar-phone {
      color: #fff; font-weight: 700;
      letter-spacing: 0.2px; transition: color 0.15s, text-decoration-color 0.15s;
      text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5);
      text-underline-offset: 2px;
    }
    .top-bar-phone:hover { color: var(--primary-dark); text-decoration-color: var(--primary-dark); }

    /* ============ SITE HEADER ============ */
    .site-header {
      background: #fff;
      position: sticky; top: 0; z-index: 100;
      border-bottom: 1px solid var(--line);
      box-shadow: 0 2px 14px rgba(1, 55, 112, 0.06);
    }
    /* logo | centered menu | CTA — all inside the shared .container measure */
    .header-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 1rem;
    }
    .brand { display: inline-flex; align-items: center; gap: 0.65rem; justify-self: start; padding: 0.5rem 0; text-decoration: none; }
    .brand img { height: 54px; width: auto; flex-shrink: 0; }
    .brand-title {
      font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 1.55rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.02em;
      line-height: 1;
      white-space: nowrap;
      transition: color 0.15s ease;
    }
    .brand:hover .brand-title { color: var(--accent-text-hover); }

    /* --- Desktop navigation --- */
    .main-nav { grid-column: 2; justify-self: center; display: flex; align-items: center; }
    .nav-list { display: flex; align-items: center; gap: 1.75rem; }
    .nav-list > li { position: relative; }
    .nav-list > li > a {
      position: relative;
      display: inline-flex; align-items: center; gap: 0.32rem;
      color: var(--text-dark);
      font-weight: 500;
      font-size: 0.95rem;
      letter-spacing: 0.1px;
      padding: 1.15rem 0;      /* fills header height so the dropdown has no dead gap */
      transition: color 0.15s;
    }
    .nav-list > li > a::after {
      content: '';
      position: absolute; left: 0; bottom: 0.85rem;
      width: 100%; height: 2px;
      background: var(--accent);
      border-radius: 2px;
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.22s ease;
    }
    .nav-list > li > a:hover { color: var(--accent-text-hover); }
    .nav-list > li > a:hover::after { transform: scaleX(1); }
    .nav-list > li > a[aria-current="page"] { color: var(--accent-text); }
    .nav-list > li > a[aria-current="page"]::after { transform: scaleX(1); }
    .caret { width: 9px; height: 9px; fill: currentColor; transition: transform 0.28s ease; }

    /* --- Premium dropdown (desktop only).
       Scoped to min-width so :hover/:focus-within can never fight the mobile
       accordion — a tap on mobile focuses the trigger and would otherwise
       force the panel open. --- */
    @media (min-width: 901px) {
      .has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
      .sub {
        position: absolute; top: 100%; left: 50%;
        min-width: 240px;
        padding: 0.4rem;
        background: #fff;
        border-radius: 14px;
        border-top: 3px solid var(--primary);
        box-shadow: 0 22px 48px rgba(1, 42, 86, 0.2), 0 2px 6px rgba(1, 42, 86, 0.08);
        opacity: 0; visibility: hidden;
        transform: translate(-50%, 12px) scale(0.97);
        transform-origin: top center;
        transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0.3s;
        z-index: 120;
      }
      .has-sub:hover > .sub, .has-sub:focus-within > .sub {
        opacity: 1; visibility: visible;
        transform: translate(-50%, 0) scale(1);
      }
      /* items fade up in sequence for the premium feel */
      .sub li { opacity: 0; transform: translateY(7px); transition: opacity 0.24s ease, transform 0.24s ease; }
      .has-sub:hover > .sub li, .has-sub:focus-within > .sub li { opacity: 1; transform: none; }
      .has-sub:hover > .sub li:nth-child(1), .has-sub:focus-within > .sub li:nth-child(1) { transition-delay: 0.05s; }
      .has-sub:hover > .sub li:nth-child(2), .has-sub:focus-within > .sub li:nth-child(2) { transition-delay: 0.09s; }
      .has-sub:hover > .sub li:nth-child(3), .has-sub:focus-within > .sub li:nth-child(3) { transition-delay: 0.13s; }
      .has-sub:hover > .sub li:nth-child(4), .has-sub:focus-within > .sub li:nth-child(4) { transition-delay: 0.17s; }
      .has-sub:hover > .sub li:nth-child(5), .has-sub:focus-within > .sub li:nth-child(5) { transition-delay: 0.21s; }
      .sub a {
        display: block;
        padding: 0.58rem 0.8rem;
        border-radius: 9px;
        font-size: 0.89rem; font-weight: 500;
        color: var(--primary);
        white-space: nowrap;
        transition: background 0.15s, color 0.15s, padding-left 0.2s ease;
      }
      .sub a:hover {
        background: var(--primary-50);
        color: var(--primary-700);
        padding-left: 1.05rem;
      }
    }

    /* --- Single primary CTA: all red --- */
    .header-call {
      grid-column: 3; justify-self: end;
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--grad-red);
      color: #fff;
      padding: 0.28rem 0.95rem 0.28rem 0.3rem;
      border-radius: 60px;
      box-shadow: 0 4px 14px rgba(255, 90, 10, 0.3);
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    }
    .header-call:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow: 0 8px 20px rgba(255, 90, 10, 0.45);
    }
    .header-call .ring {
      width: 30px; height: 30px; flex-shrink: 0;
      display: grid; place-items: center;
      background: rgba(255, 255, 255, 0.22);
      border-radius: 50%;
    }
    .header-call svg { width: 14px; height: 14px; fill: #fff; }
    .header-call .txt { display: flex; flex-direction: column; line-height: 1.1; }
    .header-call .lbl {
      font-size: 0.5rem; font-weight: 700;
      letter-spacing: 0.5px; text-transform: uppercase;
      color: rgba(255, 255, 255, 0.82);
    }
    .header-call .num { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.2px; }

    /* --- Menu toggle --- */
    .burger {
      display: none;
      width: 38px; height: 38px;
      flex-shrink: 0;
      position: relative; z-index: 101;  /* doubles as the close (X) control */
      border-radius: 10px;
      background: var(--primary);
      box-shadow: 0 3px 10px rgba(1, 55, 112, 0.28);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .burger:active { transform: scale(0.96); }
    .burger .bar, .burger .bar::before, .burger .bar::after {
      position: absolute;
      width: 16px; height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: transform 0.22s ease, background 0.15s ease, width 0.22s ease;
    }
    .burger .bar { top: 50%; left: 50%; margin: -1px 0 0 -8px; }
    .burger .bar::before { content: ''; left: 0; top: -5px; width: 11px; }
    .burger .bar::after { content: ''; left: 0; top: 5px; }
    .nav-open .burger { background: var(--accent); box-shadow: 0 3px 10px rgba(255, 90, 10, 0.38); }
    .nav-open .burger .bar { background: transparent; }
    .nav-open .burger .bar::before { width: 16px; transform: translateY(5px) rotate(45deg); }
    .nav-open .burger .bar::after { transform: translateY(-5px) rotate(-45deg); }

    .scrim {
      position: fixed; inset: 0;
      background: rgba(2, 20, 41, 0.55);
      opacity: 0; visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s;
      z-index: 98;
    }
    .nav-open .scrim { opacity: 1; visibility: visible; }
    .nav-drawer-cta, .nav-drawer-note { display: none; }

    /* ============================================================
       SITE FOOTER — 4 columns
       ============================================================ */
    .site-footer {
      background: linear-gradient(180deg, var(--primary-dark) 0%, #001426 100%);
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.85rem;
      /* brand rule across the very top */
      border-top: 4px solid transparent;
      border-image: linear-gradient(90deg, var(--accent) 0%, var(--gold) 50%, var(--primary-300) 100%) 1;
    }
    .ft-grid {
      display: grid;
      grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
      gap: clamp(1.75rem, 3.5vw, 3rem);
      padding: clamp(2.5rem, 5vw, 3.75rem) 1.5rem clamp(2rem, 4vw, 2.75rem);
    }

    /* --- brand column --- */
    .ft-logo {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      background: #fff;
      padding: 0.55rem 0.95rem;
      border-radius: 12px;
      margin-bottom: 1.1rem;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      text-decoration: none;
    }
    .ft-logo img { height: 46px; width: auto; flex-shrink: 0; }
    .ft-brand-title {
      font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.02em;
      line-height: 1;
      white-space: nowrap;
    }
    .ft-about { line-height: 1.7; margin-bottom: 1.25rem; max-width: 34ch; font-size: 0.92em; }

    /* --- column headings (small-caps style labels keep a touch of
       emphasis; everything else in the footer stays light) --- */
    .site-footer h3 {
      position: relative;
      font-size: 0.74rem; font-weight: 600;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.35rem;
      padding-bottom: 0.6rem;
    }
    .site-footer h3::after {
      content: '';
      position: absolute; left: 0; bottom: 0;
      width: 30px; height: 2px; border-radius: 2px;
      background: var(--accent);
    }

    /* --- link + info lists --- */
    .ft-links { display: flex; flex-direction: column; gap: 0.62rem; }
    .ft-links a {
      display: inline-flex; align-items: center; gap: 0.5rem;
      color: rgba(255, 255, 255, 0.75);
      transition: color 0.16s ease, gap 0.16s ease;
    }
    .ft-links a::before {
      content: '';
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--primary-300);
      flex-shrink: 0;
      transition: background 0.16s ease;
    }
    .ft-links a:hover { color: #fff; gap: 0.7rem; }
    .ft-links a:hover::before { background: var(--gold); }
    .ft-links li:not(:has(a)) {
      display: flex; align-items: center; gap: 0.5rem;
      color: rgba(255, 255, 255, 0.72);
    }
    .ft-links li:not(:has(a))::before {
      content: '';
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--primary-300); flex-shrink: 0;
    }

    /* --- contact column --- */
    .ft-contact { display: flex; flex-direction: column; gap: 0.9rem; }
    .ft-row { display: flex; align-items: flex-start; gap: 0.65rem; line-height: 1.5; }
    .ft-row .ico {
      position: relative;
      width: 26px; height: 26px; flex-shrink: 0;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.09);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }
    .ft-row .ico svg {
      position: absolute; inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: 13px; height: 13px; fill: var(--gold);
    }
    .ft-row b { display: block; color: #fff; font-weight: 600; font-size: 0.83rem; }
    .ft-row b a { color: inherit; }
    .ft-row b a:hover { color: var(--gold); }
    .ft-row span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.62); }

    /* --- bottom bar --- */
    .ft-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.11);
      background: rgba(0, 0, 0, 0.18);
    }
    .ft-bottom-inner {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.5rem 1.5rem;
      padding-top: 1.1rem; padding-bottom: 1.1rem;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.6);
    }
    .ft-bottom-inner strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
    .ft-licence {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-variant-numeric: tabular-nums;
    }
    .ft-licence::before {
      content: '';
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    }

    @media (max-width: 980px) {
      .ft-grid { grid-template-columns: repeat(2, 1fr); }
      .ft-brand { grid-column: 1 / -1; }
      .ft-about { max-width: 52ch; }
    }
    @media (max-width: 560px) {
      .ft-grid { grid-template-columns: 1fr; gap: 1.9rem; padding-left: 1rem; padding-right: 1rem; }
      .ft-brand { grid-column: auto; }
      .ft-logo { padding: 0.9rem 1.1rem; }
      .ft-call { width: 100%; justify-content: center; }
      .ft-bottom-inner { justify-content: center; text-align: center; }
    }


    /* ============ RESPONSIVE (header / footer / top bar only) ============ */
    @media (max-width: 1040px) {
      .nav-list { gap: 1.3rem; }
      .brand img { height: 48px; }
      .brand-title { font-size: 1.35rem; }
    }

    /* --- Off-canvas drawer --- */
    @media (max-width: 900px) {
      .header-inner { grid-template-columns: 1fr auto auto; gap: 0.6rem; }
      .burger { display: block; grid-column: 3; }
      .header-call { grid-column: 2; }

      .main-nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(320px, 86vw);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 4.5rem 1.5rem 1.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: -18px 0 44px rgba(1, 30, 66, 0.22);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
        z-index: 99;
      }
      .nav-open .main-nav { transform: translateX(0); visibility: visible; }

      .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
      .nav-list > li > a {
        display: flex; justify-content: space-between; align-items: center;
        font-size: 0.92rem; font-weight: 600;
        color: var(--primary);
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--primary-100);
      }
      .nav-list > li > a::after { display: none; }
      .caret { width: 11px; height: 11px; color: var(--primary-300); }

      /* --- Click accordion: collapsed by default, toggled by JS via .open --- */
      .has-sub > a { cursor: pointer; }
      .sub {
        position: static;
        opacity: 0; visibility: visible; transform: none;
        min-width: 0;
        background: var(--primary-50);
        border: 0; border-left: 2px solid var(--primary-300);
        border-radius: 0 8px 8px 0;
        box-shadow: none;
        margin: 0 0 0 0.2rem;
        padding: 0 0 0 0.85rem;
        max-height: 0; overflow: hidden;
        transition: max-height 0.32s ease, opacity 0.24s ease,
                    padding 0.32s ease, margin 0.32s ease;
      }
      .has-sub.open > .sub {
        opacity: 1;
        max-height: 360px;
        margin: 0.5rem 0 0.65rem 0.2rem;
        padding: 0.35rem 0 0.45rem 0.85rem;
      }
      .has-sub.open > a { border-bottom-color: transparent; }
      .has-sub.open > a .caret { transform: rotate(180deg); color: var(--primary); }
      .sub li { opacity: 1; transform: none; transition: none; }
      .sub a {
        display: block;
        padding: 0.42rem 0;
        font-size: 0.84rem; font-weight: 500;
        color: var(--primary);
        opacity: 0.82;
      }
      .sub a:hover { opacity: 1; }

      .nav-drawer-cta {
        display: flex !important;
        align-items: center; justify-content: center;
        gap: 0.55rem;
        margin-top: 1.4rem;
        padding: 0.9rem 1rem;
        border-radius: 60px;
        background: var(--grad-red);
        color: #fff; font-weight: 700; font-size: 0.98rem;
        box-shadow: 0 10px 22px rgba(255, 90, 10, 0.3);
      }
      .nav-drawer-cta svg { width: 17px; height: 17px; fill: #fff; }
      .nav-drawer-note {
        display: block; margin-top: 0.7rem; text-align: center;
        font-size: 0.8rem; color: var(--slate); font-weight: 400;
      }
      .nav-drawer-note b { color: var(--green); font-weight: 600; }
    }

    @media (max-width: 680px) {
      .container { padding-left: 1rem; padding-right: 1rem; }
      .header-inner { gap: 0.45rem; }
      .brand img { height: 42px; }
      .brand-title { font-size: 1.25rem; }
      .header-call { padding: 0.24rem 0.7rem 0.24rem 0.24rem; gap: 0.4rem; }
      .header-call .lbl { display: none; }
      .header-call .num { font-size: 0.86rem; }
      .header-call .ring { width: 27px; height: 27px; }
      .header-call svg { width: 13px; height: 13px; }

      /* Top bar stays on one line: drop the middle proof points */
      .top-bar { font-size: 0.7rem; }
      .top-bar-inner { gap: 0.6rem; }
      .top-bar-left .tb-trim { display: none; }
    }

    @media (max-width: 400px) {
      .brand img { height: 38px; }
      .brand-title { font-size: 1.15rem; }
      .header-call { padding: 0.22rem 0.55rem 0.22rem 0.22rem; }
      .header-call .num { font-size: 0.78rem; }
      .header-call .ring { width: 24px; height: 24px; }
      .header-call svg { width: 12px; height: 12px; }
      .top-bar { font-size: 0.66rem; }
    }

    /* ============================================================
       FAQ ACCORDION — shared, site-wide component (native <details>,
       no JS). Canonical class is .faq-item inside .faq-list; used on
       every page that has an FAQ section (home + all service pages).
       ============================================================ */
    :root {
      --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .faq-list { max-width: 880px; margin: 0 auto; }
    .faq-item {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 5px;
      margin-bottom: 0.65rem;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .faq-item:hover { border-color: var(--primary-300); }
    .faq-item[open] {
      border-color: var(--primary-100);
      box-shadow: none;
    }
    .faq-item summary {
      display: flex; align-items: center; gap: 0.8rem;
      padding: 1rem 1.25rem;
      cursor: pointer;
      list-style: none;
      font-size: 0.99rem; font-weight: 700;
      color: var(--primary);
      transition: background 0.18s ease, color 0.18s ease;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { background: var(--primary-50); }
    .faq-item[open] summary { background: var(--primary-50); color: var(--primary-dark); }
    .faq-item summary::after {
      content: '';
      margin-left: auto;
      width: 17px; height: 17px; flex-shrink: 0;
      transition: transform 0.25s ease;
    }
    @supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
      .faq-item summary::after {
        background: var(--primary-300);
        -webkit-mask: var(--chevron) center / contain no-repeat;
        mask: var(--chevron) center / contain no-repeat;
      }
      .faq-item[open] summary::after { background: var(--accent); }
    }
    .faq-item[open] summary::after { transform: rotate(180deg); }
    .faq-item p {
      padding: 1rem 1.25rem 1.2rem;
      font-size: 0.95rem; color: var(--slate); line-height: 1.72;
    }
    .faq-item p a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    @media (max-width: 560px) {
      .faq-item summary { font-size: 0.93rem; padding: 0.9rem 1rem; gap: 0.6rem; }
      .faq-item p { padding: 0.9rem 1rem 1.05rem; font-size: 0.91rem; }
    }

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


/* Utilities */
.status-dot { display: inline-block; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; margin-right: 6px; }
.text-center { text-align: center !important; }
.mt-2 { margin-top: 2rem !important; }
.triage-title { font-size: 1.15rem; font-weight: 700; color: var(--text-dark, #062a5e); margin: 0; line-height: 1.25; }
.svc-hero-copy { position: relative; z-index: 1; }
.ft-col { display: flex; flex-direction: column; }