/* =====================================================================
   Pristine Cleans: base.css (design system v2, see DESIGN.md)
   The whole design system in one file. Every page links it.
   Sections:  1 tokens · 2 reset · 3 type · 4 layout · 5 bands
              6 buttons & links · 7 header · 8 dock · 9 checklists
              10 clipboard sheet · 11 ledger · 12 reviews
              13 fork cards · 14 memo card · 15 steps · 16 room tabs
              17 tier table · 18 form · 19 talk block · 20 footer
              21 motifs (wave, bubbles, drop) · 22 photo slot
              23 page: index · 24 utilities · 25 motion / print
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  color-scheme: light;
  /* ground */
  --paper:#FBF8F4;    /* page (warm white) */
  --paper-2:#F3EEE6;  /* alternate warm band, inactive tabs */
  --mist:#E8F5FB;     /* sky tint: reviews band, checked chips */
  --blush:#FAEDF5;    /* orchid tint: small notes, hover on hanger */
  --card:#FFFFFF;     /* checklist sheet, memo, form panel */
  /* ink (deep blue-slate) */
  --ink:#13293D;      /* text, card borders, business band, footer */
  --ink-2:#4A5A6B;    /* secondary text */
  --rule:#E3DBCE;     /* hairlines on light */
  /* brand: sky */
  --sky:#27AAE1;      /* FILLS ONLY on light (2.5:1). Text-safe on --ink (5.6:1) */
  --sky-ink:#0B6A9A;  /* links, primary buttons, ticks, kickers (5.6:1 on paper) */
  --sky-deep:#0C4E72; /* construction band, button press shadow (white 8.9:1) */
  --sky-lt:#8FD3F0;   /* kickers/links on dark bands (9.0:1 on ink, 5.4:1 on sky-deep) */
  /* brand: orchid */
  --orchid:#D367B2;   /* FILLS ONLY on light (3.1:1): bubbles, wave on dark */
  --orchid-ink:#A2347E; /* pen notes, tagline, DEEP tags (6.0:1 on paper) */
  --orchid-lt:#F2B5DC;  /* orchid text on dark (8.8:1 on ink) */
  --pen:var(--orchid-ink);
  /* states */
  --ok:#1F7A4D; --err:#B3261E;
  /* on dark */
  --on-dark:#FFFFFF; --on-dark-2:#C3D2DE; --rule-dark:rgba(255,255,255,.16);
  --focus:var(--sky-ink);

  /* fonts */
  --f-display:"Young Serif", Georgia, serif;
  --f-text:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand:"Kalam", "Segoe Print", cursive;
  --f-tag:"Raleway", var(--f-text);   /* tagline only: a light, tracked sans like the logo's */

  /* type scale */
  --t-display: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  --t-h2: clamp(1.95rem, 1.45rem + 2vw, 2.9rem);
  --t-h3: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --t-lead: clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
  --t-quote: clamp(1.3rem, 1.12rem + .8vw, 1.75rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .75rem;
  --t-phone-xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.2rem);
  --t-poster: clamp(2.3rem, 12.2vw - 8px, 8.2rem);
  --t-hand: 1.35rem;

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r:6px; --r-pill:999px;
  --border:1.5px solid var(--ink);
  --hair:1px solid var(--rule);
  --shadow-paper:0 1px 0 var(--rule), 0 14px 26px -16px rgba(19,41,61,.38);
  --ease:cubic-bezier(.2,.7,.2,1);

  --header-h:64px;
  --dock-h:56px;
}
@media (min-width:1024px){ :root{ --header-h:76px; } }

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:106.25%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (min-width:1024px){ html{font-size:112.5%} }
/* below 1024 the fixed dock covers the bottom 57px: keep focused things clear of it (WCAG 2.4.11) */
@media (max-width:1023px){ html{scroll-padding-bottom:calc(var(--dock-h) + 16px)} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-text);overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
a{color:var(--sky-ink);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.band--ink,.band--sky-deep,.site-footer,.dock,.deskclip,.yardsign{--focus:var(--sky-lt)}
/* white cards inside dark bands go back to the light-ground ring (sky-lt on white is ~1.7:1) */
.memo,.sheet,.quote{--focus:var(--sky-ink)}
::selection{background:rgba(39,170,225,.28)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sky-ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 3. type ---------- */
h1,h2,h3,.display{font-family:var(--f-display);font-weight:400;color:inherit;text-wrap:balance}
h1,.h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.015em}
h2,.h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.01em}
h3,.h3{font-size:var(--t-h3);line-height:1.15}
p{text-wrap:pretty}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);max-width:48ch}
.body{max-width:62ch;color:var(--ink-2)}
.small{font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.kicker{display:block;font:700 var(--t-label)/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink);margin:0 0 var(--s4)}
.hand{font-family:var(--f-hand);font-weight:400;font-size:var(--t-hand);line-height:1.15;color:var(--pen)}
.num,[data-config="PHONE"]{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.nw{white-space:nowrap}
/* her tagline, set like the logo: lowercase, light, widely tracked, orchid */
.tagline{display:flex;align-items:center;gap:10px;font:300 1rem/1.2 var(--f-tag);letter-spacing:.2em;text-transform:lowercase;color:var(--orchid-ink);margin:0 0 var(--s4)}
.band--ink .tagline,.band--sky-deep .tagline,.site-footer .tagline{color:var(--orchid-lt)}
.tagline--inline{display:inline;gap:0;margin:0;letter-spacing:.16em;font-size:inherit;font-weight:400}

/* heading + body rhythm */
.kicker + h1,.kicker + h2,.tagline + h1{margin-top:0}
h2 + p,h2 + .body,h2 + .lead,h1 + .lead{margin-top:var(--s4)}
.body + .body,p + p{margin-top:var(--s3)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}

/* ---------- 4. layout ---------- */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:20px}
.wrap--text{max-width:760px}
@media (min-width:768px){ .wrap{padding-inline:32px} }

