/* ==========================================================================
   09 BATH — site styles
   Tokens: 09_Build_Brand_Guidelines.pdf v1.0 (Montserrat only; #C8482A / #1A1A1A / #F5F1E9)
   Structure/rhythm: 09build-website/style.css (nav grid, CTA pill, section rhythm, hairlines)
   Motion values preserved from the pre-rebrand 09 Bath sections.css.
   ========================================================================== */
:root{
  --terracotta:#C8482A; --ink:#1A1A1A; --paper:#F5F1E9;
  --cream:#E0DDD8; --panel:#EBE5DA; --muted:#6E6A64;
  --rule:rgba(26,26,26,.14); --rule-strong:rgba(26,26,26,.28); --rule-dark:rgba(224,221,216,.18);
  --shell:1320px; --pad-x:clamp(20px,4vw,56px); --section-y:clamp(72px,9vw,130px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Montserrat,'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:16px;
  line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:200;letter-spacing:0}
h1{font-size:clamp(38px,6vw,76px);line-height:1.03}
h2{font-size:clamp(28px,4vw,48px);line-height:1.08}
h3{font-size:clamp(19px,2vw,24px);line-height:1.2}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad-x)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;
  letter-spacing:.30em;text-transform:uppercase;color:var(--terracotta)}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--terracotta);flex:none}
.lede{font-size:clamp(17px,1.4vw,20px);font-weight:300;line-height:1.6;color:var(--muted);max-width:56ch}
.legend{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.idx{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--terracotta)}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:11px;
  font-weight:600;letter-spacing:.20em;text-transform:uppercase;padding:15px 26px;
  background:var(--terracotta);color:var(--paper);border:1px solid var(--terracotta);
  transition:background .14s,border-color .14s;cursor:pointer}
.cta:hover{background:#b13e22;border-color:#b13e22}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta.ghost:hover{background:var(--ink);color:var(--paper)}
.cta.block{width:100%}
.cta[disabled]{opacity:.55;cursor:default}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;border-bottom:1px solid var(--terracotta);
  padding-bottom:5px;transition:color .14s}
.tlink:hover{color:var(--terracotta)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

.section{padding:var(--section-y) 0;border-bottom:1px solid var(--rule)}
.section.flush{border-bottom:0}
.section-head{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end;margin-bottom:60px}
.section-head h2{max-width:22ch;margin-top:20px}
.section-head .lede{margin-top:20px}
@media(max-width:860px){.section-head{grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:40px}}

/* ---------------- header ---------------- */
.nav{position:sticky;top:0;z-index:60;padding:15px 0;border-bottom:1px solid var(--rule);background:var(--paper)}
.nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
.brand img{display:block;height:48px;width:auto}
/* Footer lockup: the white-ink variant of the same mark, for the dark panel. */
.foot-logo{display:block;height:56px;width:auto}
.nav-links{display:flex;gap:clamp(14px,2.2vw,24px);justify-content:center;align-items:center}
.nav-links>li>a{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);padding:6px 0;
  border-bottom:1px solid transparent;white-space:nowrap;transition:color .14s}
.nav-links>li>a:hover{color:var(--ink)}
.nav-links>li>a.on{color:var(--ink);border-bottom-color:var(--terracotta)}
.caret{font-size:7px;color:var(--terracotta);line-height:1;transition:transform .16s}
.has-dd{position:relative}
.has-dd.open>a .caret{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:14px;min-width:340px;
  background:var(--paper);border:1px solid var(--rule);padding:10px 0;display:none;z-index:70}
.has-dd.open>.dd{display:block}
/* Bridge the 14px gap the .dd's margin-top opens between the trigger and the
   panel. Open/close is driven by mouseenter/mouseleave on the <li> (site.js),
   and that strip belongs to neither element -- so moving down towards the menu
   fired mouseleave and closed it before the pointer ever arrived. A transparent
   pseudo-element makes the strip part of .dd, which is a descendant of the li,
   so the pointer never leaves the li's subtree. Keeps the visual offset. */
