:root {
      --navy: #1b2a6b;
      --navy-deep: #0f1838;
      --red: #c8102e;
      --red-dark: #a50d26;
      --gold: #f6b80f;
      --ink: #16202b;
      --muted: #5a6573;
      --bone: #f1f4f9;
      --line: #e1e6ee;
      --white: #ffffff;
      --radius: 14px;
      --max: 1200px;
      --shadow: 0 10px 30px rgba(15, 24, 56, .08);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font: 400 17px/1.65 "Hanken Grotesk", system-ui, sans-serif;
      color: var(--ink);
      background: var(--white);
    }
    h1, h2, h3, h4 { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
    h2 { font-size: clamp(1.9rem, 3.6vw, 2.65rem); }
    h3 { font-size: 1.2rem; font-weight: 700; }
    p { margin: 0 0 1em; }
    a { color: inherit; }
    img { max-width: 100%; display: block; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
    .section { padding: 96px 0; scroll-margin-top: 90px; }
    .bone { background: var(--bone); }
    .center { text-align: center; }
    .lead { color: var(--muted); font-size: 1.08rem; }
    .head { max-width: 680px; margin-bottom: 48px; }
    .head.center { margin-left: auto; margin-right: auto; }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font: 700 .74rem "Hanken Grotesk", sans-serif; letter-spacing: .22em; text-transform: uppercase;
      color: var(--red); margin-bottom: 16px;
    }
    .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
    .center .eyebrow::after { content: ""; width: 28px; height: 2px; background: currentColor; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 15px 28px; border-radius: 10px; border: 2px solid transparent;
      font: 700 1rem "Hanken Grotesk", sans-serif; text-decoration: none; cursor: pointer;
      transition: background .15s, transform .15s, border-color .15s, color .15s;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-red { background: var(--red); color: #fff; }
    .btn-red:hover { background: var(--red-dark); }
    .btn-outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
    .btn-outline-light:hover { background: rgba(255,255,255,.14); }
    .btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
    .btn-outline:hover { border-color: var(--navy); }
    .btn svg { width: 18px; height: 18px; flex: none; }

    /* Header */
    .site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; padding: 0 16px; }
    .bar {
      max-width: var(--max); margin: 0 auto; height: 72px;
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      background: rgba(255,255,255,.97); border-radius: 16px; padding: 0 14px 0 18px;
      box-shadow: 0 8px 30px rgba(15,24,56,.14);
    }
    .bar-logo img { height: 50px; width: auto; }
    .nav { display: flex; align-items: center; gap: 4px; }
    .nav a { text-decoration: none; font-weight: 600; font-size: .94rem; padding: 8px 14px; border-radius: 8px; color: var(--ink); }
    .nav a:hover, .nav a.active { background: var(--bone); color: var(--navy); }
    .bar-actions { display: flex; align-items: center; gap: 16px; }
    .bar-phone { display: flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--navy); white-space: nowrap; }
    .bar-phone svg { width: 18px; height: 18px; }
    .bar .btn { padding: 11px 20px; font-size: .94rem; }
    .menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
    .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; }

    /* Hero */
    .hero {
      position: relative; min-height: 760px; display: flex; align-items: center;
      padding: 150px 0 110px; color: #fff; text-align: center;
      background:
        linear-gradient(180deg, rgba(15,24,56,.72) 0%, rgba(15,24,56,.62) 50%, rgba(15,24,56,.82) 100%),
        url("/assets/photos/hero-crew-storm.jpg") center 35% / cover;
    }
    .hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); max-width: 900px; margin: 0 auto 24px; }
    .hero h1 em { font-style: normal; color: var(--gold); }
    .hero p { max-width: 640px; margin: 0 auto 36px; font-size: 1.15rem; color: rgba(255,255,255,.88); }
    .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
    .hero-proof {
      margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
      font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.9);
    }
    .hero-proof > span + span::before { content: "•"; color: var(--gold); margin-right: 22px; }
    .hero-proof .stars { color: var(--gold); letter-spacing: 2px; }
    @media (max-width: 680px) { .hero-proof > span + span::before { display: none; } .hero-proof { gap: 6px 16px; font-size: .88rem; } }

    /* Trust strip */
    .trust { background: var(--bone); padding: 34px 0; border-bottom: 1px solid var(--line); }
    .trust-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .trust-label { font: 700 .72rem "Hanken Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
    .trust-items { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex: 1; }
    .trust-item {
      display: flex; align-items: center; gap: 8px; padding: 9px 15px; white-space: nowrap;
      background: #fff; border: 1px solid var(--line); border-radius: 999px;
      font-weight: 600; font-size: .88rem; color: var(--navy);
    }
    @media (max-width: 1440px) { .trust-label { display: none; } .trust-items { justify-content: center; } }
    .trust-item svg { width: 20px; height: 20px; color: var(--red); flex: none; }

    /* About + stats */
    .about-text { max-width: 820px; }
    .about-text h2 { max-width: 720px; }
    .about-text p { color: var(--muted); }
    .stats {
      margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow);
    }
    .stat { padding: 34px 20px; text-align: center; border-right: 1px solid var(--line); }
    .stat:last-child { border-right: 0; }
    .stat strong { display: block; font: 800 3rem/1 "Archivo", sans-serif; color: var(--navy); margin-bottom: 10px; }
    .stat strong small { color: var(--red); font-size: 1.6rem; }
    .stat > span { color: var(--muted); font-size: .95rem; }

    /* Services */
    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .svc {
      background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
      display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
    }
    .svc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,24,56,.12); }
    .svc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
    .svc-img img { width: 100%; height: 100%; object-fit: cover; }
    .svc-num {
      position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 9px;
      display: grid; place-items: center; background: rgba(15,24,56,.88); color: #fff;
      font: 800 .9rem "Archivo", sans-serif;
    }
    .svc-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
    .svc-body p { color: var(--muted); font-size: .97rem; flex: 1; }
    .svc-link { font-weight: 700; color: var(--red); text-decoration: none; font-size: .95rem; }
    .svc-link:hover { text-decoration: underline; }

    /* Why */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .split-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px rgba(15,24,56,.18); }
    .split-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
    .checks { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 14px; }
    .checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
    .checks svg { width: 22px; height: 22px; color: var(--red); flex: none; margin-top: 2px; }

    /* Before / after */
    .ba-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
    .ba-head .head { margin-bottom: 0; }
    .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .ba-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
    .ba {
      position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; background: var(--bone);
    }
    .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    .ba .ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
    .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; transform: translateX(-1.5px); pointer-events: none; }
    .ba-handle::after {
      content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
      background-size: 24px; background-repeat: no-repeat; background-position: center;
    }
    .ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
    .tag {
      position: absolute; top: 14px; padding: 5px 10px; border-radius: 6px; pointer-events: none;
      font: 700 .7rem "Hanken Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff;
    }
    .tag.before { left: 14px; background: rgba(15,24,56,.85); }
    .tag.after { right: 14px; background: var(--red); }
    .ba-card h3 { padding: 20px 22px 4px; margin: 0; }
    .ba-card p { padding: 0 22px 22px; margin: 0; color: var(--muted); font-size: .95rem; }

    /* Gallery */
    .filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
    .chip {
      font: 600 .9rem "Hanken Grotesk", sans-serif; padding: 9px 18px; border-radius: 999px;
      border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
    }
    .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
    .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .gallery button {
      position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
      aspect-ratio: 1; cursor: zoom-in; background: var(--bone);
    }
    .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
    .gallery button:hover img { transform: scale(1.06); }
    .gallery button span {
      position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left;
      background: linear-gradient(transparent, rgba(15,24,56,.88)); color: #fff; font: 600 .85rem "Hanken Grotesk", sans-serif;
    }
    .gallery button[hidden] { display: none; }
    .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8,12,28,.93); display: none; align-items: center; justify-content: center; padding: 20px; }
    .lightbox.open { display: flex; }
    .lightbox figure { margin: 0; text-align: center; }
    .lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 8px; }
    .lightbox figcaption { color: #fff; margin-top: 12px; }
    .lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; cursor: pointer; }
    .lb-btn:hover { background: rgba(255,255,255,.28); }
    .lb-close { top: 18px; right: 18px; }
    .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
    .lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

    /* Process */
    .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
    .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
    .step-num {
      display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; margin-bottom: 16px;
      background: rgba(200,16,46,.09); color: var(--red); font: 800 .95rem "Archivo", sans-serif;
    }
    .step h3 { font-size: 1.05rem; }
    .step p { color: var(--muted); font-size: .93rem; margin: 0; }

    /* Areas */
    .areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
    .area {
      display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px;
      border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .95rem;
    }
    .area svg { width: 18px; height: 18px; color: var(--red); flex: none; }

    /* Referral CTA */
    .cta-band {
      background: var(--navy-deep); color: #fff; border-radius: 20px; padding: 56px;
      display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
      background-image: radial-gradient(circle at 92% 20%, rgba(246,184,15,.22), transparent 40%), radial-gradient(circle at 0% 100%, rgba(200,16,46,.3), transparent 45%);
    }
    .cta-band h2 { margin-bottom: 10px; }
    .cta-band p { margin: 0; color: rgba(255,255,255,.8); max-width: 560px; }
    .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

    /* FAQ */
    .faq { max-width: 860px; margin: 0 auto; }
    .faq details { border-bottom: 1px solid var(--line); }
    .faq summary {
      list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; gap: 20px;
      font: 700 1.08rem "Archivo", sans-serif;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
      display: grid; place-items: center; font: 500 1.2rem "Hanken Grotesk", sans-serif; color: var(--navy); transition: transform .2s;
    }
    .faq details[open] summary::after { transform: rotate(45deg); background: var(--navy); color: #fff; border-color: var(--navy); }
    .faq details p { color: var(--muted); padding: 0 4px 22px; margin: 0; }

    /* Contact */
    .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
    .contact-lines { display: grid; gap: 14px; margin-top: 26px; }
    .contact-line { display: flex; gap: 14px; align-items: center; }
    .contact-line .ic { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); flex: none; }
    .contact-line .ic svg { width: 20px; height: 20px; }
    .contact-line small { display: block; color: var(--muted); font-size: .82rem; }
    .contact-line a { font-weight: 700; text-decoration: none; color: var(--navy); }
    .contact-line a:hover { text-decoration: underline; }
    form { background: #fff; padding: 34px; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); display: grid; gap: 16px; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
    input, select, textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bone); color: var(--ink); }
    input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; background: #fff; }
    .form-note { font-size: .85rem; color: var(--muted); margin: 0; text-align: center; }
    .form-success { display: none; padding: 14px 16px; border-radius: 10px; background: #e7f6ec; color: #1d6b3a; font-weight: 600; }
    .form-success.error { background: #fdecee; color: var(--red-dark); }

    /* Footer */
    footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding: 72px 0 28px; font-size: .95rem; }
    .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; gap: 32px; }
    .foot-logo { height: 70px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
    footer h4 { font: 700 .74rem "Hanken Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
    footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    footer a { text-decoration: none; }
    footer a:hover { color: #fff; }
    .foot-contact li { display: flex; gap: 10px; align-items: flex-start; }
    .foot-contact svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
    .foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }

    /* Reveal on scroll */
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

    /* Responsive */
    @media (max-width: 1100px) {
      .nav a { padding: 8px 10px; }
      .bar-phone span { display: none; }
      .steps { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 960px) {
      .menu-toggle { display: block; }
      .nav {
        display: none; position: absolute; top: 80px; left: 16px; right: 16px;
        flex-direction: column; align-items: stretch; background: #fff; border-radius: 14px; padding: 10px;
        box-shadow: 0 16px 40px rgba(15,24,56,.18);
      }
      .nav.open { display: flex; }
      .nav a { padding: 12px 14px; }
      .bar-actions .btn { display: none; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .stats { grid-template-columns: 1fr 1fr; }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .gallery { grid-template-columns: repeat(3, 1fr); }
      .foot-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 680px) {
      body { font-size: 16px; }
      .wrap { padding: 0 16px; }
      .section { padding: 68px 0; }
      .site-header { top: 10px; padding: 0 10px; }
      .bar { height: 64px; }
      .bar-logo img { height: 42px; }
      .hero { min-height: 0; padding: 130px 0 80px; }
      .hero-actions .btn { width: 100%; }
      .services-grid, .ba-grid, .row { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      .gallery { grid-template-columns: 1fr 1fr; }
      .stat strong { font-size: 2.4rem; }
      .cta-band { padding: 36px 24px; }
      .foot-grid { grid-template-columns: 1fr; }
      form { padding: 24px 18px; }
      .trust-row { justify-content: center; }
    }
    @media (max-width: 420px) {
      .steps, .areas-grid { grid-template-columns: 1fr; }
    }

    /* ---------- Multi-page additions ---------- */
    a.area { text-decoration: none; color: var(--ink); transition: border-color .15s, color .15s; }
    a.area:hover { border-color: var(--red); color: var(--red); }

    /* Nav dropdowns */
    .dd { position: relative; }
    .dd > a::after { content: "▾"; font-size: .7em; margin-left: 6px; opacity: .7; }
    .dd-menu {
      position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; z-index: 70;
      background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 16px 40px rgba(15,24,56,.18);
      display: none; flex-direction: column;
    }
    .dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
    .dd:hover .dd-menu, .dd:focus-within .dd-menu { display: flex; }
    .nav .dd-menu a { padding: 9px 12px; font-weight: 600; font-size: .92rem; white-space: nowrap; }

    /* Inner page hero */
    .page-hero {
      position: relative; color: #fff; padding: 160px 0 80px;
      background: linear-gradient(180deg, rgba(15,24,56,.82), rgba(15,24,56,.72)), var(--hero-img) center / cover;
    }
    .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 820px; margin-bottom: 18px; }
    .page-hero p { max-width: 680px; font-size: 1.12rem; color: rgba(255,255,255,.88); margin-bottom: 30px; }
    .page-hero .hero-actions { justify-content: flex-start; }
    .crumbs { font-size: .88rem; color: rgba(255,255,255,.7); margin-bottom: 18px; }
    .crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
    .crumbs a:hover { color: #fff; text-decoration: underline; }
    .crumbs span { margin: 0 8px; }

    /* Article + sidebar */
    .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
    .prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1.6em; }
    .prose h2:first-child { margin-top: 0; }
    .prose h3 { margin-top: 1.4em; }
    .prose p, .prose li { color: #3d4855; }
    .prose ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 0 0 1.4em; }
    .prose ul li { position: relative; padding-left: 30px; }
    .prose ul li::before {
      content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
      background: rgba(200,16,46,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
    }
    .prose ol { padding-left: 1.3em; display: grid; gap: 10px; margin: 0 0 1.4em; }
    .prose ol li::marker { color: var(--red); font-weight: 800; }
    .prose a { color: var(--red); font-weight: 600; }
    .prose figure { margin: 28px 0; }
    .prose figure img { border-radius: var(--radius); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .prose figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; }
    .photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
    .photo-pair img { border-radius: 12px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .callout { background: var(--bone); border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 28px 0; }
    .callout p:last-child { margin: 0; }
    .town-block { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
    .town-block h3 { margin-top: 0; }

    .sidebar { position: sticky; top: 110px; display: grid; gap: 18px; }
    .side-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); }
    .side-card.dark { background: var(--navy-deep); color: #fff; border: 0; }
    .side-card.dark p { color: rgba(255,255,255,.8); }
    .side-card h3 { margin-bottom: 10px; }
    .side-card .btn { width: 100%; margin-top: 10px; }
    .side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
    .side-list a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--ink); }
    .side-list a:hover, .side-list a[aria-current] { background: var(--bone); color: var(--red); }
    .side-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-weight: 600; font-size: .95rem; }
    .side-facts li { display: flex; gap: 10px; align-items: flex-start; }
    .side-facts svg { width: 20px; height: 20px; color: var(--red); flex: none; margin-top: 2px; }

    /* Region cards (service areas hub) */
    .region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .region { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
    .region:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,24,56,.12); }
    .region img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
    .region div { padding: 24px; }
    .region p { color: var(--muted); margin-bottom: 10px; }
    .region .towns { font-weight: 600; color: var(--navy); font-size: .95rem; }

    @media (max-width: 960px) {
      .dd > a::after { display: none; }
      .dd-menu { position: static; display: flex; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; }
      .dd-menu::before { display: none; }
      .nav .dd-menu a { font-weight: 500; color: var(--muted); padding: 8px 14px; }
      .nav.open { max-height: calc(100vh - 110px); overflow-y: auto; }
      .article-grid { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .region-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .page-hero { padding: 120px 0 60px; }
      .page-hero .hero-actions .btn { width: 100%; }
      .photo-pair { grid-template-columns: 1fr; }
    }

    /* Exterior services strip under the home service cards */
    .svc-extra {
      margin-top: 24px; padding: 28px 30px; border-radius: var(--radius);
      background: #fff; border: 1px dashed #c7cfdc;
      display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    }
    .svc-extra > div { flex: 1 1 420px; }
    .svc-extra h3 { margin-bottom: 6px; }
    .svc-extra p { margin: 0; color: var(--muted); }

    /* Google review links */
    .hero-proof .proof-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.4); }
    .hero-proof .proof-link:hover { border-bottom-color: var(--gold); color: #fff; }
    a.trust-item { text-decoration: none; transition: border-color .15s; }
    a.trust-item:hover { border-color: var(--red); }
    .stat > span a, .about-text a, .side-facts a { color: inherit; text-decoration: underline; text-decoration-color: rgba(200,16,46,.45); text-underline-offset: 3px; }
    .stat > span a:hover, .about-text a:hover, .side-facts a:hover { color: var(--red); }

    /* Sticky call / inspection bar on phones */
    .mobile-cta { display: none; }
    @media (max-width: 960px) {
      .mobile-cta {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.97); box-shadow: 0 -6px 24px rgba(15,24,56,.14);
      }
      .mobile-cta a {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 13px 10px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 1rem;
      }
      .mobile-cta svg { width: 18px; height: 18px; }
      .mobile-cta-call { background: var(--navy); color: #fff; }
      .mobile-cta-book { background: var(--red); color: #fff; }
      body { padding-bottom: 76px; }
      /* Hide the call / inspection bar while the menu is open so it can't cover Login */
      body.menu-open .mobile-cta { display: none; }
      .nav.open { max-height: calc(100dvh - 110px); }
    }

    /* Team login link in the header menu */
    .nav a.nav-login { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); margin-left: 6px; }
    .nav a.nav-login svg { width: 15px; height: 15px; }
    .nav a.nav-login:hover { border-color: var(--navy); }
    @media (max-width: 960px) { .nav a.nav-login { margin: 6px 0 0; justify-content: center; } }

    /* Keep header labels on one line now that the menu has more items */
    .nav a, .bar .btn { white-space: nowrap; }
    @media (min-width: 961px) and (max-width: 1440px) {
      .nav a { padding: 8px 10px; }
      .bar-actions { gap: 12px; }
    }
    @media (min-width: 961px) and (max-width: 1320px) { .bar-phone span { display: none; } }

    /* Privacy policy */
    .page-hero-plain { background: var(--navy-deep); padding: 140px 0 48px; }
    .page-hero-plain p { margin-bottom: 0; }
    .policy { max-width: 780px; }
    .form-note a, .foot-bottom a { text-decoration: underline; }
    @media (max-width: 680px) { .page-hero-plain { padding: 110px 0 36px; } }

    /* Financing */
    .finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
    .finance-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; box-shadow: var(--shadow); }
    .finance-card p { color: var(--muted); margin: 0; }
    .finance-brand { font: 800 1.35rem "Archivo", sans-serif; color: var(--navy); }
    .finance-card .realwidget { min-height: 48px; max-width: 100%; }
    .finance-fallback { font-size: .88rem; color: var(--muted); }
    .acorn-banner img { max-width: 100%; height: auto; border-radius: 6px; }
    .finance-note { text-align: center; color: var(--muted); font-size: .85rem; max-width: 720px; margin: 22px auto 0; }
    @media (max-width: 760px) { .finance-grid { grid-template-columns: 1fr; } .finance-card { padding: 22px; } }

    /* Hail check + online booking */
    .hc-section { padding-top: 48px; }
    .hc-card [hidden] { display: none !important; }
    .hc-card form.hc-step { border: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; display: block; }
    .hc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
    .hc-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: var(--shadow); }
    .hc-card h2 { font-size: 1.5rem; margin-bottom: 14px; }
    .hc-label { display: block; font-weight: 700; margin-bottom: 8px; }
    .hc-row { display: flex; gap: 10px; }
    .hc-row input { flex: 1; min-width: 0; }
    .hc-card input[type=text], .hc-card input[type=tel], .hc-card input[type=email], .hc-card input:not([type]), .hc-card textarea {
      width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff;
    }
    .hc-card input:focus, .hc-card textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: transparent; }
    .hc-error { background: #fdecee; color: var(--red-dark, #9b0d24); border-radius: 8px; padding: 10px 12px; margin: 12px 0 0; font-size: .95rem; }
    .hc-muted { color: var(--muted); font-size: .95rem; }
    .hc-found { color: var(--muted); margin-bottom: 14px; }
    .hc-banner { border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
    .hc-banner p { margin: 6px 0 0; }
    .hc-alert { background: #fdecee; border: 1px solid #f5c2cb; }
    .hc-warn { background: #fff7e6; border: 1px solid #fde1a6; }
    .hc-neutral { background: var(--bone); border: 1px solid var(--line); }
    .hc-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
    .hc-list li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
    .hc-size { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 800; font-size: .95rem; }
    .hc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
    .hc-card fieldset { border: 0; padding: 0; margin: 0 0 18px; }
    .hc-card legend { font-weight: 700; margin-bottom: 8px; }
    .hc-card legend span, .hc-field span { font-weight: 500; color: var(--muted); font-size: .9rem; }
    .hc-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .95rem; }
    .hc-pill:has(input:checked) { border-color: var(--navy); background: #eef1fa; }
    .hc-pill input { accent-color: var(--navy); }
    .hc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 14px; }
    .hc-field { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
    .hc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .hc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); margin-top: 6px; }
    .hc-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
    .hc-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 10px 0 14px; }
    .hc-day { flex: none; display: grid; gap: 2px; text-align: center; min-width: 74px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
    .hc-day span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
    .hc-day[aria-selected=true] { background: var(--navy); border-color: var(--navy); color: #fff; }
    .hc-day[aria-selected=true] span { color: rgba(255,255,255,.75); }
    .hc-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
    .hc-time { padding: 11px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
    .hc-time:hover { border-color: var(--red); color: var(--red); }
    .hc-chosen { background: var(--bone); border-radius: 12px; padding: 12px 16px; }
    .hc-done { text-align: center; padding: 20px 0; }
    .hc-check { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
    .hc-side h3 { margin-bottom: 12px; }
    .hc-fine { font-size: .85rem; color: var(--muted); margin-top: 14px; }
    @media (max-width: 960px) { .hc-wrap { grid-template-columns: 1fr; } }
    @media (max-width: 680px) {
      .hc-card { padding: 20px 16px; }
      .hc-row { flex-direction: column; }
      .hc-grid { grid-template-columns: 1fr; }
      .hc-actions .btn { flex: 1 1 100%; }
    }
    .hero-hailcheck { margin: 18px 0 0; text-align: center; }
    .hero-hailcheck a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
    .hero-hailcheck svg { width: 18px; height: 18px; }

    /* Optional marketing-text consent + homeowner follow-up / report pages */
    .sms-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--muted); line-height: 1.45; text-align: left; }
    .sms-consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
    .sms-consent a, .hc-consent a { text-decoration: underline; }
    .hc-consent-optional { font-size: .8rem; }
    .hc-page { padding-top: 150px; min-height: 70vh; }
    .hc-page .hc-card { max-width: 680px; margin: 0 auto; }
    .fu-msg { text-align: center; }
    .fu-msg h1 { font-size: 1.7rem; margin: 10px 0; }
    .rp-title { font-size: 1.8rem; margin: 6px 0 4px; }
    .rp-for { color: var(--muted); margin: 0 0 18px; }
    .rp-terms { background: #f6f7f9; border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
    .rp-terms h2 { font-size: 1.05rem; margin: 0 0 8px; }
    .rp-terms ul { margin: 0; padding-left: 18px; font-size: .9rem; color: #374151; display: grid; gap: 6px; }
    .rp-card .hc-consent { margin-top: 12px; }
    .rp-card .hc-actions { margin-top: 18px; }
    .rp-note { white-space: pre-line; }
    .rp-files { list-style: none; padding: 0; display: grid; gap: 10px; margin: 18px 0; }
    .rp-files a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; color: var(--navy); }
    .rp-files a:hover { border-color: var(--navy); background: #f6f7fb; }
    .rp-files img { width: 100%; border-radius: 10px; display: block; }
    .rp-card [hidden] { display: none !important; }
    @media (max-width: 680px) { .hc-page { padding-top: 110px; } }
.table-wrap { overflow-x: auto; margin: 0.5rem 0 1rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid #e3e6ee; }
.data-table th { background: #1b2a6b; color: #fff; font-weight: 600; }
.data-table tbody tr:nth-child(even) { background: #f6f7fb; }
.data-note { font-size: 0.88rem; color: #5f6880; }
.prose { min-width: 0; } .table-wrap { max-width: 100%; }
.services-more { margin-top: 1.5rem; text-align: center; line-height: 1.9; } .services-more a { font-weight: 600; }
.contact-grid > * { min-width: 0; } .contact-line a { overflow-wrap: anywhere; }