/* Desert Moving — site stylesheet.
   Theme: the September 15 2026 handoff ("dmc-desktop-theme-091526" / "-mobile-", one responsive
   file): dark navy hero, process, areas, CTA and footer; white and light-grey bands between; red
   actions; uppercase display headings; section tag pills. See _docs/design-2026-09-12/DESIGN.md.
   Colours (2026-10-01, Francis): red and white lead; blue-green, grey and black are accents.
   Action red #ad1f27 = logo and live-site accent. Panel red #9e3131 and blue-green #2d5d7a were
   measured from Francis's brand image. Surface assignments are in the block at the end of this file.
   Type: Inter (self-hosted), sizes and line heights copied from arbeidsplassen.nav.no (NAV's Aksel
   design system): h1 40/52, h2 32/40, h3 24/32, h4 20/28, body 18/28, lede 20/28; h1 32/40 and
   h2 28/36 at 480px and below.
   Change a colour in :root and nowhere else, except the two data-URI icons on .faq (%23ad1f27). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/inter-latin-var.woff2) format("woff2")}
:root{
  --red:#ad1f27; --red-dark:#8b1820; --red-tint:#fcecec; --red-lit:#e5454d;
  --blue:#105d7e;
  --teal:#2d5d7a; --teal-card:#255068; --teal-lift:#3b6f8f;
  --black:#161616; --black-lift:#2e2e2e; --red-surface:#9e3131;
  --on-dark:#dbe3e9; --on-dark-muted:#c8d2da;
  /* headline emphasis on red or blue-green bands. Headings only: 4.2:1 on both, which passes for
     large text but not for body text. Plain red on blue-green was 1.8:1. */
  --red-on-dark:#ffb3b7;
  --star:#fbbf24;
  --ink:#171717; --body:#4a4a4a; --muted:#6b6b6b; --line:#e5e5e5;
  --bg:#fff; --bg-soft:#f5f5f5;
  --wrap:1280px; --r:8px; --r-md:12px; --r-lg:16px;
  --shadow-sm:0 1px 2px rgb(20 20 20/.05),0 1px 3px rgb(20 20 20/.07);
  --shadow:0 20px 40px -16px rgb(20 20 20/.35);
  --font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* type scale — arbeidsplassen.nav.no */
  --fs-h1:2.5rem;   --lh-h1:3.25rem;
  --fs-h2:2rem;     --lh-h2:2.5rem;
  --fs-h3:1.5rem;   --lh-h3:2rem;
  --fs-h4:1.25rem;  --lh-h4:1.75rem;
  --fs-h5:1.125rem; --lh-h5:1.5rem;
  --fs-h6:.875rem;  --lh-h6:1.5rem;
  --fs-lede:1.25rem; --lh-lede:1.75rem;
  --fs-body:1.125rem; --lh-body:1.75rem;
  --fs-small:1rem;  --lh-small:1.5rem;
  --fs-detail:.875rem; --lh-detail:1.25rem;
  interpolate-size:allow-keywords;
}
@media (max-width:480px){ :root{ --fs-h1:2rem; --lh-h1:2.5rem; --fs-h2:1.75rem; --lh-h2:2.25rem } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body);background:var(--bg);
     font-feature-settings:"ss03";-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{color:var(--ink);margin:0 0 .5em;font-weight:700}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:800;letter-spacing:-.008em;text-transform:uppercase}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:-.002em}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5)}
h6{font-size:var(--fs-h6);line-height:var(--lh-h6)}
h1 em,h2 em{font-style:normal;color:var(--red)}
p{margin:0 0 1em}
a{color:var(--red)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:10px 16px;border:2px solid var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.i{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}

/* dark surfaces share one set of text colours */
.hero,.band.dark,.areas,.cta-band,.foot,.topbar,.crumbs{--ink:#fff;--body:var(--on-dark);--muted:var(--on-dark-muted);--line:rgb(255 255 255/.12)}

/* buttons — red is the quote action; navy is the phone; ghost is secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--red);color:#fff;
     font:700 var(--fs-detail)/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;
     border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;
     box-shadow:0 12px 24px -12px rgb(173 31 39/.7);transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-brand{background:var(--teal);color:#fff;box-shadow:0 12px 24px -12px rgb(20 20 20/.6)}
.btn-brand .i{color:var(--red-lit)}
.btn-brand:hover{background:var(--teal-lift)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-sm{padding:12px 20px;font-size:.8rem}
.btn .i{width:1.05em;height:1.05em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.hero .btn-brand,.band.dark .btn-brand,.cta-band .btn-brand{background:var(--teal-card);border-color:rgb(255 255 255/.2);box-shadow:none}
.hero .btn-brand:hover,.band.dark .btn-brand:hover,.cta-band .btn-brand:hover{background:var(--teal-lift)}
.hero .btn-ghost,.band.dark .btn-ghost,.cta-band .btn-ghost{background:rgb(255 255 255/.08);color:#fff;border-color:rgb(255 255 255/.22);box-shadow:none}
.hero .btn-ghost:hover,.band.dark .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgb(255 255 255/.16)}
.tel{display:inline-flex;align-items:center;gap:.45em;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--red)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--red-tint);
     color:var(--red);font-size:.75rem;line-height:1.25rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.hero .tag,.band.dark .tag{background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.14);color:#fff}
.hero .tag::before,.band.dark .tag::before{background:var(--red-lit)}

/* top utility bar */
.topbar{background:var(--teal);color:var(--body);font-size:.8125rem;line-height:1.25rem;border-bottom:1px solid var(--line)}
.topbar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-top:8px;padding-bottom:8px}
.topbar p{margin:0;display:flex;align-items:center;gap:8px}
.topbar .i{color:var(--red-lit);width:14px;height:14px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{color:var(--red-lit)}
.topbar-r{display:flex;align-items:center;gap:20px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:rgb(255 255 255/.06);border:1px solid var(--line)}
.chip b{color:#fff}

/* header */
.nav{position:sticky;top:0;z-index:50;background:rgb(255 255 255/.96);backdrop-filter:saturate(1.4) blur(10px);
     border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.nav-in{display:flex;align-items:center;gap:24px;min-height:80px}
.brand{flex:none}
.brand img{width:230px;height:auto}
.nav-links{display:flex;align-items:center;gap:4px;margin:0 auto}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--fs-detail);padding:8px 12px;border-radius:var(--r)}
.nav-links a:hover,.nav-links a[aria-current],.nav-links .on>a{color:var(--red)}
.dd{position:relative;display:flex;align-items:center}
.dd-btn{display:flex;background:0;border:0;padding:6px 4px;margin-left:-10px;color:var(--muted);cursor:pointer}
.dd-btn .i{width:14px;height:14px;transition:transform .2s}
.dd-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
         box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column}
.dd.open .dd-menu{display:flex}
.dd-menu a{padding:9px 12px;font-weight:500}
.dd-menu a:hover{background:var(--bg-soft)}
@media (min-width:981px){ .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:flex} .dd:hover .dd-btn .i{transform:rotate(180deg)} }
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-tel{font-size:var(--fs-detail)}
.nav-tel .i{color:var(--red)}
.burger{display:none;flex-direction:column;gap:5px;background:0;border:0;padding:10px;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--ink);display:block}

/* breadcrumbs — sit on the navy, flush with the hero below */
.crumbs{background:var(--teal);border-bottom:1px solid var(--line);font-size:var(--fs-detail);line-height:var(--lh-detail);padding:12px 0;color:var(--muted)}
.crumbs a{color:var(--body);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs a::after{content:"›";margin:0 8px;color:var(--muted)}

/* hero — navy with a faint grid and a red glow; two columns + quote bar on the home page */
.hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0;color:var(--body);background-color:var(--teal);
      background-image:radial-gradient(40% 60% at 100% 100%,rgb(173 31 39/.28),transparent 70%),
        linear-gradient(to right,rgb(255 255 255/.04) 1px,transparent 1px),linear-gradient(to bottom,rgb(255 255 255/.04) 1px,transparent 1px);
      background-size:auto,30px 30px,30px 30px}
.hero h1 em{color:var(--red-lit)}
.hero .lede{font-size:var(--fs-lede);line-height:var(--lh-lede);max-width:58ch;margin:0 0 1.6em}
.hero .tel{padding:15px 22px;border:1px solid rgb(255 255 255/.2);border-radius:var(--r);background:var(--teal-card);margin-left:8px;color:#fff;font-size:var(--fs-small)}
.hero .tel .i{color:var(--red-lit)}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,64px);align-items:center}
.trust{list-style:none;padding:24px 0 0;margin:0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;
       font-size:var(--fs-detail);line-height:var(--lh-detail);font-weight:600;color:#fff}
.trust li{display:flex;align-items:center;gap:8px}
.trust .i{color:var(--red-lit)}
.hero-media{position:relative;margin:0}
.hero-media img{position:relative;z-index:1;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-lg);
                border:4px solid rgb(255 255 255/.1);box-shadow:0 30px 60px -20px rgb(0 0 0/.6)}
.float-card{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:14px;
            background:rgb(20 20 20/.9);backdrop-filter:blur(8px);border:1px solid rgb(255 255 255/.15);border-radius:var(--r-md);padding:14px 18px}
.float-card b{font-size:2rem;line-height:1;font-weight:800;color:#fff}
.float-card small{display:block;font-size:.8125rem;line-height:1.25rem;color:var(--on-dark);margin-top:3px}
.stars{--v:5;display:inline-block;font-size:1rem;letter-spacing:2px;line-height:1;color:transparent;
       background:linear-gradient(90deg,var(--star) calc(var(--v) / 5 * 100%),#cbd5e1 0);-webkit-background-clip:text;background-clip:text}

/* quick quote bar: a white bar on the navy hero, stacked card on mobile */
.qbar{position:relative;z-index:3;max-width:1120px;margin:clamp(40px,5vw,64px) auto 0;display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:4px;align-items:center;background:#fff;
      border-radius:var(--r-lg);box-shadow:0 30px 60px -24px rgb(0 0 0/.55);padding:10px;
      --ink:#171717;--line:#e5e5e5}
.f{display:flex;align-items:center;gap:12px;padding:6px 18px;border-radius:var(--r);cursor:text}
.f+.f{border-left:1px solid var(--line)}
.f:focus-within{background:var(--bg-soft)}
.f .i{color:var(--red)}
.f-in{display:block;min-width:0;flex:1}
.f-l{display:block;font-size:.6875rem;line-height:1rem;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.08em}
.f input,.f select{display:block;width:100%;border:0;padding:2px 0;font:500 var(--fs-small)/1.5 var(--font);color:var(--ink);background:transparent;outline:0}
.qbar .btn{padding:18px 24px}

/* sections */
.band{padding:clamp(56px,8vw,96px) 0}
.band.soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.band.dark{position:relative;background:var(--teal);color:var(--body)}
.sec-head{text-align:center;max-width:820px;margin:0 auto clamp(32px,4vw,52px)}
.sec-head h2{margin:0 0 .4em}
.sec-head p{margin:0}
.sec-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:48px 0 0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.rev>.split-media{order:2}
.split-media{margin:0}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.band.dark .split-media img{border:1px solid var(--line)}
.split-body>p{max-width:62ch}
.stat{display:flex;align-items:center;gap:20px;padding:20px 24px;margin:8px 0 28px;background:#fff;border:1px solid var(--line);
      border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.stat b{font-size:3rem;line-height:1;font-weight:800;color:var(--red);letter-spacing:-.02em}
.stat span{max-width:36ch;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--ink)}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
      box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:box-shadow .3s,transform .3s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card-img{position:relative;overflow:hidden}
.card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.05)}
.ribbon{position:absolute;left:16px;top:16px;background:var(--red);color:#fff;font-size:.75rem;line-height:1rem;font-weight:700;
        padding:6px 12px;border-radius:var(--r);letter-spacing:.08em;text-transform:uppercase}
.card-body{padding:24px;display:flex;flex-direction:column;flex:1}
/* a card title is normally h3, but some card grids carry load-bearing headings - the eight
   sector headings on /office-movers each replace a folded page and target a real search, so
   they stay h2 inside the card rather than being demoted for the sake of markup tidiness. */
.card-body h2,.card-body h3{margin:0 0 .35em;text-transform:uppercase;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:-.002em}
.card-body p{font-size:var(--fs-small);line-height:var(--lh-small);margin:0 0 18px}
.more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-detail);letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.more .i{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--bg-soft);color:var(--muted);transition:background .2s,color .2s,transform .2s}
.card:hover .more .i{background:var(--red);color:#fff;transform:translateX(3px)}

/* process steps — cards; dark band gives the theme's navy "how it works" */
.steps{list-style:none;padding:0;margin:clamp(40px,5vw,56px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.band.dark .step{background:var(--teal-card)}
.step:not(:last-child)::after{content:"";position:absolute;top:44px;right:-26px;width:24px;height:2px;background:rgb(173 31 39/.6)}
.step.on{border-color:var(--red);box-shadow:inset 0 3px 0 var(--red)}
.step-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal-lift);border:2px solid var(--red);
        color:#fff;font-weight:800;font-size:var(--fs-detail);margin-bottom:16px}
.step.on .step-n{background:var(--red)}
.step h3{text-transform:uppercase}
.step p{margin:0;font-size:var(--fs-small);line-height:var(--lh-small)}
.band.dark .step a{color:#fff}

/* gallery: one wide photo, then four; captions ride a dark fade */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,20vw,260px);gap:24px}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.gallery .wide{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.05)}

