/* ============================================================
   M.J. BLINDS — v2.0 "Showroom Standard"
   Supersedes site.v20.css (the Squarespace-matched build).

   The register is bright local retail: white ground, one warm
   tint for rhythm, one dark band before the footer, and the
   firm's own #8F0000 as the ONLY accent. The green call pill,
   the scrolling marquee and the rotating corner masks are gone.

   ACCENT CONTAINMENT (do not break):
     --brand is permitted on: primary button fills, link text,
     the 3x28 rule above a section heading, the active nav
     underline, the home-town chip and the focus ring.
     NEVER on --coal: #8F0000 on #22201E is 1.68:1. On dark
     bands the primary button inverts to a white fill with a
     #8F0000 label (9.69:1).

   Zero JavaScript anywhere on the site. The nav, the FAQs and
   the form error panel are <details> and :target.

   ⚠️  /assets/* is served immutable for a year. If you change
   this file's CONTENT you must change its FILENAME (v21 -> v22)
   or returning visitors keep the old bytes forever. CI enforces
   this — see .github/workflows/deploy.yml step 6.
   ============================================================ */

:root{
  color-scheme: light;

  /* ---------- SURFACES ---------- */
  --paper: #FFFFFF;   /* page + card ground, ~80% of every page */
  --tint:  #F6F4F1;   /* warm band tint, rhythm only            */
  --coal:  #22201E;   /* the one dark band + footer             */
  --coal-line: #3A3734;

  /* ---------- INK ---------- */
  --ink:       #1A1A18;  /* 17.43:1 on paper, 15.88:1 on tint   */
  --ink-2:     #5A5753;  /* 7.18:1 on paper, 6.54:1 on tint     */
  --on-dark:   #FFFFFF;  /* 16.24:1 on coal                     */
  --on-dark-2: #E6DFD6;  /* 12.29:1 on coal — a warm light,
                            NOT white at reduced opacity        */

  /* ---------- BRAND — the only accent ---------- */
  --brand:      #8F0000;  /* 9.69:1 on paper, 8.82:1 on tint    */
  --brand-dark: #6E0000;  /* hover/active, 12.63:1 with white   */

  /* ---------- LINES ---------- */
  --line-strong: #6B6966; /* real control borders, 5.47:1       */
  --line:        #C4BFB8; /* decorative hairline only, 1.83:1   */

  /* ---------- TYPE ---------- */
  --font: "Instrument Sans","Instrument Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --fs-xs:   0.8125rem;                                          /* 13 legal, captions   */
  --fs-sm:   0.9375rem;                                          /* 15 meta, tile titles */
  --fs-base: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);       /* 17 → 18 */
  --fs-lead: clamp(1.1875rem, 1.13rem + 0.23vw, 1.3125rem);      /* 19 → 21 */
  --fs-h3:   clamp(1.25rem,   1.19rem + 0.26vw, 1.375rem);       /* 20 → 22 */
  --fs-h2:   clamp(1.625rem,  1.42rem + 0.87vw, 2.25rem);        /* 26 → 36 */
  --fs-h1:   clamp(2rem,      1.63rem + 1.57vw, 3rem);           /* 32 → 48 */
  --fs-hero: clamp(2.25rem,   1.66rem + 2.51vw, 3.75rem);        /* 36 → 60 */

  /* ---------- SPACE (4px base) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;

  --band-tight: clamp(28px, 4vw, 56px);
  --band:       clamp(40px, 6vw, 88px);
  --band-hero:  clamp(32px, 5vw, 72px);
  --gutter:     clamp(16px, 4vw, 40px);
  --wrap:       1200px;
  --wrap-text:  68ch;

  /* ---------- RADIUS — one rule ---------- */
  --r-card: 10px;   /* cards, photos, figures, inputs, the map */
  --r-btn:  6px;    /* every button                            */
  --r-pill: 999px;  /* town chips + the Turbo IT credit only   */

  --t: 180ms;
  --ease: cubic-bezier(.2,0,0,1);

  --tap: 48px;
  --btn-h: 52px;
  --field-h: 52px;
  --bar-h: 62px;
  --header-h: 62px;
}
@media (min-width:900px){ :root{ --header-h: 76px; } }

/* Metric-matched fallback so the webfont swap does not reflow the hero. */
@font-face{
  font-family:"Instrument Fallback"; src:local("Arial");
  size-adjust:104%; ascent-override:94%; descent-override:25%; line-gap-override:0%;
}

/* ============================================================
   BASE
   ============================================================ */
html{
  font-size:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
@media (max-width:899px){
  html{ scroll-padding-bottom:calc(var(--bar-h) + 24px); }
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); font-weight:400;
  line-height:1.6; -webkit-text-size-adjust:100%;
  font-synthesis-weight:none;
}
/* The sticky call bar is fixed and opaque. Reserve its height or it
   sits on top of the last thing on the page — it did, on /blinds/. */