.dd::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.dd a{display:block;padding:12px 26px;font-size:14px;line-height:1.35}
.dd a:hover{background:var(--panel);color:var(--terracotta)}
.dd a span{display:block;font-size:11.5px;font-weight:300;color:var(--muted);margin-top:3px}
.burger{display:none;flex-direction:column;gap:6px;width:28px;padding:6px 0}
.burger span{display:block;height:1px;background:var(--ink);transition:transform .18s,opacity .18s}
.nav.drawer-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.drawer-open .burger span:nth-child(2){opacity:0}
.nav.drawer-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .nav-inner{grid-template-columns:auto 1fr}
  .burger{display:flex;justify-self:end}
  .nav>.shell>.nav-inner>nav{display:none}
  .nav-inner>.cta{display:none}
  .nav.drawer-open>.shell>.nav-inner>nav{display:block;grid-column:1/-1;margin-top:14px;
    border-top:1px solid var(--rule);padding-top:10px}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links>li{border-bottom:1px solid var(--rule)}
  .nav-links>li>a{justify-content:space-between;padding:16px 0;letter-spacing:.22em}
  .dd{position:static;transform:none;margin:0 0 12px;min-width:0;border:0;background:var(--panel);padding:6px 0}
  .dd a{padding:11px 18px}
  .nav.drawer-open .nav-inner .cta.drawer-cta{display:flex;grid-column:1/-1;margin-top:18px}
}
.cta.drawer-cta{display:none}
/* header-scoped CTA metrics — match 09build's nav pill without resizing site-wide buttons */
.nav-inner>.cta{padding:12px 22px}
.nav-inner>.cta span{font-size:14px}

/* ---------------- page furniture ---------------- */
.crumb{padding:26px 0 0;font-size:11px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--muted)}
.crumb a:hover{color:var(--terracotta)}
.crumb i{font-style:normal;color:var(--terracotta);margin:0 8px}
.crumb b{font-weight:600;color:var(--ink)}
.page-head{padding:52px 0 var(--section-y);border-bottom:1px solid var(--rule)}
.page-head h1{margin-top:20px}
.page-head .lede{margin-top:24px}

/* ---------------- hero ---------------- */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:rgba(245,241,233,.86)}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr 434px;gap:72px;
  align-items:start;padding:clamp(56px,7vw,104px) 0 clamp(64px,8vw,116px)}
.hero h1{margin-top:22px}
.hero .lede{margin-top:26px}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}
@media(max-width:1000px){.hero-inner{grid-template-columns:1fr;gap:44px}}

/* ---------------- forms ---------------- */
.card{background:var(--paper);border:1px solid var(--rule);padding:clamp(24px,3vw,34px)}
.card-head{padding-bottom:22px;border-bottom:1px solid var(--rule)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.tile{border:1px solid var(--rule-strong);padding:16px 8px 13px;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.5;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .14s,color .14s}
.tile svg{width:34px;height:27px}
.tile:hover{border-color:var(--ink);color:var(--ink)}
.tile.on{border-color:var(--terracotta);color:var(--terracotta)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}}
.f{margin-top:14px}
.f label{display:block;font-size:10px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--rule-strong);background:var(--panel);
  height:44px;padding:0 13px;font-size:14px;font-weight:300;border-radius:0;-webkit-appearance:none;appearance:none}
.f textarea{height:88px;padding:12px 13px;line-height:1.6;resize:vertical}
.f select{background-image:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--terracotta);outline:none}
.f [aria-invalid=true]{border-color:var(--terracotta);background:#f6e3dd}
.consent{margin-top:18px;font-size:10px;font-weight:300;line-height:1.6;color:var(--muted)}
/* Consent checkboxes. Same 10px voice as .consent so the block reads as one
   piece of fine print, but each row is a real label: the whole line is the hit
   target, not just the box. The box itself never shrinks below 16px however
   tight the hero card gets — a control you cannot reliably tap is a control
   that silently costs consent. */
.consent-group{margin-top:18px;display:grid;gap:11px}
.consent-opt{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:10px;font-weight:300;line-height:1.6;color:var(--muted)}
.consent-opt input{flex:0 0 auto;width:16px;height:16px;margin:0;
  accent-color:var(--terracotta);cursor:pointer}
.consent-opt a{color:var(--ink);text-decoration:underline}
.consent-opt a:hover{color:var(--terracotta)}
/* validate() in site.js flags the unticked required box the same way it flags
   an empty input, so the visitor is not left hunting for what blocked them. */
.consent-opt input[aria-invalid=true]{outline:2px solid var(--terracotta);outline-offset:2px}
.terms{margin-top:12px;font-size:10px;font-weight:300;color:var(--muted)}
.status{margin-top:12px;font-size:12px;font-weight:400;min-height:1.2em}
.status.err{color:var(--terracotta)}
/* Turnstile. Managed + interaction-only, so it usually renders nothing and
   collapses to zero height; the margin only applies when a challenge shows. */
.cf-turnstile{margin-top:20px}
.cf-turnstile:empty{margin-top:0}

/* ---------------- gallery ---------------- */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.gal .fr{display:block;overflow:hidden;background:var(--panel);aspect-ratio:4/3;cursor:zoom-in}
.gal .fr img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal .fr:hover img{transform:scale(1.04)}
.gal figcaption{margin-top:15px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.gal figcaption span{display:block;margin-top:5px;font-size:12.5px;font-weight:300;letter-spacing:0;
  text-transform:none;color:var(--muted)}
@media(max-width:1000px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--rule-strong);color:var(--muted)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(26,26,26,.94);display:none;
  align-items:center;justify-content:center;padding:5vh 5vw}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:78vh;width:auto;object-fit:contain}
