/* Layout: a navy identity band opens and closes the page; everything between sits on light
     ground in a single 1060px column, with the vent-grille motif as the only ornament. */
  :root{
    --surface-100:#ffffff; --surface-200:#f3f6fa; --ink:#0e1726; --ink-muted:#53637a;
    --paper:#ffffff; --navy-900:#0b2545; --navy-600:#1c4b82;
    --gold-500:#f2b134; --gold-700:#9a6a08; --line:#dce3ec; --signal-ok:#1a6d45;
    --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --s4:16px; --s6:24px; --s8:32px; --r-md:8px; --r-pill:999px;
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --surface-100:#101826; --surface-200:#1a2434; --ink:#e9f0f8; --ink-muted:#9fadc0;
    --paper:#f2f6fa; --navy-900:#0b2545; --navy-600:#2a66aa;
    --gold-500:#f7c352; --gold-700:#d9a02a; --line:#283445; --signal-ok:#45b07b;
    color-scheme:dark;}}
  :root[data-theme="dark"]{
    --surface-100:#101826; --surface-200:#1a2434; --ink:#e9f0f8; --ink-muted:#9fadc0;
    --paper:#f2f6fa; --navy-900:#0b2545; --navy-600:#2a66aa;
    --gold-500:#f7c352; --gold-700:#d9a02a; --line:#283445; --signal-ok:#45b07b;
    color-scheme:dark;}

  body{background:var(--surface-100);color:var(--ink);font-family:var(--font-body);
       font-size:16px;line-height:1.6;margin:0}
  .wrap{max-width:1060px;margin:0 auto;
        padding-left:max(16px,env(safe-area-inset-left,0px));
        padding-right:max(16px,env(safe-area-inset-right,0px))}
  h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
  p{margin:0}
  a{color:inherit}

  /* ── identity band ───────────────────────────────────────────── */
  .band{background:var(--navy-900);color:var(--paper)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
       flex-wrap:wrap;padding-block:18px}
  .mark{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em}
  .mark small{display:block;font-family:var(--font-body);font-weight:500;font-size:10.5px;
              letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin-top:3px}
  .tel{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--gold-500);
       text-decoration:none;white-space:nowrap}
  .grille{display:block;width:100%;height:16px}

  /* ── hero ────────────────────────────────────────────────────── */
  .hero{padding-block:clamp(40px,7vw,76px)}
  .hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.04;font-weight:700;max-width:16ch}
  .lede{margin-top:var(--s6);font-size:clamp(17px,2vw,19px);max-width:56ch;color:var(--ink-muted)}
  .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s8);list-style:none;padding:0}
  .pills li{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 15px;
            font-size:14px;color:var(--ink-muted)}

  /* ── price cards ─────────────────────────────────────────────── */
  .grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
        margin-top:var(--s8)}
  .card{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);
        background:var(--surface-200);display:flex;flex-direction:column;min-width:0}
  .card h3{font-size:19px;font-weight:600}
  .card p{margin-top:12px;font-size:15px;color:var(--ink-muted)}
  /* after .card p, so the price keeps its size and ink colour */
  .card p.price{font-family:var(--font-display);font-weight:700;font-size:40px;margin-top:10px;
         font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
  .card p.price span{font-size:15px;font-weight:500;color:var(--ink-muted);margin-left:6px;
         font-family:var(--font-body)}
  .rates{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none;
         font-size:14px;color:var(--ink-muted)}
  .rates li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
            font-variant-numeric:tabular-nums}

  section{padding-block:clamp(36px,6vw,64px)}
  .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);
           font-weight:600}
  h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;margin-top:10px;max-width:22ch}
  .sub{margin-top:14px;max-width:62ch;color:var(--ink-muted)}

  .steps{counter-reset:s;list-style:none;padding:0;margin:var(--s8) 0 0;display:grid;
         gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
  .steps li{counter-increment:s;min-width:0}
  .steps li::before{content:counter(s);font-family:var(--font-display);font-weight:700;
    font-size:13px;color:var(--navy-900);background:var(--gold-500);width:26px;height:26px;
    border-radius:var(--r-pill);display:grid;place-items:center;margin-bottom:12px}
  .steps h3{font-size:17px;font-weight:600}
  .steps p{margin-top:7px;font-size:15px;color:var(--ink-muted)}

  .proof{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
         margin-top:var(--s8);list-style:none;padding:0}
  .proof li{min-width:0;border-left:2px solid var(--gold-500);padding-left:var(--s4)}
  .proof strong{display:block;font-family:var(--font-display);font-size:16px;font-weight:600}
  .proof span{display:block;margin-top:5px;font-size:14.5px;color:var(--ink-muted)}

  .slot{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--surface-200);
        display:grid;place-items:center;text-align:center;padding:var(--s8) var(--s4);
        color:var(--ink-muted);font-size:13.5px;aspect-ratio:4/3;max-width:100%}

  .area{margin-top:var(--s6);columns:3 150px;column-gap:var(--s6);font-size:15px;
        color:var(--ink-muted)}
  .area p{break-inside:avoid;padding:2px 0}

  footer{background:var(--navy-900);color:var(--paper);padding-block:var(--s8);margin-top:0}
  footer .cols{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
  footer h4{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.07em;
            text-transform:uppercase;opacity:.65;margin:0 0 10px}
  footer p,footer a{font-size:14.5px;opacity:.9;line-height:1.75}
  .legal{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.14);
         font-size:13px;opacity:.72;max-width:70ch}
  .todo{background:var(--gold-500);color:var(--navy-900);font-weight:600;padding:2px 7px;
        border-radius:4px;font-size:.88em;white-space:nowrap}
  @media (prefers-reduced-motion:no-preference){a{transition:opacity .15s}}
  a:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}

  /* ── city pages ──────────────────────────────────────────────── */
  a.mark{text-decoration:none;color:inherit}
  .crumb{padding-top:var(--s6);font-size:13.5px;color:var(--ink-muted)}
  .crumb a{color:var(--gold-700);text-decoration:none}
  :root[data-theme="dark"] .crumb a{color:var(--gold-500)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .crumb a{color:var(--gold-500)}}
  .hero{padding-block:clamp(28px,5vw,52px)}
  .area-links{margin-top:var(--s4);font-size:15px;line-height:2.1;color:var(--ink-muted)}
  .area-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
                padding-bottom:2px}
  .area-links a:hover{border-color:var(--gold-500)}

/* Real job photography on the city pages. One honest shot per town, matched to
   what we actually find there, rather than the same stock image six times. */
.band .brandrow{display:flex;align-items:center;gap:12px}
.mark-v{height:34px;width:auto;display:block;flex:none}
figure.cityshot{margin:0 0 var(--s8)}
figure.cityshot img{width:100%;height:auto;display:block;border-radius:var(--r-md);
  background:var(--surface-200)}
figure.cityshot figcaption{margin-top:10px;font-size:14px;color:var(--ink-muted);line-height:1.5}