@media (max-width:899px){
  body{ padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom)); }
}

*,*::before,*::after{ box-sizing:border-box; }
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,table{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
svg{ fill:currentColor; }

h1,h2,h3{ font-weight:700; text-wrap:balance; }
h1{ font-size:var(--fs-h1); letter-spacing:-.02em; line-height:1.05; }
h2{ font-size:var(--fs-h2); letter-spacing:-.015em; line-height:1.12; }
h3{ font-size:var(--fs-h3); letter-spacing:-.01em; line-height:1.2; font-weight:600; }
p{ text-wrap:pretty; }

/* ---- Focus: 3px brand ring, 2px paper gap. On dark, invert. ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:var(--r-btn);
}
.band--dark :focus-visible, .footer :focus-visible,
.callbar :focus-visible, .promise :focus-visible,
.waycard--dark :focus-visible{
  outline-color:var(--on-dark);
}
@media (forced-colors:active){
  :where(a,button,input,select,textarea,summary):focus-visible{
    outline:3px solid Highlight; outline-offset:2px;
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--s-4); top:-100px; z-index:100;
  background:var(--brand); color:var(--on-dark); padding:12px 18px;
  border-radius:var(--r-btn); font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:var(--s-3); }

.container{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter);
}
/* A narrow column CENTRED inside a wide one gives a page two different
   left edges — measured at x=120 and x=272 on every interior page, and
   three on /about/. That reads as assembled rather than composed. The
   narrow container now shares the page's single left edge and caps the
   MEASURE of its children instead of centring itself. */
.container--narrow{ max-width:var(--wrap); }
.container--narrow > *{ max-width:820px; }

/* ============================================================
   BANDS — paper / tint alternating, one coal before the footer
   ============================================================ */
.band{ padding-block:var(--band); background:var(--paper); }
.band--tight{ padding-block:var(--band-tight); }
.band--grey{ background:var(--tint); }
.band--dark{ background:var(--coal); color:var(--on-dark); }
.band--dark h1,.band--dark h2,.band--dark h3{ color:var(--on-dark); }
.band--dark p{ color:var(--on-dark-2); }
.band--dark a:not(.btn){ color:var(--on-dark); text-decoration-color:rgba(255,255,255,.5); }

/* ============================================================
   SECTION HEADING — left aligned, red rule, eyebrow, 60ch intro.
   This one component kills the "centred everything" read.
   ============================================================ */
.sechead{ margin-bottom:var(--s-6); max-width:60ch; }
@media (min-width:900px){ .sechead{ margin-bottom:var(--s-8); } }
.sechead::before{
  content:""; display:block; width:28px; height:3px;
  background:var(--brand); margin-bottom:var(--s-3); border-radius:2px;
}
.band--dark .sechead::before{ background:var(--on-dark); }
.sechead__title{ font-size:var(--fs-h2); }
.sechead__intro{
  margin-top:var(--s-3); color:var(--ink-2);
  font-size:var(--fs-base); max-width:60ch;
}
.band--dark .sechead__intro{ color:var(--on-dark-2); }

.lead{ font-size:var(--fs-lead); line-height:1.5; max-width:60ch; }
.prose{ max-width:var(--wrap-text); }
.prose > * + *{ margin-top:var(--s-5); }
.prose h2{ margin-top:var(--s-9); }
.prose h3{ margin-top:var(--s-7); }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose ul{ list-style:disc; padding-left:1.25em; }
.prose ul li + li{ margin-top:var(--s-2); }
.prose a{ color:var(--brand); text-underline-offset:3px; }
.prose a:hover{ color:var(--brand-dark); }

/* ============================================================
   PROMISE STRIP — static. Was a scrolling marquee that cropped
   mid-word at both edges and put a focusable tel: link inside
   an aria-hidden clone.
   ============================================================ */
.promise{
  background:var(--coal); color:var(--on-dark-2);
  font-size:var(--fs-xs); line-height:1.4;
}
.promise__inner{
  display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:var(--s-2) var(--s-5);
  padding:10px var(--gutter); max-width:var(--wrap); margin-inline:auto;
}
.promise__item{ display:inline-flex; align-items:center; gap:var(--s-2); white-space:nowrap; }
.promise__item + .promise__item::before{
  content:"·"; color:var(--on-dark-2); opacity:.55; margin-right:var(--s-3);
}
.promise__item a{
  display:inline-flex; align-items:center; min-height:26px; /* 2.5.8 floor is 24 */
  color:var(--on-dark); font-weight:600; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.promise__item a:hover{ text-decoration:underline; }

/* Legacy .announce — kept so an unconverted page degrades to a
   static strip rather than a broken ticker. Nothing scrolls. */
.announce{ background:var(--coal); color:var(--on-dark-2); font-size:var(--fs-xs); }
.announce__inner{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-2) var(--s-5);
  padding:10px var(--gutter); max-width:var(--wrap); margin-inline:auto;
}
.announce__item[data-dup]{ display:none; }
.announce__item a{ color:var(--on-dark); font-weight:600; }

/* ============================================================
   HEADER — sticky. The phone number is now permanently on
   screen on desktop; before, it only appeared as the marquee
   cycled past it.
   ============================================================ */
.header{
  position:sticky; top:0; z-index:40;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; gap:var(--s-4);
  min-height:var(--header-h);
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
}
.brand{
  display:flex; align-items:center; flex:0 0 auto; text-decoration:none;
  min-height:44px; min-width:44px;
}
.brand__logo{ height:40px; width:auto; }
@media (min-width:900px){ .brand__logo{ height:52px; } }

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:var(--s-2); }
.nav__link{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 var(--s-3); text-decoration:none; font-weight:600;
  font-size:var(--fs-sm); color:var(--ink);
  border-bottom:2px solid transparent; transition:color var(--t) var(--ease);
}
.nav__link:hover{ color:var(--brand); }
.nav__link--current{ border-bottom-color:var(--brand); color:var(--brand); }