/* 12-col grid (single column below 1024). */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7) 24px}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .split-7-5 > :nth-child(1){grid-column:1 / span 7}
  .split-7-5 > :nth-child(2){grid-column:8 / span 5}
  .split-5-7 > :nth-child(1){grid-column:1 / span 5}
  .split-5-7 > :nth-child(2){grid-column:6 / span 7}
  .split-5-7.split--gap > :nth-child(2){grid-column:7 / span 6}
}
.split-6-6{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@media (min-width:768px){ .split-6-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }

/* ---------- 5. bands ---------- */
.band{padding-block:var(--s8);position:relative}
@media (min-width:1024px){ .band{padding-block:var(--s9)} }
.band--paper{background:var(--paper)}
.band--paper-2{background:var(--paper-2)}
.band--mist{background:var(--mist)}
.band--ink{background:var(--ink);color:var(--on-dark);padding-block:var(--s9)}
.band--sky-deep{background:var(--sky-deep);color:var(--on-dark);padding-block:var(--s9)}
.band--rule{border-top:var(--hair)}
.band--ink .kicker,.band--sky-deep .kicker{color:var(--sky-lt)}
.band--ink .body,.band--ink .lead,.band--ink .small,.band--sky-deep .body,.band--sky-deep .lead,.band--sky-deep .small{color:var(--on-dark-2)}
.band--sky-deep .body,.band--sky-deep .lead,.band--sky-deep .small{color:#D5E4EE}
.band--ink a:not(.btn),.band--sky-deep a:not(.btn){color:#fff}
.band__head{max-width:46rem;margin-bottom:var(--s7)}

/* ---------- 6. buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border:1.5px solid transparent;border-radius:var(--r);font:600 1rem/1.15 var(--f-text);text-decoration:none;text-align:center;cursor:pointer;transition:transform 80ms var(--ease),box-shadow 80ms var(--ease),background-color 160ms var(--ease),color 160ms var(--ease);-webkit-tap-highlight-color:transparent}
@media (min-width:1024px){ .btn{min-height:44px} }
.btn--lg{min-height:52px;padding:0 24px;font-size:1.0625rem}
.btn--sm{min-height:40px;padding:0 14px;font-size:.9375rem}
.btn--block{width:100%}
.btn--primary{background:var(--sky-ink);color:#fff;box-shadow:0 3px 0 var(--sky-deep)}
.btn--primary:hover{background:#095C86;color:#fff}
.btn--primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sky-deep)}
.btn--secondary{background:transparent;color:var(--sky-ink);border-color:var(--sky-ink)}
.btn--secondary:hover{background:var(--card);color:var(--sky-ink)}
.btn--secondary:active{transform:translateY(2px)}
.btn--on-dark{background:var(--card);color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.btn--on-dark:hover{background:var(--mist);color:var(--ink)}
.btn--on-dark:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn--ghost-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn--ghost-on-dark:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--ghost-on-dark:active{transform:translateY(2px)}

.link-go{display:inline;font-weight:600;color:var(--sky-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.link-go::after{content:"\2192" / "";display:inline-block;margin-left:.35em;transition:transform 160ms var(--ease)}
.link-go:hover{color:var(--ink)}
.link-go:hover::after{transform:translateX(3px)}
.band--ink .link-go,.band--sky-deep .link-go,.deskclip .link-go,.yardsign .link-go{color:#fff}
/* a standalone arrow link (not inside running text) gets a 44px tap height */
.actions > .link-go,.link-go--tap,.hm-ledger__go,.hw-ledger .link-go,.vs-other .link-go,.bz-book__builder .link-go,.bz-hero__met .link-go,.hm-pets .link-go{display:inline-block;padding-block:10px}  /* inline-block, not flex: flex would eat the spaces in "Or call <span>" */

/* ---------- 7. header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,248,244,.97);border-bottom:1px solid transparent;transition:border-color 160ms var(--ease)}
.site-header.is-scrolled,.site-header.is-open{border-bottom-color:var(--rule)}
.site-header__in{display:flex;align-items:center;gap:var(--s4);height:var(--header-h)}
.site-header__logo{display:block;flex:0 0 auto;border-radius:4px}
.site-header__logo img{height:46px;width:auto}
@media (min-width:1024px){ .site-header__logo img{height:58px} }
.site-header__mob{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.site-header__mob .btn{min-height:44px}
.site-header__menu{display:none;min-height:44px;padding:0 12px;background:transparent;border:0;font:600 .9375rem/1 var(--f-text);color:var(--ink);border-radius:var(--r)}
.js .site-header__menu{display:inline-flex;align-items:center;gap:8px}
.site-header__menu::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 160ms var(--ease)}
.site-header__menu[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
/* slim header (QR pages, body[data-header="slim"]): logo + Call on phones, logo + phone number at 1024+ */
body[data-header="slim"] .site-header__menu{display:none}
body[data-header="slim"] .site-nav > :not(.site-nav__phone){display:none}
body[data-header="slim"] .site-nav__phone{border-left:0 !important;padding-left:0 !important}
/* nav: a drop-down panel below 1024 (JS opens it), a row at 1024+ */
.site-nav{display:none}
/* no JS = no Menu button: show the nav as a plain wrapping link row under the bar */
@media (max-width:1023px){
  html:not(.js) .site-header{position:relative}
  html:not(.js) .site-header__in{flex-wrap:wrap;height:auto;min-height:var(--header-h);column-gap:var(--s4);row-gap:0}
  html:not(.js) .site-nav{display:flex;flex-wrap:wrap;gap:4px 16px;flex-basis:100%;order:3;padding-bottom:var(--s2)}
  html:not(.js) .site-nav a{min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:1rem;color:var(--ink);border-bottom:0}
  html:not(.js) .site-nav .btn,html:not(.js) .site-nav__phone{display:none}
}
@media (max-width:1023px){
  .site-header.is-open .site-nav{display:grid;position:absolute;left:0;right:0;top:100%;padding:var(--s2) 20px var(--s5);background:var(--paper);border-bottom:var(--border);box-shadow:0 18px 24px -20px rgba(19,41,61,.45)}
  .site-nav a{display:flex;align-items:center;min-height:52px;border-bottom:var(--hair);font-weight:600;font-size:1.0625rem;color:var(--ink);text-decoration:none}
  .site-nav a[aria-current="page"]{color:var(--sky-ink)}
  .site-nav .btn{margin-top:var(--s4);border-bottom:1.5px solid var(--sky-ink);justify-content:center;color:var(--sky-ink)}
  .site-nav__phone{display:none !important}
}
@media (min-width:1024px){
  .site-header__mob{display:none}
  .site-nav{display:flex;align-items:center;gap:var(--s6);margin-left:auto}
  .site-nav a{font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;white-space:nowrap}
  .site-nav > a:not(.btn):not(.site-nav__phone){padding-block:6px;border-bottom:2px solid transparent}
  .site-nav > a:not(.btn):not(.site-nav__phone):hover{color:var(--sky-ink);border-bottom-color:var(--rule)}
  .site-nav a[aria-current="page"]{color:var(--sky-ink);border-bottom-color:var(--sky-ink) !important}
  .site-nav .btn{margin-left:calc(var(--s2) * -1)}
  .site-nav__phone{color:var(--sky-ink) !important;font-weight:700 !important;padding-left:var(--s5);border-left:var(--hair)}
  .site-nav__phone:hover{text-decoration:underline !important}
}
/* six nav items since Organizing joined: tighter below 1280, and below 1180 the number steps out of the bar
   (every hero has a Call button and the footer carries the number) */
@media (min-width:1024px) and (max-width:1279px){
  .site-nav{gap:var(--s5)}
  .site-nav a{font-size:.875rem}
  .site-nav__phone{padding-left:var(--s4)}
}
@media (min-width:1024px) and (max-width:1179px){
  .site-nav{gap:20px}
  .site-nav__phone{display:none !important}
}

/* ---------- 8. mobile dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1.35fr;background:var(--ink);border-top:1px solid rgba(255,255,255,.12);padding-bottom:env(safe-area-inset-bottom,0px);transition:transform 160ms var(--ease)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:var(--dock-h);color:#fff;font-weight:600;font-size:1rem;text-decoration:none}
.dock a + a{border-left:1px solid rgba(255,255,255,.16)}
.dock .dock__go{background:var(--sky);color:var(--ink);font-weight:700;border-left:0}
.dock a:focus-visible{outline-offset:-4px}
.dock.is-hidden{transform:translateY(110%)}
body{padding-bottom:calc(var(--dock-h) + 1px + env(safe-area-inset-bottom,0px))}  /* +1px: the dock's top border */
@media (min-width:1024px){ .dock{display:none} body{padding-bottom:0} }

/* ---------- 9. checklists ---------- */
/* <ul class="checks"><li data-todo="confirm-scope"><span class="tick" aria-hidden="true"><svg viewBox="0 0 32 32"><use href="#i-tick"/></svg></span>Text</li></ul> */
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;align-items:flex-start;gap:12px;padding-block:var(--s3);border-bottom:var(--hair);line-height:1.4}
.checks li:first-child{border-top:var(--hair)}
.checks--flush li:first-child{border-top:0}
.tick{position:relative;flex:0 0 20px;width:20px;height:20px;margin-top:1px;border:var(--border);border-radius:3px;background:var(--card)}
.tick svg{position:absolute;left:-3px;top:-12px;width:34px;height:34px;color:var(--sky-ink);overflow:visible}
.tick use,.i-tick-path{stroke-dasharray:40;stroke-dashoffset:0}
.checks em{font-style:italic;color:var(--ink-2)}
.checks--on-dark li{border-color:var(--rule-dark)}
.checks--on-dark li:first-child{border-top-color:var(--rule-dark)}
.checks--on-dark .tick{background:transparent;border-color:rgba(255,255,255,.75)}
.checks--on-dark .tick svg{color:var(--sky)}
.band--sky-deep .checks--on-dark .tick svg{color:var(--sky-lt)}
@media (min-width:768px){
  .checks--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}
  .checks--cols li:nth-child(2){border-top:var(--hair)}
  .checks--cols.checks--on-dark li:nth-child(2){border-top-color:var(--rule-dark)}
  .checks--cols.checks--flush li:nth-child(2){border-top:0}
}
/* DEEP tag: marks lines only in Deep / Move-out */
.tag-deep{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid var(--orchid-ink);border-radius:3px;font:700 .65rem/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--orchid-ink);vertical-align:2px;white-space:nowrap}
/* draw-in: JS adds .is-drawn; --i set per line */
.js [data-draw] .tick use{stroke-dashoffset:40;transition:stroke-dashoffset 260ms var(--ease);transition-delay:calc(var(--i,0) * 140ms + 200ms)}
.js [data-draw].is-drawn .tick use{stroke-dashoffset:0}

