/* ==================================================================
   VESTA HOME CARE: site stylesheet (v4, 2 Oct 2026)
   Every value comes from the design system (claude/vesta-design-tokens.md
   and the vesta-design-system skill). Composition follows the web
   art-direction rules in vesta-design-mastery. Don't add a colour, size
   or radius here that isn't in the system: add it there first.
   v4: light is the default theme, dark is the premium one-tap theme
   (reading text in Limestone, Rule-dark hairlines, Slate-deep surfaces),
   services redesigned, sticky mobile call bar (variant under test).
   ================================================================== */

/* ---------- fonts (self-hosted, OFL, latin subset) ---------- */
@font-face{ font-family:"Marcellus"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/marcellus-400.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/karla-400.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:400; font-style:italic; font-display:swap; src:url(/assets/fonts/karla-400-italic.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:500; font-style:normal; font-display:swap; src:url(/assets/fonts/karla-500.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:600; font-style:normal; font-display:swap; src:url(/assets/fonts/karla-600.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/karla-700.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/plexmono-400.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap; src:url(/assets/fonts/plexmono-500.woff2) format("woff2"); }

/* ---------- tokens ---------- */
:root{
  color-scheme: light;
  /* brand primitives (design system section 3) */
  --limestone:#E6E3DC; --ash:#D3CEC2; --slate:#201F1B; --smoke:#6B6759;
  --smoke-text:#5A574B; --smoke-inverse:#8A877C; --ember:#A8641F;
  --ember-text:#7D4A17; --flame:#D99A45; --white:#FFFFFF;
  --slate-deep:#1A1916; --rule-dark:#3A3830;

  /* roles: light (the default theme) */
  --bg:var(--limestone); --surface:var(--white); --surface-2:var(--white); --layer:var(--ash); --band:var(--ash);
  --text:var(--slate); --text-2:var(--smoke-text); --text-r:var(--smoke-text);
  --accent:var(--ember-text); --accent-lg:var(--ember);
  --line:var(--smoke-text); --hair:var(--smoke-text); --rule:var(--ash);
  --btn-bg:var(--slate); --btn-fg:var(--limestone);
  --focus:var(--slate); --error:#9E3B2C;
  --band-bg:var(--slate); --band-text:var(--limestone); --band-text-2:var(--smoke-inverse);

  /* type: fluid scale, 1.2 at 360px (base 17) to 1.333 at 1280px (base 18) */
  --f-display:"Marcellus","Hoefler Text",Georgia,serif;
  --f-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --step--1:.875rem;
  --step-0:clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);
  --step-1:clamp(1.25rem, 1.152rem + 0.4348vw, 1.5rem);
  --step-2:clamp(1.5rem, 1.304rem + 0.8696vw, 2rem);
  --step-3:clamp(1.8125rem, 1.47rem + 1.522vw, 2.6875rem);
  --step-4:clamp(2.1875rem, 1.649rem + 2.391vw, 3.5625rem);
  --step-5:clamp(2.625rem, 1.793rem + 3.696vw, 4.75rem);

  /* space: 4px base, plus three fluid section tiers */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --tier-tight:clamp(2rem, 1.609rem + 1.739vw, 3rem);          /* 32 -> 48 */
  --tier-std:clamp(4rem, 3.2175rem + 3.478vw, 6rem);          /* 64 -> 96 */
  --tier-major:clamp(5rem, 3.826rem + 5.217vw, 8rem);         /* 80 -> 128 */

  --r1:4px; --r2:8px;
  --ease-in:cubic-bezier(0.2,0,0,1);
  --wrap:80rem; --gutter:clamp(1.5rem, 4vw, 4rem); --gap:clamp(1rem, 2.2vw, 2rem);
  --measure:50ch; /* Karla's ch is wide: 50ch = about 65-68 average characters (measured 30 Sep 2026) */
  --h2:clamp(1.75rem, 1.505rem + 1.087vw, 2.375rem);        /* 28 -> 38 */
  --h2-feature:clamp(2rem, 1.609rem + 1.739vw, 3rem);       /* 32 -> 48 */
}
/* dark: the premium theme. Reading copy in Limestone, decorative hairlines in Rule-dark,
   raised panels on Slate-deep. Smoke-Inverse is kept for captions and labels only. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:var(--slate); --surface:var(--slate); --surface-2:var(--slate-deep); --layer:var(--slate); --band:var(--slate-deep);
  --text:var(--limestone); --text-2:var(--smoke-inverse); --text-r:var(--limestone);
  --accent:var(--flame); --accent-lg:var(--flame);
  --line:var(--smoke-inverse); --hair:var(--rule-dark); --rule:var(--rule-dark);
  --btn-bg:var(--flame); --btn-fg:var(--slate); --focus:var(--flame); --error:#E8927F;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:5rem; }
@media (max-width:39.99rem){ html{ scroll-padding-bottom:5.5rem; } }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--f-body);
      font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--flame); color:var(--slate); }
h1,h2,h3{ font-family:var(--f-display); font-weight:400; font-synthesis:none; margin:0; text-wrap:balance; }
h1{ font-size:var(--step-5); line-height:1.05; letter-spacing:-.01em; }
h2{ font-size:var(--h2); line-height:1.1; letter-spacing:0; max-width:20ch; }
h3{ font-size:var(--step-1); line-height:1.2; letter-spacing:.01em; }
.h2-feature{ font-size:var(--h2-feature); line-height:1.08; }
p{ margin:0; }
p,li,dd{ text-wrap:pretty; }
a{ color:var(--accent); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r1); }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:var(--s4); top:-3rem; z-index:100; background:var(--btn-bg); color:var(--btn-fg);
       padding:var(--s2) var(--s4); border-radius:var(--r1); text-decoration:none; font-weight:600; }
.skip:focus{ top:var(--s3); }

/* ---------- frame, grid, section tiers ---------- */
.wrap{ max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.grid{ display:grid; gap:var(--s6) var(--gap); }
@media (min-width:64rem){
  .grid{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .c1-5{ grid-column:1 / 6; } .c1-6{ grid-column:1 / 7; } .c1-4{ grid-column:1 / 5; }
  .c5-13{ grid-column:5 / 13; } .c7-13{ grid-column:7 / 13; } .c6-13{ grid-column:6 / 13; }
}
.section{ padding-block:var(--tier-std); }
.section.t-major-top{ padding-top:var(--tier-major); }
.section.t-major-bottom{ padding-bottom:var(--tier-major); }
.section.t-tight-top{ padding-top:var(--tier-tight); }
.section.ruled{ border-top:1px solid var(--rule); }
.label{ font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-2); margin:0 0 var(--s3); }
.lede{ font-size:var(--step-1); line-height:1.45; color:var(--text-r); max-width:44ch; margin-top:var(--s4); }
.head h2 + .lede{ margin-top:var(--s4); }
.measure{ max-width:var(--measure); }

/* ---------- lockup (construction: claude/vesta-lockup-rules.md) ---------- */
.wm{ display:flex; flex-direction:column; align-items:center; gap:.16em; font-size:1.02rem; line-height:1; }
.wm b{ font-family:var(--f-display); font-weight:400; font-size:1em; letter-spacing:.19em; margin-right:-.19em; line-height:1; }
.wm span{ font-family:var(--f-mono); font-size:.45em; letter-spacing:.4371em; word-spacing:-.7119em;
          margin-right:-.4371em; margin-left:-.03em; text-transform:uppercase; color:var(--flame); line-height:1; }

/* ---------- nav (dark-version lockup on Slate) ---------- */
.nav{ position:sticky; top:0; z-index:30; background:var(--slate); color:var(--limestone); }
.nav-in{ max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding:var(--s3) var(--gutter); display:flex; align-items:center; gap:var(--s5); min-height:3.5rem; }
.brand{ display:flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--limestone); margin-right:auto; }
.brand svg{ width:1.9rem; flex:none; }
.nav-links{ display:none; gap:var(--s5); }
@media (min-width:60rem){ .nav-links{ display:flex; } }
.nav-links a{ font-size:1rem; color:var(--limestone); text-decoration:none; padding-block:var(--s1); border-bottom:1px solid transparent; }
.nav-links a:hover{ border-color:var(--flame); }
.nav :focus-visible{ outline-color:var(--flame); }
.nav .btn{ display:none; background:var(--flame); color:var(--slate); }
@media (min-width:40rem){ .nav .btn{ display:inline-flex; } }
.theme{ flex:none; width:2.75rem; height:2.75rem; border-radius:var(--r1); display:grid; place-items:center;
        background:transparent; color:var(--limestone); border:1px solid var(--smoke-inverse); cursor:pointer; padding:0; }
.theme:hover{ border-color:var(--flame); }
.theme svg{ width:1.1rem; height:1.1rem; display:block; }
.theme .sun{ display:none; } .theme.is-dark .sun{ display:block; } .theme.is-dark .moon{ display:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:2.75rem;
      font-family:var(--f-body); font-size:1rem; font-weight:600; line-height:1.2; text-decoration:none;
      background:var(--btn-bg); color:var(--btn-fg); border:0; border-radius:var(--r1);
      padding:var(--s3) var(--s5); cursor:pointer; transition:filter 150ms var(--ease-in); }
.btn:hover{ filter:brightness(1.12); text-decoration:none; }
.btn--lg{ font-size:1.125rem; min-height:3.25rem; padding:var(--s4) var(--s6); }
.btn--ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn--ghost:hover{ filter:none; border-color:var(--accent-lg); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }

/* ---------- CTA block (same everywhere) ---------- */
.cta{ display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
.cta .outcome, .cta .reply{ font-size:1rem; color:var(--text-r); }
.cta .reply a{ font-weight:600; }

/* ---------- hero: bleed split (text left, photo to the right edge) ---------- */
.hero{ padding-top:var(--tier-tight); }
.hero-grid{ display:grid; gap:var(--s6); }
.hero-text{ padding-inline:var(--gutter); }
.hero h1{ max-width:13ch; }
.hero .desc{ font-size:var(--step-1); line-height:1.45; margin-top:var(--s5); max-width:30ch; }
.hero .cta{ margin-top:var(--s6); }
.hero-photo{ margin:0; position:relative; }
.hero-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:39.99rem){ .hero-photo img{ aspect-ratio:4/5; } }  /* taller phone hero: 4:5 source (reference study, 30 Sep 2026) */
.hero-photo figcaption{ font-size:var(--step--1); color:var(--text-2); margin-top:var(--s2); padding-inline:var(--gutter); max-width:60ch; }
@media (min-width:64rem){
  .hero-grid{ grid-template-columns:minmax(var(--gutter),1fr) minmax(0, calc(var(--wrap) * .42)) var(--gap) minmax(0, calc(var(--wrap) * .58)) minmax(var(--gutter),1fr);
              align-items:center; gap:0; }
  .hero-text{ grid-column:2; padding-inline:0; padding-block:var(--s6); }
  .hero-photo{ grid-column:4 / 6; }
  .hero-photo img{ aspect-ratio:4/3; border-radius:var(--r2) 0 0 var(--r2); }
  .hero-photo figcaption{ padding-inline:0 var(--gutter); }
}

/* ---------- hero before / after: direct drag, swipe and keyboard reveal ---------- */
.hero .hero-pair{ display:block; }
.hero .hero-pair .frame{ aspect-ratio:4/3; border-radius:0; background:var(--ash); }
@media (max-width:39.99rem){ .hero .hero-pair .frame{ aspect-ratio:4/5; } }
.hero .hero-pair figcaption{ margin-top:var(--s2); }
@media (min-width:64rem){ .hero .hero-pair .frame{ border-radius:var(--r2) 0 0 var(--r2); } }

/* ---------- proof strip ---------- */
.proof{ list-style:none; margin:var(--tier-tight) 0 0; padding:var(--s5) 0; display:grid; gap:var(--s3) var(--s6);
        border-block:1px solid var(--hair); grid-template-columns:1fr; }
@media (min-width:40rem){ .proof{ grid-template-columns:1fr 1fr; } }
@media (min-width:64rem){ .proof{ display:flex; flex-wrap:wrap; justify-content:space-between; } }
.proof li{ font-size:1rem; display:flex; gap:var(--s2); align-items:baseline; }
.proof li::before{ content:""; flex:none; width:.45rem; height:.45rem; border-radius:50%; background:var(--accent-lg); transform:translateY(-.1em); }

/* ---------- the work: one feature pair, a stack, then a short row ---------- */
.work-head{ margin-bottom:var(--s7); }
@media (min-width:64rem){ .work-head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); align-items:end; }
  .work-head h2{ grid-column:1 / 7; } .work-head .lede{ grid-column:7 / 12; margin-top:0; } }