.header__phone{
  display:none; font-weight:700; font-size:1.125rem; text-decoration:none;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink);
  padding:0 var(--s-2);
}
.header__phone:hover{ color:var(--brand); }
.btn.header__cta{ display:none; }
@media (min-width:1040px){
  .header__phone{ display:inline-flex; align-items:center; gap:var(--s-2); }
  .btn.header__cta{ display:inline-flex; }
}
/* Between 900 and 1040 the number would collide with the nav, so the
   button carries the action and the number stays in the promise strip
   and the sticky bar. Tested at 900/1000/1100/1280/1440. */
@media (min-width:900px) and (max-width:1039px){
  .btn.header__cta{ display:inline-flex; }
}

.header__social{ display:none; gap:var(--s-2); }
@media (min-width:1180px){ .header__social{ display:flex; } }
.header__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-pill); color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.header__social a:hover{ color:var(--brand); }

/* ---- Mobile nav: <details>, and it keeps the word "Menu".
   A labelled control beats an unlabelled glyph for this audience. ---- */
.navtoggle{ margin-left:auto; }
.nav__toggle{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-4); cursor:pointer;
  font-weight:600; font-size:var(--fs-sm); list-style:none;
  border:1px solid var(--line-strong); border-radius:var(--r-btn);
  background:var(--paper); color:var(--ink);
}
.nav__toggle::-webkit-details-marker{ display:none; }
.nav__toggle::after{
  content:""; width:9px; height:9px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--t) var(--ease);
}
.navtoggle[open] .nav__toggle::after{ transform:translateY(1px) rotate(225deg); }

@media (max-width:899px){
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
    display:none; margin-left:0; padding:var(--s-2) var(--gutter) var(--s-4);
  }
  .navtoggle[open] ~ .nav{ display:block; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__link{
    min-height:var(--tap); padding:0 var(--s-2); font-size:var(--fs-base);
    border-bottom:1px solid var(--line);
  }
  .nav__link--current{ border-bottom-color:var(--brand); }
  .header{ position:sticky; }
}
@media (min-width:900px){
  .navtoggle{ display:none; }
  .nav{ display:block; }
}

/* ============================================================
   BUTTONS — one accent. The green #107C41 is deleted.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:var(--btn-h); padding:0 var(--s-6);
  border-radius:var(--r-btn); border:2px solid transparent;
  font-weight:600; font-size:var(--fs-sm); line-height:1;
  text-decoration:none; cursor:pointer; text-align:center;
  background:var(--brand); color:var(--on-dark);
  transition:background var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.btn:hover{ background:var(--brand-dark); color:var(--on-dark); }
.btn--outline,.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--line-strong);
}
.btn--outline:hover,.btn--ghost:hover{
  background:transparent; color:var(--brand); border-color:var(--brand);
}
.btn--dark{ background:var(--coal); color:var(--on-dark); }
.btn--dark:hover{ background:#000; }
/* On coal, --brand is 1.68:1 and unusable. Invert: white fill, red label. */
.btn--light{ background:var(--paper); color:var(--brand); }
.btn--light:hover{ background:var(--on-dark-2); color:var(--brand-dark); }
.band--dark .btn--outline,.band--dark .btn--ghost,
.waycard--dark .btn--outline,.waycard--dark .btn--ghost{
  color:var(--on-dark); border-color:rgba(255,255,255,.55);
}
.band--dark .btn--outline:hover,.waycard--dark .btn--outline:hover{
  color:var(--coal); background:var(--on-dark); border-color:var(--on-dark);
}
.btn--block{ width:100%; }
.actions,.ctas,.hero__actions,.form__actions{
  display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6);
}
.icon{ width:20px; height:20px; flex:0 0 auto; }