/* ---------- 10. clipboard sheet ---------- */
.sheet{position:relative;max-width:460px;margin:14px 0 0;background:var(--card);color:var(--ink);border:var(--border);border-radius:var(--r);box-shadow:var(--shadow-paper);padding:34px 24px 18px}
.sheet__clip{position:absolute;top:-9px;left:50%;width:72px;height:16px;margin-left:-36px;border-radius:4px;background:var(--ink)}
.sheet__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--s4);row-gap:2px;padding-bottom:var(--s3);border-bottom:var(--border)}
.sheet__room{font:400 1.5rem/1 var(--f-display)}
.sheet__tier{margin:0;min-width:0;color:var(--orchid-ink);font-size:.6875rem;white-space:nowrap}
@media (max-width:420px){ .sheet__tier{white-space:normal;flex-basis:100%} }  /* phones: the tier drops under the room name instead of running out of the card */
.sheet .checks li{font-size:.97rem;padding-block:10px}
.sheet .checks li:first-child{border-top:0}
.sheet__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-top:var(--s4)}
.sheet__sign{display:flex;align-items:baseline;gap:10px;font-size:var(--t-small);color:var(--ink-2)}
.sheet__sign .hand{font-size:1.6rem;line-height:1;transform:rotate(-3deg);display:inline-block}
.sheet__mark{height:40px;width:auto;flex:0 0 auto}
.sheet__blank{display:inline-block;width:6.5em;margin-left:4px;border-bottom:1.5px solid var(--ink);transform:translateY(2px)}
@media (min-width:1024px){
  .sheet--tilt{transform:rotate(-1.25deg)}
  .sheet{padding:38px 30px 20px}
}
/* punch-list variant (construction): same sheet, job-site header */
.sheet--punch .sheet__tier{color:var(--sky-ink)}
/* intake sheet: labelled blanks instead of ticks (business walkthrough, construction job) */
.sheet__dl{margin:0}
.sheet__dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding-block:13px;border-bottom:var(--hair)}
.sheet__dl dt{font-weight:600;font-size:.97rem}
.sheet__dl dd{margin:0;color:var(--ink-2)}
.sheet__dl .sheet__blank{width:7.5em;margin:0}
/* a white sheet on an ink/sky-deep band keeps light-ground colours; its clip goes light so it doesn't vanish into the band */
.band--ink .sheet .sheet__tier,.band--sky-deep .sheet .sheet__tier{color:var(--orchid-ink)}
.band--ink .sheet--punch .sheet__tier,.band--sky-deep .sheet--punch .sheet__tier{color:var(--sky-ink)}
.band--ink .sheet__clip,.band--sky-deep .sheet__clip{background:var(--sky-lt)}