.gallery{ display:grid; gap:var(--s6) var(--gap); grid-template-columns:1fr 1fr; }
.gallery .feature{ grid-column:1 / -1; }
.gallery .note{ grid-column:1 / -1; }
@media (max-width:63.99rem){ .gallery .row.wide{ grid-column:1 / -1; } }  /* last tile spans both columns so it never sits alone (6 Oct 2026) */
@media (min-width:64rem){
  .gallery{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .gallery .feature{ grid-column:1 / 9; grid-row:1 / 3; }
  .gallery .feature .frame{ aspect-ratio:4/3; min-height:0; }
  .gallery .side{ grid-column:9 / 13; }
  .gallery .row{ grid-column:span 4; }
  .gallery .note{ grid-column:9 / 13; align-self:start; }
}
.pair{ margin:0; display:flex; flex-direction:column; gap:var(--s2); }
.pair .frame{ --reveal:50%; position:relative; aspect-ratio:4/3; border-radius:var(--r2); overflow:hidden;
  isolation:isolate; background:var(--ash); cursor:ew-resize; touch-action:pan-y; }
.pair .compare-layer{ position:absolute; inset:0; }
.pair .compare-layer picture{ display:block; width:100%; height:100%; }
.pair .compare-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pair .compare-after{ z-index:0; }
.pair .compare-before{ z-index:1; clip-path:inset(0 calc(100% - var(--reveal)) 0 0); will-change:clip-path; }
.compare-label{ position:absolute; z-index:3; top:var(--s2); padding:.22rem .55rem; border-radius:var(--r1);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(26,25,22,.82); color:var(--limestone); pointer-events:none; backdrop-filter:blur(4px); }
.compare-label--before{ left:var(--s2); }
.compare-label--after{ right:var(--s2); }
.compare-divider{ position:absolute; z-index:3; top:0; bottom:0; left:var(--reveal); width:2px;
  transform:translateX(-1px); background:rgba(255,255,255,.96); box-shadow:0 0 0 1px rgba(26,25,22,.15); pointer-events:none; }
.compare-handle{ position:absolute; left:50%; top:50%; width:3rem; height:3rem; transform:translate(-50%,-50%);
  display:grid; place-items:center; border:2px solid white; border-radius:50%; color:white; background:rgba(26,25,22,.82);
  box-shadow:0 .2rem .8rem rgba(26,25,22,.32); }
.compare-handle svg{ width:1.5rem; height:1.5rem; }
.compare-range{ position:absolute; z-index:4; inset:0; width:100%; height:100%; margin:0; opacity:0;
  appearance:none; -webkit-appearance:none; cursor:ew-resize; background:transparent; touch-action:pan-y; }
.compare-range::-webkit-slider-thumb{ width:3rem; height:3rem; appearance:none; -webkit-appearance:none; }
.compare-range::-moz-range-thumb{ width:3rem; height:3rem; border:0; background:transparent; }
.compare-range:focus-visible{ opacity:.01; outline:3px solid var(--focus); outline-offset:-4px; }

/* gallery tiles: caption and optional full-size view under the comparison */
.gallery .pair{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; align-content:start; }
.gallery .pair .controls{ display:flex; justify-content:flex-end; gap:var(--s2); }
.gallery .pair .zoom{ min-height:2.75rem; display:grid; place-items:center; padding:0; cursor:pointer;
  border-radius:var(--r1); background:transparent; color:var(--text); border:1px solid var(--line); }
.gallery .pair .zoom{ flex:none; width:2.75rem; }
.gallery .pair .zoom[hidden]{ display:none; }
.gallery .pair .zoom svg{ width:1.125rem; height:1.125rem; }
:root[data-theme="dark"] .gallery .pair .zoom{ color:var(--flame); border-color:var(--flame); }
.gallery .pair .zoom:active{ background:var(--slate); color:var(--limestone); border-color:var(--slate); }
:root[data-theme="dark"] .gallery .pair .zoom:active{ background:var(--slate-deep); color:var(--limestone); border-color:var(--smoke-inverse); }
.gallery .pair .zoom:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
/* the large photo: caption and buttons share one row, buttons a step bigger */
.gallery .pair.feature{ grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:var(--s3); }
.gallery .pair.feature .frame{ grid-column:1 / -1; }
.gallery .pair.feature figcaption{ grid-row:2; grid-column:1; }
.gallery .pair.feature .controls{ grid-row:2; grid-column:2; gap:var(--s3); }
.gallery .pair.feature .zoom{ min-height:3.25rem; }
.gallery .pair.feature .zoom{ width:3.25rem; }
.gallery .pair.feature .zoom svg{ width:1.375rem; height:1.375rem; }
/* Keep labelled gallery controls inside narrow phone viewports. */
@media (max-width:24rem){
  .gallery .pair.feature{ grid-template-columns:minmax(0,1fr); }
  .gallery .pair.feature figcaption{ grid-row:2; grid-column:1; }
  .gallery .pair.feature .controls{ grid-row:3; grid-column:1; }
}
.gallery .pair:not(.feature) figcaption{ grid-row:2; }
.gallery .pair:not(.feature) .controls{ grid-row:3; }
.pair figcaption{ font-size:var(--step--1); color:var(--text-2); }
.gallery .note{ font-size:var(--step--1); color:var(--text-2); max-width:36ch; }

/* lightbox */
.lb{ border:0; padding:0; background:transparent; max-width:min(92vw,64rem); max-height:92vh; }
.lb::backdrop{ background:rgba(32,31,27,.92); }
.lb img{ max-width:100%; max-height:80vh; border-radius:var(--r2); margin-inline:auto; }
.lb .lb-bar{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); margin-top:var(--s3); color:var(--limestone); font-size:1rem; }
.lb .lb-close{ min-height:2.75rem; font-family:var(--f-body); font-size:1rem; font-weight:600; background:var(--flame); color:var(--slate); border:0; border-radius:var(--r1); padding:var(--s2) var(--s4); cursor:pointer; }