/* ============================================================
   HERO
   Below 900px it is a 4:3 photo then copy on white — no scrim,
   so contrast is 17.43:1 instead of "whatever is behind the H1".
   ============================================================ */
.hero{ background:var(--paper); }
.hero__media{ position:relative; }
.hero__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.hero__scrim{ display:none; }
.hero__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:var(--s-7) var(--gutter) var(--s-8);
}
@media (min-width:900px){ .hero__inner{ padding-block:var(--band); } }
.hero__title{ font-size:var(--fs-hero); letter-spacing:-.025em; line-height:1.03; }
.hero__lead{
  margin-top:var(--s-5); font-size:var(--fs-lead); line-height:1.5;
  color:var(--ink-2); max-width:46ch;
}
.hero__credit{
  padding:var(--s-2) var(--gutter) 0; font-size:var(--fs-xs); color:var(--ink-2);
}
@media (min-width:900px){
  .hero__credit{ padding-inline:0; padding-left:var(--s-4); }
}

@media (min-width:900px){
  .hero{ display:grid; grid-template-columns:1fr 1fr; align-items:center; }
  .hero__media{ order:2; height:100%; }
  .hero__media img{ height:100%; aspect-ratio:auto; min-height:440px; }
  .hero__inner{
    order:1; padding:var(--band) var(--gutter) var(--band)
             max(var(--gutter), calc((100vw - var(--wrap))/2 + var(--gutter)));
    max-width:none;
  }
  .hero__title,.hero__lead,.hero__actions{ max-width:34rem; }
}
.hero--light .hero__media img{ aspect-ratio:16/9; }
@media (min-width:900px){ .hero--light .hero__media img{ aspect-ratio:auto; } }

/* PAGEHEAD — the 25 interior pages */
.pagehead{
  background:var(--tint); padding-block:var(--band-hero);
  border-bottom:1px solid var(--line);
}
.pagehead .container{ max-width:var(--wrap); }
.pagehead__title{ font-size:var(--fs-h1); max-width:20ch; }
.pagehead__lead{
  margin-top:var(--s-4); font-size:var(--fs-lead); line-height:1.5;
  color:var(--ink-2); max-width:58ch;
}

/* ============================================================
   TRUST STRIP — the standalone "Family run business" tile and
   the orphan floating pill beside it become one aligned row.
   Every figure here is already live on the site.
   ============================================================ */
.trust{ background:var(--tint); padding-block:var(--band-tight); }
.trust__inner{
  display:grid; gap:var(--s-5); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .trust__inner{ grid-template-columns:auto 1fr; gap:var(--s-7); } }
.trust__fig{ margin:0; max-width:150px; }
@media (min-width:640px){ .trust__fig{ max-width:200px; } }
.trust__fig img{
  border-radius:var(--r-card); aspect-ratio:4/3; object-fit:cover; width:100%;
}
.trust__cap{ margin-top:var(--s-2); font-size:var(--fs-xs); color:var(--ink-2); }
.trust__list{
  display:grid; gap:var(--s-3) var(--s-5);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){ .trust__list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.trust__item{ min-width:0; }
.trust__fignum{
  display:block; font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em;
  color:var(--ink);
}
.trust__label{ display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--ink-2); }
.trust__item a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--brand); text-underline-offset:3px;
}

/* Legacy .stats/.stat — degrade to a plain aligned figure. */
.stats{ display:flex; flex-wrap:wrap; gap:var(--s-6); }
.stat{ min-width:0; }
.stat--photo{ background:none; }
.stat__fig{ display:block; font-size:var(--fs-h3); font-weight:700; }
.stat__label{ display:block; font-size:var(--fs-sm); color:var(--ink-2); }

/* ============================================================
   THE RANGE — 2-up phone / 3-up / 4-up. One 4:5 crop, one
   radius. This is where ~4,300px of mobile page height went.
   ============================================================ */
