/* ============================================================
   TEKTON DEMO SYSTEM - base.css
   One shared foundation for every demo build. The look of each
   vertical is set by a small skin (palette, fonts, weights,
   radius) loaded before this file; the structure, components,
   spacing, accessibility and responsive behaviour all live here.

   Skins MUST define these tokens (defaults below are the clinic
   skin, so this file also renders on its own):
     --brand --brand-deep --brand-soft
     --accent --accent-deep --accent-soft
     --paper --paper-2 --ink --muted --line
     --font-display --font-text
     --wt-head --wt-h1 --radius --radius-sm

   Component sets:
     Clinic  - .hero--index, .hurts, .cond-rows, .svc-list,
               .steps, .split, .team, .band, form.request
     Trade   - .hero.on-dark, .hero-call, .trust-strip, .route,
               .svc-grid, .stats, .cost-grid, .area-list, .lead
     Shared  - header, .rating, .trust, .review, .magnet, .faq,
               .final, footer, .mobilebar, subpage + blog
   ============================================================ */

:root{
  /* Clinic defaults; a trade skin overrides these. */
  --brand:#2e5744;
  --brand-deep:#182e23;
  --brand-soft:#e6efe7;
  --accent:#3f7a5c;
  --accent-deep:#2e5744;
  --accent-soft:#e6efe7;
  --paper:#fdfcf9;
  --paper-2:#f4f1e9;
  --ink:#1f3229;
  --muted:#59685f;
  --line:#e4e0d4;

  --font-display:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-text:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Utility face for credentials and data: licence numbers, prices, hours,
     phone numbers, review counts. These businesses sell on the written
     record, so the records are set like records, not like marketing copy.
     Skins do NOT override this; it is the one constant across all verticals. */
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wt-head:600;   /* h2, h3, brandmark */
  --wt-h1:700;     /* h1 */
  --radius:14px;   /* legacy token; skins still set it, base.css no longer uses it */
  --radius-sm:8px;

  /* Shape lives here, not in the skins. A written quote does not have
     rounded corners. Squared throughout, and committed to. */
  --r-card:2px; --r-btn:2px; --r-field:2px;

  /* Star gold for rating proof, shared across skins (Google-familiar). */
  --star:#e3a53a;

  /* Fluid type scale */
  --step--1:clamp(.83rem,.8rem + .16vw,.92rem);
  --step-0:clamp(1rem,.96rem + .22vw,1.0625rem);
  --step-1:clamp(1.13rem,1.05rem + .38vw,1.3rem);
  --step-2:clamp(1.38rem,1.24rem + .68vw,1.75rem);
  --step-3:clamp(1.7rem,1.48rem + 1.1vw,2.3rem);
  --step-4:clamp(2.1rem,1.76rem + 1.7vw,3rem);
  /* h1 sits well clear of every other step so the page has one loud voice
     and the section heads can stay quiet. */
  --step-5:clamp(2.6rem,1.95rem + 3.2vw,4.7rem);
  --step-6:clamp(2.9rem,2.05rem + 4.1vw,5.5rem);

  /* Space scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:20px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;

  /* Depth: none. Hierarchy comes from rules, scale and space. A floating
     drop-shadowed card is the tell of a template; a ruled sheet is not. */
  --shadow-1:none;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-text);color:var(--ink);background:var(--paper);
  font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
p{max-width:62ch}
h1,h2,h3{font-family:var(--font-display);color:var(--brand);letter-spacing:-.02em;font-weight:var(--wt-head)}
h1{font-size:var(--step-5);line-height:1.03;font-weight:var(--wt-h1);letter-spacing:-.03em}
h2{font-size:var(--step-3);line-height:1.1;max-width:26ch}
h3{font-size:var(--step-1);line-height:1.25}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-4)}
section{padding:var(--space-8) 0}
section[id]{scroll-margin-top:84px}
.snug{padding:var(--space-7) 0}
/* Rhythm: a page that breathes the same everywhere reads as generated.
   Three section sizes, applied where the content earns them. */
.tight{padding:var(--space-6) 0}
.vast{padding:var(--space-9) 0}
.alt{background:var(--paper-2)}
.alt-brand{background:var(--brand-soft)}

/* Section marker. Was an accent-coloured uppercase hat on every block, which
   is the loudest template signal on a page. Now a quiet ruled marker in the
   credential face: it signposts without shouting, and it frees the accent to
   mean one thing only (the action). */
.eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);
  font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--space-4)}