.lb figcaption{margin-top:18px;text-align:center;font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}
.lb figcaption span{display:block;margin-top:6px;font-size:13px;font-weight:300;letter-spacing:0;
  text-transform:none;color:var(--cream)}
.lb-x{position:absolute;top:24px;right:28px;font-size:30px;font-weight:200;color:var(--paper)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;font-weight:200;color:var(--paper);padding:16px}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}

/* ---------------- stats ---------------- */
.band{background:var(--ink);color:var(--cream)}
.band h2{color:var(--paper)}
.band .lede{color:var(--cream)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:clamp(64px,8vw,104px) 0}
.stat strong{display:block;font-size:clamp(42px,5vw,66px);font-weight:200;line-height:1;color:var(--paper)}
.stat strong em{font-style:normal;color:var(--terracotta)}
.stat span{display:block;margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cream)}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr);gap:36px 24px}}

/* ---------------- service cards ---------------- */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.svc{background:var(--paper);padding:42px 38px 38px;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px;transition:background .14s}
.svc:hover{background:var(--panel)}
.svc p{font-size:15px;line-height:1.7;color:var(--muted)}
.svc .tlink{margin-top:6px}
@media(max-width:1000px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.svcs{grid-template-columns:1fr}.svc{padding:32px 26px}}

/* ---------------- product tiles ---------------- */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.prod{display:block}
.prod .fr{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--panel)}
.prod .fr img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod:hover .fr img{transform:scale(1.04)}
.prod .lbl{display:block;margin-top:15px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.prod:hover .lbl{color:var(--terracotta)}
@media(max-width:1000px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------- grids / cards ---------------- */
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.g4>div{background:var(--paper);padding:34px 30px}
.g4 h3{margin-top:12px;font-size:20px}
.g4 p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--muted)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g4{grid-template-columns:1fr}}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
@media(max-width:900px){.g3{grid-template-columns:1fr;gap:32px}}
.why{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.why>article{background:var(--paper);padding:34px 26px}
.why-letter{display:block;font-size:34px;font-weight:200;color:var(--terracotta);line-height:1}
.why h3{margin-top:14px;font-size:18px}
.why p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--muted)}
@media(max-width:1000px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.why{grid-template-columns:1fr}}
.quote{margin:60px 0 0;padding:40px 0 0;border-top:1px solid var(--rule)}
.quote p{font-size:clamp(21px,2.6vw,30px);font-weight:200;line-height:1.4;max-width:34ch}
.quote footer{margin-top:24px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.quote footer span{display:block;margin-top:6px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.steps>li{padding-top:26px;border-top:1px solid var(--rule)}
.steps h3{margin-top:14px}
.steps p{margin-top:14px;font-size:15px;font-weight:300;line-height:1.75;color:var(--muted)}
.band .steps>li{border-top-color:var(--rule-dark)}
.band .steps h3{color:var(--paper)}
.band .steps p{color:var(--cream)}
@media(max-width:900px){.steps{grid-template-columns:1fr;gap:32px}}
.learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.learn .fr{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--panel)}
.learn .fr img{width:100%;height:100%;object-fit:cover}
.learn .meta{margin-top:16px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta)}
.learn h3{margin-top:10px;font-size:20px;line-height:1.3}
.learn .tlink{margin-top:16px}
@media(max-width:900px){.learn{grid-template-columns:1fr;gap:36px}}

/* ---------------- accordion ---------------- */
.acc{max-width:900px;border-top:1px solid var(--rule)}
.acc>div{border-bottom:1px solid var(--rule)}
.acc button{width:100%;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  padding:26px 0;text-align:left}
.acc button h3{font-size:clamp(17px,1.8vw,21px)}
.acc button i{font-style:normal;font-size:22px;font-weight:200;color:var(--terracotta)}
.acc .body{display:none;padding-bottom:26px}
.acc .body p{max-width:64ch;font-size:15.5px;line-height:1.75;color:var(--muted)}
.acc>div.on .body{display:block}