.range{
  display:grid; gap:var(--s-5) 10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:600px){ .range{ gap:var(--s-6) var(--s-4); grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .range{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.range__item{ min-width:0; }
.range__link{
  display:block; text-decoration:none; color:inherit; border-radius:var(--r-card);
}
.range__art{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-card); background:var(--tint);
  transition:opacity var(--t) var(--ease);
}
.range__link:hover .range__art{ opacity:.9; }
.range__title{
  margin-top:var(--s-3); font-size:var(--fs-sm); font-weight:600;
  line-height:1.3; letter-spacing:-.005em;
}
.range__link:hover .range__title{ color:var(--brand); }
@media (min-width:900px){ .range__title{ font-size:var(--fs-base); } }
/* The one-line note is a duplicate of the destination page's first
   line. It is dropped on phones only, where it costs 11 x ~40px. */
.range__note{ display:none; margin-top:var(--s-1); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.4; }
/* Reserve three lines so one longer note does not make its whole row taller
   than the rows above it — measured 315px vs 336px on /blinds/ before this. */
@media (min-width:600px){ .range__note{ display:block; min-height:calc(1.4em * 3); } }

/* Legacy .cards/.card fallback — same shape, so an unconverted
   page does not fall back to eleven full-width landscape blocks. */
.cards{ display:grid; gap:var(--s-5) 10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:600px){ .cards{ gap:var(--s-6) var(--s-4); grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.card{ min-width:0; }
.card__link{ display:block; text-decoration:none; color:inherit; }
.card__art{ border-radius:var(--r-card); overflow:hidden; background:var(--tint); }
.card__art img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.card__title{ margin-top:var(--s-3); font-size:var(--fs-sm); font-weight:600; line-height:1.3; }
.card__link:hover .card__title{ color:var(--brand); }
@media (min-width:900px){ .card__title{ font-size:var(--fs-base); } }
.card__note{ display:none; margin-top:var(--s-1); font-size:var(--fs-sm); color:var(--ink-2); }
@media (min-width:600px){ .card__note{ display:block; } }

/* ============================================================
   TWO WAYS
   ============================================================ */
.ways{ display:grid; gap:var(--s-5); grid-template-columns:1fr; }
@media (min-width:800px){ .ways{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); } }
.waycard{
  padding:var(--s-5); border-radius:var(--r-card);
  display:flex; flex-direction:column;
}
@media (min-width:900px){ .waycard{ padding:var(--s-8); } }
.waycard--dark{ background:var(--coal); color:var(--on-dark); }
.waycard--dark .waycard__body,.waycard--dark .waycard__list{ color:var(--on-dark-2); }
.waycard--light{ background:var(--tint); border:1px solid var(--line); }
.waycard__eyebrow{
  font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-2);
}
.waycard--dark .waycard__eyebrow{ color:var(--on-dark-2); }
.waycard__title{ margin-top:var(--s-2); font-size:var(--fs-h3); }
.waycard__body{ margin-top:var(--s-3); color:var(--ink-2); }
.waycard__list{ margin-top:var(--s-4); display:grid; gap:var(--s-2); }
.waycard__list li{ position:relative; padding-left:26px; }
.waycard__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:12px; height:7px; border-left:2px solid var(--brand);
  border-bottom:2px solid var(--brand); transform:rotate(-45deg);
}
.waycard--dark .waycard__list li::before{ border-color:var(--on-dark); }
.waycard__cta{ margin-top:auto; align-self:flex-start; }
.waycard__list + .waycard__cta{ margin-top:var(--s-5); }

/* ============================================================
   STEPS + GENERIC GRID
   ============================================================ */
.grid{ display:grid; gap:var(--s-7); grid-template-columns:1fr; }
@media (max-width:759px){ .grid{ gap:var(--s-6); } }
@media (min-width:760px){
  .grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s-6) var(--s-7); }
  .col-4{ grid-column:span 4; }
  .col-5{ grid-column:span 5; }
  .col-6{ grid-column:span 6; }
  .col-7{ grid-column:span 7; }
}
.grid > li,.grid > div,.grid > article,.grid > aside{ min-width:0; }
.step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--on-dark);
  font-weight:700; font-size:var(--fs-sm); margin-bottom:var(--s-3);
}
.band--dark .step__num{ background:var(--on-dark); color:var(--brand); }
.step__title{ font-size:var(--fs-h3); }
.step__body{ margin-top:var(--s-3); color:var(--ink-2); max-width:44ch; }

/* ============================================================
   PANELS (good for / probably not for) + CALLOUT
   ============================================================ */
.panels{ display:grid; gap:var(--s-5); grid-template-columns:1fr; }
@media (min-width:800px){ .panels{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); } }
.panel{ padding:var(--s-6); border-radius:var(--r-card); border:1px solid var(--line); background:var(--paper); }
.panel--yes{ background:var(--paper); }
.panel--no{ background:var(--tint); }
.panel__title{ font-size:var(--fs-h3); }
.panel__list{ margin-top:var(--s-5); display:grid; gap:var(--s-3); }
.panel__list li{ position:relative; padding-left:26px; color:var(--ink-2); }
.panel--yes .panel__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:12px; height:7px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.panel--no .panel__list li::before{
  content:""; position:absolute; left:0; top:.85em; width:12px; height:2px;
  background:var(--line-strong);
}
.panel__list a{ color:var(--brand); text-underline-offset:3px; }
/* was running the full 1120px container = 135 characters a line */
.panel__note{ margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--ink-2); max-width:64ch; }