.eyebrow::before{content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.55}
.on-dark .eyebrow{color:rgba(255,255,255,.7)}
.lede{color:var(--muted);font-size:var(--step-1);margin-top:var(--space-3);max-width:56ch}

/* Motion: gentle, and fully removed under reduced-motion. */
a,button,summary,.btn{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}

/* Accessibility plumbing */
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-deep);color:#fff;padding:12px 20px;border-radius:0;z-index:100;font-weight:700;text-decoration:none}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.on-dark :focus-visible{outline-color:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Buttons: one primary (accent fill), one quiet secondary, one
   ghost for dark bands. In a trade skin --accent is the call
   colour, so .btn is the call action with no extra class.
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  padding:13px 26px;border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;
  font-family:var(--font-text);font-size:var(--step-0);font-weight:600;text-decoration:none;
  background:var(--accent);color:#fff;white-space:nowrap}
.btn:hover{background:var(--accent-deep)}
.btn-secondary{background:var(--paper);color:var(--brand);border-color:var(--line)}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* Trade call action: accent fill regardless of a demo's primary .btn. */
.btn-call{background:var(--accent);color:#fff}
.btn-call:hover{background:var(--accent-deep)}

/* ============================================================
   Rating chip: instant, honest proof next to the primary action.
   Stars stay gold in every skin; text follows the surface.
   ============================================================ */
.rating{display:inline-flex;align-items:center;gap:9px;font-size:var(--step--1);font-weight:600;color:var(--muted);line-height:1}
.rating .stars{color:var(--star);letter-spacing:1.5px;font-size:1.02em}
/* The score and the review count are facts, so they are set as facts. */
.rating strong,.rating .count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--brand);font-weight:600;letter-spacing:-.02em}
.rating .sep{opacity:.4}
.on-dark .rating{color:rgba(255,255,255,.78)}
.on-dark .rating strong{color:#fff}

/* ============================================================
   Header: logomark + wordmark, section links, phone, one CTA.
   The wordmark never wraps; it shrinks then hides its text on
   small screens. Links collapse under 900px to the mobile bar.
   ============================================================ */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:var(--space-5);min-height:72px}
.brandmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:var(--wt-head);font-size:var(--step-1);color:var(--brand);text-decoration:none;letter-spacing:-.01em;white-space:nowrap;flex:none}
.brandmark img,.brandmark svg{width:32px;height:32px;flex:none}
/* Nav gap is tuned to the widest vertical (osteo: six links + a long CTA).
   The credential face is wider than the text face, so the header needs the
   room back or the CTA is pushed off-screen at 1280. */
.nav-links{display:flex;gap:var(--space-4);margin-left:auto;min-width:0}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--step--1);white-space:nowrap}
.nav-links a:hover{color:var(--accent)}
.head-actions{display:flex;align-items:center;gap:var(--space-4)}
.call{min-height:44px;display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.06em;
  color:var(--brand);text-decoration:none;white-space:nowrap;font-size:var(--step--1)}
.call:hover{color:var(--accent)}
.head-sms{display:none}
header .btn{min-height:42px;padding:9px 20px;font-size:var(--step--1)}
/* When there is no nav (trade layout), push phone + CTA to the right. */
.brandmark + .call,.brandmark + .head-phone{margin-left:auto}

/* ============================================================
   HERO - clinic index variant: left pitch, right condition list.
   ============================================================ */
.hero{padding:var(--space-8) 0;border-bottom:1px solid var(--line)}
.hero .quick-answer{font-size:var(--step-1);margin:var(--space-4) 0 var(--space-5);max-width:48ch}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hero .tel-link{font-weight:600;color:var(--brand)}
.hero .hero-rating{display:flex;margin-top:var(--space-5)}
/* Hero offer: the named first step, lifted up next to the primary CTA. Carries the
   honest promise (price-first / we'll tell you if we can't help). Works on a light
   clinic/roofing hero and on the .on-dark trade hero. */