.est-sum{margin-top:20px;border-top:1px solid var(--rule);padding-top:20px;display:grid;
  grid-template-columns:auto 1fr;gap:10px 24px;font-size:14px}
.est-sum dt{font-size:10.5px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--muted);align-self:center}
.est-sum dd{margin:0;font-weight:300}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 520px;gap:88px;align-items:start}
@media(max-width:1080px){.contact-grid{grid-template-columns:1fr;gap:56px}}

/* ---------------- booking calendar ----------------
   Structure mirrors 09build's .cal so calendar.js is byte-identical on both
   sites; only the tokens differ (Montserrat + terracotta here, per the brand
   guide, rather than 09build's JetBrains Mono). */
.cal{background:var(--paper);border:1px solid var(--rule);padding:28px}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.cal-head .month{font-size:18px;font-weight:300;letter-spacing:.02em}
.cal-head .nav-btns{display:flex;gap:6px}
.cal-head .nav-btns button{border:1px solid var(--rule);padding:6px 12px;font-size:12px;
  color:var(--muted);cursor:pointer;transition:border-color .14s,color .14s}
.cal-head .nav-btns button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.cal-head .nav-btns button:disabled{opacity:.3;cursor:default;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--muted);
  text-align:center;padding:8px 0;text-transform:uppercase}
.cal-day{appearance:none;background:none;padding:0;width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  color:var(--ink);cursor:pointer;border:1px solid transparent;transition:border-color .14s}
.cal-day:hover:not(:disabled){border-color:var(--rule-strong)}
.cal-day:disabled{cursor:default}
.cal-day.muted{color:var(--muted);opacity:.35}
.cal-day.taken{color:var(--muted);text-decoration:line-through}
/* Past the booking window — closed, not booked. Deliberately not struck out. */
.cal-day.beyond{color:var(--muted);opacity:.4;cursor:default}
.cal-day.today{border-color:var(--rule-strong)}
.cal-day.selected{background:var(--terracotta);color:var(--paper);border-color:var(--terracotta)}
.slots{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
.slots .k{font-size:10.5px;font-weight:600;letter-spacing:.22em;color:var(--terracotta);
  text-transform:uppercase;margin-bottom:12px}
.slot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.slot{appearance:none;background:none;width:100%;font-size:12px;padding:11px 0;text-align:center;
  border:1px solid var(--rule);color:var(--ink);cursor:pointer;transition:border-color .14s}
.slot:hover{border-color:var(--ink)}
.slot.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* A slot read from a read-only feed is a request, not a held booking.
   See functions/availability.js before rewording this. */
.cal-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.dl{margin:0;display:grid;grid-template-columns:150px 1fr}
.dl dt{padding:26px 0;border-bottom:1px solid var(--rule);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.dl dd{margin:0;padding:26px 0;border-bottom:1px solid var(--rule);font-size:19px;font-weight:300;line-height:1.6}
.dl dd a:hover{color:var(--terracotta)}
@media(max-width:560px){.dl{grid-template-columns:1fr}.dl dt{padding-bottom:6px;border:0}}
.note{margin-top:48px;padding:30px 32px;background:var(--panel);border-left:1px solid var(--terracotta)}
.note ol{margin-top:16px}
.note li{display:grid;grid-template-columns:26px 1fr;gap:14px;font-size:14.5px;font-weight:300;
  line-height:1.7;color:var(--muted)}
.note li+li{margin-top:12px}

/* ---------------- thankyou ---------------- */
.ty{padding:clamp(72px,10vw,150px) 0;text-align:center}
.ty .eyebrow{justify-content:center}
.ty h1{margin-top:22px}
.ty .lede{margin:26px auto 0;text-align:left;max-width:52ch}
.ty .actions{justify-content:center}

/* ---------------- footer ---------------- */
.foot{background:var(--ink);color:var(--cream);padding:clamp(64px,8vw,100px) 0 36px}
.foot a:hover{color:var(--terracotta)}
.foot-top{display:grid;grid-template-columns:1.1fr 2fr;gap:72px}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr;gap:48px}}
.foot h4{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terracotta);margin:0 0 20px}
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
@media(max-width:700px){.foot-nav{grid-template-columns:repeat(2,1fr);gap:36px 24px}}
.foot-nav li{font-size:14px;font-weight:300;line-height:2.1}
.foot address{font-size:14px;font-weight:300;line-height:2;font-style:normal;margin-top:22px}
.foot-bottom{margin-top:80px;padding-top:28px;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:300}
.foot-legal{display:flex;gap:28px}

