/* Almanac Home Co. — shared stylesheet
   Tokens mirror data/tokens.json. Change a colour there and here together. */

:root{
  --paper:#FBFBF9; --surface:#FFF; --sunk:#F4F3EE;
  --line:#DFDDD4; --line2:#EBE9E2;
  --ink:#1F2A24; --ink2:#4A554E; --ink3:#4A554E;   /* ink3 was #78817B, 3.9:1; darkened for D67 (22 Sep 2026) */
  --pine:#1E4A3A; --pine2:#2C6350;
  --gold:#8A6A1C;           /* body-size gold, passes AA */
  --gold-print:#A8842A;     /* large type / rules only */
  --gold-dark-bg:#C6A134;   /* gold on pine */
  --stone:#7A857F;
  --ok:#047A5B; --warn:#C24D5C; --focus:#347AD0;   /* ok was #05906B, 4.03:1; darkened so small green labels pass AA (final review C48, 25 Sep 2026) */
  --spring:#5C9455; --summer:#1E9096; --autumn:#6E2B33; --winter:#2F5585;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--pine)}
a:hover{color:var(--pine2)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* on pine the blue ring is 2.31:1; paper is 9.7:1 on pine and 12:1 on the footer's legal band (final review C49) */
.ubar :focus-visible,.hero-pine :focus-visible,.band.pine :focus-visible,.m-cta :focus-visible,.f2 :focus-visible,.tier.feat :focus-visible,.pk-res :focus-visible,.hourly :focus-visible,.mbar :focus-visible,.callbar :focus-visible{outline-color:#FBFBF9}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-0.015em;text-wrap:balance}
h1{font-family:var(--serif);font-size:clamp(34px,4.4vw,54px);line-height:1.08;color:var(--pine)}
h2{font-family:var(--serif);font-size:clamp(27px,3vw,38px);line-height:1.1;color:var(--pine)}
h3{font-family:var(--serif);font-size:26px;line-height:1.1;color:var(--pine)}
h4{font-size:15px;font-weight:600;color:var(--pine)}
p{margin:0}
ul{margin:0;padding-left:18px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hidden means hidden, whatever display a class sets. A button waiting on a link in
   data/links.js carries .btn, and .btn's display used to win over the attribute. */
[hidden]{display:none!important}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- utility bar + header ---------- */
.ubar{background:var(--pine);color:var(--paper);font-size:12px;letter-spacing:.02em}
.ubar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;padding-top:8px;padding-bottom:8px}
.ubar .l{display:flex;align-items:center;gap:9px}
.ubar .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-dark-bg);flex:none}
.ubar .r{display:flex;align-items:center;gap:24px}
.ubar .r span{color:var(--gold-dark-bg)}
.ubar .ub-short{display:none}      /* small screens get one short line in place of the towns and the long warranty line */
@media (max-width:1130px){.ubar .ub-long{display:none}.ubar .ub-short{display:inline}}   /* not only phones: the long lines wrap to two ragged rows below 1100px of page width (Spanish), 1117px of window with a classic scrollbar (final review C23) */
.ubar a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(198,161,52,.6);padding-bottom:1px}
.ubar .lang{background:none;border:1px solid rgba(251,251,249,.5);color:var(--paper);font:600 11px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.06em;padding:5px 9px;cursor:pointer;border-radius:0}
.ubar .lang:hover{border-color:var(--gold-dark-bg);color:var(--gold-dark-bg)}

.site-head{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:22px;padding-bottom:22px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.brand svg{width:46px;height:46px;flex:none}
.brand>span:last-child{display:flex;flex-direction:column}
.brand .wm{font-family:var(--serif);font-size:26px;line-height:1;color:var(--pine);letter-spacing:-0.012em}
.brand .sub{display:block;font-size:8.5px;font-weight:500;letter-spacing:.22em;color:var(--pine);margin-top:5px}
.nav{display:flex;align-items:center;gap:18px;font-size:14.5px}
.nav a{color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--pine)}
.nav a[aria-current="page"]{color:var(--pine);font-weight:600;border-bottom-color:var(--gold)}
.head-r{display:flex;align-items:center;gap:18px;flex:none}
.tel{text-align:right;line-height:1.25}
.tel b{display:block;font-size:17px;font-weight:500;color:var(--pine)}
.tel span{display:block;font-size:12px;letter-spacing:.02em;color:var(--gold)}
a[href^="tel:"]{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:44px;padding:6px 18px;line-height:1.3;
  background:var(--pine);color:var(--paper);text-decoration:none;font-size:13.5px;font-weight:500;border:1px solid var(--pine);cursor:pointer}
@media (hover:hover){.btn:hover{background:var(--pine2);border-color:var(--pine2);color:var(--paper)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.btn.lg{min-height:52px;padding:6px 26px;font-size:15.5px}
.btn.ghost{background:transparent;color:var(--pine)}
@media (hover:hover){.btn.ghost:hover{background:var(--sunk);color:var(--pine)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.btn.gold{background:var(--gold-dark-bg);border-color:var(--gold-dark-bg);color:#141C18;font-weight:600}
@media (hover:hover){.btn.gold:hover{background:#D4B04A;border-color:#D4B04A;color:#141C18}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.btn.block{width:100%}
.navtoggle{display:none;font:inherit;font-size:14px;font-weight:600;color:var(--pine);background:none;border:1px solid var(--line2);padding:9px 14px;min-height:44px;cursor:pointer}

/* ---------- generic bands + grids ---------- */
.band{padding:52px 0;border-top:1px solid var(--line)}
.band.paper{background:var(--paper)}
.band.sunk{background:var(--sunk)}
.band.pine{background:var(--pine);color:var(--paper);border-top:none}
.band.pine h2,.band.pine h3{color:var(--paper)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--gold);margin-bottom:18px}
.band.pine .eyebrow{color:var(--gold-dark-bg)}
.lede{font-size:19px;line-height:1.55;color:var(--ink);margin-top:22px;max-width:72ch}
.sub{font-size:16px;line-height:1.65;color:var(--ink2);margin-top:14px;max-width:62ch}
.hair{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.hair>*{background:var(--surface)}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rows>*{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.deflist{display:flex;flex-direction:column}
.deflist>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line2);font-size:14.5px}
.deflist>div:last-child{border-bottom:none}
.deflist b{font-weight:500;color:var(--pine)}
.band.pine .deflist>div{border-bottom-color:rgba(251,251,249,.18)}
.band.pine .deflist b{color:var(--gold-dark-bg)}

/* ---------- homepage ---------- */
.hero-c{padding:64px 0 30px;text-align:center;background:var(--paper)}
.hero-c h1{margin:0 auto;max-width:20ch}
.hero-c .lede{margin:20px auto 0;max-width:62ch}
.doors{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px}
.door{padding:44px var(--pad) 46px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.door.alt{background:var(--sunk)}
.door h2{font-size:40px}
.door p{font-size:16px;line-height:1.65;max-width:44ch}
.door .meta{font-size:14px;color:var(--ink2)}
.door .btn{margin-top:10px}
.trust{margin-top:32px}
.trust>div{padding:16px 20px;font-size:14px;line-height:1.5;color:var(--ink2)}
.trust b{color:var(--ink);font-weight:600}

/* ---------- ways cards ---------- */
.ways{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.way{padding:30px 28px 28px;display:flex;flex-direction:column}
.way.alt{background:var(--sunk)!important}
.way .eyebrow{margin-bottom:14px}
.wbig{display:flex;flex-direction:column;gap:5px;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.wbig b{font-family:var(--serif);font-size:40px;line-height:1;font-weight:400;color:var(--pine);letter-spacing:-0.015em}
.wbig b u{text-decoration:none;font-size:19px;color:var(--ink3);margin-left:3px}
.wbig span{font-size:13px;line-height:1.5;color:var(--ink3)}
.way h3{font-size:21px;line-height:1.2;margin-top:20px;max-width:24ch}
.way p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:10px 0 24px}
.wfoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink3);display:flex;flex-direction:column;gap:3px}
.wfoot b{font-size:14px;font-weight:600;line-height:1.45;color:var(--gold)}
.wfoot a{font-size:13.5px;font-weight:500;color:var(--pine);text-decoration:none;margin-top:10px}
.wfoot a:hover{color:var(--pine2);text-decoration:underline;text-underline-offset:3px}

/* ---------- tools ---------- */
.tools{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0 26px}
.tools .row{display:flex;align-items:center;gap:16px}
.tools input[type=search],.tools input[type=text]{flex:1;min-width:0;height:50px;padding:0 18px;background:var(--surface);border:1px solid var(--line);outline:none}
.tools input[type=search]:focus,.tools input[type=text]:focus{border-color:var(--pine)}   /* final review C50 */
.count{font-size:13px;color:var(--ink3);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.askline{margin:10px 0 0;font-size:13.5px;color:var(--ink2)}
.chip{font-size:13px;padding:9px 15px;min-height:38px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover){.chip:hover{background:var(--surface)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.chip[aria-pressed=true]{background:var(--pine);border-color:var(--pine);color:var(--paper)}
.chip i{font-style:normal;color:var(--ink3);margin-left:6px}
.chip[aria-pressed=true] i{color:rgba(251,251,249,.7)}

/* ---------- list + basket ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:start;padding:34px 0 48px}
.hourly{display:grid;grid-template-columns:minmax(0,1fr) 150px 132px;gap:18px;align-items:center;background:var(--pine);color:var(--paper);padding:22px 24px}
.hourly b{display:block;font-size:17px;font-weight:600}
.hourly p{font-size:13.5px;line-height:1.55;color:rgba(251,251,249,.8);margin-top:5px;max-width:56ch}
.hourly .pr{text-align:right}
.hourly .big{font-family:var(--serif);font-size:28px;line-height:1;display:block}
.hourly .mem{display:block;font-size:11.5px;color:var(--gold-dark-bg);margin-top:4px}
.hourly .per{display:block;font-size:11px;color:rgba(251,251,249,.6);margin-top:2px}

.stp{display:flex;align-items:center;border:1px solid var(--line)}
.stp button{width:34px;height:38px;font-size:17px;line-height:1;background:transparent;border:none;cursor:pointer}
.stp span{flex:1;text-align:center;font-size:14px;height:38px;line-height:38px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.hourly .stp{border-color:rgba(251,251,249,.35)}
.hourly .stp button{width:42px;height:44px;font-size:19px;color:var(--paper)}
.hourly .stp span{height:44px;line-height:44px;font-size:16px;border-color:rgba(251,251,249,.35)}

.qrule{font-size:13px;line-height:1.6;color:var(--ink2);margin:0 0 14px;max-width:88ch}
.svc .tag{display:inline-block;margin-left:8px;padding:2px 7px;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pine);border:1px solid var(--line);background:var(--sunk);vertical-align:2px}
.svc .t p.ex{color:var(--ink3)}
.svc .t p.st{font-weight:500;margin-top:6px}
.svc .t p.st.nudge{color:var(--gold-print)}
.svc .t p.st.conf{color:var(--ok)}
.svc .t p.st.quote{color:var(--ink2)}
.svc .pr.hr .big u{font-size:16px;font-weight:400;text-decoration:none;color:var(--ink3)}
.act .more{margin-top:8px;padding:0;background:none;border:none;font-family:inherit;font-size:11.5px;
  color:var(--ink3);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.act .more:hover{color:var(--pine)}
.act .maxhint{display:block;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--ink2);text-align:center}
.stp button[disabled]{opacity:.35;cursor:default}

.list{border:1px solid var(--line);border-top:none;background:var(--surface)}
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 20px;background:var(--sunk);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--pine);text-transform:uppercase}
.sec em{font-style:normal;font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--ink3);text-transform:none}
.svc{border-bottom:1px solid var(--line2)}
.svc.on{background:#F7F5EA}
.svc .top{display:grid;grid-template-columns:minmax(0,1fr) 150px 112px;gap:18px;align-items:start;padding:15px 20px}
.svc .t b{display:block;font-size:14.5px;font-weight:400;line-height:1.4;color:var(--ink)}
.svc .t p{font-size:11.5px;line-height:1.5;color:var(--ink3);margin-top:4px}
.svc .pr{text-align:right}
.svc .pr .big{display:block;font-size:17px;font-weight:500;color:var(--pine)}
.svc .pr .mem{display:block;font-size:11px;color:var(--gold);margin-top:3px}
.svc .pr .per{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}
.svc .pr .quote{display:block;font-size:10.5px;line-height:1.45;color:var(--ink3);margin-top:4px}
.svc .pr [hidden]{display:none!important}
@keyframes priceStep{from{color:var(--gold)}to{color:var(--pine)}}
.svc .pr .big.step{animation:priceStep .45s ease-out}
@media (prefers-reduced-motion:reduce){.svc .pr .big.step{animation:none}}
.svc .act{display:flex;flex-direction:column;gap:8px}
.add{min-height:40px;font-size:13px;font-weight:500;background:var(--pine);border:1px solid var(--pine);color:var(--paper);cursor:pointer}
@media (hover:hover){.add:hover{background:var(--pine2);border-color:var(--pine2)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.svc.on .add{background:transparent;border-color:var(--line);color:var(--ink2)}
@media (hover:hover){.svc.on .add:hover{background:var(--sunk)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.subs{padding:0 20px 15px;display:flex;flex-direction:column;gap:6px}
.sub-a{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;
  background:var(--sunk);border:1px solid var(--line2);cursor:pointer}
.sub-a input{width:16px;height:16px;margin:0;accent-color:var(--pine);cursor:pointer}
.sub-a .sn{font-size:13px;line-height:1.4}
.sub-a .sp{text-align:right;font-size:14px;color:var(--pine)}
.sub-a .sp u{display:block;text-decoration:none;font-size:10.5px;color:var(--gold)}
.empty{padding:34px 20px;text-align:center;font-size:14px;line-height:1.6;color:var(--ink3);border-top:1px solid var(--line)}
.empty.start{padding:46px 24px;font-size:15.5px;color:var(--ink2)}
.empty.start b{display:block;font-family:var(--serif);font-size:24px;font-weight:400;color:var(--pine);margin-bottom:8px}

.basket{position:sticky;top:16px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--surface);border:1px solid var(--line)}
/* K0 (final review): with no height limit the pinned basket put Request this visit and Send my list below the screen
   until the whole list had scrolled past; now it is never taller than the screen and scrolls on its own. */
.basket .bhd{padding:20px 22px 0}
.basket h3{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.bempty{font-size:14px;line-height:1.6;color:var(--ink3);margin-top:14px}
.bitems{display:flex;flex-direction:column;margin-top:12px}
.bi{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line2)}
.bi .n{font-size:13px;line-height:1.4}
.bi .n em{display:block;font-style:normal;font-size:11px;color:var(--ink3);margin-top:2px}
.bi .v{font-size:13.5px;color:var(--pine);white-space:nowrap}
.bi .x{width:24px;height:24px;font-size:15px;line-height:1;background:transparent;border:none;color:var(--ink3);cursor:pointer}
.bi .x:hover{color:var(--warn)}
.matrow{padding:16px 22px;margin-top:16px;background:var(--sunk);border-top:1px solid var(--line2)}
.matrow label{display:block;font-size:13px}
.matrow em{display:block;font-style:normal;font-size:11px;line-height:1.5;color:var(--ink3);margin-top:3px}
.matin{display:flex;align-items:center;border:1px solid var(--line);background:var(--surface);margin-top:10px}
.matin i{width:34px;text-align:center;font-style:normal;font-size:14px;color:var(--ink3)}
.matin input{flex:1;min-width:0;height:44px;padding:0 12px 0 0;background:transparent;border:none;outline:none}
.matin:focus-within{border-color:var(--pine)}   /* the box shows focus, since its input has no border (final review C50) */
/* Materials: one tick in place of the dollar box (finding 65, 5 Oct 2026) */
.matrow .mathd{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.matrow .mattick{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);margin:10px 0 2px;padding:12px 14px;font-size:15px;line-height:1.35;cursor:pointer}
.matrow .mattick input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--pine)}
.matrow .mattick:focus-within{border-color:var(--pine)}
.matrow em+em,.matrow .mattick+em{margin-top:8px}
.totals{padding:18px 22px 22px;border-top:1px solid var(--line)}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trow span{font-size:14px}
.trow b{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--pine)}
.trow.mem{margin-top:4px}
.trow.mem span,.trow.mem b{color:var(--gold)}
.trow.mem b{font-family:var(--sans);font-size:19px;font-weight:600}
.savebar{display:flex;height:8px;margin-top:14px;background:var(--line2)}
.savebar i{background:var(--pine)}
.savebar u{background:var(--gold-dark-bg)}
.saveline{font-size:12.5px;color:var(--ink2);margin-top:8px}
.pitch{font-size:14px;line-height:1.55;color:var(--ink2);margin-top:12px}
.minwarn{font-size:14px;line-height:1.55;color:var(--ink);margin-top:10px;padding-left:10px;border-left:3px solid var(--gold)}
.totals .btn{margin-top:16px}
.clr{width:100%;min-height:40px;margin-top:8px;font-size:13px;background:transparent;border:none;color:var(--ink3);cursor:pointer}
.clr:hover{color:var(--ink)}

/* ---------- request form ---------- */
.form{padding:20px 22px 22px;border-top:1px solid var(--line)}
.form h4{font-size:16px;font-family:var(--serif);font-weight:400;font-size:22px}
.form .sm{font-size:12px;line-height:1.55;color:var(--ink3);margin-top:6px}
.fld{margin-top:12px}
.fld label{display:block;font-size:12px;font-weight:500;color:var(--ink2);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;min-height:44px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);outline:none}
.fld textarea{min-height:76px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--pine)}
.err{font-size:12.5px;color:var(--warn);margin-top:10px}
.done{padding:26px 22px 28px;text-align:center;border-top:1px solid var(--line)}
.done .tick{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:var(--ok);color:#fff;font-size:22px;line-height:44px}
.done h4{font-family:var(--serif);font-size:22px;font-weight:400}
.done p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin-top:8px}
.done .ref{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:10px}

/* ---------- what holds the price ---------- */
.holds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.holds>div{background:var(--surface);padding:26px 28px 28px}
.holds h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok);padding-bottom:14px;border-bottom:1.5px solid var(--ok)}
.holds h4.gold{color:var(--gold);border-bottom-color:var(--gold)}
.ticks{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column}
.ticks li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.55;color:var(--ink)}
.ticks li:last-child{border-bottom:none}
.ticks li::before{content:"";position:absolute;left:0;top:13px;width:19px;height:19px;background:no-repeat center/19px 19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23047A5B' stroke-width='1.4'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.6' fill='none' stroke='%23047A5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ticks.stop li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%238A6A1C' stroke-width='1.4'/%3E%3Cpath d='M8 6.5v7M12 6.5v7' stroke='%238A6A1C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.holds .note{margin-top:18px;font-size:15px;color:var(--ink)}
.always{margin-top:20px}
.always>div{padding:20px 22px 22px}
.always b{display:block;font-family:var(--serif);font-size:32px;line-height:1;font-weight:400;color:var(--pine)}
.always b span{display:inline;font:inherit;color:inherit;margin:0}
.always>div>span{display:block;font-size:13px;line-height:1.55;color:var(--ink2);margin-top:9px}
.always>div>span span{display:inline;font-size:inherit;margin:0}
.always em{font-style:normal;font-weight:600;color:var(--ink)}

/* ---------- the service report ---------- */
.report{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:34px;padding-top:34px;border-top:1px solid var(--line)}
.report h3{font-size:27px;margin-top:10px;max-width:22ch}
.report .doc{max-width:440px}

/* ---------- conditions / standards ---------- */
.cond h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:14px;border-bottom:1.5px solid var(--pine)}
.cond .g2>div{padding:26px 26px 30px}
.cond h4.gold{color:var(--gold);border-bottom-color:var(--gold)}
.cond ul{margin-top:16px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.65}
.cond strong{font-weight:600}
.std{padding:22px 22px 26px}
.std b{display:block;font-size:15px;font-weight:600;color:var(--pine);line-height:1.3}
.std span{display:block;font-size:13.5px;line-height:1.6;color:var(--ink2);margin-top:8px}
.std span span{display:inline;margin:0;font-size:inherit}
.areas>div{padding:15px 18px;font-size:15px;color:var(--pine)}
.areas .blank{background:var(--sunk)}

/* ---------- membership ---------- */
.m-hero{background:var(--paper);border-bottom:1px solid var(--line)}
.m-hero .wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:60px;padding-bottom:58px}
.m-hero h1{max-width:15ch}
.m-hero .lede{max-width:56ch}
.mh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mh-r{background:var(--surface);border:1px solid var(--line);padding:24px 24px 10px}
.facts{margin:0;display:flex;flex-direction:column}
.facts>div{padding:14px 0;border-bottom:1px solid var(--line2)}
.facts>div:last-child{border-bottom:none}
.facts dt{font-size:14px;font-weight:600;color:var(--pine)}
.facts dd{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink2)}