.hero-offer{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-4);max-width:46ch}
.hero-offer strong{display:block;font-family:var(--font-display);color:var(--brand);font-size:var(--step-0);letter-spacing:-.01em;margin-bottom:var(--space-1)}
.hero-offer span{display:block;color:var(--muted);font-size:var(--step--1);line-height:1.6}
.hero.on-dark .hero-offer{border-top-color:rgba(255,255,255,.18)}
.hero.on-dark .hero-offer strong{color:#fff}
.hero.on-dark .hero-offer span{color:rgba(255,255,255,.8)}

.hero--index .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-8);align-items:start}
.hero--index h1{margin-bottom:var(--space-4)}
.hurts{border-left:1px solid var(--line);padding-left:var(--space-6)}
.hurts h2{font-size:var(--step-1);max-width:none;margin-bottom:var(--space-1)}
.hurts .hint{color:var(--muted);font-size:var(--step--1)}
.hurt-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-6);margin-top:var(--space-3)}
.hurt-list a{display:block;padding:11px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--step-0)}
.hurt-list a:hover{color:var(--accent)}

/* ============================================================
   HERO - split variant: the pitch beside a framed photo. The
   premium default for both clinics and trades. Works on a light
   surface and on .on-dark. Pair with a portrait-friendly image.
   ============================================================ */
.hero--split .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--space-8);align-items:center}
.hero--split .hero-content{min-width:0}
.hero--split h1{margin-bottom:var(--space-4)}
/* The hero eyebrow carries the visitor's own outcome + their town, so it stays
   readable, but it is set as a marker rather than a second headline. */
.hero-eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);
  font-size:.8rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--space-5)}
.hero-eyebrow::before{content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.55}
.hero.on-dark .hero-eyebrow{color:rgba(255,255,255,.78)}
.hero-media{margin:0;position:relative}
.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);border:1px solid var(--line)}
.hero.on-dark .hero-media img{border-color:rgba(255,255,255,.16)}
.hero-media figcaption{margin-top:var(--space-4);color:var(--muted);font-size:var(--step--1);
  border-top:1px solid var(--line);padding-top:var(--space-3)}
.hero.on-dark .hero-media figcaption{border-top-color:rgba(255,255,255,.18)}
.hero.on-dark .hero-media figcaption{color:rgba(255,255,255,.75)}

/* Quick condition router: all conditions tappable at the top of the
   conditions section (moved out of the hero when the hero carries an image). */
.conditions-quick{grid-template-columns:repeat(4,1fr);gap:0 var(--space-6);margin:var(--space-5) 0 var(--space-7)}

/* ============================================================
   HERO - trade band variant: full-bleed deep colour, flat and
   square, white display type, one oversized call button.
   ============================================================ */
.hero.on-dark{position:relative;overflow:hidden;background:var(--brand-deep);color:#fff;border-bottom:0;padding:var(--space-9) 0 var(--space-8)}
.hero.on-dark .wrap{position:relative}
.hero.on-dark h1{color:#fff;font-size:var(--step-6);max-width:13em;margin-bottom:var(--space-4)}
.hero.on-dark .quick-answer{color:rgba(255,255,255,.92);max-width:54ch;margin-bottom:var(--space-6)}
.hero-call{display:inline-flex;align-items:center;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:var(--wt-h1);font-size:var(--step-3);letter-spacing:-.015em;text-decoration:none;padding:18px 38px;border-radius:var(--r-btn);white-space:nowrap}
.hero-call:hover{background:var(--accent-deep)}
.hero.on-dark .hero-rating{margin-top:var(--space-4)}
.hero-line{margin-top:var(--space-4);color:rgba(255,255,255,.72);font-size:var(--step--1);font-weight:500}
.guarantee{margin-top:var(--space-5);max-width:52ch;border-left:3px solid var(--accent);padding-left:var(--space-4);font-size:var(--step--1);line-height:1.6}
.guarantee strong{display:block;font-family:var(--font-display);font-size:var(--step-0);letter-spacing:-.01em;margin-bottom:var(--space-1)}
.hero.on-dark .guarantee{color:rgba(255,255,255,.82)}
.hero.on-dark .guarantee strong{color:#fff}
.hero.on-dark .seasonal{margin-top:var(--space-3);color:rgba(255,255,255,.88);font-weight:600;font-size:var(--step--1)}

/* ============================================================
   Trust: clinic three-up strip (credential + billing + rating).
   ============================================================ */
.trust{background:var(--paper-2);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding:var(--space-4) 0}
.trust .item{padding:var(--space-1) var(--space-5);font-size:var(--step--1);color:var(--muted)}
.trust .item:first-child{padding-left:0}
.trust .item + .item{border-left:1px solid var(--line)}
.trust strong{display:block;color:var(--brand);font-size:var(--step-0)}
.trust .big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--step-2);letter-spacing:-.04em;line-height:1.1;font-weight:500}

/* Trust: trade inline hairline row. */
.trust-strip{background:var(--paper);border-bottom:1px solid var(--line);padding:var(--space-4) 0}
.trust-strip ul{display:flex;flex-wrap:wrap;list-style:none;font-size:var(--step--1);font-weight:600;color:var(--muted)}
.trust-strip li{display:inline-flex;align-items:center}
.trust-strip li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.45;margin:0 var(--space-4)}