/* ==========================================================================
   PERSONALITY PASS — restoring the original 09 Bath character.
   Values lifted from the pre-rebrand sections.css (git HEAD) so the hero
   reads the way the manager approved it.
   ========================================================================== */

/* ---- 01 HERO: full-bleed photo, ink overlay, centred copy, card in the image ---- */
/* overflow MUST stay visible: the lead card below hangs past the bottom edge
   by a negative margin, and hiding overflow here clips it. The photo is
   contained by .hero-bg instead, which is where the clipping is actually
   wanted. This overrides the overflow:hidden in the base .hero rule above. */
.hero{position:relative;isolation:isolate;overflow:visible;
  background:var(--panel);color:var(--cream);
  padding:clamp(52px,7vw,96px) 0 0;text-align:center;border-bottom:0}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* Ink at 82% — the original comment: "so cream type clears WCAG AA over any photograph" */
.hero-overlay{position:absolute;inset:0;z-index:-1;background:rgba(26,26,26,.82)}
.hero-inner{display:flex;flex-direction:column;align-items:center;padding-bottom:0}
.hero-eyebrow{color:var(--terracotta)}
.hero h1{max-width:24ch;margin-top:22px;color:var(--paper)}
.hero-lede{color:rgba(224,221,216,.8);max-width:54ch;margin:26px auto clamp(38px,5vw,56px)}
.dot{color:var(--terracotta)}

/* Lead card — paper panel sitting in the photograph, overhanging the fold. */
.hero-card{width:min(38rem,100%);background:var(--paper);color:var(--ink);text-align:left;
  margin-bottom:calc(-1 * clamp(30px,4vw,64px));box-shadow:0 24px 60px rgba(26,26,26,.28);
  overflow:hidden;border:0;padding:0}
.hero-card-head{background:var(--ink);color:var(--cream);
  padding:clamp(22px,3vw,34px) clamp(26px,3.5vw,44px)}
.hero-card-offer{font-size:clamp(27px,4vw,40px);font-weight:200;line-height:1.1}
.hero-card-offer strong{font-weight:500;color:var(--terracotta);white-space:nowrap}
.hero-card-sub{margin-top:12px;font-size:clamp(15px,1.4vw,17px);font-weight:300;line-height:1.5;
  color:rgba(224,221,216,.8);max-width:36ch}
.hero-form{padding:clamp(26px,3.5vw,38px) clamp(26px,3.5vw,44px) clamp(26px,3vw,34px)}
/* the section after the hero has to clear the overhanging card */
.after-hero{padding-top:calc(var(--section-y) + clamp(30px,4vw,64px))}

/* ==========================================================================
   HOME HERO — one screen (desktop only, >=901px)
   --------------------------------------------------------------------------
   The centred stack put the lead card BELOW the headline, so the form began
   near the fold and its lower half was never visible at load. The card is the
   tall element, so the fix is to stand it BESIDE the copy rather than under it
   — .hero-inner already carried `grid-template-columns:1fr 434px` at line 127
   before the rebrand overrode it to a centred flex column, so this restores
   that intent rather than inventing a new layout.
   The palette, type and card treatment are untouched: same behaviour as
   09 Build, still 09 Bath's look.
   ========================================================================== */
@media(min-width:901px){
  .hero{padding:clamp(14px,1.6vw,22px) 0 0;text-align:left}
  /* Horizontal padding restored explicitly. .hero-inner is the SAME element as
     .shell, and the base rule's `padding: <y> 0 <y>` shorthand zeroes the
     `0 var(--pad-x)` that .shell sets -- so hero content sat at the shell's
     border edge while the nav sat at its content edge, 56px to the right. The
     old centred layout hid that; left-aligning the copy exposed it as the
     intro and badges hugging the far left, out of line with the logo above. */
  .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 434px;gap:clamp(32px,4vw,60px);
    align-items:center;padding-left:var(--pad-x);padding-right:var(--pad-x);padding-bottom:0}
  .hero-copy{min-width:0}
  .hero h1{max-width:18ch;margin-top:14px;font-size:clamp(34px,3.6vw,52px)}
  .hero-lede{margin:18px 0 0;max-width:46ch;font-size:clamp(15px,1.25vw,17px)}

  /* The card no longer overhangs: an overhang only reads as intentional when
     the card is the page's centrepiece. Beside the copy it just pushes the
     submit button off-screen, which is the whole problem being solved. */
  .hero-card{margin-bottom:0;width:100%}
  .hero-card-head{padding:clamp(12px,1.3vw,15px) clamp(22px,2.4vw,30px)}
  .hero-card-offer{font-size:clamp(21px,2vw,27px)}
  .hero-card-sub{margin-top:7px;font-size:13.5px;line-height:1.45}
  .hero-form{padding:clamp(13px,1.4vw,16px) clamp(22px,2.4vw,30px) clamp(12px,1.3vw,15px)}
  .hero-form .tiles{gap:8px;margin-top:9px}
  .hero-form .tile{padding:10px 6px 8px}
  .hero-form .row{gap:10px;margin-top:10px}
  .hero-form .f{margin-top:10px}
  .hero-form .f input{height:36px}
  .hero-form .consent{margin-top:9px;font-size:9.5px;line-height:1.45}
  .hero-form .consent-group{margin-top:9px;gap:8px}
  .hero-form .consent-opt{font-size:9.5px;line-height:1.45}
  .hero-form .terms{margin-top:8px}
  .after-hero{padding-top:var(--section-y)}
}