.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:34px}
.sec-head .sub{margin-top:0}

.rec{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start}
.rec-pts{list-style:none;padding:0;margin-top:26px;display:flex;flex-direction:column}
.rec-pts li{padding:15px 0;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.65;color:var(--ink2)}
.rec-pts li:first-child{border-top:1px solid var(--line2)}
.rec-pts b{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}
.note{font-size:14px;line-height:1.6;color:var(--ink2);margin-top:18px}
.note.due{font-size:16px;color:var(--ink);padding:12px 14px;border-left:3px solid var(--gold);background:var(--surface)}
.doc{background:var(--surface);border:1px solid var(--line);box-shadow:14px 14px 0 -1px var(--sunk),14px 14px 0 0 var(--line)}
.doc-h{display:flex;justify-content:space-between;align-items:baseline;padding:18px 22px;background:var(--pine);color:var(--paper);
  font-size:10.5px;font-weight:600;letter-spacing:.18em}
.doc-h .tnum{color:var(--gold-dark-bg);letter-spacing:.06em}
.doc-c{list-style:none;padding:8px 22px;margin:0;counter-reset:none}
.doc-c li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line2);font-size:14px;color:var(--ink)}
.doc-c li:last-child{border-bottom:none}
.doc-c span{font-family:var(--mono);font-size:11.5px;color:var(--gold);flex:none}
.doc-f{padding:14px 22px 18px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--ink3)}

.tiers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.tier{background:var(--surface);border:1px solid var(--line);padding:24px 24px 26px;display:flex;flex-direction:column}
.tier.feat{background:var(--pine);border-color:var(--pine);padding:28px 26px 30px}
.tier .badge{font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--gold);min-height:16px}
.tier.feat .badge{color:var(--gold-dark-bg)}
.tier h3{margin-top:8px;font-size:29px}
.tier.feat h3{color:var(--paper)}
.tier .lead{font-size:13.5px;line-height:1.55;color:var(--ink2);margin-top:6px;min-height:42px}
.tier.feat .lead{color:rgba(251,251,249,.82)}
.tier .price{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.tier .price b{font-size:46px;font-weight:600;line-height:1;color:var(--gold-print)}
.tier.feat .price b{color:var(--gold-dark-bg);font-size:54px}
.tier .price span{font-size:14px;color:var(--ink2)}
.tier.feat .price span{color:rgba(251,251,249,.82)}
.tier .annual{font-size:14px;font-weight:400;line-height:1.5;color:var(--ink2);margin-top:10px}
.tier .annual b{font-weight:600;color:var(--ink)}
.tier.feat .annual{color:rgba(251,251,249,.92)}
.tier.feat .annual b{color:#fff}
.tier .visits{font-size:13.5px;font-weight:500;color:var(--pine);margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.tier.feat .visits{color:var(--gold-dark-bg);border-top-color:rgba(251,251,249,.22)}
.tier .tf{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:11px}
.tier .tf li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.tier .tf li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1.5px;background:var(--gold)}
.tier.feat .tf li{color:rgba(251,251,249,.9)}
.tier.feat .tf li::before{background:var(--gold-dark-bg)}
.tier .xfer{font-size:12.5px;line-height:1.55;color:var(--pine);margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.tier.feat .xfer{color:var(--gold-dark-bg);border-top-color:rgba(251,251,249,.22)}
.tier .btn{margin-top:auto}
.tier .tf+.xfer+.btn,.tier .xfer+.btn{margin-top:20px}
.tier.feat .btn.ghost{border-color:rgba(251,251,249,.5);color:var(--paper)}
.tier .disc{font-size:13px;font-weight:400;line-height:1.5;color:var(--ink2);margin-top:12px}
.tier.feat .disc{color:rgba(251,251,249,.86)}

.cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.seas{background:var(--surface);border:1px solid var(--line);padding:20px 20px 22px}
.seas .rule{height:4px;background:var(--seas);margin:-20px -20px 18px}
.seas h4{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--seas)}
.seas .mo{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink3);margin-top:6px;text-transform:uppercase}
.seas ul{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column}
.seas li{padding:10px 0;border-top:1px solid var(--line2);font-size:14px;line-height:1.5;color:var(--ink2)}

.diffs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.diff{border-top:2px solid var(--gold-print);padding-top:18px}
.diff h3{font-size:23px;max-width:16ch}
.diff p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin-top:12px}

.sa{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:center;
  background:var(--surface);border:1px solid var(--line);padding:30px 32px 32px}