/* ============================================================
   Clinic: condition rows, editorial not cards.
   ============================================================ */
.cond-rows{margin-top:var(--space-6)}
.cond-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center;padding:var(--space-7) 0;border-top:1px solid var(--line)}
.cond-row:nth-child(even) .mount{order:-1}
.cond-row h3{font-size:var(--step-2);max-width:22ch}
.cond-row .about{color:var(--muted);margin-top:var(--space-3)}
.cond-links{list-style:none;margin-top:var(--space-4)}
.cond-links a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:10px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--brand);font-weight:600}
.cond-links a::after{content:"\2192";color:var(--muted);font-weight:400}
.cond-links a:hover{color:var(--accent)}
.mount{margin:0}
.mount .ph{display:block;border:1px solid var(--line);background:var(--paper);padding:10px;border-radius:var(--r-card)}
.mount img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:3px}
.mount figcaption{margin-top:10px;color:var(--muted);font-size:var(--step--1)}

/* Clinic: services, two-column rule-divided list. */
.svc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-8);margin-top:var(--space-5)}
.svc{padding:var(--space-5) 0;border-top:1px solid var(--line)}
.svc p{color:var(--muted);margin-top:var(--space-2)}

/* AEO question band: a short, dense answer block. Kept deliberately tighter
   than the sections around it so the page has a change of pace. */
.band{background:var(--accent-soft);padding:var(--space-6) 0}
.band h2{max-width:30ch}
.answer-first{font-size:var(--step-1);margin-top:var(--space-4);max-width:56ch}
.answer-first strong{color:var(--brand)}

/* Steps: oversized numerals, rules above, no cards. Explicit .num
   (clinic) or auto-counter (.steps--counted, trade). */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6)}
.step{border-top:2px solid var(--line);padding-top:var(--space-4)}
/* These numerals stay: the steps are a genuine sequence, so the order is
   information. Set in the credential face, not the accent, so they read as
   stages on a job sheet rather than decoration. */
.step .num{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--step-2);font-weight:500;color:var(--brand);letter-spacing:-.04em;line-height:1;margin-bottom:var(--space-3)}
.step h3{margin-bottom:var(--space-2)}
.step p{color:var(--muted);font-size:var(--step--1);line-height:1.6}
.steps--counted{counter-reset:step}
.steps--counted .step::before{counter-increment:step;content:"0" counter(step);display:block;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:var(--step-2);line-height:1;letter-spacing:-.04em;color:var(--muted);margin-bottom:var(--space-3)}
.steps--counted .step h3{font-size:var(--step-0)}

/* Clinic: insurance split + team figures. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start;margin-top:var(--space-5)}
.split .col{border-top:1px solid var(--line);padding-top:var(--space-4)}
.split .col p{color:var(--muted);margin-top:var(--space-2)}
.team{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-6)}
.team figcaption strong{display:block;color:var(--brand);font-family:var(--font-display);font-size:var(--step-1);letter-spacing:-.01em}

/* Clinic: offer stack + process promise. */
.offer{margin-top:var(--space-7);border-top:1px solid var(--line);padding-top:var(--space-5);max-width:56ch}
.offer p{color:var(--muted);margin-top:var(--space-2)}
.offer-list{list-style:none;margin-top:var(--space-3)}
.offer-list li{position:relative;padding:10px 2px 10px 24px;border-bottom:1px solid var(--line)}
.offer-list li::before{content:"";position:absolute;left:2px;top:1.4em;width:10px;height:2px;background:var(--muted);opacity:.5}
.promise{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-card);
  padding:var(--space-4) var(--space-5);margin-top:var(--space-5);max-width:46ch}
.promise h3{font-size:var(--step-0);margin-bottom:var(--space-2)}
.promise p{color:var(--muted);font-size:var(--step--1)}
.proof-line{margin-top:var(--space-4);font-size:var(--step--1);color:var(--muted);font-weight:600}
.proof-line strong{color:var(--brand)}

/* ============================================================
   Trade: emergency router.
   ============================================================ */