.callout{
  padding:var(--s-6); border-radius:var(--r-card);
  background:var(--tint); border-left:3px solid var(--brand);
}
.callout__title{ font-size:var(--fs-h3); margin-bottom:var(--s-3); }
.callout p{ color:var(--ink-2); max-width:70ch; }
.callout a{ color:var(--brand); text-underline-offset:3px; }

/* ============================================================
   SPEC TABLE
   ============================================================ */
.spec{ width:100%; table-layout:fixed; border-collapse:collapse; }
.spec th,.spec td{
  text-align:left; vertical-align:top; padding:var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom:1px solid var(--line);
}
.spec th{ font-weight:600; width:34%; white-space:normal; }
.spec td{ color:var(--ink-2); overflow-wrap:anywhere; }
.spec tr:last-child th,.spec tr:last-child td{ border-bottom:0; }
/* The contact page's details table is a primary contact affordance, not
   prose — its phone/email links get real targets on touch. */
.spec a{ color:var(--brand); text-underline-offset:3px; }
@media (max-width:899px){
  .spec td a{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:479px){
  .spec th{ width:40%; }
  .spec th,.spec td{ padding:var(--s-3) var(--s-3) var(--s-3) 0; font-size:var(--fs-sm); }
}

/* ============================================================
   FAQ — <details>, no JS
   ============================================================ */
.faq{ display:grid; gap:0; max-width:var(--wrap-text); }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-height:var(--tap); padding:var(--s-4) 0; cursor:pointer;
  font-weight:600; list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:""; flex:0 0 auto; width:14px; height:14px;
  background:
    linear-gradient(var(--brand),var(--brand)) center/14px 2px no-repeat,
    linear-gradient(var(--brand),var(--brand)) center/2px 14px no-repeat;
  transition:transform var(--t) var(--ease);
}
.faq__item[open] .faq__q::after{
  background:linear-gradient(var(--brand),var(--brand)) center/14px 2px no-repeat;
}
.faq__q:hover{ color:var(--brand); }
.faq__a{ padding:0 0 var(--s-5); color:var(--ink-2); max-width:62ch; }
.faq__a > * + *{ margin-top:var(--s-4); }
.faq__a a{ color:var(--brand); text-underline-offset:3px; }

/* ============================================================
   FIGURES
   ============================================================ */
.figure{ margin:0; }
.figure__wrap{ border-radius:var(--r-card); overflow:hidden; background:var(--tint); }
.figure__wrap img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.figure--tall .figure__wrap img{ aspect-ratio:4/5; }
.figure__cap{ margin-top:var(--s-3); font-size:var(--fs-xs); color:var(--ink-2); }

/* ============================================================
   GOOGLE REVIEWS — markup is generated by scripts/fetch-reviews.mjs
   (class names are load-bearing; style here, never in the HTML).
   ============================================================ */
.gr{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-5); }
@media (min-width:900px){ .gr{ padding:var(--s-8); } }
.gr__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-6);
  padding-bottom:var(--s-5); border-bottom:1px solid var(--line);
}
.gr__logo{ font-weight:700; font-size:var(--fs-h3); letter-spacing:-.02em; color:var(--ink); }
.gr__score{ display:flex; align-items:center; gap:var(--s-3); }
.gr__num{ font-size:var(--fs-h2); font-weight:700; letter-spacing:-.02em; line-height:1; }
.gr__meta{ display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--ink-2); }
.gr__cta{ margin-left:auto; }
.stars{ display:inline-flex; gap:2px; color:var(--brand); }
.stars svg{ width:16px; height:16px; }
.gr__railwrap{
  margin-top:var(--s-5); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  /* the fade tells you there is more to the right; without it the last
     card just looks chopped off by the card it sits in */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent 100%);
}
.gr__railwrap:focus-within{ -webkit-mask-image:none; mask-image:none; }
.gr__rail{ display:flex; gap:var(--s-4); padding-bottom:var(--s-3); align-items:stretch; }
.grev{
  flex:0 0 min(300px,80vw); scroll-snap-align:start;
  background:var(--tint); border-radius:var(--r-card); padding:var(--s-4);
}
@media (min-width:900px){ .grev{ padding:var(--s-5); } }
.grev__top{ display:flex; align-items:center; gap:var(--s-3); }
.grev__av{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--coal)!important; color:var(--on-dark);
  font-weight:600; font-size:var(--fs-sm); flex:0 0 auto;
}
.grev__who{ font-weight:600; font-size:var(--fs-sm); }
.grev__when{ font-size:var(--fs-xs); color:var(--ink-2); }
.grev .stars{ margin-top:var(--s-3); }
/* The five Google reviews run from 20 to 90 words. Clamping the card to
   eight lines keeps the rail one height; "Read on Google" carries the rest.
   The full text still ships in the DOM for a screen reader. */