.sa h3{font-size:27px}
.sa p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin-top:12px;max-width:62ch}
.sa .disc{font-size:11px;font-weight:300;line-height:1.5;color:var(--stone);margin-top:14px}
.sa-p{text-align:right}
.sa-p b{display:block;font-size:46px;font-weight:600;line-height:1;color:var(--gold-print)}
.sa-p span{display:block;font-size:13px;color:var(--ink3);margin-top:6px}
.sa-p .btn{margin-top:16px}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq summary{font-size:16px;font-weight:500;color:var(--pine);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:18px;color:var(--gold);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{font-size:14.5px;line-height:1.7;color:var(--ink2);margin-top:10px;max-width:56ch}

.m-cta{background:var(--pine);color:var(--paper);padding:52px 0 56px}
.m-cta h2{color:var(--paper);max-width:18ch}
.cta2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:28px;max-width:860px}
.cta2 p{font-size:13px;line-height:1.6;color:rgba(251,251,249,.78);margin-top:12px;max-width:40ch}
.btn.light{background:transparent;border-color:rgba(251,251,249,.55);color:var(--paper)}
@media (hover:hover){.btn.light:hover{background:rgba(251,251,249,.1);border-color:var(--paper);color:var(--paper)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */

/* ---------- footer + mobile bar ---------- */
.f{background:var(--pine);color:rgba(251,251,249,.85);font-size:12.5px;line-height:1.65;padding:26px 0 34px}
.f .flag{color:var(--gold-dark-bg)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;background:var(--pine);color:var(--paper);box-shadow:0 -8px 24px -12px rgba(31,42,36,.5)}
.mbar b{font-family:var(--serif);font-size:22px}
.mbar span{display:block;font-size:11.5px;color:var(--gold-dark-bg)}
.mbar button{min-height:44px;padding:0 18px;background:var(--gold-dark-bg);border:none;color:#141C18;font-weight:600;cursor:pointer}
/* .mbar.on only shows under the 860px breakpoint — see the media query below */

/* ---------- inner pages: standards, service area, home record, about ---------- */
.p-hero{background:var(--paper);border-bottom:1px solid var(--line)}
.p-hero .wrap{padding-top:60px;padding-bottom:52px}
.p-hero h1{max-width:18ch}
.p-hero .lede{max-width:64ch}
.p-hero.two .wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start}
.p-hero .mh-cta{margin-top:26px}

.stations>div{padding:16px 18px;font-size:14.5px;color:var(--ink);display:flex;gap:12px;align-items:baseline}
.stations span{font-family:var(--mono);font-size:11.5px;color:var(--gold);flex:none}

.grades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grade{background:var(--surface);border:1px solid var(--line);padding:20px 20px 22px}
.grade .rule{height:4px;margin:-20px -20px 18px}
.grade h4{font-family:var(--serif);font-size:24px;font-weight:400}
.grade p{font-size:14px;line-height:1.6;color:var(--ink2);margin-top:8px}

.portrait{background:var(--sunk);border:1px solid var(--line);aspect-ratio:4/5;overflow:hidden;margin-bottom:20px}
.portrait img{width:100%;height:100%;object-fit:cover}

.towns>div{padding:18px 20px;font-size:17px;font-family:var(--serif);color:var(--pine)}
.towns>div em{display:block;font-family:var(--sans);font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:4px}

/* ---------- join form (membership) ---------- */
.jgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:start}
.jform{background:var(--surface);border:1px solid var(--line);padding:24px 24px 26px}
.jform .fld:first-child{margin-top:0}
.jform .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-items:end}
.jform .two .fld{margin-top:12px}
.jform .btn{margin-top:18px}
.jsum{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;margin-top:18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.jsum b{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--pine)}
.jsum em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px}
.jform .done{padding:20px 0 4px;border-top:none}
.done .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.done .acts .btn{margin:0}
.done .fall{font-size:13px;line-height:1.6;color:var(--ink2);margin-top:14px}
.done .fall b{color:var(--pine);font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:1300px){
  .site-head .wrap{flex-wrap:wrap;gap:14px}
  .nav{order:3;width:100%;gap:18px;overflow-x:auto;padding-bottom:2px;font-size:14px}
  .nav a{white-space:nowrap}
}
/* final review C4: logo, menu, number and button need 1341px in English (Membership, Home Record) and 1501px in Spanish
   (the longer menu and the WhatsApp line); below that the menu takes its own row, as under 1300px. Only above 1300px,
   so the phone header is untouched. */