.route{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-5)}
/* The router keeps its boxes: here the box IS the meaning (two real choices,
   urgent or not). It is the only boxed component left above the fold. */
.route-card{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:var(--r-card);padding:var(--space-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.route-card.urgent{border-top-color:var(--accent)}
.route-card.calm{border-top-color:var(--brand)}
.route-card p{color:var(--muted)}
.route-card .btn{margin-top:auto}

/* Trade: services, a ruled directory rather than a grid of boxes. Six bordered
   rounded cards is the card-soup look; a ruled index reads as a real list of
   work and lets the whitespace do the separating. */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 var(--space-7);margin-top:var(--space-6)}
.svc-card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:var(--space-5) 0;text-decoration:none;display:block}
.svc-card h3{margin-bottom:var(--space-2);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
/* Arrow carries the click affordance the border used to. */
.svc-card h3::after{content:"\2192";flex:none;color:var(--muted);font-weight:400;transition:transform .18s ease}
.svc-card:hover h3{color:var(--accent)}
.svc-card:hover h3::after{color:var(--accent);transform:translateX(3px)}
.svc-card p{color:var(--muted);font-size:var(--step--1);line-height:1.6}
/* The 01-06 numerals implied a sequence these services do not have. A real
   sequence keeps its numbering (see .steps--counted); a set does not. */
.svc-card .idx{display:none}

/* Trade: stats row, set as a spec sheet. Each figure hangs from its own rule
   with the value in the credential face, the way a record sheet reads. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-7)}
.stat{border-left:0;padding-left:0;border-top:2px solid var(--brand);padding-top:var(--space-3)}
.stat .num{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--step-3);font-weight:500;color:var(--brand);letter-spacing:-.05em;line-height:1.05}
.stat .num em{font-style:normal;color:inherit}
.stat .label{color:var(--muted);font-size:var(--step--1);margin-top:var(--space-2);line-height:1.4}

/* Trade: cost answer, the price is the design. */
.cost-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--space-6);align-items:center;margin-top:var(--space-5)}
.cost-price{border-top:2px solid var(--brand);padding-top:var(--space-4)}
.cost-price .from{display:block;font-family:var(--font-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3)}
.cost-price .amount{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:var(--step-6);letter-spacing:-.06em;line-height:.95;color:var(--brand)}
.cost-copy p{font-size:var(--step-1);line-height:1.65}
.cost-copy .fine{color:var(--muted);font-size:var(--step-0);margin-top:var(--space-3)}

/* Trade: service-area town links. */
.area-list{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-5)}
.area-list a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--line)}
.area-list a:hover{text-decoration-color:var(--accent)}

/* ============================================================
   Shared: testimonial. Works for a plain blockquote or a
   figure>blockquote>p. One good review, oversized quote glyph.
   ============================================================ */
/* The oversized curly quote glyph is the stock testimonial move. A rule and
   the reviewer's own attribution carry more credibility and less decoration. */
.review{position:relative;max-width:62ch;margin-top:var(--space-6);border-top:2px solid var(--brand);padding-top:var(--space-4)}
.review blockquote{border:0;margin:0;font-size:var(--step-2);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.review blockquote p{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}
.review .who{margin-top:var(--space-4);font-weight:700;color:var(--brand)}
.review .who span{display:block;font-family:var(--font-mono);font-weight:400;color:var(--muted);
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;margin-top:var(--space-1)}
.gbp-link{display:inline-block;margin-top:var(--space-5);font-weight:700;color:var(--brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--line)}
.gbp-link:hover{text-decoration-color:var(--accent)}
/* Proof wall: three short reviews across, was a single testimonial. The .review
   styling still applies; the wall lays them out and sizes the quote down to fit. */
.reviews-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6)}
.reviews-wall .review{max-width:none;margin-top:0}
.reviews-wall .review blockquote{font-size:var(--step-0);line-height:1.55}
.reviews-wall .review .who{margin-top:var(--space-3)}
@media(max-width:820px){.reviews-wall{grid-template-columns:1fr;gap:var(--space-7)}}

/* ============================================================
   Mock online booking (demo only, see assets/booking.js).
   Stands in for the client's real Jane (clinic) or Jobber (trade)
   embed, so the demo shows the hot lead booking a time instead of
   waiting on a callback. Flat, no theatrics; the skin colours it.
   ============================================================ */