/* Short laptops (a 1366x768 leaves ~660px under the header) squeeze one step
   further rather than giving up on the fold. */
@media(min-width:901px) and (max-height:860px){
  .hero{padding-top:12px}
  .hero h1{font-size:clamp(28px,2.4vw,36px);margin-top:8px}
  .hero-lede{margin-top:10px;font-size:14px}
  .hero-trust{margin-top:14px;padding-top:12px;gap:10px 16px}
  .hero-card-head{padding:10px 22px}
  .hero-card-offer{font-size:19px}
  .hero-card-sub{margin-top:4px;font-size:12px;line-height:1.35}
  .hero-form{padding:11px 22px 12px}
  .hero-form .legend{font-size:9.5px}
  .hero-form .tiles{gap:6px;margin-top:7px}
  .hero-form .tile{padding:6px 4px 5px;font-size:10px}
  .hero-form .tile svg{height:18px}
  .hero-form .row{gap:8px;margin-top:8px}
  .hero-form .f{margin-top:8px}
  .hero-form .f label{font-size:9px}
  .hero-form .f input{height:31px}
  .hero-form .consent{margin-top:7px;font-size:8.5px;line-height:1.38}
  .hero-form .consent-group{margin-top:7px;gap:6px}
  .hero-form .consent-opt{font-size:8.5px;line-height:1.38}
  .hero-form .terms{margin-top:5px;font-size:8.5px}
}

/* Below ~740px of viewport the card simply cannot fit a three-tile picker, five
   fields, a consent paragraph, a Turnstile box and a button. Rather than shrink
   the type past readability, drop the card's sub-line -- the offer headline
   still carries the message. */
@media(min-width:901px) and (max-height:740px){
  .hero-card-sub{display:none}
  .hero-card-head{padding:9px 22px}
}

/* --- trust badges -------------------------------------------------------
   Sits in the hero's left column, which runs out of content long before the
   card column does — so the badges cost nothing vertically and the fold budget
   is unchanged. min-height is reserved per badge so the layout does not jump
   when the platform boots. On mobile the hero is still a centred stack, so
   they centre with it. */
.hero-trust{margin-top:clamp(18px,2.2vw,26px);padding-top:clamp(14px,1.6vw,18px);
  border-top:1px solid rgba(224,221,216,.22);
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,1.6vw,20px)}
.hero-trust [class^="elfsight-app-"]{min-height:52px;display:flex;align-items:center;
  max-width:100%;min-width:0}
/* Best Pick Reports. A static image rather than an Elfsight widget, and kept in
   the same flex item as the social icons so the row cannot wrap between them and
   strand the badge on the line above. The JPEG carries a baked-in white
   background, hence the white chip -- on the home page it sits over the hero
   photograph, where a bare rectangle would read as a mistake. 64px tall renders
   it ~67px wide, level with the 52px Elfsight pills without dwarfing them. */
.hero-trust .trust-pair{display:inline-flex;align-items:center;
  gap:clamp(10px,1.2vw,16px);min-width:0}
.hero-trust .trust-badge-img{display:inline-flex;align-items:center;background:#fff;
  border-radius:10px;padding:4px 9px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hero-trust .trust-badge-img img{display:block;height:64px;width:auto}
/* The chip is a link now, so it has to say so under the cursor. A 1px lift and
   a deeper shadow read on the hero photograph and on the contact page's paper
   alike. Deliberately no tint: the artwork IS the content, and colouring it
   would misrepresent a certification mark. Focus is already covered by the
   global :focus-visible rule near the top of this file. */
.hero-trust a.trust-badge-img{transition:transform .15s ease,box-shadow .15s ease}
.hero-trust a.trust-badge-img:hover{transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,.2)}
@media(prefers-reduced-motion:reduce){
  .hero-trust a.trust-badge-img{transition:none}
  .hero-trust a.trust-badge-img:hover{transform:none}
}
@media(min-width:901px){ .hero-trust{justify-content:flex-start} }