@media (min-width:1301px) and (max-width:1340px){.site-head .wrap{flex-wrap:wrap}.nav{order:3;width:100%;gap:18px;overflow-x:auto;padding-bottom:2px;font-size:14px}}
@media (min-width:1301px) and (max-width:1500px){html[lang="es"] .site-head .wrap{flex-wrap:wrap}html[lang="es"] .nav{order:3;width:100%;gap:18px;overflow-x:auto;padding-bottom:2px;font-size:14px}}
@media (max-width:1080px){
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier.feat{order:-1}   /* The Season first once the cards stack */
  .cal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diffs{gap:32px}
  .m-hero .wrap,.rec,.sec-head,.p-hero.two .wrap,.jgrid,.report{grid-template-columns:minmax(0,1fr);gap:34px}
  .sec-head{align-items:start}
  .portrait{max-width:360px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .basket{position:static;max-height:none;overflow:visible}
  .c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--pad:20px}
  .head-r .btn{display:none}
  .ubar .wrap{gap:12px;min-height:38px}
  .ubar .ub-long{display:none}
  .ubar .ub-short{display:inline}
  .ubar .r{gap:12px;flex:none}
  .c2,.c3,.split,.doors.hair.c2{grid-template-columns:minmax(0,1fr)}
  .hourly,.svc .top{grid-template-columns:minmax(0,1fr)}
  .hourly .pr,.svc .pr{text-align:left;display:flex;align-items:baseline;gap:12px}
  .svc .pr .mem,.svc .pr .per,.hourly .mem,.hourly .per{margin-top:0}
  .svc .pr .quote{flex-basis:100%;margin-top:2px}
  .cols{padding-bottom:96px}
  .door h2{font-size:32px}
  .cal,.diffs,.faq,.cta2,.sa,.grades,.jform .two,.holds{grid-template-columns:minmax(0,1fr)}
  .report .doc{max-width:none}
  .diffs{gap:30px}
  .sa{gap:24px;padding:24px 22px 26px}
  .sa-p{text-align:left}
  .tier .lead{min-height:0}
  .doc{box-shadow:none}
  .mbar.on{display:flex}
  body.mb-on .f2-legal{padding-bottom:106px}   /* the page ends above the 78px bar: the legal band runs on under it, so its links can be tapped (final review C13) */
}
@media print{
  .ubar,.tools,.basket,.mbar,.head-r,.add,.stp,.more{display:none!important}
  body{background:#fff}
  .list{border-color:#bbb}
}


/* =====================================================================
   The custom layer: the drawn house, the seasons dial, photographs, motion.
   Added 17 Sep 2026, when the owner retired the "printed matter, no animation"
   rule. Square corners and hairlines stay. The circle (the mark, the dial, the
   station numbers) is the second shape. Everything here animates only opacity,
   transform or stroke, and all of it stands still under prefers-reduced-motion.
   ===================================================================== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- motion: things arrive, nothing snaps ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal].in.settled{transition-delay:0s}
a,.btn,.chip,.add,.hf-nav button,.hf-row button,.pk-opts button{transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}

/* ---------- photographs ---------- */
.ph{position:relative;margin:0;background:var(--sunk);overflow:hidden}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph.r32{aspect-ratio:3/2}
.ph.r169{aspect-ratio:16/9}
.ph.r45{aspect-ratio:4/5}
.js .ph img{transform:scale(1.07);transition:transform 1.6s var(--ease-out)}
.js .ph.in img{transform:none}
.plate{position:relative;z-index:0}
.plate::after{content:"";position:absolute;top:14px;right:-14px;bottom:-14px;left:14px;border:1px solid var(--gold-print);z-index:-1;pointer-events:none}
.door .ph{align-self:stretch;margin:-44px calc(var(--pad)*-1) 14px;aspect-ratio:16/9}
.p-hero.two .ph{align-self:start}
.photoband{position:relative;margin:0;height:clamp(220px,32vw,420px);overflow:hidden;border-top:1px solid var(--line)}
.photoband img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- the house, drawn ---------- */
.housefig{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);background:var(--surface);border:1px solid var(--line);text-align:left}
.hf-art{padding:20px 22px 8px;background:var(--surface);min-width:0}
.hf-art svg{display:block;width:100%;height:auto;overflow:visible}
.hf-art .art path,.hf-art .art circle,.hf-art .art ellipse{fill:none;stroke:var(--pine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.hf-art .art .thin{stroke-width:1.3}
.hf-art .art .mask{fill:var(--surface)}
.hf-art .art .gold{stroke:var(--gold-print)}
.hf-art .art .z.hot path,.hf-art .art .z.hot circle,.hf-art .art .z.hot ellipse{stroke:var(--gold-print)}
.js .housefig .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke .4s var(--ease),stroke-dashoffset 1.5s var(--ease) calc(var(--d,0)*1s)}
.js .housefig.in .ln{stroke-dashoffset:0}
.js .housefig.drawn .ln{stroke-dasharray:none;transition:stroke .4s var(--ease)}
.js .housefig .fx{opacity:0;transition:opacity .9s var(--ease) 1.9s}
.js .housefig.in .fx{opacity:1}
.stn{cursor:pointer}
.js .housefig .stn{opacity:0;transition:opacity .5s var(--ease) calc(1.5s + var(--i,0)*70ms)}
.js .housefig.in .stn{opacity:1}
.js .housefig.drawn .stn{transition:none}
.stn .dot{fill:var(--gold-dark-bg);stroke:var(--surface);stroke-width:2.5;transform-box:fill-box;transform-origin:center;transition:fill .25s var(--ease),transform .25s var(--ease)}
.stn text{font-family:var(--sans);font-size:11px;font-weight:600;fill:#141C18;pointer-events:none;font-variant-numeric:tabular-nums;transition:fill .25s var(--ease)}
.stn .halo{fill:none;stroke:var(--gold-dark-bg);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.stn:hover .dot{fill:#D4B04A}
.stn.on .dot{fill:var(--pine);transform:scale(1.2)}
.stn.on text{fill:var(--paper)}
.stn:focus{outline:none}
.stn:focus-visible .halo{opacity:1;stroke:var(--focus);stroke-width:2.5}
.housefig.in:not(.touched) .stn[data-i="0"] .halo{animation:hfpulse 3.6s var(--ease) 3;animation-delay:2.4s}   /* D87: station 01 only, three times */
@keyframes hfpulse{0%,55%,100%{opacity:0;transform:scale(.7)}25%{opacity:.85;transform:scale(1.18)}}

.hf-panel{display:flex;flex-direction:column;padding:30px 28px 26px;border-left:1px solid var(--line);background:var(--surface);min-width:0}
.hf-swap{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.hf-swap.out{opacity:0;transform:translateY(6px)}
.hf-of{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--gold)}
.hf-num{font-family:var(--serif);font-size:76px;line-height:1;color:var(--gold-print);margin-top:14px}
.hf-name{font-size:28px;margin-top:8px}
.hf-desc{font-size:15px;line-height:1.65;color:var(--ink2);margin-top:12px;min-height:6.6em}
.hf-link{font-size:14px;font-weight:500;color:var(--pine);text-decoration:none;margin-top:6px}
.hf-link:hover{text-decoration:underline;text-underline-offset:3px}
.hf-nav{display:flex;gap:8px;margin-top:auto;padding-top:20px}
.hf-nav button{flex:1;min-height:44px;background:transparent;border:1px solid var(--line);color:var(--pine);font-size:13.5px;font-weight:500;cursor:pointer}
@media (hover:hover){.hf-nav button:hover{background:var(--sunk);border-color:var(--pine)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.hf-row{grid-column:1/-1;display:flex;border-top:1px solid var(--line)}
.hf-row button{flex:1;min-height:44px;background:transparent;border:none;border-right:1px solid var(--line2);font-size:12.5px;font-weight:500;color:var(--ink3);cursor:pointer;font-variant-numeric:tabular-nums}
.hf-row button:last-child{border-right:none}
@media (hover:hover){.hf-row button:hover{background:var(--sunk);color:var(--pine)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.hf-row button[aria-pressed=true]{background:var(--pine);color:var(--paper)}
.hero-house{padding:0 0 46px;background:var(--paper)}

/* ---------- one finding, out of 121 ---------- */
.finding{background:var(--surface);border:1px solid var(--line);box-shadow:14px 14px 0 -1px var(--sunk),14px 14px 0 0 var(--line)}
.finding-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--pine)}
.grade-chip{padding:4px 10px;font-size:10px;font-weight:600;letter-spacing:.14em;color:#fff;background:var(--warn)}
.finding-b{display:grid;grid-template-columns:148px minmax(0,1fr);gap:22px;padding:20px}
.finding-pic{border:1px solid var(--line2);background:var(--sunk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1/1;align-self:start}
.finding-pic svg{width:66%;height:auto}
.finding-pic{margin:0;overflow:hidden}
.finding-pic img{width:100%;height:auto;display:block}
.finding-pic span{font-size:9.5px;font-weight:600;letter-spacing:.14em;line-height:1.5;color:var(--ink3);text-align:center;padding:0 10px}
.finding h3{font-size:23px}
.finding dl{margin:12px 0 0;display:flex;flex-direction:column}
.finding dl>div{padding:10px 0;border-top:1px solid var(--line2)}
.finding dt{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--gold)}
.finding dd{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--ink2)}
.finding dd b{font-weight:600;color:var(--ink)}
.finding-f{padding:12px 20px 14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--ink3)}
.findwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}

/* ---------- the year, as a dial ---------- */
.yearwheel{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:center}
.dial{position:relative;width:100%;max-width:380px;aspect-ratio:1/1;margin:0 auto}
.dial svg{display:block;width:100%;height:100%;overflow:visible}
.dial-arc{fill:none;stroke-width:11;stroke-linecap:round;opacity:.3;transition:opacity .35s var(--ease),stroke-width .35s var(--ease)}
.dial-seg{cursor:pointer}
.dial-seg:focus{outline:none}
.dial-seg:hover .dial-arc,.dial-seg:focus-visible .dial-arc{opacity:.7}
.dial-seg[aria-pressed=true] .dial-arc{opacity:1;stroke-width:17}
.dial-hit{fill:none;stroke:transparent;stroke-width:46}
.dial-lbl{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;fill:var(--ink3);transition:fill .35s var(--ease);pointer-events:none}
.dial-seg[aria-pressed=true] .dial-lbl{fill:var(--ink)}
.dial-hand{transform-origin:180px 180px;transition:transform .8s var(--ease-out)}
.dial-hand line{stroke:var(--gold-print);stroke-width:1.5;stroke-linecap:round}
.dial-hand circle{fill:var(--gold-print)}
.dial-c{position:absolute;top:24%;right:24%;bottom:24%;left:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.dial-c .mo{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink3)}
.dial-c b{font-family:var(--serif);font-size:42px;font-weight:400;line-height:1.1;color:var(--seas);transition:color .35s var(--ease)}
.dial-c .now{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--gold);margin-top:6px;min-height:14px}
.year-d{min-width:0}
.year-d .hf-swap{min-height:230px}
.year-d .mo{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink3)}
.year-d h3{font-size:38px;color:var(--seas);margin-top:6px;transition:color .35s var(--ease)}
.year-d ul{list-style:none;padding:0;margin:18px 0 0}
.year-d li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line2);font-size:16px;color:var(--ink)}
.year-d li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--seas);transform:translateY(-1px)}
.year-tabs{display:flex;border:1px solid var(--line);margin-top:22px}
.year-tabs button{flex:1;min-height:44px;background:transparent;border:none;border-right:1px solid var(--line2);font-size:13px;font-weight:500;color:var(--ink3);cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)}
.year-tabs button:last-child{border-right:none}
@media (hover:hover){.year-tabs button:hover{background:var(--sunk);color:var(--pine)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.year-tabs button[aria-pressed=true]{background:var(--pine);color:var(--paper)}

/* ---------- which membership fits ---------- */
.picker{border:1px solid var(--line);background:var(--surface);margin-bottom:26px}
.picker>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:16px;font-weight:500;color:var(--pine)}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary span{font-size:13.5px;font-weight:400;color:var(--ink3);margin-left:10px}
.picker>summary::after{content:"+";font-size:20px;line-height:1;color:var(--gold)}
.picker[open]>summary::after{content:"\2013"}
.pk-body{padding:2px 22px 24px;border-top:1px solid var(--line2)}
.pk-q{margin-top:20px}
.pk-q p{font-size:15px;font-weight:500;color:var(--ink)}
.pk-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pk-opts button{font-size:13.5px;text-align:left;padding:10px 15px;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover){.pk-opts button:hover{background:var(--sunk)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.pk-opts button[aria-pressed=true]{background:var(--pine);border-color:var(--pine);color:var(--paper)}
.pk-res{margin-top:24px;padding:22px 24px;background:var(--pine);color:var(--paper);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.pk-res[hidden]{display:none}
.pk-res .eyebrow{color:var(--gold-dark-bg);margin-bottom:8px}
.pk-res h3{color:var(--paper);font-size:30px}
.pk-res h3 u{text-decoration:none;font-family:var(--sans);font-size:15px;color:var(--gold-dark-bg);margin-left:10px}
.pk-res p{font-size:14px;line-height:1.6;color:rgba(251,251,249,.86);margin-top:8px;max-width:62ch}

/* ---------- the membership film ---------- */
.vid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:56px;align-items:center}
.vid-frame{position:relative;aspect-ratio:16/9;background:var(--pine);overflow:hidden;border:1px solid var(--line)}
.vid-frame img,.vid-frame video,.vid-frame iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border:0}
.vid-play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:rgba(30,74,58,.38);border:0;cursor:pointer;transition:background-color .3s var(--ease)}
.vid-play:hover{background:rgba(30,74,58,.2)}
.vid-play span{width:84px;height:84px;border-radius:50%;background:var(--gold-dark-bg);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.vid-play:hover span{transform:scale(1.07)}
.vid-play svg{width:28px;height:28px;margin-left:5px;fill:#141C18}

/* ---------- the footer: the owner's Option A (brand, services, service area, faith band, legal bar).
   Text colours are lighter than his reference file, which measured about 1.2:1 on pine. ---------- */
.f2{background:var(--pine);color:rgba(251,251,249,.78);font-size:13.5px;line-height:1.65}
.f2 a{color:rgba(251,251,249,.78);text-decoration:none}
.f2 a:hover{color:var(--paper)}
.f2-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:52px;padding:60px 0 52px;border-bottom:1px solid rgba(201,216,204,.16)}
.f2-brand{display:inline-block}
.f2-brand svg{display:block;width:48px;height:48px}
.f2-name{font-family:var(--serif);font-size:21px;line-height:1;letter-spacing:-0.012em;color:var(--paper);margin-top:10px}
.f2-sub{font-size:8.5px;font-weight:500;letter-spacing:.26em;color:#C9D8CC;margin-top:4px}
.f2-about{font-size:13px;font-weight:300;line-height:1.65;max-width:230px;margin-top:20px}
.f2-tel{font-size:14px;font-weight:500;color:#C9D8CC;margin-top:18px}
.f2 h4{font-size:9.5px;font-weight:600;letter-spacing:.2em;color:var(--gold-dark-bg);margin-bottom:18px}
.f2 h4 a{color:inherit}
.f2 ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.f2-towns{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;font-size:13px}
.f2-faith{text-align:center;padding:44px var(--pad) 42px}
.f2-statement{font-size:14.5px;font-weight:300;line-height:1.7;max-width:50ch;margin:0 auto 22px}
.f2-verse{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,24px);line-height:1.5;letter-spacing:-0.012em;color:#D4B04A;max-width:32ch;margin:0 auto 10px}
.f2-ref{font-size:10px;font-weight:600;letter-spacing:.16em;color:#C9D8CC;margin-bottom:16px}
.f2 .f2-faithlink{font-size:12.5px;font-weight:500;color:#D4B04A;border-bottom:1px solid rgba(212,176,74,.5);padding-bottom:1px}
.f2 .f2-faithlink:hover{color:var(--paper);border-bottom-color:var(--paper)}
.f2-legal{background:rgba(0,0,0,.22);padding:16px 0 22px;font-size:11.5px;line-height:1.6;color:rgba(251,251,249,.62)}
.f2-legal p+p{margin-top:5px}
.f2 .flag{color:var(--gold-dark-bg)}

/* ---------- the faith page ---------- */
.faith-top{padding:76px 0 60px;text-align:center;background:var(--paper)}
.faith-top h1{max-width:22ch;margin:0 auto}
.faith-top .lede{max-width:52ch;margin:24px auto 0}
.photoband.tall{height:clamp(260px,40vw,540px)}
.verse{margin:12px auto;max-width:34ch;text-align:center}
.verse blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.2vw,40px);line-height:1.3;letter-spacing:-0.012em;color:var(--pine)}
.verse figcaption{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--gold);margin-top:22px}
.faith-next{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px}
.faith-next a{font-size:15.5px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold-print);padding-bottom:2px}

/* ---------- the custom layer, smaller screens ---------- */
@media (max-width:1080px){
  .housefig{grid-template-columns:minmax(0,1fr)}
  .hf-panel{border-left:none;border-top:1px solid var(--line);padding:24px 22px 22px}
  .hf-desc{min-height:0}
  .hf-num{font-size:56px}
  .findwrap,.yearwheel,.vid{grid-template-columns:minmax(0,1fr);gap:34px}
  .f2-grid{gap:36px}
  .year-d .hf-swap{min-height:0}
}
@media (max-width:860px){
  .hf-art{padding:14px 10px 4px}
  .hf-art .art path,.hf-art .art circle,.hf-art .art ellipse{stroke-width:2.8}
  .hf-art .art .thin{stroke-width:1.9}
  .stn-in{transform:scale(1.75)}
  .hf-row{flex-wrap:wrap}
  .hf-row button{flex:1 0 16.66%;border-bottom:1px solid var(--line2)}
  .hf-row button:nth-child(6n){border-right:none}
  .door .ph{margin-top:-44px}
  .finding-b{grid-template-columns:minmax(0,1fr)}
  .finding-pic{max-width:160px}
  .finding{box-shadow:none}
  .plate::after{top:10px;right:-8px;bottom:-10px;left:10px}
  .pk-res{grid-template-columns:minmax(0,1fr)}
  .f2-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding:40px 0 36px}
  .f2-faith{padding:36px var(--pad) 34px}
  .faith-top{padding:52px 0 44px}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .ph img{transform:none;transition:none}
  .js .housefig .ln{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .housefig .fx,.js .housefig .stn{opacity:1;transition:none}
  .housefig .stn .halo{animation:none!important}
  .hf-swap,.dial-hand,.dial-arc,.stn .dot,.vid-play span{transition:none}
  a,.btn,.chip,.add,.hf-nav button,.hf-row button,.pk-opts button,.year-tabs button{transition:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@media print{.hf-row,.hf-nav,.picker,.vid,.year-tabs{display:none!important}}

/* ---------- page pieces for the custom layer ---------- */
.hh-cap{text-align:center;max-width:62ch;margin:0 auto 24px}
.hh-cap .eyebrow{margin-bottom:10px}
.hh-cap h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:0 0 12px}
.hh-cap p{font-size:16px;line-height:1.6;color:var(--ink2)}
.hero-film{margin-top:18px;font-size:15px}
.hero-film a{font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold-print);padding-bottom:2px}
.hc-hero{padding:60px 0 40px}
.hc-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:center}
.p-hero.two.mid .wrap{align-items:center}
.gradelist{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.gradelist>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.gradelist b{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1}
.gradelist p{font-size:14.5px;line-height:1.6;color:var(--ink2)}
.rec-r .plate{margin-right:14px}
@media (max-width:1080px){
  .hc-top{grid-template-columns:minmax(0,1fr);gap:34px}
  .hc-top .plate,.p-hero.two .plate{max-width:560px}
}
@media (max-width:860px){
  .plate{margin-right:8px}
  .gradelist>div{grid-template-columns:72px minmax(0,1fr)}
}

/* Browsers from before 2021 have no aspect-ratio. Pictures keep their shape from their own
   width and height attributes, and the dial from its SVG. The film frame holds nothing but
   absolutely placed children, so it gets its 16:9 the old way. */
@supports not (aspect-ratio:1/1){
  .vid-frame{height:0;padding-top:56.25%}
  .finding-pic{min-height:148px}
  .portrait{height:0;padding-top:125%;position:relative}
  .portrait img{position:absolute;top:0;left:0}
}

/* Section labels (?labels on any page address). A review aid: see assets/site.js. */
.show-labels [data-label]{outline:1px dashed #C24D5C;outline-offset:-1px}
.sec-layer{position:absolute;top:0;left:0;width:100%;height:0;z-index:90;pointer-events:none}
.sec-tag{position:absolute;display:block;max-width:92vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#C24D5C;color:#fff;font:600 12px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.05em;padding:6px 10px}
.sec-tag i{font-style:normal;font-weight:400;letter-spacing:0;margin-left:10px;opacity:.92}
@media print{.sec-layer{display:none}.show-labels [data-label]{outline:0}}

/* Privacy, Terms and Contact */
.legal{max-width:72ch}
.legal .when{font-size:12.5px;letter-spacing:.04em;color:var(--stone);margin-bottom:6px}
.legal h2{font-size:24px;margin:34px 0 10px}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:16px;line-height:1.65;color:var(--ink2)}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:20px}
.legal li{font-size:16px;line-height:1.6;color:var(--ink2);margin-bottom:8px}
.legal li b,.legal p b{color:var(--ink);font-weight:600}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.cgrid .big{font-size:30px;font-weight:500;color:var(--pine);margin-top:10px;white-space:nowrap}
.legal.wide{max-width:none}
.cgrid .sub{margin-top:10px}
@media (max-width:860px){.cgrid{grid-template-columns:minmax(0,1fr);gap:30px}}
.f2-links{margin-top:10px}
.f2-links a{color:rgba(251,251,249,.78);text-decoration:none;margin-right:16px;border-bottom:1px solid rgba(251,251,249,.3)}

/* ---------- the header on a phone (D68, 22 Sep 2026): ONE row. The logo on the left; the tap-to-call number and
   the Menu button on the right, with "Hablamos español" (and, in Spanish, WhatsApp) as a small line under the
   number. The menu opens under the row. Before this the number sat on a second row and the first screen lost 200px. */
@media (max-width:860px){
  .site-head .wrap{flex-wrap:wrap;gap:0 10px;padding-top:9px;padding-bottom:9px;align-items:center}
  .brand{gap:9px;margin-right:auto}
  .brand svg{width:36px;height:36px}
  .brand .wm{font-size:21px}
  .brand .sub{font-size:7.5px;margin-top:4px}
  .navtoggle{display:inline-block;order:3;margin-left:0;padding:0 11px;font-size:13px}
  .site-head .head-r{order:2;width:auto;flex:none;gap:0;justify-content:flex-end}
  .nav{display:none;order:4;width:100%;overflow:visible;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);margin-top:9px}
  .nav.open{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .tel{text-align:right;line-height:1.2;max-width:172px}
  .site-head .tel b{font-size:15px}
  .site-head .tel b a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--pine);padding:0 11px;margin:0;text-decoration:none;color:var(--pine)}
  .site-head .tel span{font-size:12.5px;letter-spacing:0;margin-top:3px;white-space:normal}
}
@media (max-width:400px){
  .brand>span:last-child{display:none}   /* the mark alone on the narrowest phones: the number, its line and Menu need the width */
}
@media (max-width:440px){html[lang="es"] .brand>span:last-child{display:none}}   /* Spanish: "Hablamos español · WhatsApp" is wider, so the mark alone up to 440px, or Menú drops to a second row (D68; final review C20) */