.booking{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:var(--space-5)}
.booking-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:var(--space-3);margin-bottom:var(--space-4)}
.booking-head h3{font-size:var(--step-1)}
.booking-tool{font-size:var(--step--1);color:var(--muted);font-weight:600}
/* A fieldset will not shrink below its content without min-width:0, which was
   forcing the scrollable day strip to push the whole page wide on phones. */
.booking-step{border:0;padding:0;margin:0 0 var(--space-4);min-width:0}
.booking-step legend{padding:0;font-weight:700;color:var(--brand);font-size:var(--step--1);margin-bottom:var(--space-3)}
.booking-opts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.b-opt{appearance:none;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:10px 14px;min-height:44px;font-family:var(--font-text);font-size:var(--step--1);font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.b-opt:hover:not([disabled]){border-color:var(--accent)}
.b-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.b-opt[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.booking-days{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2)}
.booking-days .b-opt{flex:none;flex-direction:column;gap:1px;min-width:62px;padding:8px 10px;line-height:1.15}
.booking-days .b-day{font-size:var(--step--1);color:var(--muted);font-weight:600}
.booking-days .b-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--step-1);font-weight:500;letter-spacing:-.04em;color:var(--brand)}
.booking-days .b-opt[aria-pressed="true"] .b-day,.booking-days .b-opt[aria-pressed="true"] .b-num{color:#fff}
.booking-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:var(--space-2)}
/* Arrival windows (Jobber/trade) carry longer labels than clock times. */
.booking[data-mode="window"] .booking-slots{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
/* A trade section is `.lead`, which sets `.lead button{width:100%}`. The picker
   buttons must stay intrinsic; only the confirm button goes full width. */
.booking .b-opt{width:auto}
.booking-go{width:100%}
.booking-go[disabled]{opacity:.45;cursor:not-allowed}
.booking-note{font-size:var(--step--1);color:var(--muted);margin-top:var(--space-3);max-width:none}
.booking-done{text-align:center;padding:var(--space-5) 0}
.booking-done h3{font-size:var(--step-2);margin-bottom:var(--space-2)}
.booking-done .b-sum{font-weight:600;color:var(--ink)}
.booking-done .b-again{margin-top:var(--space-4);background:none;border:0;cursor:pointer;font-family:var(--font-text);
  font-size:var(--step--1);font-weight:700;color:var(--brand);text-decoration:underline;text-underline-offset:5px}
.booking-done:focus{outline:none}
.booking-or{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-6) 0;color:var(--muted);font-size:var(--step--1);font-weight:600}
.booking-or::before,.booking-or::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:640px){
  .booking{padding:var(--space-4)}
  .booking-slots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ============================================================
   Clinic booking-request form (label-per-line).
   ============================================================ */
/* Grid items default to min-width:auto, so a long input or unbroken string
   pushes the column past the viewport. Let the columns actually shrink. */
.form-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-7);align-items:start}
.form-grid>*{min-width:0}
form.request{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--space-5)}
form.request label{display:block;font-weight:600;color:var(--brand);font-size:var(--step--1);margin:var(--space-4) 0 var(--space-2)}
form.request label:first-of-type{margin-top:0}
form.request input,form.request textarea{width:100%;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r-field);font-family:var(--font-text);font-size:max(16px,1rem);background:var(--paper);color:var(--ink)}
form.request input:hover,form.request textarea:hover{border-color:var(--accent)}
form.request textarea{min-height:120px;resize:vertical}
form.request .btn{width:100%;margin-top:var(--space-5)}
form.request .fineprint{margin-top:var(--space-3);font-size:var(--step--1);color:var(--muted);text-align:center;max-width:none}

/* ============================================================
   Trade lead form (boxed, shadowed panel).
   ============================================================ */
.lead-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-7);align-items:start}
.lead-side p{color:var(--muted);margin-bottom:var(--space-4)}
.lead-side .btn{margin-top:var(--space-2)}
.lead-side .proof-line,.lead-side .rating{margin-top:var(--space-4)}
.lead form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--space-6);display:grid;gap:var(--space-4)}
.lead label{font-weight:700;color:var(--brand);display:block;margin-bottom:var(--space-2);font-size:var(--step--1)}
.lead input,.lead textarea{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-field);font-family:var(--font-text);font-size:max(16px,1rem);color:var(--ink);background:var(--paper)}
.lead input:hover,.lead textarea:hover{border-color:var(--muted)}
.lead button{width:100%;white-space:normal}
.lead .note{font-size:var(--step--1);color:var(--muted);text-align:center;margin:0 auto}