.grev__body{
  margin-top:var(--s-3); font-size:var(--fs-sm); line-height:1.55; color:var(--ink-2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; overflow:hidden;
}
.grev__more{ margin-top:var(--s-4); }
.grev__more a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-sm); font-weight:600; color:var(--brand); text-underline-offset:3px;
}
.gr__foot{ margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--ink-2); }
.gr__foot a{ color:var(--brand); text-underline-offset:3px; }

/* ============================================================
   CLIENT LOGOS — static. Three real logos do not need to move.
   ============================================================ */
.logos{ overflow:hidden; }
.logos__track{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s-7) var(--s-9); justify-content:flex-start;
}
/* Normalised by optical area rather than by a single height: ForHousing is
   a wide wordmark, Wigan Council and Patak's are tall crests, so one height
   value makes the crests dominate and the wordmark vanish. */
.logos__track img{ height:46px; width:auto; mix-blend-mode:multiply; }
@media (min-width:900px){ .logos__track img{ height:56px; } }
.logos__track img[data-optical="boost"]{ height:56px; }
@media (min-width:900px){ .logos__track img[data-optical="boost"]{ height:70px; } }
.logos__track img[alt="ForHousing"]{ height:30px; }
@media (min-width:900px){ .logos__track img[alt="ForHousing"]{ height:36px; } }
.logos__track img[data-dup]{ display:none; }

/* ============================================================
   TOWN CHIPS
   ============================================================ */
.towns{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.town{
  display:inline-flex; align-items:center; min-height:40px; padding:0 var(--s-4);
  border-radius:var(--r-pill); border:1px solid var(--line-strong);
  font-size:var(--fs-sm); color:var(--ink);
}
.town--home{ background:var(--brand); border-color:var(--brand); color:var(--on-dark); font-weight:600; }
.towns__note{ margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--ink-2); }
.towns__note a{ color:var(--brand); font-weight:600; text-underline-offset:3px; }

/* ============================================================
   CROSSLINKS — "What else we fit" / "While you are here"
   ============================================================ */
.crosslinks{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.crosslinks a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-4);
  border-radius:var(--r-btn); border:1px solid var(--line-strong);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none; color:var(--ink);
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.crosslinks a:hover{ color:var(--brand); border-color:var(--brand); }

/* ============================================================
   FORM
   ============================================================ */
.form__well{
  background:var(--tint); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s-6);
}
@media (min-width:900px){ .form__well{ padding:var(--s-8); } }
.form__row + .form__row{ margin-top:var(--s-5); }
.form__label{ display:block; font-weight:600; font-size:var(--fs-sm); margin-bottom:var(--s-2); }
.form__required{ color:var(--brand); font-weight:400; }
.form__input,.form__select,.form__textarea{
  width:100%; min-height:var(--field-h); padding:var(--s-3) var(--s-4);
  font:inherit; font-size:1.0625rem; /* 17px — below this iOS Safari zooms on focus */
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--r-card);
}
.form__textarea{ min-height:120px; resize:vertical; }
.form__input:focus,.form__select:focus,.form__textarea:focus{ border-color:var(--brand); }
.form__help{ margin-top:var(--s-2); font-size:var(--fs-sm); color:var(--ink-2); }
.form__privacy{ margin-top:var(--s-4); font-size:var(--fs-sm); color:var(--ink-2); }
.form__privacy a,.form__alt a{ color:var(--brand); text-underline-offset:3px; }
.form__alt{ margin-top:var(--s-3); font-size:var(--fs-sm); color:var(--ink-2); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formerror{
  display:none; padding:var(--s-5); border-radius:var(--r-card);
  background:#FDF2F2; border-left:3px solid var(--brand); margin-bottom:var(--s-5);
}
.formerror:target{ display:block; }
.formerror__title{ font-size:var(--fs-h3); margin-bottom:var(--s-2); }

/* ============================================================
   CONTACT ODDS AND ENDS
   ============================================================ */
.contactcard{
  background:var(--tint); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s-6);
}
/* The class sits on the <p>; the tappable thing is the <a> INSIDE it, so the
   min-height has to go on the child or it does nothing measurable. */