/* ---------- the Home page opening (Luis, 20 Sep 2026): a pine band, the words and two buttons on the
   left, the house on the right. He found the pale, words-only version empty of color. ---------- */
.hero-pine{background:var(--pine);padding:64px 0 66px;text-align:left}
.hero-pine .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:60px;align-items:center}
.hero-pine .eyebrow{color:var(--gold-dark-bg)}
.hero-pine h1{margin:0;max-width:16ch;color:var(--paper)}
.hero-pine .lede{margin:20px 0 0;max-width:54ch;color:rgba(251,251,249,.92)}
.hero-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-one{font-size:15.5px;color:rgba(251,251,249,.8);margin-top:20px}
.hero-one b{font-weight:600;color:var(--paper)}
.hero-one a{color:var(--gold-dark-bg);font-weight:600;white-space:nowrap;text-decoration:none}
.hero-one a:hover{text-decoration:underline}
.hero-pine .hero-film a{color:var(--gold-dark-bg)}
.hero-pine .plate::after{border-color:var(--gold-dark-bg)}
.hero-pine + .hero-house{padding-top:60px}
@media (max-width:900px){
  .hero-pine{padding:44px 0 50px}
  .hero-pine .wrap{grid-template-columns:minmax(0,1fr);gap:38px}
  .hero-pine .plate{max-width:560px;margin-right:14px}
}

/* ===== round 13: home and terms ===== */
/* HOME-6 (D42): the Home page closes with the Membership page's pine band (.m-cta), three steps across. */
.cta3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:28px;max-width:1040px}
.cta3>div{display:flex;flex-direction:column;align-items:flex-start}
.cta3 .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold-dark-bg);margin-bottom:14px}
.cta3 p{font-size:13px;line-height:1.6;color:rgba(251,251,249,.78);margin-top:12px;max-width:40ch}
.cta3 p b{font-weight:600;color:var(--paper)}
@media (max-width:860px){.cta3{grid-template-columns:minmax(0,1fr);gap:26px}}
/* HOME-4 (D43): the price beside Book the assessment. */
.mh-cta .mh-pair{display:inline-flex;align-items:center;gap:12px}
.mh-cta .mh-note{font-size:14px;color:var(--ink2);white-space:nowrap}
/* HOME-3 (D44): the example prices under the Home Care door. */
.door .meta-eg{margin-top:-4px}
.door .meta-eg b{font-weight:600;color:var(--ink)}
/* ABOUT-3 (D54 b): the founding-households line on the pine band. */
.band.pine .founding{border-top:1px solid rgba(251,251,249,.22);padding-top:16px;margin-top:20px}


/* ===== round 13: home care ===== */
/* CARE-3 (D44): three real prices under the search, filled from the price book. */
.egs{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.egs b{font-weight:600;color:var(--pine)}
/* CARE-4 (D36.12): the description lines were the smallest, palest words on the site; "Does not include" goes dark. */
.svc .t p{font-size:12.5px;color:var(--ink2)}
.svc .t p.ex{font-size:13px;color:var(--ink)}
/* CARE-4 (D40): the fold. On a computer the description is always open and the Details button never shows. */
.svc .fold{display:none}
/* CARE-5 (D49, D43): the deposit line under the totals and the ladder sentence. */
.totals .dep{font-size:13px;line-height:1.55;color:var(--ink2);margin-top:14px;padding-left:10px;border-left:3px solid var(--line)}
.totals .dep b{color:var(--ink);font-weight:600}
.basket .ladder{font-size:13px;line-height:1.55;color:var(--ink2);padding:16px 22px 20px;border-top:1px solid var(--line2)}
/* CARE-5 (D48): the reply promise beside Send. */
.form .promise{color:var(--ink2);margin:14px 0 2px}
/* CARE-5 thank-you (D43, D57, D58). */
.done .next{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2);text-align:left}
.done .next p{font-size:13px}
/* CARE-7 (D57): the seven-day line beside the report. */
.report .join7{font-weight:500;color:var(--pine)}
/* STD-4 (D47): the warranty printed as a document, in the service-report style. */
.wdoc .doc-b{padding:4px 22px 18px}
.wdoc h4{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:18px;padding-bottom:7px;border-bottom:1px solid var(--line2)}
.wdoc p,.wdoc li{font-size:14px;line-height:1.55;color:var(--ink);margin-top:8px}
.wdoc ul{list-style:none;padding:0;margin:0}
.wdoc li{position:relative;padding-left:16px}
.wdoc li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--gold)}
.wdoc p a{color:var(--pine);font-weight:500;white-space:nowrap}
/* CONTACT-2 (D63, D62): Call, Text us and WhatsApp buttons under the number. a[href^="tel:"] inherits the
   paragraph colour (line 74 above), so the buttons name their own. */
.cbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cbtns .btn{color:var(--paper)}
.cbtns .btn.ghost{color:var(--pine)}
@media (max-width:860px){
  /* D40: on a phone the search and categories come right after the opening (CARE-3 under CARE-1) and the
     three ways to pay (CARE-2) follow the list. The order is visual only; the markup and labels stay put. */
  .hc-main{display:flex;flex-direction:column}
  .hc-main>*{width:100%;order:5}
  .hc-main>.hc-hero{order:1}
  .hc-main>.tools{order:2}
  .hc-main>.hc-cols{order:3}
  .hc-main>.ways{order:4}
  /* the search box takes the whole width and the count sits under it, so the hint is never cut off */
  .tools .row{flex-wrap:wrap;gap:8px 16px}
  .tools input[type=search]{flex-basis:100%}
  .tools .count{white-space:normal}
  /* each job folds to its name, price, member price and Add; Details opens the description */
  .svc .top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "pr act";gap:10px 16px;align-items:center}
  .svc .t{grid-area:t}
  .svc .pr{grid-area:pr;flex-wrap:wrap}
  .svc .act{grid-area:act}
  .svc .act .add{min-width:96px}
  .svc .fold{display:inline-block;margin-top:6px;padding:0;background:none;border:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--pine);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .svc .tag+.fold{margin-left:10px}
  .svc .fold::after{content:"\00a0+"}
  .svc .fold[aria-expanded=true]::after{content:"\00a0\2212"}
  .svc .fd{display:none;margin-top:4px}
  .svc .fold[aria-expanded=true]+.fd{display:block}
  /* the quantity stepper appears only after Add */
  .svc:not(.on) .stp,.svc:not(.on) .maxhint{display:none}
}

/* ===== round 13: membership ===== */
/* The "Your home" panel (D36.12, D38 b): four boxes that reprice only the Home Record, live, on the Membership
   page above the three cards and on the Home Record page above the two doors. Square corners, hairlines, the
   site's own inputs; the number boxes lose their spinners so they read as plain fields. */