/* ============================================================
   Shared: lead magnet (quiet second path).
   ============================================================ */
.magnet h2{font-size:var(--step-2);max-width:none}
.magnet .blurb{color:var(--muted);margin-top:var(--space-2)}
.magnet-form,.magnet form{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4);max-width:560px}
.magnet input[type=email]{flex:1;min-width:220px;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r-field);font-family:var(--font-text);font-size:max(16px,1rem);background:var(--paper);color:var(--ink)}
.magnet input[type=email]:hover{border-color:var(--accent)}
.magnet label:not(.visually-hidden){flex-basis:100%;font-weight:700;color:var(--brand);font-size:var(--step--1)}
.magnet .fineprint,.magnet .note{flex-basis:100%;font-size:var(--step--1);color:var(--muted);max-width:none;margin-top:var(--space-3)}

/* Magnet in a tinted band uses the two-column layout. */
.band.magnet .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-7);align-items:center}

/* ============================================================
   Shared: FAQ. Native details/summary, rotating + indicator.
   ============================================================ */
.faq-list{margin-top:var(--space-6);border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  cursor:pointer;list-style:none;padding:var(--space-4) var(--space-2);
  font-weight:var(--wt-head);font-size:var(--step-1);color:var(--brand);font-family:var(--font-display);letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent)}
.faq-list summary::after{content:"";flex:none;width:14px;height:14px;
  background:
    linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;
  color:var(--muted);transition:transform .2s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 var(--space-2) var(--space-5);color:var(--muted);max-width:62ch}

/* ============================================================
   Shared: final CTA band + footer, both on the deep brand colour.
   ============================================================ */
/* The closing ask gets the most air on the page: it is the one section that
   should feel like it has stopped talking and is waiting for an answer. */
.final{background:var(--brand-deep);text-align:center;color:#fff;padding:var(--space-9) 0}
.final h2{color:#fff;margin:0 auto;max-width:22ch}
.final p{color:rgba(255,255,255,.85);margin:var(--space-3) auto var(--space-5);max-width:48ch}
.final .cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3)}
.final .btn{background:var(--paper);color:var(--brand)}
.final .btn:hover{background:var(--accent-soft)}
.final .btn-call{background:var(--accent);color:#fff}
.final .btn-call:hover{background:var(--accent-deep)}
.final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.final .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.final .seasonal-line{font-size:var(--step--1);color:rgba(255,255,255,.7);margin:0 auto var(--space-5)}
.final .call-line{display:block;margin-top:var(--space-4);color:rgba(255,255,255,.85);font-size:var(--step--1)}
.final .call-line a{color:#fff;font-weight:600}
.final .proof-line,.final .rating{justify-content:center;margin:var(--space-5) auto 0;color:rgba(255,255,255,.78)}
.final .rating strong{color:#fff}

footer{background:var(--brand-deep);color:rgba(255,255,255,.78);padding:var(--space-7) 0 var(--space-5);font-size:var(--step--1)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--space-6)}
footer h2,footer h3{color:#fff;font-size:var(--step-0);margin-bottom:var(--space-3);letter-spacing:0}
footer a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
footer a:hover{text-decoration-color:#fff}
footer address{font-style:normal;line-height:1.8}
footer ul{list-style:none;display:grid;gap:var(--space-2)}
.footer-brand{font-family:var(--font-display);font-weight:var(--wt-head);font-size:var(--step-1);color:#fff;margin-bottom:var(--space-3)}
.smallprint,.small-print{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);color:rgba(255,255,255,.55)}

/* Sticky mobile action bar, under 640px only. */
.mobilebar{display:none}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:960px){
  .hero--index .wrap,.hero--split .wrap{grid-template-columns:1fr;gap:var(--space-6)}
  .hero--split .hero-media{max-width:520px}
  .conditions-quick{grid-template-columns:1fr 1fr}
  .hurts{border-left:0;padding-left:0}
  .cond-row{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-6) 0}
  .cond-row:nth-child(even) .mount{order:0}
  .svc-list,.split,.team,.form-grid,.band.magnet .wrap,.lead-grid,.cost-grid,.route{grid-template-columns:1fr;gap:var(--space-6)}
  .steps{grid-template-columns:1fr;gap:var(--space-5)}
  .trust .wrap{grid-template-columns:1fr;gap:var(--space-3)}
  .trust .item{padding:0}
  .trust .item + .item{border-left:0;border-top:1px solid var(--line);padding-top:var(--space-3)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-4)}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  footer .cols{grid-template-columns:1fr 1fr}
}
/* Nav collapses at 1150, not 900. The widest vertical (osteo) needs 1079px for
   brandmark + six links + phone + CTA; below that the links overlapped the
   phone number instead of collapsing. Measured, not guessed. */
@media(max-width:1150px){
  .nav-links{display:none}
  .head-actions{margin-left:auto}
}
/* .head-sms stays hidden on every width. Between 641 and 900 the header has
   room for the phone OR a text link plus the CTA, not both, and the phone and
   the CTA are the stronger pair; below 640 the sticky mobile bar carries call,
   text and book together. */
@media(max-width:640px){
  section{padding:var(--space-7) 0}
  .snug{padding:var(--space-6) 0}
  .hero{padding:var(--space-7) 0}
  .hero.on-dark{padding:var(--space-8) 0 var(--space-7)}
  .hero-call{width:100%;justify-content:center;font-size:var(--step-2);padding:16px 24px}
  .hurt-list{grid-template-columns:1fr}
  .conditions-quick{grid-template-columns:1fr 1fr}
  .hero--split .hero-media img{aspect-ratio:3/2}
  .brandmark span{display:none}
  .call,.head-sms,.head-cta{display:none}
  footer .cols{grid-template-columns:1fr}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mobilebar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;bottom:0;left:0;right:0;z-index:50;gap:var(--space-3);
    background:color-mix(in srgb,var(--paper) 97%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);
    padding:10px var(--space-3) calc(10px + env(safe-area-inset-bottom))}
  .mobilebar .btn{min-height:48px;padding:12px 8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============================================================
   Subpage + blog components: breadcrumb, compact hero, article
   prose, blog list and cards. Same tokens, same restraint.
   ============================================================ */
.crumbs{font-size:var(--step--1);color:var(--muted);padding-top:var(--space-4)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline}
.crumbs li+li::before{content:"\203A";margin:0 var(--space-2);color:var(--muted)}
.crumbs a{color:var(--brand);text-decoration:none;font-weight:500}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--muted)}