/* ---------- promo: visible, a ruled row with a quiet button ---------- */
.promo{ margin-top:var(--tier-tight); border-block:1px solid var(--hair); padding-block:var(--s6); display:grid; gap:var(--s3); }
.promo .label{ margin:0; }
.promo p{ color:var(--text-r); max-width:var(--measure); }
.promo .go{ margin-top:var(--s2); }
@media (min-width:64rem){ .promo{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s2) var(--gap); align-items:baseline; }
  .promo .label{ grid-column:1 / 4; } .promo h3{ grid-column:4 / 8; } .promo p{ grid-column:4 / 11; }
  .promo .go{ grid-column:11 / 13; grid-row:1 / 3; align-self:center; justify-self:end; margin-top:0; } }

/* ---------- who comes: portrait split (type-led until the portrait exists) ---------- */
.who h2{ margin-bottom:var(--s5); }
.who .intro{ max-width:44ch; font-size:var(--step-1); line-height:1.45; }
.who .keeper{ max-width:44ch; margin-top:var(--s5); color:var(--text-r); }
.spec{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.spec li{ border-bottom:1px solid var(--hair); padding-block:var(--s4); }

/* ---------- the name: centred interlude ---------- */
.story{ text-align:center; }
.story h2{ margin:0 auto var(--s6); max-width:16ch; }
.story p{ color:var(--text-r); max-width:var(--measure); margin-inline:auto; }
.story p + p{ margin-top:var(--s4); }
.story .last{ max-width:28ch; color:var(--text); font-family:var(--f-display); font-size:var(--step-2); line-height:1.3; margin-top:var(--s6); }

/* ---------- checklist: index (heading held left, rooms right) ---------- */
@media (min-width:64rem){ .index-head{ position:sticky; top:6rem; align-self:start; } }
.index-head .lede{ font-size:var(--step-0); line-height:1.6; }
.rooms{ display:grid; gap:0; border-top:1px solid var(--hair); }
@media (min-width:48rem){ .rooms{ grid-template-columns:1fr 1fr; column-gap:var(--gap); border-top:0; } .rooms details{ border-top:1px solid var(--hair); } }
.rooms details{ border-bottom:1px solid var(--hair); }
@media (min-width:48rem){ .rooms details{ border-bottom:0; } .rooms{ border-bottom:1px solid var(--hair); } }
.rooms summary{ list-style:none; cursor:pointer; min-height:3.25rem; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding-block:var(--s3); }
.rooms summary::-webkit-details-marker{ display:none; }
.rooms summary b{ font-family:var(--f-display); font-weight:400; font-size:var(--step-1); }
.rooms summary span{ font-family:var(--f-mono); font-size:var(--step--1); color:var(--text-2); white-space:nowrap; }
.rooms summary span::after{ content:" +"; }
.rooms details[open] summary span::after{ content:" \2212"; }
.rooms ul{ margin:0 0 var(--s5); padding-left:1.1rem; display:grid; gap:var(--s1); font-size:1rem; color:var(--text-r); }
.list-foot{ margin-top:var(--s5); color:var(--text-r); max-width:var(--measure); font-size:1rem; }

/* ---------- how it works: a sequence ---------- */
.seq-head{ margin-bottom:var(--s7); }
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:var(--s5); }
.steps li{ counter-increment:step; border-top:1px solid var(--hair); padding-top:var(--s4); display:grid; grid-template-columns:3rem 1fr; gap:var(--s3); }
.steps li::before{ content:counter(step, decimal-leading-zero); font-family:var(--f-mono); font-size:var(--step--1); color:var(--text-2); padding-top:.25em; }
.steps b{ display:block; font-weight:600; }
.steps span{ color:var(--text-r); display:block; margin-top:var(--s1); }
@media (min-width:64rem){
  .steps{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--gap); }
  .steps li{ grid-template-columns:1fr; gap:var(--s4); align-content:start; }
}