.yh{background:var(--surface);border:1px solid var(--line);padding:22px 24px 24px;margin-bottom:26px}
.yh-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px;align-items:start}
.yh-top .eyebrow{margin-bottom:10px}
.yh-top h3{font-size:24px}
.yh-note{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0}
.yh-f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px;align-items:end}   /* a label that wraps (Spanish) keeps its box level with the others */
.yh-f .fld{margin-top:0}
.yh-f input{-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.yh-f input::-webkit-outer-spin-button,.yh-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.yh-out{margin-top:16px;padding:12px 14px;border-left:3px solid var(--gold);background:var(--sunk);font-size:15px;line-height:1.6;color:var(--ink)}
.yh-out b{font-weight:600;color:var(--pine)}
/* Founding households (D54 b), one line above the cards */
.mem-founding{font-size:15px;line-height:1.6;color:var(--ink);max-width:78ch;margin:-8px 0 26px;padding-left:14px;border-left:3px solid var(--gold)}
.mem-founding a{white-space:nowrap}
/* The assessment on its own: the ladder sentence under the description (D43) */
.sa .sa-ladder{color:var(--ink);margin-top:14px}
/* MEM-4 on phones shows its first paragraph and this link (D41 a); on a computer the link stays hidden */
.rec-more{display:none;font-size:14.5px;font-weight:500;color:var(--pine);text-decoration:none;margin-top:16px;border-bottom:1px solid var(--gold-print);padding-bottom:2px}
/* MEM-12 on phones ends with a Join button and the number (D41 a) */
.hp-go{display:none;align-items:center;gap:18px;margin-top:22px}
.hp-tel{font-size:17px;font-weight:500;color:var(--pine);text-decoration:none;white-space:nowrap}
/* MEM-9 as three grid children (text, form, photograph): on a computer the photograph sits under the text in
   the left column exactly as before; on a phone it follows the form (D41 a) */
.jgrid.j3{grid-template-rows:auto 1fr}
.jgrid.j3 .jtext{grid-column:1;grid-row:1}
.jgrid.j3 .jform{grid-column:2;grid-row:1/3}
.jgrid.j3 .jphoto{grid-column:1;grid-row:2;align-self:start}
/* REC-3: the two sample cards without a photograph, and the sample three-year budget (D53 a) */
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:48px}
.finding-b.nopic{grid-template-columns:minmax(0,1fr)}
.grade-chip.amber{background:var(--gold)}
.grade-chip.green{background:var(--ok)}
.budget{background:var(--surface);border:1px solid var(--line);margin-top:48px;box-shadow:14px 14px 0 -1px var(--sunk),14px 14px 0 0 var(--line)}
.budget table{width:100%;border-collapse:collapse}
.budget th{padding:12px 20px 10px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--gold);border-bottom:1px solid var(--line)}
.budget td{padding:12px 20px;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.45;color:var(--ink);vertical-align:top}
.budget tbody tr:last-child td{border-bottom:none}
.budget .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.budget td.n{color:var(--pine);font-weight:500}
.budget td.yr{font-family:var(--serif);font-size:17px;color:var(--pine);white-space:nowrap}
.budget em{display:block;font-style:normal;font-size:11.5px;line-height:1.4;color:var(--ink3);margin-top:2px}
.budget td.q{color:var(--ink2);font-weight:400;font-size:13px;white-space:normal}
@media (max-width:1080px){
  .yh-top{grid-template-columns:minmax(0,1fr);gap:14px}
  .jgrid.j3{grid-template-rows:none}
  .jgrid.j3 .jtext,.jgrid.j3 .jform,.jgrid.j3 .jphoto{grid-column:auto;grid-row:auto}
  .jgrid.j3 .jphoto{order:1}
  .jgrid.j3 .jform{order:2}
}
@media (max-width:860px){
  .yh{padding:18px 18px 20px}
  .yh-f{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mem-photo{display:none}
  #record .rec-pts,#record .rec-l>.note,#record .rec-r{display:none}
  #record .rec-more{display:inline-block}
  .hp-go{display:flex;flex-wrap:wrap}
  .jgrid.j3 .jphoto{order:3}
  .samples{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:34px}
  .budget{box-shadow:none;margin-top:34px;overflow-x:auto}
  .budget th,.budget td{padding:10px 8px}
  .budget th{letter-spacing:.08em}
  .budget td{font-size:13.5px}
  .budget td.yr{font-size:15px}
}
/* final review C22: on the narrowest phones (under 347px) long words may break with a hyphen, so the sample budget
   (REC-3) and the price tables' "four or more" heading (prices.html, Spanish) fit their width */
@media (max-width:346px){.budget td,.pt th:last-child{-webkit-hyphens:auto;hyphens:auto}}

/* ===== round 13: shared header (D62 WhatsApp in Spanish, D63 tap-to-call on phones) ===== */
.site-head .wa{display:none;color:var(--gold);text-decoration:none}
html[lang="es"] .site-head .wa:not([hidden]){display:inline}
html[lang="es"] .site-head .wa:hover{text-decoration:underline}
/* (the phone rules for the number moved into the base 860px header block: round 14, D68) */
/* HOME-6 closing band sits directly on the pine footer: a hairline keeps them apart */
[data-label="HOME-6"]{border-bottom:1px solid rgba(212,176,74,.55)}


/* ===== round 14: membership ===== */
/* MEM-1 and REC-1 (D68): one line of prices under the opening buttons. */
.mh-price{font-size:15.5px;line-height:1.6;color:var(--ink2);margin-top:18px;max-width:58ch}
/* MEM-5 (D83): the decide line under Paid once on each card. */
.tier .decide{font-size:14px;line-height:1.5;color:var(--pine);margin-top:8px}
.tier.feat .decide{color:#D4B04A}   /* 4.8:1 on pine (D67; final review C24) */
/* MEM-7 (D84): "In writing. Read it.", the link to the warranty PDF. */
.diff p a{font-weight:500;color:var(--pine);white-space:nowrap}
/* MEM-6 (D91): freeze watch for any household, a field and a button under the dial. */
.freeze{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:24px 26px 26px;margin-top:34px}
.freeze .eyebrow{margin-bottom:8px}
.freeze-t p{font-size:15px;line-height:1.6;color:var(--ink);max-width:56ch}
.freeze-f{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.freeze-f input{flex:1 1 200px;min-width:0;min-height:48px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);outline:none;font-variant-numeric:tabular-nums}
.freeze-f input:focus{border-color:var(--pine)}
.freeze-f .btn{min-height:48px;flex:none}
.freeze-f .err{flex-basis:100%;margin-top:0}
.freeze-ok{font-size:15px;font-weight:500;color:var(--ok)}
/* MEM-13 (D82): for a parent's home. */
.par{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center}
.par .lede{font-size:17px;max-width:58ch}
.par-go{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:flex-end}
/* MEM-9 (D80): the neighbor block, smaller under the form and full size on the thank-you. */
.nb{margin-top:22px;padding-top:18px;border-top:1px solid var(--line2)}
.nb h4{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--pine)}
.nb p{font-size:15px;line-height:1.6;color:var(--ink2);margin-top:8px}
.nb-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.jform .nb .btn{margin-top:0}
.done .nb-acts{justify-content:center}
.nb.sm h4{font-size:19px}
.nb.sm p{font-size:14px}
/* MEM-9 (D70): the spam trap sits off the page. A person never sees it; a bot fills it. */
.jform .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* MEM-9 (D89, D85): the lines under the button, at a size a buyer can read. */
.jform .jsm{font-size:14px;line-height:1.6;color:var(--ink2);margin-top:12px}
/* D67, the Membership and Home Record components: nothing a buyer reads to decide under 15px, captions 14px. */
.facts dd{font-size:15px}
.tier .lead,.tier .tf li,.tier .visits,.tier .annual{font-size:15px}
.tier .xfer,.tier .disc{font-size:14px}
.rec-pts li,.doc-c li,.sa p,.faq p,.diff p,.gradelist p,.finding dd,.budget td,.yh-note,.done p{font-size:15px}
.doc-f,.finding-f,.cta2 p,.jsum em,.sa-p span,.budget td.q,.picker>summary span{font-size:14px}
.done .ref,.budget em{font-size:13px}
.dial-c .mo,.year-d .mo{font-size:11px}
@media (max-width:1080px){
  .freeze,.par{grid-template-columns:minmax(0,1fr);gap:20px}
  .par-go{justify-content:flex-start}
}
@media (max-width:860px){
  .freeze{padding:18px 18px 20px;margin-top:26px}
  .freeze-f .btn,.nb-acts .btn{flex:1 1 100%}
  .budget td{font-size:14px}
}


/* ===== round 14: home and terms ===== */
/* D67: the type floor. 15px for anything a buyer reads to decide, 14px for labels and small print; sizes only,
   the look stays. The --ink3 grey is darkened at the top of the file. */
.btn{font-size:14px}   /* the menu keeps 14.5px: at 15px the Spanish header overflowed at 1400px */
/* the wider Spanish header row (the WhatsApp line under the number) was clipped at 1400px; tighter gaps keep it inside */
.site-head .wrap{gap:20px}
.head-r{gap:12px}
.ubar{font-size:13px}
@media (max-width:860px){.ubar{font-size:12px}}   /* at 13px the Spanish short line wrapped to two lines on a 390px phone */
@media (max-width:389px){html[lang="es"] .ubar .dot{display:none}html[lang="es"] .ubar .lang{padding:5px 7px}html[lang="es"] .ubar{font-size:11.5px;letter-spacing:0}}   /* and on 360-375px phones (final review C21) */
.tel span{font-size:13px}
.door .meta,.trust>div,.way p,.egs,.askline,.qrule,.svc .t b,.svc .t p,.svc .t p.ex,.sub-a .sn,.empty,.bempty,.bi .n,.bi .v,.trow span,.pitch,.done p,.ticks li,.always>div>span,.std span,.cond ul,.facts dt,.facts dd,.rec-pts li,.note,.doc-c li,.tier .lead,.tier .tf li,.tier .price span,.tier .annual,.tier .visits,.seas li,.diff p,.sa p,.faq p,.cta2 p,.cta3 p,.stations>div,.grade p,.jsum,.pk-res p,.pk-opts button,.hf-nav button,.finding dd,.mh-cta .mh-note,.yh-note,.rec-more,.wdoc p,.wdoc li,.budget td,.gradelist p,.deflist>div,.rows>*,.hourly p,.f2-statement,.f2-tel,.wfoot b,.wfoot a,.add{font-size:15px}
.wfoot,.count,.chip,.svc .pr .mem,.svc .pr .per,.svc .pr .quote,.act .more,.act .maxhint,.matrow label,.matrow em,.saveline,.clr,.form .sm,.fld label,.err,.done .ref,.done .fall,.done .next p,.totals .dep,.basket .ladder,.tier .xfer,.tier .disc,.sa .disc,.sa-p span,.hf-row button,.year-tabs button,.picker>summary span,.finding-f,.legal .when,.budget td.q,.budget em,.hourly .mem,.hourly .per,.mbar span,.f2,.f2-about,.f2-towns,.f2 .f2-faithlink,.doc-f,.sub-a .sp u,.bi .n em,.towns>div em,.jsum em,.sec em{font-size:14px}
.f2-legal{font-size:13px}
.f2 h4{font-size:11px}
.sa .disc{font-weight:400;color:var(--ink2)}
.legal .when,.wfoot,.svc .pr .per,.svc .pr .quote,.finding-f,.doc-f{color:var(--ink2)}
/* D67: gold on pine only at 15px bold or larger; smaller gold on pine takes the lighter gold the verse uses (4.8:1). */
.ubar .r span,.band.pine .eyebrow,.hero-pine .eyebrow,.hero-one a,.hero-pine .hero-film a,.tier.feat .badge,.tier.feat .visits,.tier.feat .xfer,.hourly .mem,.mbar span,.doc-h .tnum,.f2 h4,.f2 .flag,.pk-res .eyebrow,.pk-res h3 u,.cta3 .num,.band.pine .deflist b{color:#D4B04A}
/* D67: 44px tap targets (buttons already are; the Home Care steppers, cross and Details are that builder's). */
.chip,.add,.clr{min-height:44px}
.ubar .lang{position:relative}
.ubar .lang::after{content:"";position:absolute;top:-12px;bottom:-12px;left:-8px;right:-8px}
.faq summary{min-height:44px;align-items:center}
.f2 ul{gap:2px}
.f2 ul a{display:inline-block;padding:10px 0}
.f2-links a{display:inline-block;padding:11px 0;border-bottom:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(251,251,249,.35)}
/* D87: the caption above the drawn house keeps its centered heading; the paragraph reads left-aligned. */
.hh-cap p{text-align:left}
/* D68 on phones: under the headline comes the price line, then the two buttons, then the paragraph. Order only. */
@media (max-width:860px){
  .hero-txt{display:flex;flex-direction:column;align-items:flex-start}
  .hero-txt .eyebrow{order:1}
  .hero-txt h1{order:2}
  .hero-txt .hero-one{order:3;margin-top:14px}
  .hero-txt .hero-go{order:4;margin-top:16px;width:100%;flex-direction:column;align-items:stretch}
  .hero-txt .lede{order:5;margin-top:22px}
  .hero-txt .hero-film{order:6}
}
/* D75: the call bar at the bottom of Home, Membership and Home Record on phones, injected by site.js once the
   header has scrolled off. Only transform animates. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;background:var(--pine);border-top:1px solid rgba(212,176,74,.55);box-shadow:0 -8px 24px -12px rgba(31,42,36,.5);transform:translateY(100%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;color:var(--paper);text-decoration:none;font-size:15px;font-weight:600;border-right:1px solid rgba(251,251,249,.18)}
.callbar a:last-child{border-right:none}
.callbar a.cb-wa{color:#D4B04A}
@media (hover:hover){.callbar a:hover{background:var(--pine2);color:var(--paper)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
@media (max-width:860px){
  .callbar{display:flex}
  .callbar.on{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
  body.cb-on{padding-bottom:52px}
}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}
@media print{.callbar{display:none!important}}
/* D91, D92: the one-field sign-up forms. */
.mf{display:flex;flex-direction:column;gap:12px}
.mf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.mf-in{display:flex;gap:10px;flex-wrap:wrap}
.mf-in input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--line);background:var(--surface);outline:none}
.mf-in input:focus{border-color:var(--pine)}
.mf-in .btn{flex:none}
.mf-msg{font-size:15px;line-height:1.5;color:var(--ink2);margin:0}
.mf-msg:empty{display:none}
.mf-msg.bad{color:var(--warn)}
.mf.sent .mf-in{display:none}
.mf.sent .mf-msg{color:var(--pine);font-weight:500}
/* HOME-7 (D91): the freeze watch band after the sample finding. */
.band.freeze{padding:28px 0 30px}
.freeze .mf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px 40px;align-items:center}
.freeze .mf-lead .eyebrow{margin-bottom:8px}
.freeze .mf-lead p{font-size:16px;line-height:1.55;color:var(--ink);max-width:58ch}
.freeze .mf-msg{grid-column:1/-1}
/* HOME-6 (D80, D92): the neighbor block with its share buttons, and the seasonal letters sign-up, under the three steps. */
.cta-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:44px;padding-top:36px;border-top:1px solid rgba(251,251,249,.18);max-width:1040px}
.cta-more h3{font-size:24px;color:var(--paper)}
.cta-more p{font-size:15px;line-height:1.6;color:rgba(251,251,249,.85);margin-top:10px;max-width:44ch}
.nb-share{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cta-more .mf{margin-top:16px}
.cta-more .mf-in input{border-color:rgba(251,251,249,.45);background:rgba(251,251,249,.08);color:var(--paper)}
.cta-more .mf-in input::placeholder{color:rgba(251,251,249,.6)}
.cta-more .mf-in input:focus{border-color:var(--paper)}
.cta-more .mf-msg{color:rgba(251,251,249,.9)}
.cta-more .mf.sent .mf-msg{color:#D4B04A}
.cta-more .mf-msg.bad{color:#F2B8C0}
/* HOME-3 (D81, D82): the promise line in the Home Care door and the parents' line in the membership door. */
.door .meta-promise{font-size:15px;font-weight:500;color:var(--pine);margin-top:-4px}
.door .meta-parents{margin-top:-4px}
.door .meta-parents a{font-weight:500}
/* ABOUT-1 (D65): the person behind the company, hidden until his surname and sentence arrive. */
.person{margin-top:22px;padding-top:18px;border-top:1px solid var(--line2)}
.person .eyebrow{margin-bottom:10px}
.person-name{font-size:17px;font-weight:600;color:var(--pine)}
.person-line{font-size:15px;line-height:1.6;color:var(--ink2);margin-top:6px}
.person-legal{font-size:14px;color:var(--ink2);margin-top:10px}
@media (max-width:860px){
  .freeze .mf{grid-template-columns:minmax(0,1fr);gap:14px}
  .cta-more{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:34px;padding-top:30px}
}

/* ===== round 14: home care ===== */
/* CARE-1 (D81, D84): four promises, the warranty one linked to the document; one column on a phone (.c4 stays two). */
.trust a{color:var(--pine);font-weight:500;white-space:nowrap}
@media (max-width:860px){.trust.c4{grid-template-columns:minmax(0,1fr)}.trust>div{padding:13px 16px}}
/* CARE-3 (D74, D92): every price on one page, "Describe the job instead" beside the ask line, the photograph line. */
/* D131 (30 Sep 2026, his pick A): the price page (gold) and the whole list (pine) as two buttons above the categories */
.toolacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.toolacts .btn{min-height:50px;padding:6px 24px;font-size:15px}
.toolacts .btn[aria-pressed=true]{background:var(--pine2);border-color:var(--pine2)}
.pickline{margin:14px 0 0;font-size:15px;color:var(--ink2)}
.pickline + .chips{margin-top:10px}
.askrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}
.askrow .askline{margin:0;font-size:15px}
.askphoto{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink2)}
.askphoto a{font-weight:600;white-space:nowrap;text-decoration:none;color:var(--pine)}
.askphoto a:hover{text-decoration:underline;text-underline-offset:3px}
/* CARE-3 photo slot (D74): worklist.js moves the CARE-1 photograph here under 860px; after the list, before the ways to pay. */
.photo-slot{display:none}
@media (max-width:860px){
  .photo-slot:not([hidden]){display:block;padding:0 var(--pad) 8px}
  .hc-main>.photo-slot{order:4}   /* item 1, 9 Oct review: the photograph comes after the list, not before it */
  .photo-slot .plate{margin-right:8px}
}
/* CARE-4 (D67, D88): decision text at 15px, the quantity rule in the first quantity row, the hourly box after the list on a phone. */
.svc .t b{font-size:15.5px}
.svc .t p{font-size:15px;line-height:1.5}
.svc .t p.ex{font-size:15px}
.svc .t p.qr{font-size:14px;line-height:1.5;color:var(--ink2);margin-top:8px;padding-left:10px;border-left:2px solid var(--gold-print)}
.svc .pr .mem{font-size:13.5px}
.svc .pr .per{font-size:12.5px}
.sec em{font-size:13px}
.egs{font-size:15px}
@media (max-width:860px){
  #listwrap{display:flex;flex-direction:column}
  #listwrap>.list{order:1;border-top:1px solid var(--line)}
  #listwrap>.hourly{order:2;margin-top:18px}
  #listwrap>.pitch{order:3}
}
/* D67: every control a thumb can hit, 44px. The remove cross keeps its look and gains its hit area with negative margins. */
.stp button{width:44px;height:44px;font-size:18px}
.stp span{height:44px;line-height:44px;font-size:15px}
.add{min-height:44px;font-size:14px}
.chip{min-height:44px;padding:9px 16px;font-size:14px}
.clr{min-height:44px;font-size:14px}
.bi .x{width:44px;height:44px;margin:-9px -12px -9px 0;font-size:20px;display:flex;align-items:center;justify-content:center;align-self:center}
@media (max-width:860px){.svc .fold{min-height:44px;display:inline-flex;align-items:center;margin-top:0;font-size:14px}}
/* CARE-5 (D70, D90): the form is a form; the trap field, the who box, the consent box; the totals and thank-you text at 15px. */
.form .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.form :invalid{box-shadow:none}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink2);cursor:pointer}
.chk input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--pine);cursor:pointer}
.chk span{display:block}
.totals .dep{font-size:15px}
.basket .ladder{font-size:15px}
.form .promise{font-size:15px;color:var(--ink)}
.done .next p{font-size:15px}
/* CARE-5 thank-you (D80): the neighbor block with the two share buttons. */
.neighbor{margin-top:20px;padding:18px 18px 20px;border:1px solid var(--line);background:var(--sunk);text-align:left}
.neighbor h5{font-family:var(--serif);font-size:21px;font-weight:400;color:var(--pine);margin:0}
.neighbor p{font-size:15px;line-height:1.55;color:var(--ink2);margin-top:6px}
.neighbor .share{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.neighbor .share .btn{color:var(--pine);font-size:14px}
/* CARE-10 (D91): the freeze list, five rows in the house hairline style. */
.fz-list{margin-top:26px;border-top:1px solid var(--line)}
.fz-list>div{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink)}
.fz-list b{font-weight:500;color:var(--pine);white-space:nowrap;text-align:right;flex:none}
.fz-list b i{font-style:normal}
.fz-list b u{text-decoration:none;font-size:13px;font-weight:400;color:var(--ink2)}
.fz-list b em{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--gold)}
.fz-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.fz-go span{font-size:15px;color:var(--ink2)}
.fz-go span i{font-style:normal;font-weight:600;color:var(--ink)}
@media (max-width:860px){.fz-list>div{flex-direction:column;gap:4px}.fz-list b{text-align:left}.fz-list b em{display:inline;margin-left:10px}}
/* STD-4 (D84): the link to the warranty document under the card. */
.wread{margin-top:18px;font-size:15px}
.wread a{font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold-print);padding-bottom:1px}
/* CONTACT-2 (D75, D92): WhatsApp first in Spanish; the line that shows in Spanish only. */
html[lang="es"] .cbtns .btn[data-link="whatsapp"]{order:-1}
html:not([lang="es"]) .es-only{display:none}
/* CONTACT-3 (D92): the seasonal letters sign-up. */
.letters{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.letters h2{font-size:clamp(24px,2.6vw,32px);max-width:24ch}
.lform{display:flex;flex-wrap:wrap;gap:10px}
.lform input{flex:1;min-width:200px;min-height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line);outline:none}
.lform input:focus{border-color:var(--pine)}
.lform .err,.lform .ok{flex-basis:100%;margin-top:4px}
.lform .ok{font-size:15px;color:var(--pine)}
@media (max-width:860px){.letters{grid-template-columns:minmax(0,1fr);gap:22px}}