.page-hero,.hero-sub{padding:var(--space-6) 0 var(--space-7);border-bottom:1px solid var(--line)}
.page-hero h1,.hero-sub h1{font-size:var(--step-4);margin-bottom:var(--space-4);max-width:20ch}

.page-photo{margin:var(--space-6) 0 0;max-width:760px}
.page-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-card);border:1px solid var(--line)}
.page-photo figcaption{margin-top:var(--space-3);font-size:var(--step--1);color:var(--muted);border-left:2px solid var(--accent);padding-left:var(--space-3)}

.article-body,.prose{max-width:68ch}
.article-body h2,.prose h2{font-size:var(--step-2);margin:var(--space-6) 0 var(--space-3);max-width:30ch}
.article-body p,.prose p{margin-bottom:var(--space-4)}
.article-body ul,.article-body ol,.prose ul,.prose ol{margin:0 0 var(--space-4) 1.3em}
.article-body li,.prose li{margin-bottom:var(--space-2)}
.prose li::marker{color:var(--muted)}
.article-body .mount{margin:var(--space-5) 0}
.article-body img{aspect-ratio:auto}
.byline{color:var(--muted);font-size:var(--step--1);margin-top:var(--space-3)}
.byline strong{color:var(--brand)}
.vignette{margin-top:var(--space-6);border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0;padding:var(--space-4) var(--space-5);max-width:68ch}
.vignette h2{margin-top:0;font-size:var(--step-1)}

.post-list{list-style:none;margin-top:var(--space-6);display:grid;gap:var(--space-4)}
.post-list li{border-top:1px solid var(--line);padding:var(--space-5) 0}
.post-list h2{font-size:var(--step-2);max-width:32ch}
.post-list h2 a{color:var(--brand);text-decoration:none}
.post-list h2 a:hover{color:var(--accent)}
.post-list .meta{color:var(--muted);font-size:var(--step--1);margin-top:var(--space-2)}
.post-list p{color:var(--muted);margin-top:var(--space-2)}
.post-list .more{display:inline-block;margin-top:var(--space-3);font-weight:600;color:var(--brand)}
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--space-5);text-decoration:none;display:block}
.post-card:hover{border-color:var(--brand)}
.post-card .date{font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post-card h2{font-size:var(--step-2);margin:var(--space-2) 0}
.post-card p{color:var(--muted)}
.also-serve{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-4)}