/* ---------- pricing: lead split ---------- */
.drivers{ margin:var(--s4) 0 0; padding-left:1.1rem; display:grid; gap:var(--s1); }
.price-lead p{ max-width:40ch; }
.facts{ margin:0; display:grid; gap:0; border-top:1px solid var(--hair); }
.facts div{ border-bottom:1px solid var(--hair); padding-block:var(--s4); display:grid; gap:var(--s1); }
@media (min-width:48rem){ .facts div{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:var(--gap); } }
.facts dt{ font-weight:600; }
.facts dd{ margin:0; color:var(--text-r); }

/* ---------- services: three written lists, each shown for what it is ---------- */
.tiers-head{ margin-bottom:var(--s7); }
.tiers{ display:grid; gap:var(--s5); }
@media (min-width:64rem){ .tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:stretch; } }
.tier{ background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r2); padding:var(--s6) var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
.tier--sig{ border-top:2px solid var(--accent-lg); }
.tier .idx{ font-family:var(--f-mono); font-size:var(--step--1); color:var(--text-2); letter-spacing:.09em; margin:0; }
.tier h3{ font-size:var(--step-2); line-height:1.15; margin-top:calc(-1 * var(--s2)); }
.tier .for{ color:var(--text-r); max-width:34ch; }
.tier .plain{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.tier .plain li{ padding-block:var(--s3); border-bottom:1px solid var(--hair); color:var(--text-r); font-size:1rem; }
.tier .base{ display:flex; gap:var(--s3); align-items:baseline; padding-block:var(--s3); border-block:1px solid var(--hair); color:var(--text-r); font-size:1rem; }
.tier .base::before{ content:""; flex:none; width:.45rem; height:.45rem; border-radius:50%; background:var(--accent-lg); transform:translateY(-.1em); }
.tier .layer{ background:var(--layer); border-radius:var(--r1); padding:var(--s4) var(--s4) var(--s2); }
.tier .layer-title{ font-weight:600; margin:0 0 var(--s2); }
:root:not([data-theme="dark"]) .tier .layer{ color:var(--slate); }
.tier .layer .plain{ border-top:0; }
.tier .layer .plain li{ border-bottom:1px solid var(--hair); color:inherit; }
.tier .layer .plain li:last-child{ border-bottom:0; }
:root:not([data-theme="dark"]) .tier .layer .plain li{ border-color:var(--smoke); }
.tier .path{ list-style:none; margin:0; padding:0; counter-reset:path; display:grid; gap:var(--s3); }
.tier .path li{ counter-increment:path; display:grid; grid-template-columns:2.25rem 1fr; gap:var(--s2); color:var(--text-r); font-size:1rem; }
.tier .path li::before{ content:counter(path, decimal-leading-zero); font-family:var(--f-mono); font-size:var(--step--1); color:var(--text-2); padding-top:.2em; }
.tier .path b{ font-weight:600; color:var(--text); }
.tier .fine{ color:var(--text-2); font-size:var(--step--1); margin-top:auto; }


/* ---------- correction promise: the one statement band ---------- */
.statement{ background:var(--band); padding-block:var(--tier-major); border-block:1px solid var(--rule); }
.statement .promise{ font-family:var(--f-display); font-size:var(--step-5); line-height:1.08; letter-spacing:-.01em; max-width:20ch; text-wrap:balance; }
.statement .promise-sub{ color:var(--text-r); margin-top:var(--s6); max-width:52ch; }

/* ---------- faq: index ---------- */
.faq{ border-top:1px solid var(--hair); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ cursor:pointer; list-style:none; min-height:3.25rem; padding-block:var(--s4); display:flex; justify-content:space-between; align-items:center; gap:var(--s4); font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--f-mono); color:var(--text-2); flex:none; }
.faq details[open] summary::after{ content:"\2212"; }
.faq .a{ padding-bottom:var(--s5); color:var(--text-r); max-width:var(--measure); }
.faq .a p + p{ margin-top:var(--s3); }