/* On the contact page the badges sit on paper, not over the hero photograph,
   so the divider needs the light rule rather than the translucent cream one. */
.contact-trust{border-top-color:var(--rule);margin-top:36px}
@media(max-width:620px){
  .hero{padding-top:38px}
  .hero-card{margin-bottom:-30px}
  .hero-card-sub{max-width:none}
}

/* ---- 03 PROBLEM / SOLUTION ---- */
.problem{background:var(--panel);padding:var(--section-y) 0;border-bottom:1px solid var(--rule)}
.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.problem-card{background:var(--panel);padding:clamp(28px,3vw,40px)}
.problem-card h3{margin:18px 0 16px}
.problem-card p{max-width:34ch}
.problem-was{font-size:14px;font-weight:300;color:var(--muted);padding-bottom:18px;
  margin-bottom:18px;border-bottom:1px solid var(--rule)}
.problem-now{font-size:15px;line-height:1.7}
.problem-now strong{font-weight:600}
.problem-note{margin-top:36px;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.problem-grid{grid-template-columns:1fr}}

/* ---- media frame + video ---- */
.media-frame{position:relative;background:var(--panel);border:1px solid var(--rule);
  aspect-ratio:4/3;overflow:hidden}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame.wide{aspect-ratio:16/9}
.video{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,5vw,72px);align-items:center}
@media(max-width:1000px){.video{grid-template-columns:1fr}}
.play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  background:rgba(245,241,233,.92);color:var(--ink);display:grid;place-items:center;
  font-size:20px;padding-left:4px;transition:background .16s,transform .16s}
.play:hover{background:var(--paper);transform:scale(1.06)}
.video-cap{margin-top:16px;font-size:12.5px;font-weight:300;color:var(--muted)}

/* ---- founder quote band (panel, not ink — keeps the ink budget at stats + CTA + footer) ---- */
.quote-band{background:var(--panel);padding:clamp(64px,8vw,110px) 0;border-bottom:1px solid var(--rule)}
.quote-band blockquote{margin:0;max-width:46ch}
.quote-band blockquote p{font-size:clamp(22px,3vw,36px);font-weight:200;line-height:1.35}
.quote-band blockquote p::before{content:'\201C'}
.quote-band blockquote p::after{content:'\201D'}
.quote-band footer{margin-top:28px;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--terracotta)}
.quote-band footer span{display:block;margin-top:7px;color:var(--muted);letter-spacing:.18em}

/* ---- scroll reveal (the original had this; guarded for reduced motion) ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- 04 PRICING / ESTIMATOR — the original module, restored ---- */
.pricing-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,5vw,80px);align-items:start}
@media(max-width:1000px){.pricing-inner{grid-template-columns:1fr}}
.tick-list{margin-top:34px}
.tick-list li{position:relative;padding-left:30px;font-size:15px;font-weight:300;line-height:1.6;
  color:var(--muted)}
.tick-list li+li{margin-top:14px}
.tick-list li::before{content:'';position:absolute;left:0;top:9px;width:13px;height:7px;
  border-left:1px solid var(--terracotta);border-bottom:1px solid var(--terracotta);
  transform:rotate(-45deg)}

.estimator{border:1px solid var(--rule);background:var(--paper);padding:clamp(26px,3.5vw,42px)}
.est-progress{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracotta);padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.est-step{display:none;border:0;padding:0;margin:0}
.est-step.is-active{display:block}
.est-step legend{padding:0;display:flex;align-items:baseline;gap:14px;
  font-size:clamp(19px,2vw,24px);font-weight:200;line-height:1.25}
.opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.opt-grid.three{grid-template-columns:1fr}
@media(max-width:520px){.opt-grid{grid-template-columns:1fr}}
.opt{border:1px solid var(--rule-strong);padding:16px 18px;text-align:left;font-size:14.5px;
  font-weight:300;transition:border-color .14s,color .14s,background .14s}