.contactcard__num{ margin-block:var(--s-2); }
.contactcard__num a{
  display:inline-flex; align-items:center; min-height:48px;
  font-size:var(--fs-h2); font-weight:700;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--brand); text-decoration:none;
}
.contactmap{ display:block; border-radius:var(--r-card); overflow:hidden; margin-top:var(--s-5); }
.contactmap img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.contactmap__cap{ margin-top:var(--s-3); font-size:var(--fs-xs); color:var(--ink-2); }
.contactmap__cap a,.info__note a{ color:var(--brand); }
.hrs{ width:100%; border-collapse:collapse; }
.hrs th,.hrs td{ text-align:left; padding:var(--s-3) var(--s-4) var(--s-3) 0; border-bottom:1px solid var(--line); }
.hrs th{ font-weight:600; }
.hrs td{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.hrs .closed{ color:var(--ink-2); }
.hrs tr:last-child th,.hrs tr:last-child td{ border-bottom:0; }
.info__note{ margin-top:var(--s-4); font-size:var(--fs-sm); color:var(--ink-2); }
.cta--mail{ overflow-wrap:anywhere; }

/* GALLERY */
.gallery{ display:grid; gap:var(--s-4); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gallery img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-card); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--coal); color:var(--on-dark-2); padding-top:var(--band-tight); }
@media (min-width:1000px){ .footer{ padding-top:var(--band); } }
.footer__cols{
  display:grid; gap:var(--s-6); grid-template-columns:1fr;
  padding-bottom:var(--s-6);
}
@media (min-width:640px){ .footer__cols{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer__cols{ grid-template-columns:1.2fr 1fr 1fr; gap:var(--s-9); } }
.footer h3{
  font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--on-dark); margin-bottom:var(--s-4);
}
.footer p{ color:var(--on-dark-2); font-size:var(--fs-sm); line-height:1.6; }
.footer a{ color:var(--on-dark); text-underline-offset:3px; }
.footer a:hover{ color:var(--on-dark-2); }
.footer__nap img{ height:44px; width:auto; margin-bottom:var(--s-3); }
@media (min-width:1000px){ .footer__nap img{ height:52px; } }
/* Seven links at 44px each was 308px of a phone footer. Two columns
   halves that and keeps every row a 44px target. */
.footer__col ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s-4); }
@media (min-width:1000px){ .footer__col ul{ grid-template-columns:1fr; } }
.footer__col ul a{
  display:flex; align-items:center; min-height:44px;
  font-size:var(--fs-sm); text-decoration:none;
}
.footer__col ul a:hover{ text-decoration:underline; }
.footer__map{ display:block; border-radius:var(--r-card); overflow:hidden; max-width:200px; }
@media (min-width:1000px){ .footer__map{ max-width:320px; } }
.footer__map img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:1000px){ .footer__map img{ aspect-ratio:16/10; } }
.footer__mapcap{ margin-top:var(--s-3); font-size:var(--fs-xs); }
.footer__legalinfo{
  padding-block:var(--s-4); font-size:var(--fs-xs); line-height:1.5;
  border-top:1px solid var(--coal-line);
}
.footer__legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-5);
  padding-block:var(--s-3) var(--s-6);
  border-top:1px solid var(--coal-line); font-size:var(--fs-xs);
}
.footer__legallinks{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); }
.footer__legallinks a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding-inline:var(--s-2); text-decoration:none;
}
.footer__legallinks a:hover{ text-decoration:underline; }
.turbo{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  min-height:44px; padding:0 var(--s-4);
  border:1px solid var(--coal-line); border-radius:var(--r-pill);
  font-size:var(--fs-xs); text-decoration:none; white-space:nowrap;
}
.turbo:hover{ border-color:var(--on-dark-2); }
.turbo__pre{ color:var(--on-dark-2); }
.turbo__mark{ font-weight:700; color:var(--on-dark); }
.turbo__arrow{ display:inline-flex; color:var(--on-dark-2); }
.turbo__arrow svg{ fill:none; }

/* ============================================================
   STICKY CALL BAR — mobile. One of the genuinely good things
   the v1 site already had. The floating green FAB is deleted.
   ============================================================ */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:1px; background:var(--coal-line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 var(--coal-line), 0 -8px 24px rgba(0,0,0,.18);
}
@media (min-width:900px){ .callbar{ display:none; } }
.callbar__call,.callbar__book{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2); min-height:var(--bar-h); text-decoration:none;
  font-weight:600; font-size:var(--fs-sm);
}
.callbar__call{ background:var(--brand); color:var(--on-dark); flex:1.4 1 0; font-variant-numeric:tabular-nums; }
.callbar__book{ background:var(--coal); color:var(--on-dark); }

/* The floating "Call now" pill is removed site-wide. On /contact/ it
   floated beside three buttons that already said call, mobile and
   email — four call prompts in one viewport. The header CTA and the
   sticky bar do the job. */
.callfab{ display:none!important; }

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .promise,.announce,.callbar,.header__cta,.nav,.navtoggle,.turbo{ display:none!important; }
  body{ padding-bottom:0; }
  .band,.pagehead{ padding-block:16px; }
  .footer{ background:none; color:#000; }
  .footer a,.footer p,.footer h3{ color:#000; }
}