/* ---------- final CTA: a quiet centred close ---------- */
.final{ text-align:center; }
.final h2{ max-width:18ch; margin-inline:auto; }
.final .lede{ margin-inline:auto; }
.final .cta{ margin-top:var(--s6); align-items:center; }

/* ---------- footer: the one Slate band ---------- */
.foot{ background:var(--band-bg); color:var(--band-text); padding-block:var(--tier-std) var(--s7); }
@media (max-width:39.99rem){ .foot{ padding-bottom:calc(var(--s7) + 4.5rem); } }
.foot a{ color:var(--band-text); }
.foot :focus-visible{ outline-color:var(--flame); }
.foot-grid{ display:grid; gap:var(--s6); }
@media (min-width:48rem){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot .brand{ margin-bottom:var(--s4); }
.foot .brand svg{ width:2.6rem; }
.foot .doctrine{ font-family:var(--f-display); font-size:var(--step-1); }
.foot h2{ font-family:var(--f-mono); font-size:var(--step--1); letter-spacing:.09em; text-transform:uppercase; color:var(--band-text-2); margin-bottom:var(--s3); max-width:none; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); font-size:1rem; }
.foot .legal{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--rule-dark); font-size:var(--step--1); color:var(--band-text-2); }
.foot .areas{ margin-top:var(--s5); font-size:var(--step--1); color:var(--band-text-2); max-width:var(--measure); }