/* ===== round 14: shared (skip link) ===== */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--pine);color:#fff;padding:10px 14px;font-weight:600}
.skip:focus{left:16px}

/* ===== 23 Sep 2026: Describe the job, its own form (the owner's request after round 14) ===== */
.form[data-mode="list"] .only-describe{display:none}
.form[data-mode="describe"] .only-list{display:none}
.form input[type="file"]{display:block;width:100%;font-size:14px;padding:10px 0}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 6px}
.thumb{position:relative;width:96px}
.thumb img{display:block;width:96px;height:96px;object-fit:cover;border:1px solid var(--line2);background:var(--sunk)}
.thumb span{display:block;font-size:11px;line-height:1.3;color:var(--ink3);margin-top:4px}
.thumb.ok span{color:var(--pine)}.thumb.bad span{color:#B4404F}.thumb.up img{opacity:.55}
.thumb .rm{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border:1px solid var(--line2);background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.photonote{margin-top:6px}

/* REC-6, the sample Home Record: three page pictures and the button (25 Sep 2026) */
.srec-band .sub{color:rgba(251,251,249,.82)}
.srec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.srec a{display:block;color:var(--paper);text-decoration:none}
.srec img{display:block;width:100%;height:auto;background:#fff;border:1px solid rgba(251,251,249,.35);box-shadow:0 10px 24px rgba(0,0,0,.28);transition:transform .25s ease}
@media (hover:hover){.srec a:hover img{transform:translateY(-3px)}}   /* item 28, 9 Oct review: no hover look left behind after a tap */
.srec span{display:block;margin-top:10px;font-size:14px;color:rgba(251,251,249,.85)}
.srec-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.srec-cta span{font-size:14px;color:rgba(251,251,249,.82)}
@media (max-width:700px){.srec{gap:10px}.srec span{font-size:12px}}
@media (prefers-reduced-motion:reduce){.srec img{transition:none}.srec a:hover img{transform:none}}

/* ---------------- Luis's fixes of 25 Sep 2026 (from the Home Record app session) ----------------
   The thank-you window: after any form is sent, the thanks opens over the page with a Close button, and closing it
   wipes the form so another can be sent (site.js thanks()). Square corners and a hairline, like the rest. */
.thanks-open{overflow:hidden}
.thanks-ov{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,32,26,.55)}
.thanks-box{width:100%;max-width:560px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);padding:22px 22px 24px;text-align:center;display:flex;flex-direction:column}
/* final review C15: on a phone the Spanish thanks is taller than the screen; the message scrolls inside its own area and
   Close stays in view at the bottom (dvh: iOS counts the hidden toolbar in 100vh). */
.thanks-box>:first-child{flex:0 1 auto;min-height:0;overflow-y:auto;padding:4px;margin:-4px}   /* room for the 2px focus ring of full-width buttons (final review) */
.thanks-box .done{border-top:none;padding:6px 0 0}
.thanks-box .freeze-ok{margin:8px 0 0}
.thanks-close{margin-top:20px;min-width:160px;flex:none;align-self:center}
/* The list's clear button beside its title, where it can be seen */
.bhd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.bhd-top h3{margin:0}
.clr.top{width:auto;min-height:36px;margin-top:0;padding:0 12px;border:1px solid var(--line);color:var(--ink2)}
.clr.top:hover{color:var(--ink);border-color:var(--ink3)}
/* Your home: back to the standard home */
.yh-reset{margin-top:12px;min-height:40px;padding:0 14px;background:transparent;border:1px solid var(--line);color:var(--ink2);font:inherit;font-size:14px;cursor:pointer}
.yh-reset:hover{color:var(--ink);border-color:var(--ink3)}
/* Address suggestions from Google (site.js), under the address box, square and hairlined like the rest */
.addr-wrap{position:relative}
.addr-list{position:absolute;left:0;right:0;top:100%;z-index:50;margin:2px 0 0;padding:0;list-style:none;background:var(--surface);border:1px solid var(--line);text-align:left}
.addr-list li{padding:10px 12px;font-size:15px;line-height:1.35;cursor:pointer;border-bottom:1px solid var(--line2)}
.addr-list li:last-child{border-bottom:none}
.addr-list li b{display:block;font-weight:500;color:var(--ink)}
.addr-list li span{display:block;font-size:13px;color:var(--ink3)}
.addr-list li[aria-selected="true"],.addr-list li:hover{background:var(--sunk)}
.addr-list li.addr-by{padding:6px 12px;font-size:11px;color:var(--ink3);cursor:default;background:transparent}

/* Item 1 of the 9 Oct review: while the search box holds words, only the box, the count and the results show */
.tools.searching .egs,.tools.searching .toolacts,.tools.searching .pickline,.tools.searching .chips,.tools.searching .askrow,.tools.searching .askphoto{display:none}
.tools.searching{padding-bottom:18px}
/* Items 3 of the 9 Oct review: the answer for licensed-work words, and the describe button inside an empty result */
.empty .btn{margin-top:14px}
.empty.lic{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);text-align:left;color:var(--ink2);margin-bottom:14px}
.empty.lic p{max-width:60ch}
.empty.lic:last-child{margin-bottom:0}
/* Item 7 of the 9 Oct review: Call beside "See my list" in the Home Care total bar */
.mbar .mgo{display:flex;align-items:center;gap:8px}
.mbar .mcall{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(251,251,249,.45);color:var(--paper);font-weight:600;text-decoration:none}
/* Item 8 of the 9 Oct review: form boxes that can be seen (edge 3.8 to 1 on white), dark hint words (5 to 1),
   the keyboard ring shown again, the required boxes named on their labels, and a larger error line */
