:root {
    --red: #e50914;
    --red-dark: #b90009;
    --red-on-dark: #ff4d4d;
    --ink: #15191d;
    --charcoal: #23282d;
    --muted: #687078;
    --line: #e8e8e8;
    --soft: #f7f7f7;
    --white: #ffffff;

    --bg: var(--white);
    --bg-alt: var(--soft);
    --panel: var(--ink);
    --panel-alt: var(--charcoal);
    --text: var(--ink);
    --text-soft: var(--muted);
    --text-on-panel: var(--white);
    --text-on-panel-soft: #aab0b6;
    --hairline: var(--line);
    --hairline-on-panel: rgba(255, 255, 255, 0.14);
    --card-bg: var(--white);
    --shadow: 0 18px 44px rgba(18, 24, 30, 0.10);

    --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    --font-body: 'Inter', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101317;
      --bg-alt: #171b20;
      --panel: #0b0d0f;
      --panel-alt: #1a1e23;
      --text: #f2f3f4;
      --text-soft: #9aa1a8;
      --text-on-panel: #ffffff;
      --text-on-panel-soft: #9aa1a8;
      --hairline: #2a2f35;
      --hairline-on-panel: rgba(255, 255, 255, 0.12);
      --card-bg: #171b20;
      --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    }
  }
  :root[data-theme="dark"] {
    --bg: #101317;
    --bg-alt: #171b20;
    --panel: #0b0d0f;
    --panel-alt: #1a1e23;
    --text: #f2f3f4;
    --text-soft: #9aa1a8;
    --text-on-panel: #ffffff;
    --text-on-panel-soft: #9aa1a8;
    --hairline: #2a2f35;
    --hairline-on-panel: rgba(255, 255, 255, 0.12);
    --card-bg: #171b20;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  }
  :root[data-theme="light"] {
    --bg: var(--white);
    --bg-alt: var(--soft);
    --panel: var(--ink);
    --panel-alt: var(--charcoal);
    --text: var(--ink);
    --text-soft: var(--muted);
    --text-on-panel: var(--white);
    --text-on-panel-soft: #aab0b6;
    --hairline: var(--line);
    --hairline-on-panel: rgba(255, 255, 255, 0.14);
    --card-bg: var(--white);
    --shadow: 0 18px 44px rgba(18, 24, 30, 0.10);
  }

  /* Alternating black/white section bands. Fixed by design, independent of
     system/browser dark-mode preference: each band re-declares the same
     tokens components already use (--bg, --text, --card-bg, etc.) so every
     existing component adapts automatically. */
  .band-black, .band-white { background: var(--bg); color: var(--text); border-top: none; }
  .band-black {
    --bg: #0b0d0f;
    --bg-alt: #15191d;
    --text: #ffffff;
    --text-soft: #9aa1a8;
    --hairline: rgba(255, 255, 255, 0.14);
    --card-bg: #171b20;
    --panel: #ffffff;
    --panel-alt: #f7f7f7;
    --text-on-panel: var(--ink);
    --text-on-panel-soft: var(--muted);
    --hairline-on-panel: rgba(0, 0, 0, 0.1);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    /* Shared parallax backdrop: same skyline photo as the hero, held fixed to
       the viewport so it appears to drift behind each black section as the
       page scrolls, tying them together. The hero's own rule (below, later
       in source order) overrides this with its richer, hero-specific treatment. */
    background-image:
      linear-gradient(180deg, rgba(11,13,15,0.94) 0%, rgba(11,13,15,0.90) 55%, rgba(11,13,15,0.94) 100%),
      radial-gradient(ellipse 60% 50% at 85% 8%, rgba(229,9,20,0.12), transparent 70%),
      url("images/hero-city.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  .band-black .eyebrow { color: var(--red-on-dark); }
  .band-black .eyebrow::before { background: var(--red-on-dark); }
  .band-black .text-link,
  .band-black .contact-note a { color: var(--red-on-dark); }
  .band-white {
    --bg: #ffffff;
    --bg-alt: #f7f7f7;
    --text: #15191d;
    --text-soft: #687078;
    --hairline: #e8e8e8;
    --card-bg: #ffffff;
    --panel: #0b0d0f;
    --panel-alt: #1a1e23;
    --text-on-panel: #ffffff;
    --text-on-panel-soft: #9aa1a8;
    --hairline-on-panel: rgba(255, 255, 255, 0.14);
    --shadow: 0 18px 44px rgba(18, 24, 30, 0.10);
  }

  /* Red glow treatment for photography, per brand direction */
  .glow-frame { box-shadow: 0 0 46px 8px rgba(229, 9, 20, 0.30), 0 0 110px 24px rgba(229, 9, 20, 0.14), var(--shadow); }

  /* Accessibility: skip link + visible focus */
  .skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--red); color: #fff; font-weight: 700; font-size: 0.92rem;
    padding: 12px 18px; border-radius: 2px; text-decoration: none;
    transition: top 0.15s ease;
  }
  .skip-link:focus { top: 12px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2.5px solid var(--red); outline-offset: 2px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
  h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
  h3 { font-size: 1.35rem; letter-spacing: 0.005em; }
  p { margin: 0; }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    margin: 0 0 0.9rem;
  }
  .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--red);
    display: inline-block;
  }
  .section { padding: 92px 0; border-top: 1px solid var(--hairline); }
  .section-heading { max-width: 640px; margin: 0 0 48px; }
  .section-heading p.lead { margin-top: 16px; color: var(--text-soft); font-size: 1.05rem; }
  .section-heading.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-heading.center .eyebrow { justify-content: center; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
    padding: 15px 28px; border-radius: 2px; text-decoration: none;
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--red); color: #fff; }
  .btn-primary:hover { background: var(--red-dark); }
  .btn-ghost-dark { border-color: rgba(255,255,255,0.35); color: #fff; }
  .btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
  .btn-outline { border-color: var(--hairline); color: var(--text); }
  .btn-outline:hover { border-color: var(--red); color: var(--red); }

  /* Header -- fixed dark chrome; stays constant while section bands alternate beneath it */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11, 13, 15, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .nav-wrap { display: flex; align-items: center; gap: 28px; padding: 14px 24px; }
  .brand { display: flex; align-items: center; }
  .brand img { height: 72px; width: auto; }

  .primary-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
  .primary-nav a {
    font-size: 0.95rem; font-weight: 600; text-decoration: none; color: #fff;
    white-space: nowrap;
  }
  .primary-nav a:hover { color: var(--red-on-dark); }
  .nav-phone {
    font-family: var(--font-mono); font-weight: 600; color: #fff !important;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .nav-phone svg { width: 15px; height: 15px; }
  .menu-toggle { display: none; }

  /* Hero -- full-bleed city photo, text laid directly over it */
  .hero {
    position: relative; overflow: hidden;
    padding: 96px 0 140px;
    background-image:
      linear-gradient(100deg, rgba(6,7,9,0.95) 0%, rgba(6,7,9,0.88) 38%, rgba(6,7,9,0.46) 64%, rgba(6,7,9,0.14) 100%),
      radial-gradient(ellipse 55% 60% at 88% 20%, rgba(229,9,20,0.20), transparent 70%),
      url("images/hero-city.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-inner { position: relative; z-index: 1; max-width: 620px; }
  .hero-lead { margin-top: 22px; font-size: 1.14rem; color: #d7dadd; max-width: 46ch; }
  .accent { color: var(--red-on-dark); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .hero-actions .btn svg { width: 17px; height: 17px; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
  .chip {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-soft);
    border: 1px solid var(--hairline); border-radius: 2px; padding: 7px 12px;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .chip svg { width: 13px; height: 13px; color: var(--red); flex: none; }
  .chip-row.plain { gap: 22px; }
  .chip-row.plain span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: #d7dadd; }
  .chip-row.plain svg { width: 15px; height: 15px; color: var(--red-on-dark); flex: none; }

  .hero-callout {
    position: relative; z-index: 1; margin-top: 40px; max-width: 420px;
    background: var(--red); color: #fff; padding: 16px 18px; border-radius: 3px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.45);
  }
  .hero-callout strong { display: block; font-size: 0.98rem; }
  .hero-callout span { display: block; margin-top: 4px; font-size: 0.85rem; opacity: 0.92; }

  /* Stats strip */
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .stats-grid > div { padding: 30px 24px; text-align: center; border-left: 1px solid var(--hairline); }
  .stats-grid > div:first-child { border-left: none; }
  .stats-grid strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: var(--red); letter-spacing: 0.02em; }
  .stats-grid span { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--text-soft); font-weight: 500; }

  /* Services */
  .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: 8px; }
  .service-card { background: var(--card-bg); padding: 34px 30px; position: relative; }
  .service-card .icon-wrap { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 1px solid var(--hairline); color: var(--red); margin-bottom: 20px; }
  .service-card .icon-wrap svg { width: 24px; height: 24px; }
  .service-card h3 { margin-bottom: 10px; }
  .service-card p { color: var(--text-soft); font-size: 0.96rem; }
  .service-card .tag { position: absolute; top: 16px; right: 18px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--hairline); }

  /* Financing */
  .financing-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
  .financing-copy .lead { margin-top: 16px; color: var(--text-soft); font-size: 1.05rem; max-width: 50ch; }
  .check-list { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 12px; }
  .check-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.98rem; }
  .check-list svg { width: 18px; height: 18px; color: var(--red); flex: none; }

  /* Service area */
  .area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .area-copy .lead { margin-top: 16px; color: var(--text-soft); font-size: 1.05rem; max-width: 46ch; }
  .area-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .area-chips span { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 2px; padding: 8px 14px; font-size: 0.88rem; font-weight: 600; }
  .area-copy .text-link { margin-top: 26px; }
  .area-visual {
    position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5;
    border: 1px solid var(--hairline);
  }
  .area-visual .area-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
  .area-visual-caption {
    position: absolute; left: 20px; right: 20px; bottom: 20px;
    background: rgba(11, 13, 15, 0.85); backdrop-filter: blur(6px);
    color: #fff; padding: 16px 18px; border-radius: 3px;
  }
  .area-visual-caption strong { display: block; font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; }
  .area-visual-caption span { display: block; margin-top: 4px; color: #d7dadd; font-size: 0.86rem; }

  .text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--red); text-decoration: none; font-size: 0.98rem; }
  .text-link svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
  .text-link:hover svg { transform: translateX(3px); }

  /* Why + process */
  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
  .feature-list { display: grid; gap: 22px; margin-top: 30px; }
  .feature-item { display: flex; gap: 16px; }
  .feature-item .icon-wrap { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 1px solid var(--hairline); color: var(--red); }
  .feature-item .icon-wrap svg { width: 19px; height: 19px; }
  .feature-item strong { display: block; font-size: 1.02rem; }
  .feature-item span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 0.94rem; }

  .why-visual-col { display: grid; gap: 24px; }
  .why-photo { aspect-ratio: 16 / 10; }

  .journey-panel { background: var(--panel); color: var(--text-on-panel); padding: 40px 34px; border-top: 4px solid var(--red); }
  .journey-panel h3 { color: #fff; margin-bottom: 26px; }
  .journey-panel ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
  .journey-panel li { counter-increment: step; display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hairline-on-panel); }
  .journey-panel li:first-child { border-top: none; padding-top: 0; }
  .journey-panel li::before {
    content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.85rem; color: var(--red); flex: none; padding-top: 2px;
  }
  .journey-panel li strong { display: block; font-size: 1rem; color: #fff; }
  .journey-panel li p { margin-top: 3px; color: var(--text-on-panel-soft); font-size: 0.9rem; }

  /* Trust banner: a bold, deliberate break from the black/white rhythm to
     catch the eye partway down the page. */
  .trust-banner { background: var(--red); padding: 46px 0; }
  .trust-banner-inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; text-align: left; }
  .trust-banner-inner > svg { width: 54px; height: 54px; color: #fff; flex: none; }
  .trust-banner-inner strong {
    display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.01em; font-size: clamp(1.5rem, 3vw, 2.15rem); color: #fff;
  }
  .trust-banner-inner span { display: block; margin-top: 6px; font-size: 1.02rem; color: rgba(255,255,255,0.92); max-width: 60ch; }

  /* Reviews */
  .reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
  .rating-block { text-align: left; }
  .rating-block .score { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; color: #fff; line-height: 1; }
  .stars { display: flex; gap: 3px; margin: 10px 0; }
  .stars svg { width: 18px; height: 18px; color: var(--red-on-dark); }
  .rating-block > span { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
  .google-badge { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
  .google-badge svg { width: 18px; height: 18px; flex: none; }
  .google-badge span { font-size: 0.82rem; color: var(--text-soft); font-weight: 600; }

  .reviews-controls { display: flex; gap: 10px; }
  .review-nav-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hairline);
    background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none;
  }
  .review-nav-btn svg { width: 18px; height: 18px; }
  .review-nav-btn:hover { border-color: var(--red-on-dark); color: var(--red-on-dark); }

  .reviews-track {
    display: flex; gap: 18px; overflow-x: auto; padding: 4px 24px 16px; margin: 0 -24px;
    scroll-snap-type: x proximity; scroll-padding-left: 24px;
    scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
  }
  .reviews-track::-webkit-scrollbar { height: 8px; }
  .reviews-track::-webkit-scrollbar-track { background: transparent; }
  .reviews-track::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
  .review-card {
    flex: 0 0 300px; scroll-snap-align: start; background: var(--card-bg); border: 1px solid var(--hairline);
    border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  }
  .review-card-top { display: flex; align-items: center; gap: 12px; }
  .review-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; flex: none;
  }
  .review-card-top strong { display: block; font-size: 0.96rem; }
  .review-meta { display: block; font-size: 0.76rem; color: var(--text-soft); margin-top: 2px; }
  .review-card .stars { margin: 0; }
  .review-card .stars svg { width: 14px; height: 14px; }
  .review-card p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.55; }

  /* FAQ */
  .faq-list { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--hairline); }
  .faq-item { border-bottom: 1px solid var(--hairline); }
  .faq-item summary {
    list-style: none; cursor: pointer; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    font-weight: 700; font-size: 1.05rem;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .plus { flex: none; width: 22px; height: 22px; position: relative; }
  .faq-item summary .plus::before, .faq-item summary .plus::after {
    content: ""; position: absolute; background: var(--red); top: 50%; left: 50%; transform: translate(-50%, -50%);
  }
  .faq-item summary .plus::before { width: 14px; height: 2px; }
  .faq-item summary .plus::after { width: 2px; height: 14px; transition: transform 0.2s ease; }
  .faq-item[open] summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  .faq-item p { padding: 0 4px 24px; color: var(--text-soft); max-width: 68ch; }

  /* Contact */
  .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
  .contact-note { margin-top: 28px; padding: 20px 22px; background: var(--card-bg); border: 1px solid var(--hairline); border-left: 4px solid var(--red); }
  .contact-note strong { display: block; font-size: 0.95rem; }
  .contact-note a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-weight: 600; color: var(--red); text-decoration: none; font-size: 1.05rem; }
  .contact-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

  .estimate-form { background: var(--card-bg); border: 1px solid var(--hairline); padding: 36px; box-shadow: var(--shadow); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .estimate-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 18px; }
  .estimate-form input, .estimate-form select, .estimate-form textarea {
    display: block; width: 100%; margin-top: 8px; padding: 12px 14px; font: inherit;
    background: var(--bg); color: var(--text); border: 1px solid var(--hairline); border-radius: 2px;
  }
  .estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus {
    outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red);
  }
  .estimate-form button { width: 100%; margin-top: 4px; }
  .form-status { margin-top: 14px; font-size: 0.9rem; color: var(--text-soft); min-height: 1.2em; }

  /* Footer */
  .site-footer { padding: 64px 0 28px; }
  .site-footer, .site-footer a { color: var(--text-soft); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--hairline); }
  .footer-grid img { height: 34px; margin-bottom: 16px; }
  .footer-grid p { font-size: 0.92rem; max-width: 32ch; }
  .footer-col h4 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .footer-col a { text-decoration: none; font-size: 0.92rem; }
  .footer-col a:hover { color: #fff; }
  .footer-nap { font-style: normal; font-size: 0.92rem; margin-top: 16px; line-height: 1.5; }
  .footer-meta { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.92rem; }
  .footer-meta strong { color: #fff; font-weight: 600; margin-right: 6px; }
  .copyright { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 26px; font-size: 0.84rem; }
  .copyright a { text-decoration: none; }
  .copyright a:hover { color: #fff; }

  .mobile-call-bar { display: none; }

  @media (max-width: 980px) {
    .why-grid, .area-grid, .contact-grid, .financing-grid { grid-template-columns: 1fr; gap: 40px; }
    .area-visual { order: -1; }
    .review-card { flex-basis: 260px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid > div:nth-child(3) { border-left: none; }
  }
  @media (max-width: 680px) {
    /* background-attachment: fixed is unreliable and jank-prone on mobile
       browsers; scroll normally there instead of disabling the photo. */
    .band-black { background-attachment: scroll; }
    .trust-banner-inner { flex-direction: column; text-align: center; }
    .trust-banner-inner span { margin-left: auto; margin-right: auto; }
    .primary-nav { position: fixed; inset: 64px 0 auto 0; background: #0b0d0f; flex-direction: column; align-items: flex-start; padding: 20px 24px 26px; border-bottom: 1px solid rgba(255,255,255,0.12); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all 0.18s ease; }
    .primary-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .nav-phone { display: none; }
    .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; margin-left: auto; background: none; border: none; cursor: pointer; }
    .menu-toggle span { width: 100%; height: 2px; background: #fff; }
    .card-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .section { padding: 64px 0; }
    body { padding-bottom: 66px; }
    .hero { padding: 72px 0 56px; }
    .hero-callout { max-width: none; padding: 14px 16px; }
    .mobile-call-bar {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      background: var(--red); color: #fff; text-decoration: none;
      font-weight: 700; padding: 16px; font-size: 1rem;
    }
    .mobile-call-bar svg { width: 17px; height: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
  }


/* ---- Services dropdown + service-page link additions (added 2026-08-13) ---- */
.primary-nav .has-sub { position: relative; display: flex; align-items: center; }
.primary-nav .sub-menu { position: absolute; top: 100%; left: -12px; min-width: 15rem; background: #15191d;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: .4rem; padding: .4rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.primary-nav .has-sub:hover .sub-menu, .primary-nav .has-sub:focus-within .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu a { display: block; padding: .5rem .7rem; border-radius: .25rem; font-weight: 600; }
.primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.06); color: var(--red-on-dark); }
.primary-nav .has-sub > a::after { content: ""; display: inline-block; width: 0; height: 0;
  margin-left: .4rem; vertical-align: middle; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .75; }
@media (max-width: 980px) {
  .primary-nav .has-sub { display: block; }
  .primary-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: .35rem 0 .5rem .9rem; min-width: 0; }
  .primary-nav .has-sub > a::after { display: none; }
}
.service-card .text-link { margin-top: 1rem; display: inline-block; }


/* 3D logo mark — header sizing (added 2026-08-14) */
@media (max-width: 768px) {
  .brand img { height: 48px; }
}