.gap-top{ margin-top:var(--s5); }

/* ---------- sticky call bar: phones only, after the hero button scrolls away (variant under test, 2 Oct 2026) ---------- */
.sticky-cta{ display:none; }
.js .sticky-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25; gap:var(--s3); align-items:center;
  background:var(--slate); border-top:1px solid var(--rule-dark);
  padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); visibility:hidden; transition:transform 250ms var(--ease-in), visibility 0s linear 250ms; }
.js .sticky-cta.show{ transform:none; visibility:visible; transition:transform 250ms var(--ease-in), visibility 0s; }
.sticky-cta .btn{ flex:1 1 auto; background:var(--flame); color:var(--slate); }
.sticky-cta .call-icon{ flex:none; min-height:2.75rem; display:inline-flex; align-items:center; padding:0 var(--s4); color:var(--limestone);
  border:1px solid var(--smoke-inverse); border-radius:var(--r1); text-decoration:none; font-weight:600; }
.sticky-cta .call-icon{justify-content:center;width:3rem;min-height:3rem;padding:0}
.sticky-cta .call-icon svg{width:1.5rem;height:1.5rem}
#contact{scroll-margin-top:6rem}
.foot #contact + ul a{display:inline-flex;align-items:center;min-height:2.75rem}
.foot a[href^="mailto:"]{overflow-wrap:anywhere}
.sticky-cta :focus-visible{ outline-color:var(--flame); }
@media (min-width:40rem){ .js .sticky-cta{ display:none; } }
@media (max-height:31.25rem){ .js .sticky-cta{ display:none; } }
@media (prefers-reduced-motion: reduce){ .js .sticky-cta, .js .sticky-cta.show{ transition:none; } }

/* dark: the nav and footer keep an edge so they still read as bands */
:root[data-theme="dark"] .nav{ border-bottom:1px solid var(--rule); }
:root[data-theme="dark"] .foot{ border-top:1px solid var(--rule); background:var(--band); }
/* Pricing review: recurring choices, establishment, separately assessed Reset. */
.establishment{ grid-column:1 / -1; padding:var(--s6) 0; }
.establishment h3{ margin-bottom:var(--s5); }
.establishment-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5); }
.establishment-steps li{ border-top:1px solid var(--hair); padding-top:var(--s4); }
.establishment-steps b,.establishment-steps span{ display:block; }
.establishment-steps span{ margin-top:var(--s2); color:var(--text-r); }
.establishment .fine{ margin-top:var(--s5); color:var(--text-2); font-size:var(--step--1); }
.tier--reset{ grid-column:1 / -1; }
.tier--reset h3{ margin-top:var(--s3); }
.tier--reset .for,.tier--reset .fine{ margin-top:var(--s4); }
@media(min-width:64rem){
  .establishment-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
  .tier--reset{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap); }
}