/* reviews */
.rating-sum{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:var(--teal);color:var(--on-dark);
            font-size:var(--fs-detail);box-shadow:var(--shadow-sm)}
.sec-head .rating-sum{margin-top:16px}
.rating-sum b{font-size:1.125rem;color:#fff}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{margin:0;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
        padding:24px;box-shadow:var(--shadow-sm)}
.review blockquote{margin:0;flex:1}
.review blockquote p{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);font-style:italic}
.review figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px;font-size:var(--fs-detail);line-height:var(--lh-detail)}
.review figcaption b{display:block;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-weight:800}

/* areas: town list + schematic map (both generated from site.json "towns") */
.areas{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;background:var(--teal);
       color:var(--body);border-radius:var(--r-lg);padding:clamp(24px,4vw,52px);box-shadow:var(--shadow)}
.areas-k{margin:0 0 12px;font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pills{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r);background:#fff;color:#171717;
      border:1px solid #e5e5e5;font-size:var(--fs-detail);line-height:var(--lh-detail);font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
a.pill:hover{border-color:var(--red);color:var(--red)}
.areas a.pill{background:var(--red);border-color:var(--red);color:#fff}
.areas a.pill::before{background:#fff}
.areas a.pill:hover{background:var(--red-dark);color:#fff}
.areas span.pill{background:rgb(255 255 255/.08);color:#fff;border-color:var(--line);font-weight:600}
.areas span.pill::before{background:var(--on-dark-muted)}
.areas-hq{display:flex;align-items:center;gap:10px;font-size:var(--fs-detail);margin:0 0 22px}
.m-key{width:14px;height:14px;border-radius:50%;background:var(--star);box-shadow:0 0 0 4px rgb(251 191 36/.3)}
.areas-map{margin:0}
.areas-map svg{display:block;width:100%;height:auto;max-height:540px}
.m-grid{fill:#1f3a4a}
.m-road{fill:none;stroke:#2f5163;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.m-road-lbl{fill:#7b97a6;font:700 10px var(--font);letter-spacing:.08em}
.m-dot{fill:#7b97a6}
.m-town{fill:#fff}
.m-hq{fill:var(--star)}
.m-hq-ring{fill:rgb(251 191 36/.22);stroke:var(--star);stroke-opacity:.5}
.m-lbl{fill:#f1f5f9;font:600 13px var(--font)}
.m-lbl-hq{fill:var(--star);font-weight:800}

/* FAQ — the open question turns navy. Opening one closes the others (main.js). */
.faq-grid{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq-grid .sec-head{text-align:left;margin:0}
.faq-grid .sec-head .actions{margin-top:24px}
.faq{border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 12px;background:#fff;transition:background .25s,border-color .25s}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
             padding:18px 22px;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;transition:transform .25s;
  background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ad1f27' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat}
.faq>:not(summary){margin:0;padding:14px 22px 20px;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:var(--lh-small)}
.faq[open]{background:var(--teal);border-color:var(--teal);box-shadow:var(--shadow);color:var(--on-dark)}
.faq[open]>:not(summary){border-top-color:rgb(255 255 255/.1)}
.faq[open] summary{color:#fff}
.faq[open] a{color:#fff}
.faq[open] summary::after{transform:rotate(45deg);
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat}
.faq::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
.faq[open]::details-content{height:auto}

/* quote form + contact cards */
.contact-grid{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:stretch}
.qform{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r-lg);padding:clamp(22px,3.5vw,40px);box-shadow:var(--shadow-sm)}
.qform-t{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:800;color:var(--ink);text-transform:uppercase;margin:0 0 .2em}
.qform-s{margin:0 0 22px;font-size:var(--fs-small);line-height:var(--lh-small)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:block;margin:0 0 16px}
.fld>span{display:block;font-size:var(--fs-detail);line-height:var(--lh-detail);font-weight:700;color:var(--ink);margin-bottom:6px}
.fld small{font-weight:500;color:var(--muted)}
.fld input,.fld select,.fld textarea{display:block;width:100%;font:500 var(--fs-small)/1.5 var(--font);color:var(--ink);padding:12px 14px;
  border:1px solid #cbd5e1;border-radius:var(--r);background:#fff;transition:border-color .2s,box-shadow .2s}
.fld :focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgb(173 31 39/.15)}
.qform .btn{width:100%;padding:18px;margin-top:4px}
.fine{font-size:var(--fs-detail);line-height:var(--lh-detail);color:var(--muted);margin:12px 0 0}
/* texting-consent box on the quote form (2026-10-09). Unticked by default, never required. */
.consent{display:flex;align-items:flex-start;gap:12px;margin:2px 0 18px;font-size:var(--fs-detail);line-height:var(--lh-detail);color:var(--body)}
.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red);cursor:pointer}
.consent small{display:block;margin-top:4px;color:var(--muted);font-weight:600}
.contact-media{margin:0}
.contact-media img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:var(--r-lg)}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px}
.info{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:#fff;border:1px solid var(--line);
      border-radius:var(--r-lg);padding:26px 20px;text-decoration:none;color:var(--body);box-shadow:var(--shadow-sm);transition:box-shadow .2s}
a.info:hover{box-shadow:var(--shadow)}
.info .ic{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--red-tint);color:var(--red);margin-bottom:10px}
.info .ic .i{width:22px;height:22px}
.info small{font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.info b{color:var(--ink);font-size:var(--fs-small);overflow-wrap:anywhere}
.info.on{background:var(--teal);border-color:var(--teal);color:var(--on-dark)}
.info.on b{color:#fff}
.info.on .ic{background:var(--red);color:#fff}

/* long-form pages — headings keep the scale but drop the uppercase so paragraphs of heading read easily */
.prose{padding:clamp(40px,6vw,72px) 24px}
/* Prose pages get their own narrower measure. Without this the column is capped at 72ch but
   sits hard left inside the 1280px --wrap, leaving half the viewport empty on desktop. */
.wrap.prose{max-width:860px}
.prose>p,.prose>h2,.prose>h3,.prose>h4,.prose>ul:not(.rel),.prose>ol,.prose>.faq{max-width:72ch}
.prose h2,.prose h3{text-transform:none}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose>h2:first-child{margin-top:0}
.prose li{margin:0 0 .5em}
.rel{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rel a{display:inline-block;border:1px solid var(--line);border-radius:var(--r);padding:9px 16px;text-decoration:none;
       background:#fff;color:var(--ink);font-weight:600;font-size:var(--fs-detail)}
.rel a:hover{border-color:var(--red);color:var(--red)}

/* wide content must scroll itself, never the page */
.compare{width:100%;border-collapse:collapse;margin:1.5em 0;display:block;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-small);line-height:var(--lh-small)}
/* Each row is its own fixed-layout table spanning the width, so every row splits into the same
   columns and the header lines up with the body. (Making thead and tbody separate tables, as this
   rule once did, let each size its own columns - headers sat up to 146px off their data.) Cells
   wrap instead of widening, so the table never pushes the page sideways. */
.compare tbody,.compare thead{display:block}
.compare tr{display:table;width:100%;table-layout:fixed}
.compare caption{display:block;width:100%;text-align:left;font-weight:700;color:var(--ink);padding:14px 16px 0}
.compare th,.compare td{border-bottom:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare th{background:var(--teal);color:#fff}

/* call-to-action band (every page except the quote page) — full-width navy */
.cta-band{position:relative;overflow:hidden;background:var(--teal);color:var(--body);padding:clamp(56px,7vw,88px) 0;border-top:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:rgb(173 31 39/.28);filter:blur(80px)}
.cta-in{position:relative;display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:32px}
.cta-in h2{margin:0 0 .4em}
.cta-in h2 em{color:var(--red-lit)}
.cta-in p{margin:0;max-width:56ch}
.cta-in .actions{margin:28px 0 0}
.cta-badge{position:relative;z-index:1;justify-self:end;background:#fff;border-radius:var(--r-lg);padding:24px 32px;text-align:center;box-shadow:var(--shadow)}
.cta-badge img{width:240px;max-width:100%;height:auto}
.cta-badge small{display:block;margin-top:10px;font-size:.75rem;line-height:1rem;font-weight:700;color:#6b6b6b;letter-spacing:.1em;text-transform:uppercase}

/* footer */
.foot{background:var(--teal);color:var(--muted);font-size:var(--fs-detail);line-height:var(--lh-small);border-top:1px solid var(--line)}
.foot a{color:var(--body);text-decoration:none}
.foot a:hover{color:#fff}
.foot-in{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding-top:64px;padding-bottom:48px}
.foot-brand img{width:240px;max-width:100%;margin-bottom:18px;background:#fff;border-radius:var(--r-md);padding:10px 14px;box-sizing:content-box}
.foot-name{color:#fff;font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1.2em}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-contact li{display:flex;align-items:flex-start;gap:10px}
.foot-contact .i{color:var(--red-lit);margin-top:4px}
.foot-bar{border-top:1px solid var(--line)}
.foot-bar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:20px;padding-bottom:20px;font-size:.8125rem}
.foot-bar p{margin:0}
.foot-legal{display:flex;gap:20px}

@media (max-width:1180px){ .nav-tel span{display:none} .nav-tel{width:42px;height:42px;justify-content:center;border:1px solid var(--line);border-radius:50%} }
@media (max-width:980px){
  .nav-in{min-height:68px;gap:10px}
  .burger{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;
             background:#fff;padding:8px 20px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
             max-height:calc(100vh - 68px);overflow:auto}
  .nav-links.open{display:flex}
  .nav-links>a,.dd>a{flex:1;padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:var(--fs-small)}
  .dd{flex-wrap:wrap;align-items:stretch}   /* the arrow button takes the full row height, so its underline lines up with the link's */
  .dd-btn{margin:0;padding:14px 12px;border-bottom:1px solid var(--line);align-items:center;justify-content:center;min-width:44px}
  .dd.open .dd-btn .i{transform:rotate(180deg)}
  .dd-menu{position:static;width:100%;min-width:0;border:0;box-shadow:none;padding:4px 0 8px 12px}
  .nav-cta{margin-left:auto;gap:8px}
  .topbar-r .hide-m{display:none}
  .hero-grid,.split,.faq-grid,.contact-grid,.areas,.cta-in{grid-template-columns:1fr}
  .split.rev>.split-media{order:0}
  .qbar{grid-template-columns:1fr 1fr;padding:8px}
  .f{padding:12px 14px}
  .f+.f{border-left:0}
  .qbar .btn{grid-column:1/-1}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:24px}
  .step:not(:last-child)::after{top:auto;bottom:-25px;left:47px;right:auto;width:2px;height:24px}
  .reviews{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(280px,86%);overflow-x:auto;
           scroll-snap-type:x mandatory;padding-bottom:8px}
  .review{scroll-snap-align:start}
  .info-cards{grid-template-columns:1fr;gap:12px}
  .cta-badge{justify-self:start}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .hero .tel{margin:0}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .brand img{width:160px}
  .nav-cta .btn-sm{padding:10px 14px}
  .topbar-in{justify-content:center}
  .topbar .topbar-l,.chip-t{display:none}
  .topbar-r{gap:14px;white-space:nowrap}
  .wrap.prose{padding-block:40px}
  .qbar{grid-template-columns:1fr}
  .cards,.row{grid-template-columns:1fr}
  .row{gap:0}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:12px}
  .actions .btn{flex:1 1 auto}
  .foot-in{grid-template-columns:1fr}
}
/* {{topic_link}}: blog post -> the service page it supports (topics.json) */
.topic-link{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:72ch;margin:2em 0;padding:18px 22px;
            background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-md)}
.topic-link span{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.topic-link a{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ===========================================================================
   SECTION KIT — 22 layouts ported 2026-09-24 from the Elite Anywhere page
   builder's kit (elite-website-2026/new-pages-v6/_build_section_kit.py).
   ONLY the structure was taken: column counts and which elements sit where.
   Every colour, font, radius and shadow below is a DMC token, and nothing
   here re-opens a DECISIONS.md ruling — no newsletter, no socials, no video,
   no keyword strip, no invented reviews or stats.
   Catalogue: python3 tools/build_section_kit.py -> _docs/section-kit.html
   ======================================================================== */

/* modifiers on blocks that already existed -------------------------------- */
.cards.four{grid-template-columns:repeat(4,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr);gap:32px}
.cards.two .card-img img{aspect-ratio:3/2}
.steps.four{grid-template-columns:repeat(4,1fr)}
.faq-grid.wide{grid-template-columns:2fr 3fr}
.gallery.six{grid-auto-rows:clamp(160px,18vw,230px)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:28px 16px 12px;color:#fff;font-size:var(--fs-detail);
  line-height:var(--lh-detail);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:linear-gradient(to top,rgb(20 20 20/.85),transparent)}
.gallery figure{position:relative}
.pills.cloud{justify-content:center;gap:12px;margin:0}

/* left-aligned section heading, for the split layouts below */
.sec-head.start{text-align:left;margin-inline:0}

/* 1 — feature rows: copy + photo left, six icon rows right (5/7) ---------- */
.feature-rows{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,64px);align-items:start}
.fr-lead .split-media{margin:24px 0 0}
.fr-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fr-list li{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px;box-shadow:var(--shadow-sm)}
.fr-list h3{font-size:var(--fs-h5);line-height:var(--lh-h5);margin:0 0 .25em;text-transform:uppercase}
.fr-list p{margin:0;font-size:var(--fs-detail);line-height:var(--lh-detail)}
.ic{flex:none;width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--red-tint);color:var(--red)}
.band.dark .ic{background:var(--teal-lift);color:var(--red-lit)}
.band.dark .fr-list li{background:var(--teal-card)}

/* 2 — checks: photo mosaic left, three ticked points right (5/7) ---------- */
.checks{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,64px);align-items:center}
.ck-media{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(120px,14vw,170px);gap:16px}
.ck-media figure{margin:0;overflow:hidden;border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.ck-media figure:first-child{grid-column:span 2}
.ck-media img{width:100%;height:100%;object-fit:cover}
.ck-list{list-style:none;padding:0;margin:0 0 24px}
.ck-list li{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.ck-list li:first-child{border-top:0;padding-top:0}
.ck-list b{display:block;color:var(--ink);font-size:var(--fs-h5);line-height:var(--lh-h5);text-transform:uppercase}
.ck-list p{margin:.2em 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}
.ck-list .i{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--red);color:#fff;stroke-width:3}

/* 3 — float pair: one photo with a dark and a light card riding its edges -- */
.float-pair{position:relative;padding:0 0 80px}
.fp-media{margin:0}
.fp-media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.fp-card{border-radius:var(--r-lg);padding:24px 28px;box-shadow:var(--shadow);max-width:340px}
.fp-card b{display:block;font-size:var(--fs-h4);line-height:var(--lh-h4);text-transform:uppercase;margin-bottom:.3em}
.fp-card p,.fp-card ul{margin:0;font-size:var(--fs-detail);line-height:var(--lh-detail)}
.fp-card ul{list-style:none;padding:0}
.fp-card li{display:flex;gap:8px;margin:.5em 0}
.fp-card li .i{flex:none;width:18px;height:18px;color:var(--red);stroke-width:3}
.fp-dark{position:absolute;right:24px;top:24px;background:var(--teal);color:var(--on-dark);
  --ink:#fff;--line:rgb(255 255 255/.12)}
.fp-dark b{color:#fff}
.fp-dark li .i{color:var(--red-lit)}
.fp-light{position:absolute;left:24px;bottom:0;background:#fff;border:1px solid var(--line)}
.fp-light b{color:var(--ink)}

/* 4 — metrics: intro and CTA left, four figures right (1/3) --------------- */
.metrics{display:grid;grid-template-columns:1fr 3fr;gap:clamp(32px,5vw,64px);align-items:center}
.mx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mx{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-md);
  padding:24px 26px;box-shadow:var(--shadow-sm)}
.mx b{display:block;font-size:2.75rem;line-height:1;font-weight:800;color:var(--red);letter-spacing:-.02em}
.mx span{display:block;margin-top:8px;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--ink)}
.band.dark .mx{background:var(--teal-card);border-color:var(--teal-lift);border-left-color:var(--red)}
.band.dark .mx b{color:var(--red-lit)}

/* 5 — metric mix: figures and photographs alternating across three columns - */
.metric-mix{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,17vw,200px);gap:20px}
.mm{display:flex;flex-direction:column;justify-content:center;background:var(--teal);color:var(--on-dark);
  border-radius:var(--r-md);padding:24px 26px}
.mm b{font-size:2.5rem;line-height:1;font-weight:800;color:#fff;letter-spacing:-.02em}
.mm span{margin-top:8px;font-size:var(--fs-detail);line-height:var(--lh-detail);font-weight:600;color:var(--on-dark)}
.mm.alt{background:var(--red)}
.mm-ph{margin:0;overflow:hidden;border-radius:var(--r-md)}
.mm-ph img{width:100%;height:100%;object-fit:cover}

/* 6 — (see .steps.four above: the four-step variant of the existing steps) - */

/* 7 — timeline: copy and photo left, connected steps right (5/7) ---------- */
.timeline{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,64px);align-items:start}
.tl-lead .split-media{margin:24px 0 0}
.tl-list{list-style:none;padding:0 0 0 30px;margin:0;position:relative}
.tl-list::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:rgb(173 31 39/.45)}
.tl-step{position:relative;display:flex;gap:18px;padding:0 0 28px}
.tl-step:last-child{padding-bottom:0}
.tl-step .step-n{position:relative;z-index:1;margin:0}
.tl-step h3{font-size:var(--fs-h5);line-height:var(--lh-h5);margin:.4em 0 .25em;text-transform:uppercase}
.tl-step p{margin:0;font-size:var(--fs-small);line-height:var(--lh-small)}

/* 8 — inclusions: a dark card listing what the price covers, two columns --- */
.incl{background:var(--teal);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);
  box-shadow:var(--shadow);--ink:#fff;--body:var(--on-dark);--muted:var(--on-dark-muted);--line:rgb(255 255 255/.12)}
.incl-head{max-width:64ch;margin:0 0 28px}
.incl-head h3{margin:0 0 .3em;text-transform:uppercase}
.incl-head p{margin:0}
.incl-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.incl-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);
  font-size:var(--fs-small);line-height:var(--lh-small)}
.incl-list .i{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--red);color:#fff;stroke-width:3;margin-top:2px}
.incl-list b{color:#fff;font-weight:700}

/* 9 — logo strip: who we are accredited by, one row --------------------- */
.logos{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:clamp(24px,4vw,56px)}
.logos li{display:flex;align-items:center}
.logos img{max-height:46px;width:auto;opacity:.75;transition:opacity .2s}
.logos li:hover img{opacity:1}
.band.dark .logos img{filter:brightness(0) invert(1);opacity:.7}

/* 10 — logo split: copy and CTA left, logo grid right (35/65) ------------- */
.logo-split{display:grid;grid-template-columns:35fr 65fr;gap:clamp(32px,5vw,64px);align-items:center}
.logo-split .logos{justify-content:start;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.logo-split .logos li{justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px;box-shadow:var(--shadow-sm)}

/* 11 — proof badges: where the rating comes from. Real sources only ------- */
.badges{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:14px}
.badges li{display:flex;align-items:center;gap:12px;background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.18);
  border-radius:var(--r-md);padding:12px 18px}
.badges b{font-size:var(--fs-h5);line-height:1;font-weight:800;color:#fff}
.badges small{display:block;margin-top:4px;font-size:.75rem;line-height:1rem;color:var(--on-dark);
  text-transform:uppercase;letter-spacing:.08em}
.badges .stars{font-size:.85rem}

/* 12/13 — (see .cards.four and .cards.two above) ------------------------- */

/* 15 — (see .pills.cloud above: neighbourhood pills, centred) ------------- */

/* 16 — area card: a dark card sitting over the schematic map -------------- */
.area-card{position:relative}
.area-card .areas-map svg{max-height:600px;filter:saturate(.25)}
.ac-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,84%);
  background:var(--teal);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);
  box-shadow:var(--shadow);text-align:center;--ink:#fff;--line:rgb(255 255 255/.12)}
.ac-box h3{margin:0 0 .35em;text-transform:uppercase}
.ac-box p{margin:0 0 20px;font-size:var(--fs-small);line-height:var(--lh-small)}
.ac-box .actions{justify-content:center;margin:0}

/* 17 — FAQ on its own: one centred column, for pages with no side copy ---- */
.faq-solo{max-width:840px;margin:0 auto}

/* 19 — CTA split: copy left, a full-bleed photo filling the right --------- */
.cta-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--teal);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);color:var(--on-dark);
  --ink:#fff;--line:rgb(255 255 255/.12)}
.cs-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.cs-body h2{margin:0 0 .4em}
.cs-body p{margin:0;max-width:44ch}
.cs-body .actions{margin:26px 0 0}
.cs-media{margin:0}
.cs-media img{width:100%;height:100%;min-height:280px;object-fit:cover}

/* 20 — review feature: stacked quotes each side of one dark figure -------- */
.review-feature{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.rf-col{display:grid;gap:24px;align-content:stretch}
.rf-stat{display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--teal);
  color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);--ink:#fff;--line:rgb(255 255 255/.12)}
.rf-stat b{font-size:3.5rem;line-height:1;font-weight:800;color:#fff;letter-spacing:-.02em}
.rf-stat .stars{margin:12px 0 10px;font-size:1.15rem}
.rf-stat span{font-size:var(--fs-detail);line-height:var(--lh-detail)}

/* 21 — comparison split: a tall photo beside the comparison table --------- */
.compare-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,64px);align-items:center}
.compare-split .split-media img{aspect-ratio:3/4}
.compare-split .compare{margin:0}

/* 22 — pull quote: one portrait beside a single large review (45/55) ------ */
.quote-note{display:grid;grid-template-columns:45fr 55fr;gap:clamp(32px,5vw,64px);align-items:center}
.qn-media{margin:0}
.qn-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.qn-body blockquote{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;color:var(--ink);font-style:italic}
.qn-body blockquote p{margin:0}
.qn-cite{display:flex;align-items:center;gap:14px;margin:24px 0 0;font-size:var(--fs-detail);line-height:var(--lh-detail)}
.qn-cite b{display:block;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}

/* links inside the kit's dark blocks. Red link text is invisible on blue-green (1.01:1 measured on
   /palm-springs' inclusions card after the 2026-10-01 recolour) and was weak on navy before it.
   White and underlined reads on every dark surface; buttons keep their own colours. */
:is(.incl,.fp-dark,.ac-box,.cs-body,.rf-stat,.mm) a:not(.btn){color:#fff;text-decoration:underline}
.incl .fine{color:var(--on-dark)}

/* section kit — responsive. Same two breakpoints as the rest of the sheet. */
@media (max-width:980px){
  .feature-rows,.checks,.timeline,.metrics,.logo-split,.compare-split,.quote-note,.cta-split{grid-template-columns:1fr}
  .cards.four{grid-template-columns:1fr 1fr}
  .steps.four{grid-template-columns:1fr}
  .faq-grid.wide{grid-template-columns:1fr}
  .review-feature{grid-template-columns:1fr}
  .metric-mix{grid-template-columns:1fr 1fr}
  .float-pair{padding-bottom:0}
  .fp-dark,.fp-light{position:static;max-width:none;margin-top:16px}
  .logo-split .logos{justify-content:center}
  .ac-box{position:static;transform:none;width:auto;margin-top:-56px}
}
@media (max-width:640px){
  .fr-list,.incl-list,.ck-media,.mx-grid{grid-template-columns:1fr}
  .ck-media figure:first-child{grid-column:auto}
  .cards.four,.cards.two,.metric-mix{grid-template-columns:1fr}
  .logo-split .logos{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------- 2026-10-01 palette: surfaces
   Red and white lead. Blue-green (--teal) is every accent panel by default, via the tokens above.
   These rules move the three big bands to red and the top bar, footer and phone button to black. */
.topbar,.foot{background:var(--black)}
.btn-brand{background:var(--black);box-shadow:0 12px 24px -12px rgb(0 0 0/.5)}
.btn-brand:hover{background:var(--black-lift)}

/* red surfaces: hero, the breadcrumb strip flush above it, and the call-to-action band */
.crumbs,.hero,.cta-band{background-color:var(--red-surface);--body:rgb(255 255 255/.9);--muted:rgb(255 255 255/.8);--line:rgb(255 255 255/.2)}
.crumbs a{color:rgb(255 255 255/.9)}
.hero{background-image:linear-gradient(to right,rgb(255 255 255/.05) 1px,transparent 1px),
                       linear-gradient(to bottom,rgb(255 255 255/.05) 1px,transparent 1px);
      background-size:30px 30px,30px 30px}
.cta-band::before{background:rgb(0 0 0/.18)}
.hero h1 em,.cta-in h2 em{color:var(--red-on-dark)}
.hero .tag::before,.cta-band .tag::before{background:#fff}
.trust .i,.hero .tel .i{color:#fff}
/* a red button disappears on a red band, so the quote button turns white there */
.hero .btn:not(.btn-brand):not(.btn-ghost),.cta-band .btn:not(.btn-brand):not(.btn-ghost){background:#fff;color:var(--red);box-shadow:0 12px 24px -12px rgb(0 0 0/.45)}
.hero .btn:not(.btn-brand):not(.btn-ghost):hover,.cta-band .btn:not(.btn-brand):not(.btn-ghost):hover{background:#f5f5f5}
.hero .qbar .btn{background:var(--red);color:#fff;box-shadow:0 12px 24px -12px rgb(173 31 39/.7)}
.hero .qbar .btn:hover{background:var(--red-dark)}
.hero .btn-brand,.cta-band .btn-brand,.hero .tel{background:rgb(0 0 0/.22);border-color:rgb(255 255 255/.25)}
.hero .btn-brand:hover,.cta-band .btn-brand:hover{background:rgb(0 0 0/.34)}
.float-card{background:rgb(22 22 22/.88)}
/* red headline emphasis is unreadable on blue-green (contrast ~1.8:1); a light red keeps the idea */
.band.dark :is(h1,h2,h3) em,.areas :is(h2,h3) em,.incl em,.mm em,.cta-split em,.rf-stat em{color:var(--red-on-dark)}
.foot-lic{margin:0;color:var(--muted)}

/* ---------------------------------------------------------------- quote chat (2026-10-13)
   The big box in the hero ({{chat_box}}), its service pills, and the chat panel docked bottom
   right on every page ({{chat_panel}}, assets/js/chat.js). Modelled on Elite Anywhere's homepage. */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.askbox{position:relative;z-index:3;max-width:760px;margin:0}
.ask{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 60px -24px rgb(0 0 0/.55);padding:0;overflow:hidden;
     --ink:#171717;--muted:#6b6b6b}
.ask-l{display:block;font-size:.75rem;line-height:1rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 6px}
.ask textarea{display:block;width:100%;border:0;resize:none;outline:0;background:transparent;padding:0;
              font:500 var(--fs-small)/1.5 var(--font);color:var(--ink);min-height:4.5em}
.ask textarea::placeholder{color:var(--muted)}
.ask:focus-within{box-shadow:0 0 0 3px rgb(255 255 255/.55),0 30px 60px -24px rgb(0 0 0/.55)}
.ask-field{position:relative;padding:16px 72px 16px 20px}
.ask-send{position:absolute;right:14px;bottom:14px;width:48px;height:48px;border:0;border-radius:50%;background:var(--red);color:#fff;
          display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s}
.ask-send:hover{background:var(--red-dark);transform:translateY(-1px)}
.ask-send .i{width:22px;height:22px}
.ask-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ask-pill{border:1px solid rgb(255 255 255/.45);background:rgb(255 255 255/.08);color:#fff;border-radius:999px;padding:8px 16px;
      font:600 var(--fs-detail)/1.25 var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.ask-pill:hover,.ask-pill:focus-visible{background:rgb(255 255 255/.2);border-color:#fff}

.chat{position:fixed;right:24px;bottom:100px;z-index:80;display:flex;flex-direction:column;width:400px;max-width:calc(100vw - 32px);
      height:640px;max-height:calc(100dvh - 124px);background:#fff;border:1px solid #e5e5e5;border-radius:var(--r-lg);overflow:hidden;
      box-shadow:0 30px 70px -24px rgb(0 0 0/.5);--ink:#171717;--body:#4a4a4a;--muted:#6b6b6b;--line:#e5e5e5;color:var(--body);
      opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom right;
      transition:opacity .25s ease,transform .28s cubic-bezier(.4,0,.12,1),visibility .25s}
body.chat-open .chat{opacity:1;visibility:visible;transform:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--black);color:#fff}
.chat-av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
         font-weight:800;font-size:.75rem;letter-spacing:.04em}
.chat-id{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.chat-id strong{font-size:.95rem;color:#fff}
.chat-id span{font-size:.75rem;color:var(--on-dark)}
.chat-icon{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:6px;border-radius:var(--r);line-height:0}
.chat-icon+.chat-icon{margin-left:0}
.chat-icon:hover{background:rgb(255 255 255/.12)}
.chat-icon svg,.chat-fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-thread{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px;background:#fafafa}
.msg{display:flex}
.msg-you{justify-content:flex-end}
.msg-b{max-width:85%;padding:10px 14px;border-radius:16px;font-size:.9375rem;line-height:1.45}
.msg-b p{margin:0 0 .5em}.msg-b p:last-child{margin:0}
.msg-bot .msg-b{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.msg-bot .msg-b a{color:var(--red);font-weight:700}
.msg-you .msg-b{background:var(--red);color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.msg-hint .msg-b{padding:0 4px;font-size:.8125rem;color:var(--muted)}
.chat-ctl{display:flex;flex-wrap:wrap;gap:6px}
.qr{border:1px solid var(--red);background:#fff;color:var(--red);border-radius:999px;padding:7px 13px;font:600 .875rem/1.25 var(--font);cursor:pointer;text-align:left}
.qr:hover{background:var(--red-tint)}
.qr.on{background:var(--red);color:#fff}
.qr.on::after{content:" \2713"}
.qr-go{background:var(--ink);border-color:var(--ink);color:#fff}
.qr-go:hover{background:var(--black-lift)}
.chat-date{display:flex;gap:6px;width:100%;margin-bottom:2px}
.chat-date input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;font:500 .9375rem var(--font);color:var(--ink);background:#fff}
.chat-ctl.review{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.chat-sum{margin:0 0 12px;font-size:.875rem;line-height:1.4}
.chat-sum div{display:flex;gap:10px;padding:3px 0}
.chat-sum dt{flex:none;width:64px;font-weight:700;color:var(--ink)}
.chat-sum dd{margin:0}
.cf{display:block;margin:0 0 8px;font-size:.8125rem;font-weight:700;color:var(--ink)}
.cf input{display:block;width:100%;margin-top:3px;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font:500 .9375rem var(--font);color:var(--ink)}
.cf input:focus,.chat-date input:focus{outline:2px solid var(--red);outline-offset:0}
.chat-ctl .consent{margin:12px 0;font-size:.75rem;line-height:1.4}
.chat-ctl .consent a{color:var(--red)}
.chat-err{margin:0 0 10px;color:var(--red);font-weight:700;font-size:.875rem}
.chat-go{width:100%;padding:14px}
.chat-help{margin:0;padding:6px 14px;font-size:.75rem;line-height:1.35;color:var(--muted);text-align:center;border-top:1px solid var(--line);background:#fff}
.chat-help a{color:var(--red);font-weight:600}
.chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:#fff}
.chat-form textarea{flex:1;border:1px solid var(--line);border-radius:12px;resize:none;padding:9px 12px;max-height:120px;
                    font:500 .9375rem/1.4 var(--font);color:var(--ink);background:#fafafa;outline:0}
.chat-form textarea:focus{border-color:var(--red)}
.chat-send{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.chat-send .i{width:18px;height:18px}
.chat.no-input .chat-form textarea{cursor:not-allowed}
.chat.no-input .chat-send{opacity:.4;cursor:not-allowed}
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:81;width:60px;height:60px;border-radius:50%;border:0;background:var(--red);color:#fff;
          display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 16px 34px -10px rgb(0 0 0/.5);transition:transform .2s}
.chat-fab:hover{transform:translateY(-3px)}
.chat-fab svg{width:26px;height:26px}
.chat-fab-close{display:none}
body.chat-open .chat-fab-open{display:none}
body.chat-open .chat-fab-close{display:block}
.chat-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--red)}
body.chat-open .chat-dot{display:none}
.chat-teaser{position:fixed;right:24px;bottom:96px;z-index:79;width:320px;max-width:calc(100vw - 48px);display:flex;gap:10px;align-items:center;
             background:#fff;border:1px solid #e5e5e5;border-radius:16px;border-bottom-right-radius:4px;padding:12px 14px;cursor:pointer;
             box-shadow:0 18px 44px -16px rgb(0 0 0/.4);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s}
.chat-teaser.show{opacity:1;visibility:visible;transform:none}
.chat-teaser p{margin:0;font-size:.875rem;line-height:1.4;color:#171717}
.chat-teaser .chat-av{width:30px;height:30px;font-size:.625rem}
.chat-teaser-x{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;border:1px solid #e5e5e5;background:#fff;color:#6b6b6b;
               font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
body.chat-open .chat-teaser{display:none}
@media (max-width:640px){
  .ask-field{padding:14px 64px 14px 16px}
  .ask-tip{padding-left:16px;padding-right:16px}
  .ask-send{width:44px;height:44px;right:10px;bottom:10px}
  .chat{top:10px;right:10px;bottom:10px;left:10px;width:auto;max-width:none;height:auto;max-height:none}
  .chat-fab{right:16px;bottom:16px;width:54px;height:54px}
  body.chat-open .chat-fab{display:none}
  .chat-teaser{right:16px;bottom:82px}
}
@media print{.chat,.chat-fab,.chat-teaser{display:none!important}}
.ask-alt{margin:14px 0 28px;font-size:var(--fs-detail);line-height:var(--lh-detail);color:var(--body)}
.ask-alt a{color:#fff;font-weight:700;text-decoration:underline}

/* tips inside the box: hidden until the visitor types, then slide open under a divider */
.ask-tip{max-height:0;opacity:0;overflow:hidden;margin:0;padding:0 20px;border-top:0 solid #e5e5e5;text-align:left;
         font-size:var(--fs-detail);line-height:1.45;color:#6b6b6b;transition:max-height .3s ease,opacity .3s ease,padding .3s ease}
.ask-tip.show{max-height:12rem;opacity:1;padding-top:12px;padding-bottom:14px;border-top-width:1px}
.ask-count{font-weight:700;color:#262626}

/* chat additions (2026-10-15): typing dots, Back, dropdown questions */
.typing{display:inline-flex;gap:4px;align-items:center;height:18px}
.typing span{width:6px;height:6px;border-radius:50%;background:#9a9a9a;animation:dmc-typing 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes dmc-typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.qr-back{border-color:#d4d4d4;color:#4a4a4a;background:#fff}
.qr-back:hover{background:#f5f5f5;border-color:#bdbdbd}
.chat-ctl.only-back{justify-content:flex-start}
.chat-ctl.review .qr-back{margin-top:10px}
.chat-select{display:flex;gap:6px;width:100%}
.chat-select select{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;
                    font:500 .9375rem var(--font);color:var(--ink);background:#fff}
.chat-select select:focus{outline:2px solid var(--red);outline-offset:0}
.qr-go:disabled{opacity:.4;cursor:not-allowed}
.chat-ctl .chat-err{flex-basis:100%;margin:4px 0 0}
/* multi-choice dropdown (service question) */
.chat-multi{width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.cm-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:0;background:#fff;
           font:500 .9375rem/1.35 var(--font);color:var(--muted);text-align:left;cursor:pointer}
.cm-toggle.has{color:var(--ink);font-weight:600}
.cm-toggle .i{flex:none;width:16px;height:16px;transition:transform .2s;color:var(--ink)}
.chat-multi.open .cm-toggle{border-bottom:1px solid var(--line)}
.chat-multi.open .cm-toggle .i{transform:rotate(180deg)}
.cm-list{padding:4px 0}
.cm-opt{display:flex;align-items:center;gap:10px;padding:5px 12px;font-size:.9375rem;line-height:1.3;color:var(--ink);cursor:pointer}
.cm-opt:hover{background:#f5f5f5}
.cm-opt input{width:18px;height:18px;margin:0;accent-color:var(--red);cursor:pointer}
.chat-ctl .cm-done{margin-top:4px}
/* phones: the chat takes the whole screen (Francis, 2026-10-20); the page behind it doesn't scroll */
@media (max-width:640px){
  .chat{inset:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%;height:100dvh;max-height:none;border:0;border-radius:0;
        transform:translateY(24px);transform-origin:bottom center}
  body.chat-open{overflow:hidden}
  .chat-head{padding-top:max(12px,env(safe-area-inset-top))}
  .chat-form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
/* logo avatar (Francis, 2026-10-20): beside every assistant message, in the header and the greeting.
   Controls, hints and the review card line up with the message bubbles, not under the avatar. */
.msg-bot{align-items:flex-end;gap:8px}
.msg-av{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;object-fit:cover}
.msg-hint,.chat-ctl{margin-left:40px}
.chat-av{background:#fff;overflow:hidden;border:1px solid rgb(255 255 255/.25)}
.chat-av img{width:100%;height:100%;display:block;object-fit:cover}
.chat-teaser .chat-av{border-color:var(--line)}
/* bubble colours (Francis, 2026-10-20): the assistant in red, the customer in the blue-green accent.
   White text on both (contrast about 6.6:1 on red, 7:1 on blue-green). */
.msg-bot .msg-b{background:var(--red);border-color:var(--red);color:#fff}
.msg-bot .msg-b a{color:#fff;text-decoration:underline}
.msg-bot .typing span{background:#fff}
.msg-you .msg-b{background:var(--teal);color:#fff}
/* service checklist inside the red question bubble (Francis, 2026-10-20) */
.chat-ctl.in-bubble{margin:12px 0 0;padding:12px 0 0;border-top:1px solid rgb(255 255 255/.3);display:block}
.in-bubble .cm-list{padding:0}
.in-bubble .cm-opt{padding:5px 0;color:#fff}
.in-bubble .cm-opt:hover{background:none}
.in-bubble .cm-opt input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border:2px solid #fff;border-radius:4px;
                         background:transparent;display:grid;place-content:center;cursor:pointer}
.in-bubble .cm-opt input:checked{background:#fff}
.in-bubble .cm-opt input:checked::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:translateY(-1px) rotate(-45deg)}
.in-bubble .cm-opt input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.in-bubble .qr-go{margin-top:10px;background:#fff;border-color:#fff;color:var(--red)}
.in-bubble .qr-go:hover{background:#fbe9ea}
.in-bubble .chat-err{color:#ffe0e2;margin:8px 0 0}
.in-bubble .qr-back{margin:10px 0 0 8px;background:transparent;border-color:rgb(255 255 255/.6);color:#fff}
/* start-over confirmation (Francis, 2026-10-20) */
.chat{position:fixed}
.chat-confirm{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgb(0 0 0/.45)}
.cc-card{width:100%;max-width:300px;background:#fff;border-radius:var(--r-lg);padding:20px;box-shadow:0 20px 40px -12px rgb(0 0 0/.5);text-align:center}
.cc-t{margin:0 0 6px;font-weight:800;font-size:1rem;color:#171717}
.cc-s{margin:0 0 16px;font-size:.875rem;color:#6b6b6b}
.cc-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cc-btns .qr-go{background:var(--red);border-color:var(--red);color:#fff}
.cc-btns .qr-go:hover{background:var(--red-dark)}
.qr-ask::before{content:"? ";font-weight:800}
/* phones + keyboard (2026-10-20): 16px in every box so iPhones don't zoom the page when one is tapped;
   the chat's height and top come from chat.js (the area above the keyboard), so no bottom anchor. */
@media (max-width:640px){
  .chat{bottom:auto}
  .chat-form textarea,.cf input,.chat-date input,.chat-select select,.ask textarea{font-size:16px}
  .chat-thread{overscroll-behavior:contain}
}

/* 20% bigger chat panel on desktop and tablet (Francis, 2026-10-24): 400x640 -> 480x768, text and avatars
   scaled to match. Phones are unchanged: the panel already fills the screen there. */
@media (min-width:641px){
  .chat{width:480px;height:768px;max-height:calc(100dvh - 124px)}
  .chat-av{width:42px;height:42px}
  .chat-id strong{font-size:1.0625rem}
  .chat-id span{font-size:.8125rem}
  .msg-b{font-size:1.0625rem;padding:12px 16px}
  .msg-hint .msg-b{font-size:.875rem}
  .chat-help{font-size:.8125rem}
  .chat-form textarea{font-size:1rem}
  .chat-send{width:44px;height:44px}
}
/* the avatar is Robert Sabo's photo now (2026-10-24): fill the circle */
.chat-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* chat button shows the assistant's photo when closed (Francis, 2026-10-24); the X still closes it.
   Ring sits right on the photo (no white gap); the dot is small and tucked onto the ring. */
.chat-fab{width:64px;height:64px;padding:0;background:var(--red);border:0;overflow:visible}
.chat-fab img.chat-fab-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 3px var(--red);background:#ece7e4}
body.chat-open .chat-fab img.chat-fab-photo{display:none}
/* no 'unread' dot on the photo button (Francis, 2026-10-24): it hinted at a message that isn't there */
.chat-fab .chat-dot{display:none}
@media (max-width:640px){ .chat-fab{width:58px;height:58px} }

/* ---------------------------------------------------------------- hero + nav (draft)
   Francis, 2026-10-13. Hero, top to bottom: eyebrow (Google reviews), H1, supporting text, big box,
   service pills, social proof. No image in the content; a background photo comes later.
   Third version: white main nav (the site's own), red hero, light text on the red for contrast.
   Loaded after style.css and chat.css, so these rules win. */

/* nav phone: the only thing on the right. Solid red phone icon (no circle), bigger number,
   shown at every width instead of collapsing to an icon. */
.nav-tel{gap:12px;font-size:1.375rem;line-height:1;font-weight:800;letter-spacing:.01em;color:var(--ink)}
.nav-tel .i{width:28px;height:28px;padding:0;border:0;color:var(--red);fill:currentColor;stroke:currentColor;stroke-width:1.5}
.nav-tel:hover{color:var(--red)}
@media (max-width:1180px){ .nav-tel{width:auto;height:auto;border:0;border-radius:0} .nav-tel .nt-row{display:flex} .nav-tel .nt-num{display:inline} }
@media (max-width:640px){ .nav-tel{gap:8px;font-size:1.0625rem} .nav-tel .i{width:22px;height:22px} }

/* every hero: Francis's truck-and-warehouse photo (Desktop/dmc-hero-image-2026.jpg) under a red tint.
   --hero-tint is the red's opacity (Francis asked for 20-50%). A light dark shade sits under the red
   so white text stays readable over the white truck and the sky. */
.hero{--hero-tint:.9;--hero-shade:0;background-color:var(--red-surface);background-size:cover;background-position:center;
      --hero-layers:linear-gradient(rgb(158 49 49/var(--hero-tint)),rgb(158 49 49/var(--hero-tint))),linear-gradient(rgb(0 0 0/var(--hero-shade)),rgb(0 0 0/var(--hero-shade)));
      background-image:var(--hero-layers),url(/assets/img/hero-truck-warehouse-2400.webp)}
@media (max-width:800px){ .hero{background-image:var(--hero-layers),url(/assets/img/hero-truck-warehouse-1200.webp)} }
.hero h1,.hero .lede,.hero .eyebrow{text-shadow:0 1px 12px rgb(0 0 0/.35)}
.hero .hero-media{display:none}
.hero .hero-grid{grid-template-columns:1fr}

/* the quote hero: centred */
.hero-ask{padding:clamp(40px,6vw,80px) 0 clamp(40px,5vw,64px)}
.hero-ask .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 16px;border-radius:999px;
         background:rgb(255 255 255/.12);border:1px solid rgb(255 255 255/.25);color:#fff;
         font-weight:700;font-size:var(--fs-detail);line-height:var(--lh-detail)}
.eyebrow b{font-weight:800}
/* content column widened 100px each side (Francis, 2026-10-13) */
.hero-ask h1{max-width:calc(22ch + 200px);margin-left:auto;margin-right:auto;color:#fff}
.hero-ask h1 em{color:var(--red-on-dark)}
/* supporting text: 18px (Francis), held to ~70 characters a line so it reads as two short lines */
.hero-ask .lede{font-size:1.125rem;line-height:1.75rem;max-width:70ch;margin:0 auto 32px;color:rgb(255 255 255/.92)}
.hero-ask .askbox{width:100%;max-width:960px;text-align:left}

/* the box stays a white card; exactly three lines tall, longer messages scroll inside it */
.ask textarea{color:#262626;height:4.5em;min-height:0;line-height:1.5;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* typed text stays 16px: iPhones zoom the whole page into any box whose text is under 16px.
   Only the example shrinks (Francis asked for smaller, 2026-10-13). */
.ask textarea::placeholder{color:#8c8c8c;font-size:.9375rem}
.ask:focus-within{box-shadow:0 0 0 3px rgb(255 255 255/.5),0 30px 60px -24px rgb(0 0 0/.55)}

/* pills: white outline on the red; at most four on a row, the rest start a new centred row */
.ask-pills{justify-content:center;row-gap:0}
.ask-pill{margin:4px 0;border:1px solid rgb(255 255 255/.6);background:transparent;color:#fff}
.ask-pill:hover,.ask-pill:focus-visible{background:#fff;border-color:#fff;color:var(--red)}
.ask-break{flex-basis:100%;height:0}

/* top bar (Francis, 2026-10-13): left / centre / right facts. On phones only the centre one fits. */
.topbar-3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.topbar-3 p{margin:0;white-space:nowrap}
.topbar-3 .tb-c{justify-content:center}
.topbar-3 .tb-r{justify-content:flex-end}
@media (max-width:640px){
  .topbar-3{grid-template-columns:1fr}
  .topbar-3 .tb-l,.topbar-3 .tb-r{display:none}
}
.topbar-3 .i{color:var(--red-lit);width:14px;height:14px;stroke-width:2.5}
/* top bar in the blue-green accent (Francis, 2026-10-13) */
.topbar{background:var(--teal);border-bottom:0}
.topbar-3 p{font-weight:600}
.topbar-3 .i{color:var(--red-on-dark)}   /* light red: plain red disappears on the blue-green */
.topbar-3 .i{stroke-width:3.25;width:15px;height:15px}
/* four facts now (Based in Indio added): spread evenly across the bar; phones still show one */
.topbar-3{display:flex;justify-content:space-between}
/* tablets: two facts, centred; phones: one */
@media (max-width:980px){ .topbar-3{justify-content:center;gap:28px} .topbar-3 .tb-l,.topbar-3 .tb-years{display:none} }
@media (max-width:640px){ .topbar-3 .tb-keep{display:none} }
.ask-tip{font-size:.75rem;line-height:1.45}   /* 12px (Francis, 2026-10-13) */
.hero-ask .askbox{max-width:860px}   /* 50px narrower each side (Francis, 2026-10-13) */

/* ---- Fourth version (Francis, 2026-10-13): no red tint. The photo in its own colours, only 10%
   visible over white, so the hero is light; text goes back to red and dark grey for contrast. ---- */
.hero{--hero-layers:linear-gradient(rgb(255 255 255/.92),rgb(255 255 255/.92));background-color:#fff;
      color:#4a4a4a;--ink:#262626;--body:#4a4a4a;--muted:#757575;--line:#e5e5e5}
.hero h1,.hero .lede,.hero .eyebrow{text-shadow:none}
.hero h1,.hero-ask h1{color:var(--red)}
.hero h1 em,.hero-ask h1 em{color:#262626}
.hero .lede,.hero-ask .lede{color:#4a4a4a}
.eyebrow{background:var(--red-tint);border-color:transparent;color:var(--red)}
.hero .tag{background:var(--red-tint);border-color:transparent;color:var(--red)}
.hero .tag::before{background:var(--red)}
.ask{border:1px solid #e0e0e0;box-shadow:0 24px 48px -28px rgb(0 0 0/.35)}
.ask:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgb(173 31 39/.14),0 24px 48px -28px rgb(0 0 0/.35)}
/* service pills: solid red with white text; blue-green on hover (Francis, 2026-10-22) */
.ask-pill{border-color:var(--red);background:var(--red);color:#fff;transition:background-color .15s,border-color .15s}
.ask-pill:hover,.ask-pill:focus-visible{background:var(--teal);border-color:var(--teal);color:#fff}
.hero .btn:not(.btn-brand):not(.btn-ghost){background:var(--red);color:#fff}
.hero .btn-brand,.hero .tel{background:#262626;border-color:#262626;color:#fff}
.hero .badges li{background:#fff;border-color:#e5e5e5}
.hero .badges b{color:var(--red)}
.hero .badges small{color:#4a4a4a}
.crumbs{background:#fff;border-bottom:1px solid #eee;--body:#4a4a4a;--muted:#757575;color:#757575}
.crumbs a{color:#4a4a4a}
.crumbs a:hover{color:var(--red)}

/* full screen (Francis, 2026-10-13): the quote hero fills whatever is left of the screen under the
   top bar, nav and breadcrumbs, with its content centred top to bottom. chat.js measures where the
   hero starts and sets --hero-top; 120px is the fallback. Taller content simply grows past it. */
.hero-ask{min-height:calc(100vh - var(--hero-top,120px));min-height:calc(100svh - var(--hero-top,120px));
          display:flex;align-items:center}
.hero-ask>.wrap{width:100%}
.hero-ask .lede{font-weight:500;color:#333}   /* thicker over the photo (Francis, 2026-10-13) */
.eyebrow{background:var(--red);border-color:var(--red);color:#fff}   /* red pill, white text, yellow stars (Francis, 2026-10-13) */
@media (max-width:640px){ .topbar-3 .tb-l{display:flex} .topbar-3 .tb-c{display:none} }   /* phones: the Wheaton line (Francis) */
.eyebrow{white-space:nowrap} @media (max-width:380px){ .eyebrow{font-size:.8125rem;gap:6px;padding:6px 12px} .eyebrow .stars{font-size:.8rem;letter-spacing:1px} }
.ask-tip.nudge,.ask-tip.nudge .ask-count{color:var(--red)}   /* sent under 50 characters */
/* refused send: a short side-to-side shake. Skipped for people who turn off motion. */
@keyframes ask-shake{0%,100%{transform:translateX(0)}15%,55%{transform:translateX(-8px)}35%,75%{transform:translateX(8px)}90%{transform:translateX(-3px)}}
.ask.shake{animation:ask-shake .45s ease-in-out}
@media (prefers-reduced-motion:reduce){ .ask.shake{animation:none} }
/* nav phone: icon and number on one line, centred on each other; the hours centred under both */
.nav-tel{flex-direction:column;align-items:center;gap:5px}
.nav-tel .nt-row{display:flex;align-items:center;gap:10px}
.nav-tel .nt-hours{display:block;text-align:center;font-size:.75rem;line-height:1;font-weight:600;letter-spacing:0;color:#6b6b6b}
@media (max-width:640px){ .nav-tel{gap:0} .nav-tel .nt-row{gap:8px} .nav-tel .nt-hours{display:none} }
@media (max-width:360px){ .nav-tel .nt-num{display:none} }

/* ---- main menu as panels (Francis, 2026-10-15, after Roadway Moving's menu) ---- */
.mm-h{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:.9375rem;font-weight:800;color:var(--ink)}
.dd-menu.mega a.mm-link{display:block;padding:8px 10px;border-radius:8px;font-weight:400}
.mm-link b{display:block;font-size:.9375rem;font-weight:700;color:var(--ink)}
.mm-link span{display:block;margin-top:3px;font-size:.8125rem;line-height:1.35;color:var(--muted)}
.dd-menu.mega a.mm-link:hover,.dd-menu.mega a.mm-link[aria-current]{background:var(--bg-soft)}
.mm-link:hover b,.mm-link[aria-current] b{color:var(--red)}
.mm-group+.mm-group{margin-top:18px}
.dd-menu.mega a.mm-btn{display:flex;width:100%;margin-top:18px;padding:14px;color:#fff}
.dd-menu.mega a.mm-act{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);border-radius:0;font-weight:600;color:var(--ink)}
.dd-menu.mega a.mm-act:hover{background:none;color:var(--red)}
.mm-act .i{flex:none;width:22px;height:22px;padding:5px;border-radius:50%;background:var(--red);color:#fff}
@media (min-width:981px){
  .nav-in{position:relative}
  .mega-dd{position:static;align-self:stretch}
  /* items fill the nav's height, so the pointer never leaves the item on its way down to the panel */
  .nav-links{align-self:stretch;align-items:stretch}
  .nav-links>a{display:flex;align-items:center}
  .dd-menu.mega{left:50%;transform:translateX(-50%);width:min(1060px,calc(100vw - 48px));padding:0;flex-direction:row;overflow:hidden;
                border-radius:var(--r-lg);box-shadow:0 30px 60px -20px rgb(0 0 0/.3)}
  .mm-main{flex:1;padding:24px 28px}
  .mm-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}
  .mm-side{flex:none;width:280px;padding:24px;background:var(--bg-soft)}
}
@media (max-width:980px){
  .dd-menu.mega{flex-direction:column;padding:4px 0 8px}
  .mm-main{padding:4px 0}
  .mm-links{display:grid;grid-template-columns:1fr;gap:0}
  .mm-link span,.mm-side,.dd-menu.mega a.mm-btn{display:none}
  .mm-h{margin:10px 0 4px;padding:0;border:0;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:980px){
  /* phone menu panels: headings and links share one left edge */
  .dd-menu.mega a.mm-link{padding:10px 0 10px 12px}
  .mm-h{padding-left:12px}
}

/* ---- home "areas we proudly serve" (Francis, 2026-10-21), laid out like Elite Anywhere's "Where we deliver":
   heading; left column = intro, hairline, two lists with pins; right = Google map of the Business Profile;
   then a full-width dark contact card (phone, email, address + directions, hours) ---- */
#areas .sec-head h2{font-size:clamp(2rem,4.2vw,3rem);line-height:1.12}
.tarea{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:28px;align-items:stretch}
.tarea-lead{margin:0 0 28px;max-width:56ch;color:var(--body);font-size:var(--fs-body);line-height:var(--lh-body)}
.tarea-cols{columns:2;column-gap:32px;border-top:1px solid var(--line);padding-top:24px}
.tarea-cols ul{list-style:none;padding:0;margin:0}
.tarea-cols li{break-inside:avoid;display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:10px 0;
               font-size:var(--fs-body);line-height:1.4;color:var(--ink);font-weight:400}
.tarea-cols li::before{content:"";width:18px;height:18px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ad1f27' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/18px no-repeat}
.tarea-cols a{color:var(--ink);text-decoration:none}
.tarea-cols a:hover{color:var(--red);text-decoration:underline}
.tarea-more{margin:16px 0 0;font-size:var(--fs-detail);font-weight:700}
.tarea-more a{color:var(--red);text-decoration:none}
.tarea-more a:hover{text-decoration:underline}
.tarea-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:460px;background:#e9e9e9}
.tarea-map iframe{width:100%;height:100%;min-height:460px;border:0;display:block}
.tcard{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;margin-top:clamp(40px,5vw,64px);padding:clamp(28px,4vw,48px) clamp(24px,5vw,72px);
       background:var(--black);border-radius:var(--r-lg);color:#fff}
.tc-item{display:flex;gap:20px;align-items:flex-start}
.tc-ic{flex:none;width:56px;height:56px;border-radius:14px;background:rgb(255 255 255/.1);display:flex;align-items:center;justify-content:center}
.tc-ic .i{width:24px;height:24px;color:#fff}
.tc-k{margin:4px 0 6px;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark)}
.tc-v{margin:0;font-size:1.25rem;line-height:1.35;font-weight:700;color:#fff}
.tc-v a{color:#fff;text-decoration:none}
.tc-v a:hover{text-decoration:underline}
.tc-s{margin:6px 0 0;font-size:var(--fs-small)}
.tc-s a{color:var(--on-dark);text-decoration:none}
.tc-s a:hover{color:#fff;text-decoration:underline}
@media (max-width:900px){ .tarea{grid-template-columns:1fr} .tarea-map,.tarea-map iframe{min-height:340px} .tcard{grid-template-columns:1fr} }
@media (max-width:520px){ .tc-v{font-size:1.0625rem;word-break:break-word} .tc-ic{width:46px;height:46px} }
@media (max-width:340px){ .tarea-cols{columns:1} }
.tc-v{text-wrap:balance}
/* contact card in brand red (Francis, 2026-10-21); labels and links lighter so they read on red */
.tcard{background:var(--red)}
.tc-ic{background:rgb(255 255 255/.16)}
.tc-k{color:rgb(255 255 255/.85)}
.tc-s a{color:rgb(255 255 255/.9)}

/* ---- /local-movers "How a local move works" (Francis, 2026-10-22): photos left, numbered steps right ---- */
.hw{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(36px,5vw,56px)}
.hw-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hw-media figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.hw-media figure.wide{grid-column:1/-1}
.hw-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hw-media figure.wide img{aspect-ratio:16/9}
.hw-steps{list-style:none;margin:0;padding:0;position:relative}
.hw-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:20px;padding-bottom:28px}
.hw-step:last-child{padding-bottom:0}
.hw-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:rgb(173 31 39/.25)}
.hw-n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:1rem}
.hw-step h3{margin:10px 0 6px;font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--ink)}
.hw-step p{margin:0;color:var(--body)}
.hw-step a{color:var(--red);font-weight:600}
@media (max-width:980px){ .hw{grid-template-columns:1fr} .hw-media{max-width:640px} }
@media (max-width:520px){ .hw-step{grid-template-columns:40px 1fr;gap:14px} .hw-n{width:40px;height:40px} .hw-step:not(:last-child)::before{left:19px;top:44px} }
/* steps on a dark band (home): white links and a lighter connecting line, so they read on blue-green */
.band.dark .hw-step a{color:#fff;text-decoration:underline}
.band.dark .hw-step:not(:last-child)::before{background:rgb(255 255 255/.3)}
.band.dark .hw-step h3{color:#fff}
.band.dark .hw-step p{color:var(--on-dark)}

/* ---- trust row under the hero pills (Francis, 2026-10-22). Only claims we can back up: Wheaton agent (logo),
   BBB A+ rating (text and icon only: BBB's seal is for accredited businesses, and DMC is not accredited),
   a real Google review line word for word, and the written estimate California requires. ---- */
.trust-row{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;align-items:center;
           gap:16px clamp(20px,3.5vw,48px);margin:40px auto 0;padding:24px 0 0;border-top:1px solid rgb(0 0 0/.08);max-width:1060px}
.trust-row li{display:flex;align-items:center;gap:12px;text-align:left;font-size:var(--fs-detail);line-height:1.3;color:var(--body)}
.trust-row b{display:block;color:var(--ink);font-size:.9375rem;font-weight:800}
.trust-row .tr-ic{width:30px;height:30px;flex:none;color:var(--red);fill:none;stroke:currentColor;stroke-width:1.8}
.tr-logo img{height:40px;width:auto;display:block}
.tr-logo span{max-width:11ch;font-weight:700;color:var(--ink)}
.tr-quote .stars{font-size:.95rem;letter-spacing:1px;flex:none}
.tr-quote b{font-style:italic;font-weight:700}
@media (max-width:980px){ .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;max-width:640px} }
@media (max-width:520px){ .trust-row{gap:18px 16px} .tr-logo img{height:32px} .trust-row .tr-ic{width:26px;height:26px} }
.tr-logo span{max-width:15ch}
@media (max-width:980px){ .trust-row .tr-quote{grid-column:1/-1;order:3;flex-direction:column;align-items:flex-start;gap:4px} }
@media (max-width:980px){ .trust-row li:nth-child(4){order:2} }
/* trust row as a blue-green box with white icons and text (Francis, 2026-10-22); review quote removed */
.trust-row{grid-template-columns:repeat(3,auto);background:var(--teal);border:0;border-radius:var(--r-lg);
           padding:22px clamp(24px,4vw,56px);margin-top:36px;max-width:920px;box-shadow:0 18px 40px -24px rgb(0 0 0/.45)}
.trust-row li{color:var(--on-dark)}
.trust-row b,.tr-logo span{color:#fff}
.trust-row .tr-ic{color:#fff}
@media (max-width:980px){ .trust-row{grid-template-columns:1fr 1fr;justify-content:stretch;max-width:640px} .trust-row li:nth-child(1){grid-column:1/-1;justify-content:center} }
@media (max-width:520px){ .trust-row{padding:20px} }
/* trust box: full width of the page container, bigger (Francis, 2026-10-22) */
.hero-ask .trust-row{align-self:stretch;width:100%;max-width:none;margin-top:44px;padding:30px clamp(24px,5vw,72px);
                     grid-template-columns:repeat(3,auto);justify-content:space-between;gap:20px 32px}
.trust-row li{gap:16px;font-size:var(--fs-small)}
.trust-row b{font-size:1.125rem}
.trust-row .tr-ic{width:38px;height:38px}
.tr-logo img{height:52px}
.tr-logo span{font-size:1.0625rem;max-width:none}
@media (max-width:980px){ .hero-ask .trust-row{grid-template-columns:1fr 1fr;justify-content:stretch} }
@media (max-width:520px){ .hero-ask .trust-row{padding:22px 20px} .trust-row b{font-size:1rem} .tr-logo img{height:40px} .trust-row .tr-ic{width:30px;height:30px} .tr-logo span{font-size:.9375rem} }
@media (max-width:520px){ .hero-ask .trust-row{grid-template-columns:1fr;gap:16px} .trust-row li:nth-child(1){justify-content:flex-start} }
/* thin separators between the trust items (Francis, 2026-10-22): vertical lines on desktop, horizontal on phones */
.trust-row li+li{border-left:1px solid rgb(255 255 255/.25);padding-left:clamp(20px,3vw,40px)}
@media (max-width:980px) and (min-width:521px){ .trust-row li:nth-child(1){border-bottom:1px solid rgb(255 255 255/.25);padding-bottom:16px} .trust-row li:nth-child(2){border-left:0;padding-left:0} }
@media (max-width:520px){ .trust-row li+li{border-left:0;padding-left:0;border-top:1px solid rgb(255 255 255/.25);padding-top:16px} }
/* four trust items (Francis, 2026-10-22): Wheaton agent, BBB A+, 35+ years, Google rating.
   This block overrides the earlier trust-row layout rules: 4 across on desktop, 2 by 2 on tablets, 1 column on phones. */
.hero-ask .trust-row{grid-template-columns:repeat(4,max-content);justify-content:space-between}   /* max-content: each stat sized to its own text, so the Wheaton stat gets the same space before its divider as the others (2026-10-29) */
.hero-ask .trust-row li{grid-column:auto;justify-content:flex-start;margin:0;border:0;padding:0}
.hero-ask .trust-row li+li{border-left:1px solid rgb(255 255 255/.25);padding-left:clamp(20px,2.5vw,36px)}
.hero-ask .tr-logo span{font-weight:400;color:var(--on-dark);font-size:var(--fs-small);white-space:nowrap}
.hero-ask .tr-logo span b{color:#fff}
.hero-ask .tr-logo img{height:44px}
@media (max-width:1100px){
  .hero-ask .trust-row{grid-template-columns:1fr 1fr;justify-content:stretch;gap:0}
  .hero-ask .trust-row li{padding:16px 20px}
  .hero-ask .trust-row li+li{border-left:0;padding-left:20px}
  .hero-ask .trust-row li:nth-child(even){border-left:1px solid rgb(255 255 255/.25)}
  .hero-ask .trust-row li:nth-child(-n+2){border-bottom:1px solid rgb(255 255 255/.25)}
}
@media (max-width:520px){
  .hero-ask .trust-row{grid-template-columns:1fr}
  .hero-ask .trust-row li,.hero-ask .trust-row li:nth-child(even){border-left:0;padding:14px 0}
  .hero-ask .trust-row li:nth-child(-n+2){border-bottom:0}
  .hero-ask .trust-row li+li{border-top:1px solid rgb(255 255 255/.25)}
  .hero-ask .trust-row li:first-child{padding-top:0}
  .hero-ask .trust-row li:last-child{padding-bottom:0}
}
@media (max-width:520px){ .hero-ask .trust-row li+li{padding-left:0} }
/* each trust item is exactly two lines: bold line + one small line, never wrapping (Francis, 2026-10-22) */
.hero-ask .trust-row li > span{white-space:nowrap}
.hero-ask .trust-row b{white-space:nowrap}
@media (min-width:1101px) and (max-width:1280px){ .hero-ask .trust-row{padding-left:28px;padding-right:28px} .hero-ask .trust-row li+li{padding-left:20px} .hero-ask .trust-row li{gap:12px} }

/* ---- three-column card sections with a photo on every card (Francis, 2026-10-22); a short last row is centred ---- */
.cards.cards-3ph{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.cards.cards-3ph>.card{flex:0 1 calc((100% - 56px)/3)}
.card-ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;
         background:repeating-linear-gradient(135deg,var(--teal) 0 18px,var(--teal-card) 18px 36px);color:#fff}
.card-ph span{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark)}
.card-ph b{display:block;margin-top:6px;font-size:1rem;letter-spacing:0;text-transform:none;color:#fff}
@media (max-width:980px){ .cards.cards-3ph>.card{flex-basis:calc((100% - 28px)/2)} }
@media (max-width:640px){ .cards.cards-3ph>.card{flex-basis:100%} }
.cards-3ph,.cards-3ph>.card{scroll-margin-top:110px}
/* seven menu items (Industries added 2026-10-22): tighter links on small laptops so the nav fits on one line */
@media (min-width:981px) and (max-width:1180px){
  .nav-in{gap:14px}
  .nav-links>a,.dd>a{padding:8px 6px;font-size:.8125rem}
  .dd-btn{margin-left:-6px;padding:6px 2px}
  .nav-tel{font-size:1.0625rem;gap:8px}
  .nav-tel .i{width:22px;height:22px}
  .brand img{width:160px}
}

/* reviews: no gap between the review and the name line; cards keep their own height (Francis, 2026-10-23).
   Rows of three, read left to right (Francis, 2026-10-24: masonry columns read top to bottom). */
.review blockquote{flex:none}
@media (min-width:981px){
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
}
@media (max-width:980px){ .reviews{align-items:start} }

/* ---- mobile pass (Francis, 2026-10-23). Last in the file, so it wins over the earlier layers above. ---- */
@media (max-width:980px){
  /* hero box: room for four lines */
  .ask textarea{height:6em}
  /* pills: a six-column grid so rows hold 3 or 2 pills, never 1. Grouped: moving / business / storage */
  .ask-pills{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;row-gap:8px}
  .ask-break{display:none}
  .ask-pill{grid-column:span 3;margin:0;width:100%;white-space:normal;line-height:1.2;padding:10px 12px;text-align:center}
  .ask-pill:nth-of-type(1),.ask-pill:nth-of-type(2),.ask-pill:nth-of-type(4){grid-column:span 2}
  .ask-pill:nth-of-type(1){order:1} .ask-pill:nth-of-type(2){order:2} .ask-pill:nth-of-type(4){order:3}
  .ask-pill:nth-of-type(3){order:4} .ask-pill:nth-of-type(7){order:5}
  .ask-pill:nth-of-type(5){order:6} .ask-pill:nth-of-type(6){order:7}
  /* trust box: 2 by 2, every cell centred, icon above the words, thin lines between cells */
  .hero-ask .trust-row{grid-template-columns:1fr 1fr;justify-content:stretch;gap:0;padding:8px 0}
  .hero-ask .trust-row li,.hero-ask .trust-row li+li{flex-direction:column;justify-content:center;align-items:center;text-align:center;
    gap:8px;padding:20px 12px;margin:0;border:0;grid-column:auto;min-width:0}
  .hero-ask .trust-row li:nth-child(odd){border-right:1px solid rgb(255 255 255/.25)}
  .hero-ask .trust-row li:nth-child(-n+2){border-bottom:1px solid rgb(255 255 255/.25)}
  .hero-ask .trust-row li > *{min-width:0;overflow-wrap:anywhere}
  .hero-ask .trust-row b{font-size:1rem}
  .hero-ask .tr-logo img{height:36px}
  /* reviews: no sideways scrolling; two columns on tablets */
  .reviews{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-auto-columns:auto;gap:16px;
           align-items:start;overflow:visible;padding-bottom:0}
  .reviews .review{scroll-snap-align:none}
  /* footer: two columns, logo centred on top with room above it */
  .foot-in{grid-template-columns:1fr 1fr;gap:32px 24px;padding-top:64px}
  .foot-brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center}
  .foot-brand img{margin:0 auto 18px}
  .foot-contact li{justify-content:center}
  .foot-bar-in{justify-content:center;text-align:center}
}
@media (max-width:520px){
  /* phones: pill rows of 3 short, then 2 and 2 */
  .ask-pill{font-size:.875rem;padding:10px 8px}
  .ask-pill:nth-of-type(1),.ask-pill:nth-of-type(4),.ask-pill:nth-of-type(6){grid-column:span 2}
  .ask-pill:nth-of-type(2),.ask-pill:nth-of-type(3),.ask-pill:nth-of-type(5),.ask-pill:nth-of-type(7){grid-column:span 3}
  .ask-pill:nth-of-type(1){order:1} .ask-pill:nth-of-type(4){order:2} .ask-pill:nth-of-type(6){order:3}
  .ask-pill:nth-of-type(2){order:4} .ask-pill:nth-of-type(5){order:5}
  .ask-pill:nth-of-type(3){order:6} .ask-pill:nth-of-type(7){order:7}
  .hero-ask .trust-row li,.hero-ask .trust-row li+li{padding:16px 8px}
  .hero-ask .trust-row li{font-size:.8125rem}
  .hero-ask .trust-row b{font-size:.9375rem}
  /* reviews: one column, top to bottom, first three only (long reviews make six too tall) */
  .reviews{grid-template-columns:1fr}
  .reviews .review:nth-child(n+4){display:none}
  .foot-in{grid-template-columns:1fr 1fr;padding-top:72px;padding-bottom:40px}
}

/* reviewer photos from Google (2026-10-24): same circle as the initial avatar */
img.avatar{object-fit:cover;background:var(--line)}

/* table captions centred, with room above and below (Francis, 2026-10-24) */
.compare caption{text-align:center;padding:22px 16px 20px}

/* ZIP codes beside the town names (2026-10-24) */
.tarea-zip{color:var(--muted);font-size:.875em;white-space:nowrap}
@media (max-width:520px){ .tarea-zip{display:block;font-size:.8125rem} }
/* ---- hero text widths (Francis, 2026-10-24): intro sentence at most two lines, H1 on one line where it fits;
   trust box further from the pills. Measured on staging at 1440px: 37 of 39 intros fit two lines at 940px. ---- */
.hero-ask .lede{max-width:min(940px,100%)}
.hero-ask h1{max-width:min(1100px,100%)}
.hero-ask .trust-row{margin-top:72px}
/* same intro width on the plain heroes (Our Story, FAQ, blog posts), so they also fit two lines (2026-10-24) */
.hero .lede,.hero .hero-grid > div > p:not(.tag){max-width:min(940px,100%)}
.hero .hero-grid{grid-template-columns:minmax(0,1fr)}

/* ghost buttons in the light heroes were white on white (thank-you page "Email us"), 2026-10-24 */
.hero .btn-ghost{background:#fff;border:1px solid #d4d4d4;color:#262626}
.hero .btn-ghost:hover{border-color:var(--red);color:var(--red)}

/* thank-you page versions (2026-10-24): hidden blocks stay hidden whatever the section styles say */
[data-ty][hidden]{display:none!important}
/* belt and braces: no chat button or greeting on the thank-you page, even before the script runs */
body:has(#dmcChat[data-page="quote-submitted-thank-you"]) .chat-fab,body:has(#dmcChat[data-page="quote-submitted-thank-you"]) .chat-teaser{display:none!important}
/* compact thank-you hero: just the headline and intro, so no full-screen height (2026-10-24) */
.hero-ask.ty-hero{min-height:0;padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.hero-ask.ty-hero .wrap{min-height:0;padding-top:0;padding-bottom:0}
/* referral line under the thank-you intro (2026-10-24): one compact box, wraps on phones */
.ty-refer{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;padding:14px 20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 30px -20px rgb(0 0 0/.35);max-width:min(860px,100%)}
.ty-refer p{margin:0;color:var(--body)}
.ty-refer b{color:var(--ink)}
.ty-refer-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ty-refer .btn{padding:8px 14px;font-size:.75rem}
@media (min-width:981px){ .ty-refer{flex-wrap:nowrap;max-width:min(1100px,100%);text-align:left;justify-content:space-between} .ty-refer > p:first-child{flex:1 1 auto} .ty-refer-btns{flex:none;flex-wrap:nowrap} }
/* referral line, prominent (Francis, 2026-10-24): red box, the question in yellow, white buttons with red text */
.ty-refer{background:var(--red);border:0;color:#fff;box-shadow:0 18px 40px -22px rgb(173 31 39/.7)}
.ty-refer p{color:#fff}
.ty-refer b{color:#ffd54f}
.ty-refer .btn{background:#fff;color:var(--red);border:1px solid #fff;box-shadow:none}
.ty-refer .btn:hover,.ty-refer .btn:focus-visible{background:#ffe9ea;color:var(--red);border-color:#ffe9ea}
@media (min-width:981px){ .ty-refer{max-width:min(1120px,100%)} }
/* share pop-up */
.share-sheet{position:fixed;inset:0;z-index:200;background:rgb(0 0 0/.45);display:flex;align-items:center;justify-content:center;padding:16px}
.ss-box{background:#fff;border-radius:var(--r-lg);width:min(380px,100%);padding:22px 20px 16px;box-shadow:0 30px 70px -20px rgb(0 0 0/.5);text-align:center}
.ss-title{margin:0;font-weight:800;color:var(--ink);font-size:1.125rem}
.ss-note{margin:6px 0 16px;color:var(--muted);font-size:.875rem}
.ss-opts{display:grid;gap:8px}
.ss-opt{display:block;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
  font:700 .9375rem var(--font);text-decoration:none;cursor:pointer}
.ss-opt:hover,.ss-opt:focus-visible{border-color:var(--red);color:var(--red)}
.ss-close{margin-top:12px;background:none;border:0;color:var(--muted);font:600 .875rem var(--font);cursor:pointer;text-decoration:underline}
@media (max-width:640px){ .share-sheet{align-items:flex-end} .ss-box{border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%} }
/* the home hero's red-button rule was winning; these must be white with red text */
.hero .ty-refer .btn,.hero .ty-refer .btn:not(.btn-brand):not(.btn-ghost){background:#fff;color:var(--red);border:1px solid #fff;box-shadow:none}
.hero .ty-refer .btn:hover,.hero .ty-refer .btn:focus-visible{background:#ffe9ea;border-color:#ffe9ea;color:var(--red)}

/* ghost buttons on the blue-green call-to-action box: white with red text (the "Car storage" button was white on white) */
.cta-split .btn-ghost{background:#fff;color:var(--red);border:1px solid #fff}
.cta-split .btn-ghost:hover,.cta-split .btn-ghost:focus-visible{background:#ffe9ea;border-color:#ffe9ea;color:var(--red)}
/* thank-you "What happens next" (2026-10-24): room between the pill and the heading; steps stay three columns, no photos */
#next .sec-head .tag,body:has(.ty-hero) .sec-head .tag{margin-bottom:16px}   /* every section on the thank-you page */

/* Two-line headings: wrap each line in <span class="ln"> (ad page hero, quote band) */
.ln{display:block}

/* Ad landing pages (2026-10-29, Francis) */
.ad-hero h1{max-width:none;font-size:clamp(1.6rem,3.2vw,2.9rem);text-wrap:balance}
.offers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.offers img{display:block;width:100%;height:auto;border-radius:var(--r-md,8px)}
@media (max-width:860px){.offers{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.offers{grid-template-columns:1fr}}
/* "Why us": photos left, heading and paragraph right, then the reasons across the full width below */
.ck-top{margin-bottom:0}
.ck-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:clamp(28px,4vw,48px) 0 0}
.ck-cols li,.ck-cols li:first-child{border:1px solid var(--line);border-radius:var(--r-md,8px);background:#fff;padding:20px}
.ck-cols li{flex-direction:column;gap:12px}
@media (max-width:980px){.ck-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ck-cols{grid-template-columns:1fr}}

/* Spam trap: a field no visitor sees. A bot that fills it is dropped by the Worker. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}