/* ---------- 11. ledger (service rows) ---------- */
.ledger{border-top:var(--border)}
.ledger__row{display:grid;gap:4px;padding-block:var(--s5);border-bottom:var(--hair)}
.ledger__name{font-size:var(--t-h3);color:var(--ink)}
.ledger__for{font-style:italic;color:var(--ink-2)}
.ledger__desc{color:var(--ink);max-width:52ch}
@media (min-width:768px){
  .ledger__row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s6);align-items:baseline}
  .ledger__name{grid-column:1;grid-row:1}
  .ledger__for{grid-column:1;grid-row:2}
  .ledger__desc{grid-column:2;grid-row:1 / span 2}
}
.band--ink .ledger,.band--sky-deep .ledger{border-top-color:#fff}
.band--ink .ledger__row,.band--sky-deep .ledger__row{border-color:var(--rule-dark)}
.band--ink .ledger__name,.band--ink .ledger__desc,.band--sky-deep .ledger__name,.band--sky-deep .ledger__desc{color:#fff}
.band--ink .ledger__for,.band--sky-deep .ledger__for{color:var(--on-dark-2)}

/* ---------- 12. reviews (real Google reviews, verbatim) ---------- */
/* <figure class="review [review--feature|review--short]">
     <blockquote class="review__q"><p>…verbatim…</p></blockquote>
     <figcaption class="review__by"><span class="review__name">Anjuli H.</span><span class="review__src">Google review · 2022</span></figcaption>
   </figure>  No stars, no averages, no counts. */
.review{position:relative;margin:0;padding-top:var(--s5);border-top:var(--border)}
.review::before{content:"\201C";position:absolute;top:-.12em;right:0;font:400 4.5rem/1 var(--f-display);color:var(--orchid);pointer-events:none}
.review__q{margin:0;font:400 1.2rem/1.42 var(--f-display);color:var(--ink);max-width:40ch;padding-right:2.6rem}
.review__q p + p{margin-top:var(--s3)}
.review--feature .review__q{font-size:1.14rem;line-height:1.42;max-width:38ch}
@media (min-width:768px){ .review--feature .review__q{font-size:1.32rem;line-height:1.42} }
.review--short .review__q{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);line-height:1.18;max-width:22ch}
.review__by{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s3);margin-top:var(--s5);font-size:var(--t-small)}
.review__name{font-weight:700;color:var(--ink)}
.review__src{color:var(--ink-2)}
.review__src::before{content:"";display:inline-block;width:5px;height:5px;margin:0 10px 2px 0;border-radius:50%;background:var(--orchid)}
.band--ink .review,.band--sky-deep .review{border-top-color:#fff}
.band--ink .review__q,.band--sky-deep .review__q,.band--ink .review__name,.band--sky-deep .review__name{color:#fff}
.band--ink .review__src,.band--sky-deep .review__src{color:var(--on-dark-2)}
.reviews{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}

/* ---------- 13. fork cards (door hanger · front-desk clipboard · yard sign) ---------- */
.fork{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6) 24px;align-items:start}
@media (min-width:768px){ .fork{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:768px) and (max-width:1023px){ .fork > :last-child:nth-child(odd){grid-column:1 / -1} }  /* tablet: no lone card on the last row */
@media (min-width:1024px){ .fork{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fork__card{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r);transition:transform 160ms var(--ease)}
.fork__card h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)}
.fork{padding-top:8px}  /* room for the desk clip tab */
@media (max-width:767px){ .fork{gap:var(--s6)} .fork__card{padding:var(--s5) 20px 20px;gap:var(--s2)} .hanger{padding-top:68px} .fork__list{font-size:.9375rem} .fork__card .link-go{padding-top:var(--s2)} .yardsign{margin-bottom:30px} .yardsign::before,.yardsign::after{height:30px;bottom:-30px} }
.fork__card .kicker{margin:0}
.fork__list{color:var(--ink-2);max-width:40ch}
.fork__card .link-go{margin-top:auto;padding-top:var(--s4);align-self:flex-start}
.fork__card .link-go::before{content:"";position:absolute;inset:0;border-radius:inherit}
.fork__card:hover{transform:translateY(-3px)}
.fork__card:focus-within{outline:3px solid var(--sky-ink);outline-offset:3px}
.fork__card .link-go:focus-visible{outline:0}
/* door hanger: a round hole with the slit up to the top edge (both paper-filled, so they read as cut-outs;
   the fork sits on band--paper) */
.hanger{background:var(--card);border:var(--border);border-radius:24px 24px var(--r) var(--r);padding-top:72px}
.hanger::after{content:"";position:absolute;left:50%;top:16px;width:34px;height:34px;margin-left:-17px;border:var(--border);border-radius:50%;background:var(--paper);pointer-events:none}
.hanger::before{content:"";position:absolute;left:50%;top:-1.5px;width:6px;height:19px;margin-left:-3px;background:var(--paper);border-inline:1.5px solid var(--ink);pointer-events:none;z-index:1}
.hanger .kicker{color:var(--orchid-ink)}
/* front-desk clipboard: ink card with a clip tab */
.deskclip{background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.deskclip::after{content:"";position:absolute;top:-8px;left:var(--s5);width:64px;height:14px;border-radius:3px;background:var(--sky)}
.deskclip .kicker{color:var(--sky-lt)}
.deskclip .fork__list{color:var(--on-dark-2)}
/* job-site yard sign: sky-deep panel on two stakes */
.yardsign{background:var(--sky-deep);color:#fff;border:1.5px solid var(--sky-deep);border-radius:3px;margin-bottom:34px}
.yardsign::before,.yardsign::after{content:"";position:absolute;bottom:-36px;width:6px;height:36px;background:var(--ink-2);border-radius:0 0 2px 2px}
.yardsign::before{left:22%}
.yardsign::after{right:22%}
.yardsign .kicker{color:var(--sky-lt)}
.yardsign .fork__list{color:#D5E4EE}
.yardsign .link-go::before{bottom:-36px}
@media (min-width:768px){
  /* one top padding for all three, so kickers and titles share a line; only the clip, the hole and the stakes differ */
  .fork__card{padding:76px var(--s6) var(--s6)}
}

/* ---------- 14. memo card (business / visit / construction "job sheet") ---------- */
.memo{position:relative;background:var(--card);color:var(--ink);border:var(--border);border-radius:var(--r);box-shadow:var(--shadow-paper);padding:var(--s5)}
@media (min-width:768px){ .memo{padding:var(--s6)} }
.memo__kicker{color:var(--orchid-ink);margin-bottom:var(--s3)}
/* a white memo on an ink/sky-deep band keeps light-ground colours (the band rules would make them on-dark) */
.band--ink .memo .memo__kicker,.band--sky-deep .memo .memo__kicker{color:var(--orchid-ink)}
.band--ink .memo a:not(.btn),.band--sky-deep .memo a:not(.btn){color:var(--sky-ink)}
.band--ink .memo a:not(.btn):hover,.band--sky-deep .memo a:not(.btn):hover{color:var(--ink)}
.memo__title{font-size:var(--t-h3);margin-bottom:var(--s4)}
.memo__dl{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--border)}
.memo__dl > div{display:grid;gap:2px;padding-block:var(--s3);border-bottom:var(--hair)}
.memo__dl dt{font:700 var(--t-label)/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.memo__dl dd{margin:0}
@media (min-width:480px){ .memo__dl > div{grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s4)} }
.memo .actions{margin-top:var(--s5)}
.memo__note{position:absolute;right:var(--s4);top:-1.9em;transform:rotate(2deg)}
.band--ink .memo__note,.band--sky-deep .memo__note{color:var(--orchid-lt)}
.memo__status{min-height:1.4em;margin-top:var(--s3);font-size:var(--t-small);font-weight:600;color:var(--ok)}
.memo__status:empty{min-height:0;margin-top:0}  /* stays in the DOM as the live region */

/* ---------- 15. steps (ruled rows) ---------- */
.steps{list-style:none;margin:0;padding:0;border-top:var(--border)}
.steps__row{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s2);padding-block:var(--s5);border-bottom:var(--hair)}
.steps__n{grid-row:1 / span 2;display:grid;place-items:end center;width:2.1rem;height:2.75rem;padding-bottom:.42rem;margin-top:-.7rem;font:400 1.15rem/1 var(--f-display);color:var(--orchid-ink);font-variant-numeric:lining-nums;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 132'%3E%3Cpath d='M50 4C54 26 70 42 82 58C92 72 96 82 96 90C96 113 75 128 50 128S4 113 4 90C4 82 8 72 18 58C30 42 46 26 50 4Z' fill='none' stroke='%23A2347E' stroke-width='5'/%3E%3C/svg%3E") center/contain no-repeat}
.steps__title{font-size:var(--t-h3)}
.steps__row p{color:var(--ink-2);max-width:52ch}
@media (min-width:768px){
  .steps__row{grid-template-columns:4rem minmax(0,3fr) minmax(0,5fr);column-gap:var(--s6);align-items:baseline;padding-block:var(--s6)}
  .steps__n{grid-row:auto;width:2.5rem;height:3.3rem;font-size:1.35rem;padding-bottom:.5rem}
}
.band--ink .steps,.band--sky-deep .steps{border-top-color:#fff}
.band--ink .steps__row,.band--sky-deep .steps__row{border-color:var(--rule-dark)}
.band--ink .steps__n,.band--sky-deep .steps__n{color:var(--orchid-lt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 132'%3E%3Cpath d='M50 4C54 26 70 42 82 58C92 72 96 82 96 90C96 113 75 128 50 128S4 113 4 90C4 82 8 72 18 58C30 42 46 26 50 4Z' fill='none' stroke='%23F2B5DC' stroke-width='5'/%3E%3C/svg%3E")}
.band--ink .steps__row p,.band--sky-deep .steps__row p{color:var(--on-dark-2)}
/* plain schedule rows (construction): no drop outline, the number set as a kicker.
   The drop-numbered steps appear on how-we-work only. */
.steps--plain .steps__n{display:block;grid-row:auto;width:auto;height:auto;margin:0;padding:0;background:none;font:700 .8125rem/1.9 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink);white-space:nowrap}
.steps--plain .steps__row{grid-template-columns:minmax(0,1fr)}
.steps--plain .steps__n::before{content:"Step "}
@media (min-width:768px){ .steps--plain .steps__row{grid-template-columns:5.5rem minmax(0,3fr) minmax(0,5fr)} .steps--plain .steps__n{width:auto;height:auto;font-size:.8125rem;padding:0} }

/* ---------- 16. room tabs ---------- */
.tabs__list{display:flex;gap:6px;position:relative;z-index:1;margin-bottom:-1.5px}
.tabs__list [role="tab"]{flex:0 0 auto;min-height:44px;padding:0 16px;font-weight:600;font-size:.9375rem;color:var(--ink-2);background:var(--paper-2);border:1.5px solid var(--rule);border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.tabs__list [role="tab"][aria-selected="true"]{background:var(--card);color:var(--ink);border-color:var(--ink)}
.tabs__panel{background:var(--card);border:var(--border);border-radius:0 var(--r) var(--r) var(--r);padding:var(--s3) var(--s5) var(--s5)}
.tabs__panel .checks li:first-child,.tabs__panel .checks--cols li:nth-child(2){border-top:0}
.tabs__panel.is-fading{animation:tabfade 160ms var(--ease)}
@keyframes tabfade{from{opacity:0}to{opacity:1}}
/* no JS: every panel shows, stacked, each under its own room name; the tab row is hidden */
html:not(.js) .tabs__list{display:none}
html:not(.js) .tabs__panel + .tabs__panel{margin-top:var(--s5)}
.tabs__h{font:400 var(--t-h3)/1.15 var(--f-display);padding-block:var(--s3) var(--s2)}
.js .tabs__h{display:none}  /* with JS the tab names the panel */
.tabs__note{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s4);font-size:var(--t-small);color:var(--ink-2)}
.tabs__note .bubbles{flex:0 0 auto;width:16px;margin-top:2px}
@media (max-width:599px){
  .tabs__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:var(--s3)}
  .tabs__list [role="tab"]{border:1.5px solid var(--rule);border-radius:var(--r);padding-inline:8px}
  .tabs__panel{border-radius:var(--r);padding-inline:var(--s4)}
}

/* ---------- 17. tier table (homes.html, 768+) ---------- */
.tier{display:none}
@media (min-width:768px){
  .tier{display:table;width:100%;border-collapse:collapse;background:var(--card);border:var(--border);border-radius:var(--r)}
  .tier caption{caption-side:bottom;text-align:left;padding-top:var(--s3);font-size:var(--t-small);color:var(--ink-2)}
  .tier th,.tier td{padding:12px 16px;border-bottom:var(--hair);text-align:left;vertical-align:middle}
  .tier thead th{position:sticky;top:var(--header-h);background:var(--card);font:700 var(--t-label)/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;border-bottom:var(--border)}
  .tier td{text-align:center;width:16%}
  .tier th[scope="row"]{font-weight:400}
  .tier .tier__dash{display:inline-block;width:14px;border-top:1px solid var(--ink-2)}
  .tier .tick{display:inline-block}
}

/* ---------- 18. estimate form ---------- */
.quote{background:var(--card);border:var(--border);border-radius:var(--r);padding:var(--s5);display:grid;gap:var(--s5)}
@media (min-width:768px){ .quote{padding:var(--s6)} }
.quote fieldset{border:0;margin:0;padding:0;min-width:0}
.field{display:grid;gap:var(--s2)}
.field__label,.quote legend{display:block;font-weight:600;font-size:.9375rem;color:var(--ink);padding:0;margin-bottom:var(--s2)}
.field__opt{font-weight:400;color:var(--ink-2)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:12px 14px;background:#fff;border:var(--border);border-radius:var(--r);font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#737D88}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.field [aria-invalid="true"]{border-color:var(--err);border-width:2px}
.field__err{font-size:var(--t-small);font-weight:600;color:var(--err)}
.quote__row{display:grid;gap:var(--s5)}
@media (min-width:600px){ .quote__row{grid-template-columns:repeat(2,minmax(0,1fr))} .quote__row:has(> .field[hidden]) > .field:not([hidden]){grid-column:1 / -1} }
/* segmented toggle: 2 or 3 options */
.seg__opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:var(--border);border-radius:var(--r);background:#fff}
.seg__opts label{position:relative;display:block}
.seg__opts label + label{border-left:var(--border)}
.seg__opts input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg__opts span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 8px;font-weight:600;line-height:1.15;text-align:center;cursor:pointer}
.seg__opts input:checked + span{background:var(--sky-ink);color:#fff}
.seg__opts label:first-child span{border-radius:calc(var(--r) - 1.5px) 0 0 calc(var(--r) - 1.5px)}
.seg__opts label:last-child span{border-radius:0 calc(var(--r) - 1.5px) calc(var(--r) - 1.5px) 0}
.seg__opts input:focus-visible + span{position:relative;z-index:1;outline:3px solid var(--focus);outline-offset:2px;box-shadow:inset 0 0 0 2px #fff}
@media (max-width:420px){ .seg__opts span{font-size:.9rem} }
/* chips (the only pill shape on the site) */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips label{position:relative}
.chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink-2);border-radius:var(--r-pill);background:#fff;font-size:.9375rem;cursor:pointer}
.chips span::before{content:"";flex:0 0 14px;width:14px;height:14px;border:1.5px solid var(--ink);border-radius:3px}
.chips input:checked + span{border-color:var(--sky-ink);background:var(--mist);color:var(--sky-ink);font-weight:600}
.chips input:checked + span::before{border-color:var(--sky-ink);background:var(--sky-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/11px no-repeat}
.chips input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.chips__note{margin-top:var(--s3)}
.quote__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
/* no JS = the form can't send: hide the submit row; a <noscript> .quote__nojs line says call or text instead */
html:not(.js) .quote__actions{display:none}
.quote__nojs{font-weight:600;color:var(--ink)}
.quote__email{font-weight:600}
.quote__status{font-weight:600;color:var(--ok)}
.quote__status:empty{display:none}
.quote__copy{margin-top:var(--s3);padding:var(--s3) var(--s4);white-space:pre-wrap;font:400 var(--t-small)/1.5 var(--f-text);color:var(--ink);background:var(--paper-2);border-radius:var(--r);user-select:all}  /* desktop, no FORM_ENDPOINT: their message, shown and copied */
@media (max-width:599px){ .quote__actions .btn{width:100%} .quote__actions{justify-content:center} .chips span{padding:0 12px;font-size:.875rem;gap:7px} }

/* ---------- 19. talk block ("Rather just talk?") ---------- */
.talk{padding-top:var(--s5);border-top:var(--border)}
.talk__q{font-weight:600;margin-bottom:var(--s3)}
.talk .kicker{margin-bottom:var(--s2)}
.phone-xl{display:inline-block;font:600 var(--t-phone-xl)/1 var(--f-text);letter-spacing:-.01em;color:var(--sky-ink);text-decoration:none;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.phone-xl:hover{text-decoration:underline;text-decoration-thickness:2px}
.talk__email{display:inline-block;margin-top:var(--s3)}
.talk__facts{list-style:none;margin-top:var(--s5);display:grid;gap:var(--s2);font-size:var(--t-small);color:var(--ink-2)}
.talk__facts b{color:var(--ink);font-weight:600}

/* 19b. line CTA: the last band before the footer is ONE sentence with the number as the sms: link
   (the footer's poster number follows straight after, so no button block). <section class="band band--paper cta-line"> */
.cta-line{border-top:var(--hair);padding-block:var(--s7)}
.cta-line__h{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.35rem);line-height:1.2;max-width:none;text-wrap:balance}
.cta-line__h a{color:var(--sky-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.cta-line__h a:hover{color:var(--ink)}
.cta-line__more{margin-top:var(--s3);color:var(--ink-2)}

/* ---------- 20. footer ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark-2);padding-top:var(--s8)}
.site-footer a{color:#fff}
.site-footer .kicker{color:var(--sky-lt);margin-bottom:var(--s3)}
.poster{position:relative;display:block;width:fit-content;max-width:100%;font:400 var(--t-poster)/.95 var(--f-display);letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.poster:hover{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.site-footer__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);margin-top:var(--s7);padding-block:var(--s6);border-top:1px solid var(--rule-dark)}
.site-footer__brand img{height:64px;width:auto;margin-bottom:var(--s4)}
@media (min-width:1024px){ .site-footer__brand img{height:88px} }
.site-footer__brand .tagline{margin:0}
.site-footer__brand p + p{margin-top:var(--s3)}
.site-footer h2{font:700 var(--t-label)/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:var(--s4)}
.site-footer ul{list-style:none;display:grid;gap:var(--s2)}
.site-footer ul a{text-decoration:none}
.site-footer ul a:hover{text-decoration:underline}
.site-footer__legal{position:relative;padding-block:var(--s5) var(--s6);border-top:1px solid var(--rule-dark);font-size:var(--t-small)}
/* QR pages (body data-footer="slim"): no grid, so the legal line needs its own air under the poster */
body[data-footer="slim"] .site-footer__legal{margin-top:var(--s7)}
/* pages that end in a .talk block already show the big number: no poster (body data-poster="off") */
body[data-poster="off"] .site-footer__poster{display:none}
body[data-poster="off"] .site-footer__grid{margin-top:0;padding-top:0;border-top:0}
@media (min-width:768px){
  .site-footer__grid{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:24px}
}
@media (min-width:1024px){ .site-footer{padding-top:var(--s9)} }

/* ---------- 21. motifs: wave · bubbles · drop (from her logo; see DESIGN.md 5) ---------- */
/* wave highlight: under ONE word/phrase in ONE H1 per page.
   The mark MUST be the last words of the H1: on any earlier line the wave runs through the next line's ascenders.
   <span class="mark">light switches<svg class="mark__wave" viewBox="0 0 200 24" preserveAspectRatio="none" aria-hidden="true"><use href="#i-wave"/></svg></span> */
.mark{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.mark__wave{position:absolute;left:-.04em;bottom:-.3em;width:calc(100% + .08em);height:.42em;color:var(--sky);z-index:-1;pointer-events:none;overflow:visible}
.band--ink .mark__wave,.band--sky-deep .mark__wave{color:var(--orchid)}
/* bubbles: her three orchid bubbles. <svg class="bubbles" viewBox="0 0 86 104" aria-hidden="true"><use href="#i-bubbles"/></svg> */
.tagline .bubbles{width:19px;margin-top:-8px}
.bubbles{display:inline-block;width:22px;height:auto;aspect-ratio:86/104;color:var(--orchid);flex:0 0 auto}
/* drop outline: <svg class="drop" viewBox="0 0 100 132" aria-hidden="true"><use href="#i-drop"/></svg> */
.drop{display:block;aspect-ratio:100/132;height:auto}

/* ---------- 22. photo slot (hidden until she adds a photo; see README) ---------- */
/* <figure class="photo-slot" data-slot="photo" data-name="home-1" hidden>
     <img src="data:," alt="" width="1200" height="900" loading="lazy" decoding="async">
     <figcaption>Our photo, not stock.</figcaption></figure>
   site.js fills src/alt/caption from PRISTINE.PHOTOS["home-1"] and removes [hidden]. */
.photo-slot{margin:0;max-width:520px}
.photo-slot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:var(--border);border-radius:var(--r);background:var(--paper-2)}
.photo-slot--tall img{aspect-ratio:3/4}
.photo-slot figcaption{margin-top:var(--s3);padding-top:var(--s3);border-top:var(--hair);font-size:var(--t-small);color:var(--ink-2)}
.band--ink .photo-slot figcaption,.band--sky-deep .photo-slot figcaption{color:var(--on-dark-2);border-color:var(--rule-dark)}

/* ---------- 23. page: index ----------
   .hero / .hero__* / .homes-prev / .rev* / .biz-* / .con-row / .con-strip / .est__* are written for index.html only.
   Other pages style their own heroes in assets/css/pages/<page>.css with a page prefix (hm-, bz-, cn-, hw-, hl-, vs-, es-). */
.hero{padding-block:var(--s6) var(--s8)}
/* sized so "Clean down to the" always holds one line (~8.9em wide) */
.hero h1{font-size:min(calc((100vw - 44px) / 8.9), 4.1rem);text-wrap:wrap}
@media (min-width:768px){ .hero h1{font-size:min(calc((100vw - 72px) / 8.9), 4.1rem)} }
@media (min-width:1024px){ .hero h1{font-size:clamp(3.4rem,1.5rem + 3.4vw,4.1rem)} }
.hero .lead{margin-top:var(--s5)}
.hero .actions{margin-top:var(--s6)}
.hero__micro{margin-top:var(--s3)}
.hero__sheet{display:none}
@media (max-width:599px){
  .hero .actions{flex-direction:column;align-items:stretch}
  .hero .actions .btn{width:100%}
}
@media (min-width:1024px){
  .hero{padding-block:var(--s8) var(--s9)}
  .hero__grid{align-items:center}
  .hero__sheet{display:block;justify-self:end;width:100%;max-width:460px}
}
/* homes preview: areas so the mobile sheet sits between copy and ledger */
.homes-prev{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "sheet" "ledger" "act";gap:var(--s7) 24px}
.homes-prev__head{grid-area:head}
.homes-prev__sheet{grid-area:sheet}
.homes-prev__ledger{grid-area:ledger}
.homes-prev__act{grid-area:act;margin-top:0}
@media (min-width:1024px){
  .homes-prev{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"head head head head head ledger ledger ledger ledger ledger ledger ledger" "act act act act act ledger ledger ledger ledger ledger ledger ledger";grid-template-rows:auto 1fr;row-gap:0}
  .homes-prev__sheet{display:none}
  .homes-prev__act{align-self:start;margin-top:var(--s5)}
}
/* reviews band on index: no H2 column. Anjuli is the anchor across 9 columns, Thomas a small second quote under it */
.rev__grid{row-gap:var(--s6)}
.rev__k{margin:0}
.rev__feature .review__q{max-width:none}
@media (min-width:768px){ .rev__feature .review__q{font-size:clamp(1.32rem,.9rem + 1vw,1.62rem);line-height:1.4} }
.rev__note{color:var(--ink-2);max-width:34ch}
.rev__second .review__q{font-size:1.08rem}
@media (min-width:1024px){
  .rev__grid{row-gap:var(--s7)}
  .rev__k{grid-column:1 / -1}
  .rev__feature{grid-column:1 / span 9}
  .rev__note{grid-column:1 / span 3;grid-row:3;padding-top:var(--s5)}
  .rev__second{grid-column:4 / span 6;grid-row:3}
}
@media (max-width:1023px){ .rev__note{order:3} .rev__second{order:2} }
.biz-ticks .kicker,.site-ticks .kicker{color:var(--on-dark-2)}
@media (min-width:1024px){ .biz__grid{align-items:center} .biz-ticks{padding-top:var(--s2)} }
.biz-ticks__also{margin-top:var(--s5);max-width:52ch}
@media (min-width:1024px){
  .est__side{position:sticky;top:calc(var(--header-h) + var(--s6));align-self:start}
}
.est__more{margin-top:var(--s5)}
/* organizing on index: head left, the two ways (whole home / one space) as a short ledger right */
.org-row__head .body{max-width:44ch}
@media (min-width:1024px){ .org-row__grid{align-items:center} }
/* construction on index: one type row + a sky-deep strip (index has ONE clipboard: the hero's) */
.con-row__h{max-width:22ch}
.con-row__p{margin-top:var(--s4);max-width:62ch}
.con-strip{--focus:var(--sky-lt);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6);margin-top:var(--s6);padding:var(--s5);background:var(--sky-deep);color:#fff;border-radius:3px}
.con-strip__t{margin:0;font:400 clamp(1.3rem,1.1rem + .8vw,1.75rem)/1.2 var(--f-display);color:#fff}
.con-strip__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
.con-strip .link-go{color:#fff}
@media (max-width:599px){ .con-strip__act{flex-direction:column;align-items:stretch;width:100%} .con-strip .btn{width:100%} .con-strip .link-go{align-self:flex-start} }
@media (min-width:1024px){ .con-strip{padding:var(--s5) var(--s6)} }

/* ---------- 24. utilities ---------- */
.mt-0{margin-top:0 !important}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)}
@media (min-width:1024px){ .only-mobile{display:none !important} }
@media (max-width:1023px){ .only-desktop{display:none !important} }

/* ---------- 25. motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js [data-draw] .tick use{stroke-dashoffset:0}
}
@media print{
  .site-header,.dock,.skip{display:none}
  body{background:#fff;padding:0}
}