.fld input,.fld select,.fld textarea,.tools input[type=search],.tools input[type=text]{border-color:var(--stone)}
.fld input::placeholder,.fld textarea::placeholder,.tools input::placeholder{color:#646D67;opacity:1}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,.tools input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fld.req>label::after{content:" (required)";font-weight:400;color:var(--ink2)}
html[lang="es"] .fld.req>label::after{content:" (obligatorio)"}
.fnote{font-size:14px;color:var(--ink2);margin:-2px 0 14px}
.err{font-size:14.5px;font-weight:600}
/* Item 12 of the 9 Oct review: a language switch that can be read and hit (14 px words; the touch area reaches 50 px
   with the existing ::after), a larger "Hablamos español" under the phone, and a Spanish door on Home's first screen */
.ubar .lang{font-size:14px;padding:7px 12px;letter-spacing:.03em;border-color:var(--gold-dark-bg)}
.tel span{font-size:13.5px}
.hero-es{margin-top:14px}
.hero-es button{background:none;border:none;padding:10px 0;min-height:44px;color:#D4B04A;font:600 15px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
html[lang="es"] .hero-es{display:none}
/* Item 9 of the 9 Oct review: a button on Home Care's first screen, and the two long cards of CARE-2 folded */
.hc-go{margin-top:18px}
.wmore{margin-top:10px}
.wmore summary{cursor:pointer;color:var(--pine);font-weight:600;font-size:15px;min-height:44px;display:flex;align-items:center;list-style:none}
.wmore summary::-webkit-details-marker{display:none}
.wmore summary::after{content:"+";margin-left:8px;color:var(--gold)}
.wmore[open] summary::after{content:"\2212"}
.wmore p{margin-top:4px}
@media (max-width:860px){.hero-txt .hero-es{order:4;margin-top:8px}}   /* item 12: under the two buttons on a phone */
/* Item 13 of the 9 Oct review: a plain line under the Home headline */
.hero-plain{font-size:19px;line-height:1.45;color:#FBFBF9;margin-top:14px;max-width:34ch}
@media (max-width:860px){.hero-txt .hero-plain{order:2}}
/* Item 16 of the 9 Oct review: the three plan cards the same height, their buttons along one line at the bottom */
@media (min-width:1081px){.tiers{align-items:stretch}}
@media (min-width:1081px){
  .tiers .tier .xfer{margin-top:auto}                               /* the closing line and the button sit at the bottom of every card */
  .tiers .tier:not(.feat)::before{content:"";display:block;height:20px}   /* room for the "Most popular" line, so the names and prices line up */
}
/* Item 18 of the 9 Oct review: the grey lines in the door cards keep the paragraph's width, so no line runs to the edge */
.door .meta{max-width:50ch}
/* Item 19 of the 9 Oct review: a photograph where people decide (MEM-14, after the plans), and the top photograph
   (MEM-3) kept on phones, shorter */
@media (max-width:860px){.mem-photo{display:block;height:200px}.mem-photo2{height:200px}}

/* Item 20 of the 9 Oct review: larger text. The reading sizes follow the browser's own text-size setting (rem), are
   one step larger on phones, button words are larger, and no label is smaller than about 12 px. */
html{font-size:100%}
body{font-size:1rem}
.door .meta,.trust>div,.way p,.egs,.askline,.qrule,.svc .t b,.svc .t p,.svc .t p.ex,.sub-a .sn,.empty,.bempty,.bi .n,.bi .v,.trow span,.pitch,.done p,.ticks li,.always>div>span,.std span,.cond ul,.facts dt,.facts dd,.rec-pts li,.note,.doc-c li,.tier .lead,.tier .tf li,.tier .price span,.tier .annual,.tier .visits,.seas li,.diff p,.sa p,.faq p,.cta2 p,.cta3 p,.stations>div,.grade p,.jsum,.pk-res p,.pk-opts button,.hf-nav button,.finding dd,.mh-cta .mh-note,.yh-note,.rec-more,.wdoc p,.wdoc li,.budget td,.gradelist p,.deflist>div,.rows>*,.hourly p,.f2-statement,.f2-tel,.wfoot b,.wfoot a,.add{font-size:.9375rem}
.wfoot,.count,.chip,.svc .pr .mem,.svc .pr .per,.svc .pr .quote,.act .more,.act .maxhint,.matrow label,.matrow em,.saveline,.clr,.form .sm,.fld label,.err,.done .ref,.done .fall,.done .next p,.totals .dep,.basket .ladder,.tier .xfer,.tier .disc,.sa .disc,.sa-p span,.hf-row button,.year-tabs button,.picker>summary span,.finding-f,.legal .when,.budget td.q,.budget em,.hourly .mem,.hourly .per,.mbar span,.f2,.f2-about,.f2-towns,.f2 .f2-faithlink,.doc-f,.sub-a .sp u,.bi .n em,.towns>div em,.jsum em,.sec em{font-size:.875rem}
@media (max-width:860px){
  .door .meta,.trust>div,.way p,.egs,.askline,.qrule,.svc .t b,.svc .t p,.svc .t p.ex,.sub-a .sn,.empty,.bempty,.bi .n,.bi .v,.trow span,.pitch,.done p,.ticks li,.always>div>span,.std span,.cond ul,.facts dt,.facts dd,.rec-pts li,.note,.doc-c li,.tier .lead,.tier .tf li,.tier .price span,.tier .annual,.tier .visits,.seas li,.diff p,.sa p,.faq p,.cta2 p,.cta3 p,.stations>div,.grade p,.jsum,.pk-res p,.pk-opts button,.hf-nav button,.finding dd,.mh-cta .mh-note,.yh-note,.rec-more,.wdoc p,.wdoc li,.budget td,.gradelist p,.deflist>div,.rows>*,.hourly p,.f2-statement,.f2-tel,.wfoot b,.wfoot a,.add{font-size:1rem}
  .wfoot,.count,.chip,.svc .pr .mem,.svc .pr .per,.svc .pr .quote,.act .more,.act .maxhint,.matrow label,.matrow em,.saveline,.clr,.form .sm,.fld label,.err,.done .ref,.done .fall,.done .next p,.totals .dep,.basket .ladder,.tier .xfer,.tier .disc,.sa .disc,.sa-p span,.hf-row button,.year-tabs button,.picker>summary span,.finding-f,.legal .when,.budget td.q,.budget em,.hourly .mem,.hourly .per,.mbar span,.f2,.f2-about,.f2-towns,.f2 .f2-faithlink,.doc-f,.sub-a .sp u,.bi .n em,.towns>div em,.jsum em,.sec em{font-size:.9375rem}
}
.btn{font-size:15px;min-height:48px}
.btn.lg{font-size:16px}
.tier .badge,.grade-chip,.svc .tag{font-size:12px}
.hf-of,.finding-h,.doc-h,.doc-h .tnum,.verse figcaption,.f2-ref{font-size:12.5px}
.f2 h4{font-size:12.5px}
.f2-sub{font-size:10.5px}
.bhd-top h3{font-size:12.5px}
/* Item 21 of the 9 Oct review: the Home Record page says what it is, and offers the sample at the top */
.rec-plain{font-family:var(--serif);font-size:23px;line-height:1.35;color:var(--pine);margin-top:12px;max-width:34ch}
.rec-sample{margin-top:10px}
.rec-sample a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15.5px}
/* Item 17 of the 9 Oct review: the first-year line on each plan card and the payment table */
.tier .first{font-size:14px;font-weight:600;color:var(--pine);margin-top:8px}
.tier.feat .first{color:#FBFBF9}
#hpExample{display:none}
.paywrap{overflow-x:auto;margin-top:22px}
.paytable{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.paytable th,.paytable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.paytable thead th{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.paytable tbody th{color:var(--pine);font-weight:600}
.paytable td b{color:var(--pine)}
/* Item 22 of the 9 Oct review: the materials box and the Home Record line wait until the list has a job */
.basket.is-empty .matrow,.basket.is-empty .ladder{display:none}

/* ---- 9 Oct review, the polish items ---- */
/* 28: a press response on buttons (instant, released at once) */
.btn:active,.chip:active,.add:active,.hf-nav button:active,.hf-row button:active,.pk-opts button:active,.callbar a:active,.mbar button:active{transform:scale(.98)}
/* 29: the thank-you window and the phone total bar arrive instead of cutting in */
@keyframes almFade{from{opacity:0}to{opacity:1}}
@keyframes almRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes almUp{from{transform:translateY(100%)}to{transform:none}}
.thanks-ov{animation:almFade .2s ease-out}
.thanks-box{animation:almRise .22s cubic-bezier(.2,.8,.2,1)}
.mbar.on{animation:almUp .25s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.thanks-ov,.thanks-box,.mbar.on{animation:none}}
/* 31: slightly quicker fades and colour changes; the top photograph settles in 1 s */
.js [data-reveal]{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
a,.btn,.chip,.add,.hf-nav button,.hf-row button,.pk-opts button{transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease)}
.js .ph img{transition:transform 1s var(--ease-out)}
/* 32: room kept for the error line, so Send does not jump */
#ferr{min-height:1.6em}
/* 34: the footer: brighter small text, links tall enough for a thumb, the email beside the phone */
.f2{color:rgba(251,251,249,.88)}
.f2 a{color:rgba(251,251,249,.9)}
.f2-legal{color:rgba(251,251,249,.8)}
.f2 ul{gap:0}
.f2 ul a{display:inline-flex;align-items:center;min-height:44px}
.f2-mail{font-size:14px;margin-top:6px}
.f2-mail a{display:inline-flex;align-items:center;min-height:44px}
/* 38: Home Care's deposit and "On the day" boxes keep a reading width on a computer */
.always>div[style*="1 / -1"]>span{display:block;max-width:78ch}
/* 44: the three promise headings use the column's width, so they wrap evenly */
.diff h3{max-width:none}
/* 49 (and 20): the price tables: headings no smaller than 12 px, and no sideways slide on the smallest phones */
body .pt th{font-size:12px}
body .pt .tag{font-size:11.5px}
@media (max-width:360px){body .pt{font-size:13px}body .pt td,body .pt th{padding-right:5px}body .pt th{letter-spacing:.02em}body .pt td:first-child{overflow-wrap:anywhere}}
/* 51: a line for phones that block scripts */
.nojs{background:var(--sunk);border:1px solid var(--line);padding:14px 18px;margin:16px 0;font-size:16px}
/* item 35: the longer warranty link may wrap on a narrow phone (it was two words before) */
a[href$="warranty.pdf"]{white-space:normal!important}
/* 53: the drawing of the service area */
.area-map{margin:26px 0 0;max-width:520px}
.area-map svg{display:block;width:100%;height:auto}
.area-map g circle{fill:#A8842A}.area-map g .am-c{fill:#1E4A3A}
.area-map text{font:500 13px var(--sans);fill:#1F2A24}.area-map .am-big{font:400 17px var(--serif);fill:#1E4A3A}
.area-map .am-road{font:600 11px var(--sans);fill:#8A8F88;letter-spacing:.06em}.area-map .am-n{font:600 12px var(--sans);fill:#1E4A3A}
.area-cap{font-size:14px;color:var(--ink2);margin-top:6px}
.area-ask a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* 56: the contents list of the Terms */
.toc{border:1px solid var(--line);background:var(--surface);padding:16px 20px;margin:0 0 26px}
.toc-h{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}.toc li{padding:3px 0}
@media (max-width:600px){.toc ol{columns:1}}
/* 57: the 404 page: the number kept on one line, the buttons one width */
.lede a[href^="tel:"]{white-space:nowrap;font-weight:600;color:var(--pine)}
.nf-go{display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:340px;margin-top:22px}
.nf-contact{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* 58: on a phone the Spanish "Book the assessment" button keeps one line, its note drops under it */
@media (max-width:860px){.mh-cta .mh-pair{flex-wrap:wrap}.mh-cta .mh-note{white-space:normal}}
/* 59: The Woodlands spans two cells, so seven towns fill the grid with no empty cell; Contact buttons stack on a phone */
.towns>div:first-child{grid-column:span 2}
@media (max-width:860px){.cbtns{flex-direction:column;align-items:stretch}}
.lnote{font-size:14px;color:var(--ink2);margin-top:10px;max-width:60ch}
/* Item 24 of the 9 Oct review: on every screen, Membership shows the short version of the Home Record part and a link */
#record .rec-pts,#record .rec-l>.note,#record .rec-r{display:none}
#record .rec-more{display:inline-block}
/* Item 25: a small "Illustration" tag on the generated photographs (add class "real" to a figure once it holds a real one) */
.ph::after,.photoband::after{content:"Illustration";position:absolute;left:10px;bottom:10px;z-index:1;background:rgba(20,28,24,.72);color:#FBFBF9;font:600 12px/1 var(--sans);letter-spacing:.04em;padding:6px 8px;pointer-events:none}
html[lang="es"] .ph::after,html[lang="es"] .photoband::after{content:"Ilustración"}
.ph.real::after,.photoband.real::after{display:none}
/* Item 39: on a phone the sample pages stand one above the other, large enough to read */
@media (max-width:860px){.srec{grid-template-columns:minmax(0,1fr);gap:26px}.srec a{max-width:320px;margin:0 auto;width:100%}}
/* Item 41: the join bar on Membership phones */
.mjoin{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:var(--pine);color:#FBFBF9;border-top:1px solid rgba(212,176,74,.55);box-shadow:0 -8px 24px -12px rgba(31,42,36,.5)}
.mjoin span{font-size:14px;line-height:1.3}.mjoin b{display:block;font-family:var(--serif);font-weight:400;font-size:17px}
.mjoin .btn{min-height:44px;white-space:nowrap}
@media (max-width:860px){.mjoin.on{display:flex;animation:almUp .25s cubic-bezier(.2,.8,.2,1)}}
@media (prefers-reduced-motion:reduce){.mjoin.on{animation:none}}
@media print{.mjoin{display:none!important}}
/* Item 42 of the 9 Oct review: gold is kept for prices and the main button on dark bands; labels, bullets and rules
   turn green (on light) or white (on dark) */
.eyebrow{color:var(--pine)!important}
.band.pine .eyebrow,.hero-pine .eyebrow,.m-cta .eyebrow,.srec-band .eyebrow,.pk-res .eyebrow{color:rgba(251,251,249,.85)!important}
.diff{border-top-color:var(--pine)!important}
.tf li::before,.tier .tf li::before{background:var(--pine)!important}
.tier .badge{color:var(--pine)!important}
.tier.feat .badge{color:#FBFBF9!important}
.tier .xfer,.tier .decide{color:var(--ink2)!important}
.tier.feat .xfer,.tier.feat .decide{color:rgba(251,251,249,.82)!important}
.tier.feat .tf li::before{background:rgba(251,251,249,.6)!important}
.hf-of{color:var(--pine)!important}
.f2 h4{color:rgba(251,251,249,.72)!important}
/* Item 43: one way of framing photographs; the thin offset frame stays only on Home's first photograph */
.plate::after{display:none}
.hero-pine .plate::after{display:block}
/* Item 46: About's green band: the founding sentence fills the empty right half on a computer */
@media (min-width:861px){
  [data-label="ABOUT-3"] .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:64px;align-items:start}
  [data-label="ABOUT-3"] .eyebrow,[data-label="ABOUT-3"] h2,[data-label="ABOUT-3"] .sub:not(.founding){grid-column:1}
  [data-label="ABOUT-3"] .founding{grid-column:2;grid-row:1/4;align-self:center;font-size:19px;line-height:1.55;border-left:2px solid var(--gold-dark-bg);padding-left:22px;margin:0}
}
/* Item 54: the category buttons and the way back on the price page */
.pjump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.pjump a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--pine);text-decoration:none;font-size:14.5px}
.pback{margin:8px 0 26px;font-size:14.5px}.pback a{display:inline-flex;align-items:center;min-height:44px}
@media print{.pjump,.pback{display:none!important}}
/* The films (D191, 10 Oct 2026): the note under the words, the "Illustration" tag on the poster only, the frame at 16:9 */
.vid-note{font-size:14px;color:var(--ink2);margin-top:14px}
.vid-frame:not(.playing)::after{content:"Illustration";position:absolute;left:10px;bottom:10px;z-index:1;background:rgba(20,28,24,.72);color:#FBFBF9;font:600 12px/1 var(--sans);letter-spacing:.04em;padding:6px 8px;pointer-events:none}
html[lang="es"] .vid-frame:not(.playing)::after{content:"Ilustración"}
.vid-frame video{background:#000;object-fit:contain}
@media (max-width:860px){.vid{grid-template-columns:minmax(0,1fr);gap:22px}.vid .plate{margin-right:14px}}
.vid-frame:not(.playing)::after{top:10px;bottom:auto}   /* the films' title cards sit at the bottom of the poster */