.opt:hover{border-color:var(--ink);color:var(--ink)}
.opt.on{border-color:var(--terracotta);color:var(--terracotta);background:#faf0ec}

.est-summary{display:none}
.est-summary.is-active{display:block}
.est-summary dl{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:12px 28px}
.est-summary dt{font-size:10.5px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
  color:var(--muted);align-self:center}
.est-summary dd{margin:0;font-size:16px;font-weight:300}
.est-price{margin-top:22px;font-size:clamp(26px,3.4vw,38px);font-weight:200;color:var(--terracotta)}
.est-note{margin-top:18px;font-size:13px;font-weight:300;line-height:1.6;color:var(--muted)}
.est-nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.est-nav[hidden]{display:none}

/* ==========================================================================
   MOTION — preserved from the original 09 Bath, values matched exactly.
   Language: 0.2s ease for hover/colour, 0.25s for the burger, 0.3s for the
   drawer, 0.5s for image scale, 0.6s for scroll reveal.
   ========================================================================== */
html{scroll-behavior:smooth}

/* scroll reveal — original: translateY(14px), 0.6s ease, .is-visible, 60ms stagger */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* text link — the arrow slides on hover */
.tlink{transition:border-color .2s ease,color .2s ease}
.tlink span{transition:transform .2s ease}
.tlink:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.tlink:hover span{transform:translateX(3px)}

/* buttons */
.cta{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.cta span{transition:transform .2s ease}
.cta:hover span{transform:translateX(3px)}
.opt,.tile,.chip{transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.f input,.f select,.f textarea{transition:border-color .2s ease}

/* play button — original is terracotta, going to ink on hover */
.play{background:var(--terracotta);color:var(--paper);
  transition:background-color .2s ease,transform .2s ease}
.play:hover{background:var(--ink);transform:scale(1.04)}

/* image scale on hover — 0.5s, 1.035 */
.gal .fr img,.prod .fr img{transition:transform .5s ease}
.gal .fr:hover img,.prod:hover .fr img{transform:scale(1.035)}
.prod .lbl{transition:color .2s ease}

/* sticky header gains a shadow once it leaves the top */
.nav{transition:box-shadow .2s ease}
.nav.is-stuck{box-shadow:0 1px 16px rgba(26,26,26,.25)}

/* dropdown fade-in, in the same 0.2s language */
.has-dd.open>.dd{animation:dd-in .18s ease both}
@keyframes dd-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.caret{transition:transform .2s ease}

/* burger — 0.25s */
.burger span{transition:transform .25s ease,opacity .2s ease}

/* ---- mobile drawer: the original's slide-in ink panel ---- */
@media(max-width:1080px){
  .nav>.shell>.nav-inner>nav{
    display:block;position:fixed;inset:0 0 0 auto;width:min(24rem,88vw);
    background:var(--ink);color:var(--cream);border-left:1px solid var(--rule-dark);
    grid-column:auto;margin-top:0;border-top:0;
    padding:6.5rem var(--pad-x) 2.5rem;overflow-y:auto;z-index:80;
    transform:translateX(100%);transition:transform .3s ease}
  .nav.drawer-open>.shell>.nav-inner>nav{
    display:block;grid-column:auto;margin-top:0;border-top:0;
    padding:6.5rem var(--pad-x) 2.5rem;transform:translateX(0)}
  .burger{position:relative;z-index:90}
  .nav.drawer-open .burger span{background:var(--cream)}
  .nav-links>li{border-bottom:1px solid var(--rule-dark)}
  .nav-links>li>a{color:var(--cream)}
  .nav-links>li>a:hover,.nav-links>li>a.on{color:var(--paper);border-bottom-color:transparent}
  .dd{background:transparent;border:0;padding:2px 0 10px}
  .dd a{color:var(--cream);padding:11px 0 11px 14px;border-left:1px solid var(--rule-dark)}
  .dd a:hover{background:transparent;color:var(--terracotta)}
  .dd a span{color:rgba(224,221,216,.62)}
  .nav.drawer-open .cta.drawer-cta{display:flex;margin-top:26px}
}

/* ---- legal pages ---- */
.legal{max-width:820px;padding-top:34px;padding-bottom:var(--section-y)}
.legal h1{margin-top:20px}
.legal-date{margin-top:20px;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.legal h2{margin-top:48px;font-size:15px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase}
.legal p{margin-top:16px;font-size:15.5px;font-weight:300;line-height:1.75;color:var(--muted)}
.legal p strong{font-weight:600;color:var(--ink)}
.legal ul{margin-top:16px;padding-left:22px;list-style:disc}
.legal li{font-size:15.5px;font-weight:300;line-height:1.9;color:var(--muted)}
.legal a{border-bottom:1px solid var(--terracotta)}
.legal a:hover{color:var(--terracotta)}
.legal .tlink{border-bottom:1px solid var(--terracotta)}
.legal-back{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}