/* Batch 16 top-tier trade site (Nov 3, 2026), from the Dubon Landscaping build. tt16.py fills FONTS, ROOT and
   BOOKING_RULES per site and writes site/style.css. Keep the container release block last. */
@font-face{font-family:'Barlow Semi Condensed';src:url(fonts/barlow-semi-condensed-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#F7F5F0;--bg-2:#E9E7E2;--card:#FFFFFF;--ink:#171615;--muted:#51504E;--line:#D8D6D1;
  --palm:#2E2A24;--palm-deep:#221F1B;--palm-soft:#E6E5E5;--clay:#D9A13B;--cream:#FBFAF6;
  --foot-ink:#EAEAE9;--foot-sub:#E8C789;--bg-rgb:247 245 240;
  --serif:'Barlow Semi Condensed','Arial Narrow',ui-sans-serif,sans-serif;
  --sans:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --hw:700;--bw:700;--sw:600;--hs:100%;--hls:-.005em;
  --gutter:clamp(16px,4vw,64px);--pad:clamp(56px,7.5vw,96px);--radius:14px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none}
img{display:block;width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--serif);font-weight:var(--hw);font-stretch:var(--hs);line-height:1.06;letter-spacing:var(--hls);text-wrap:balance;margin:0}
h1{font-size:clamp(2.55rem,1.45rem + 3.5vw,4.25rem);line-height:1.02}
h2{font-size:clamp(2rem,1.35rem + 2.1vw,3rem)}
h3{font-size:clamp(1.35rem,1.15rem + .6vw,1.6rem);line-height:1.15}
p{margin:0}
.nb{white-space:nowrap}
.nw{display:inline-block;white-space:nowrap;text-decoration:inherit}
.mail{overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:16px;z-index:100;background:var(--card);padding:.6em 1em;border-radius:6px}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Preview ribbon */
.ribbon{margin:0;background:var(--palm-deep);color:#EFE9DA;font:500 .86rem/1.45 var(--sans);text-align:center;padding:.6rem var(--gutter);text-wrap:balance}

/* Header */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.4vw,34px);padding:13px var(--gutter);min-height:76px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);line-height:1;margin-right:auto;min-width:0}
.brand-words{display:flex;flex-direction:column;min-width:0}
.mark{flex:none;width:clamp(38px,30px + 1.6vw,46px);height:clamp(38px,30px + 1.6vw,46px)}
.mark svg{display:block;width:100%;height:100%}
.mark-img{width:auto;max-width:96px}
.mark-img img{display:block;width:auto;height:100%;max-width:96px;object-fit:contain;border-radius:8px}
.brand-name{font:var(--bw) clamp(1.32rem,1.02rem + 1.3vw,1.8rem)/.95 var(--serif);font-stretch:var(--hs);letter-spacing:-.015em}
.brand-sub{font:600 .62rem/1.25 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--palm);margin-top:.45em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px)}
.nav a{font:500 .98rem/1 var(--sans);text-decoration:none;padding:.55em 0;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--palm)}
.nav .lang{color:var(--muted)}
.top-phone{display:inline-flex;align-items:center;gap:.45em;font:600 .98rem/1 var(--sans);text-decoration:none;color:var(--palm)}
.top-phone svg{width:18px;height:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.92em 1.35em;border-radius:7px;font:600 1rem/1.15 var(--sans);text-decoration:none;white-space:nowrap;border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s;cursor:pointer;text-align:center}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--palm);color:var(--cream)}
.btn-primary:hover{background:var(--palm-deep)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{color:var(--palm);font-weight:600}

/* Phone menu: details/summary, no scripts */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;font:600 .98rem/1 var(--sans);padding:.72em 1em;border:1.5px solid var(--ink);border-radius:7px;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.bars{display:inline-grid;gap:4px}
.bars i{display:block;width:16px;height:1.5px;background:currentColor}
.menu .t-close{display:none}
.menu[open] .t-open{display:none}
.menu[open] .t-close{display:inline}
.menu-panel{position:absolute;left:0;right:0;top:100%;height:100svh;overflow:auto;background:var(--bg);border-top:1px solid var(--line);padding:12px var(--gutter) 160px;display:flex;flex-direction:column;gap:28px}
.menu-panel nav{display:flex;flex-direction:column}
.menu-panel nav a{font:var(--hw) 2rem/1.1 var(--serif);font-stretch:var(--hs);text-decoration:none;padding:.42em 0;border-bottom:1px solid var(--line)}
.menu-actions{display:grid;gap:10px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);min-height:clamp(560px,calc(100svh - 120px),860px)}
.hero-text{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:var(--pad) clamp(24px,4vw,72px) var(--pad) var(--gutter)}
.lede{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.55;color:var(--muted)}
.hero-photo{position:relative;margin:0}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 60%;border-bottom-left-radius:36px}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font:500 .96rem/1.4 var(--sans);color:var(--muted)}
.meta li{display:flex;align-items:center;gap:9px}
.meta li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--clay)}
.hero-alt{font-size:.98rem;color:var(--muted)}

/* Sections */
.sec{padding:var(--pad) var(--gutter)}
.sec-alt{background:var(--bg-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sec-head>div{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sec-head p{color:var(--muted);font-size:1.1rem}
.statement{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:clamp(48px,6vw,88px) var(--gutter);border-bottom:1px solid var(--line)}
.statement p{grid-column:1/span 10;font:var(--sw) clamp(1.55rem,1.05rem + 1.8vw,2.55rem)/1.24 var(--serif);font-stretch:var(--hs);letter-spacing:-.01em;text-wrap:balance}

/* Service cards (home) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--palm);box-shadow:0 10px 30px -18px rgba(20,20,20,.4)}
.card img{aspect-ratio:4/3;object-fit:cover}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body p{color:var(--muted)}
.card-more{margin-top:auto;padding-top:6px;font:600 .95rem/1.2 var(--sans);color:var(--palm)}

/* Split feature */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center}
.split-media img{border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover}
.split-text{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.split-text>p{color:var(--muted);font-size:1.1rem}
.ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);align-self:stretch}
.ticks li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.ticks li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--palm);transform:translateY(-2px)}

/* Seasons */
.seasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.season{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px}
.season p{color:var(--muted)}
.months{font:600 .8rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.season-icon{display:block;width:44px;height:44px;color:var(--palm);margin-bottom:6px}
.season-icon svg{width:100%;height:100%}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.step{border-top:1.5px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.step-n{font:var(--hw) 2.3rem/1 var(--serif);font-stretch:var(--hs);color:var(--palm)}
.step p{color:var(--muted)}

/* Area */
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,96px);align-items:start}
.area-text{display:flex;flex-direction:column;gap:16px}
.area-text p{color:var(--muted);font-size:1.1rem}
.towns{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.towns li{font:var(--hw) clamp(1.8rem,1.3rem + 1.6vw,2.6rem)/1.1 var(--serif);font-stretch:var(--hs);padding:16px 0;border-bottom:1px solid var(--line)}
.area-note{margin-top:16px;color:var(--muted)}

/* Call to action band */
.cta{position:relative;isolation:isolate;padding:var(--pad) var(--gutter);background:var(--bg-2) url(img/shade.webp) center/cover no-repeat}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--bg-rgb) / .95) 0%,rgb(var(--bg-rgb) / .87) 52%,rgb(var(--bg-rgb) / .35) 100%)}
.cta-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:20px}
.cta-in>*{grid-column:1/span 7}
.cta p{font-size:1.15rem;color:var(--muted)}

/* Footer */
.foot{background:var(--palm-deep);color:var(--foot-ink);padding:clamp(48px,6vw,80px) var(--gutter) 28px}
.foot a{color:var(--cream);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(max-content,1fr) minmax(0,.8fr);gap:36px clamp(24px,4vw,72px)}
.foot .brand{color:var(--cream)}
.foot .brand-sub{color:var(--foot-sub)}
.foot-about{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.foot h2{font:600 .78rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--foot-sub);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-base{margin-top:48px;padding-top:20px;border-top:1px solid rgb(255 255 255 / .16);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.9rem;color:var(--foot-sub)}

/* Phone action bar */
.action-bar{display:none}

/* Inner page header */
.page-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px clamp(24px,5vw,96px);align-items:end;padding:clamp(48px,6vw,88px) var(--gutter) clamp(32px,4vw,56px);border-bottom:1px solid var(--line)}
.jump{display:flex;flex-wrap:wrap;gap:8px 24px;padding:18px var(--gutter);border-bottom:1px solid var(--line);font:500 .96rem/1.35 var(--sans)}
.jump a{color:var(--palm);text-decoration:none}
.jump a:hover{text-decoration:underline}

/* Service detail rows */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center;padding:clamp(48px,6vw,88px) var(--gutter);border-bottom:1px solid var(--line);scroll-margin-top:90px}
.svc.flip .svc-media{order:2}
.svc-media img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover}
.svc-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.svc-text>p{color:var(--muted);font-size:1.08rem}
.inc{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.inc li{display:flex;gap:12px;align-items:baseline}
.inc li::before{content:"";flex:none;width:11px;height:6px;border-left:2px solid var(--palm);border-bottom:2px solid var(--palm);transform:translateY(-4px) rotate(-45deg)}

/* Questions */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px clamp(24px,5vw,96px);align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font:var(--hw) 1.25rem/1.3 var(--serif);font-stretch:var(--hs)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--sans);color:var(--palm);flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 22px;color:var(--muted)}

/* About */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:start}
.about-media img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover}
.about-text{display:flex;flex-direction:column;gap:18px;font-size:1.12rem}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.value{border-top:1.5px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.value p{color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);margin:8px 0 0;border-top:1px solid var(--line)}
.facts div{padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.facts dd{margin:6px 0 0;font:var(--hw) 1.3rem/1.25 var(--serif)}

/* Booking */
.book-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,96px);align-items:center;padding:clamp(40px,5vw,72px) var(--gutter);border-bottom:1px solid var(--line)}
.book-head-text{display:flex;flex-direction:column;gap:20px}
.book-head img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover}
.book{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(40px,5vw,72px) var(--gutter) var(--pad)}
.book-steps{display:flex;flex-direction:column;gap:40px;min-width:0}
.pick{border:0;margin:0;padding:0;min-width:0}
.pick legend{padding:0;margin-bottom:16px;font:var(--hw) 1.6rem/1.2 var(--serif);font-stretch:var(--hs)}
.pick-n{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:12px;border-radius:50%;border:1.5px solid var(--palm);font:600 .95rem/1 var(--sans);color:var(--palm);vertical-align:.18em}
.opts{display:grid;gap:10px}
.opts-svc{grid-template-columns:repeat(4,minmax(0,1fr))}
.opts-day{grid-template-columns:repeat(4,minmax(0,1fr))}
.opts-time{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{position:relative;display:flex}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt label{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:12px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);font:500 .98rem/1.25 var(--sans);cursor:pointer;transition:border-color .15s,background .15s}
.opt label:hover{border-color:var(--palm)}
.opt input:checked+label{border-color:var(--palm);background:var(--palm-soft);box-shadow:inset 0 0 0 1px var(--palm);font-weight:600}
.opt input:focus-visible+label{outline:3px solid var(--clay);outline-offset:2px}
.book-sum{position:sticky;top:100px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:18px}
.book-sum h2{font-size:1.8rem}
.sum{margin:0;border-top:1px solid var(--line)}
.sum div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.sum dt{color:var(--muted)}
.sum dd{margin:0;font-weight:600;text-align:right}
.v{display:none}
.send{display:none;width:100%}
.send-plain{width:100%}
.sum-note{font-size:.93rem;color:var(--muted)}
.sum-alt{font-size:1rem}
.sum-alt a{color:var(--palm);font-weight:600}

/* Plain pages */
.prose{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:18px;padding:var(--pad) var(--gutter)}
.prose>*{grid-column:1/span 8}
.prose p{color:var(--muted);font-size:1.1rem}

@media (min-width:1300px){.opts-day{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (max-width:1199px){.opts-svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1099px){.top-phone,.top-mail{display:none}}
@media (max-width:999px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-text{padding:40px var(--gutter) 30px}
  .hero-photo{margin:0 var(--gutter);aspect-ratio:4/3}
  .hero-photo img{border-radius:var(--radius)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book{grid-template-columns:minmax(0,1fr)}
  .book-sum{position:static}
  .statement p,.cta-in>*,.prose>*{grid-column:1/-1}
}
@media (max-width:899px){
  .nav,.top-book{display:none}
  .menu{display:block}
  .split,.svc,.area,.faq,.about,.page-head,.book-head,.sec-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .svc.flip .svc-media{order:0}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .action-bar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);container:bar/inline-size}
  .action-bar a{display:flex;align-items:center;justify-content:center;gap:.45em;min-height:48px;padding:6px;border-radius:7px;border:1.5px solid var(--ink);color:var(--ink);font:600 .98rem/1.1 var(--sans);text-decoration:none;text-align:center}
  .action-bar a.go{background:var(--palm);border-color:var(--palm);color:var(--cream)}
  .action-bar svg{width:18px;height:18px;flex:none}
  .foot{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
  .cta::before{background:rgb(var(--bg-rgb) / .9)}
}
@media (max-width:799px){
  .seasons,.steps,.values,.facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:699px){
  .opts-time{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .opts-day{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opts-day .opt:first-child{grid-column:1/-1}
}
@media (max-width:359px){
  .opts-day{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
  .cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .card{flex-direction:row}
  .card img{width:116px;flex:none;aspect-ratio:auto;height:auto;object-fit:cover}
  .card-body{padding:16px 18px;gap:6px}
  .card-body h3{font-size:1.3rem}
  .card-more{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* A town list with one town: the second line is quieter. */
.towns li.more{color:var(--muted);font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.top-mail{display:inline-flex;align-items:center;gap:.45em;font:600 .98rem/1 var(--sans);text-decoration:none;color:var(--palm)}
.top-mail svg{width:18px;height:18px}
@media (max-width:1099px){.top-mail{display:none}}
@media (max-width:420px){.brand-sub{letter-spacing:.16em}}
/* Small phones: the menu button keeps its label for screen readers and shows only the bars. */
@media (max-width:360px){.menu summary{padding:.72em .8em}.menu .t-open,.menu .t-close{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.top-in{gap:10px}}
.action-bar.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-note{font-size:.95rem;color:var(--muted)}
/* Email-only sites: the stand-in call link shows only in Benchlight's page editor (html.bl-editing). */
a[href="tel:0000000000"]{display:none!important}
.phone-slot:has(a[href="tel:0000000000"]){display:none}
html.bl-editing .phone-slot:has(a[href="tel:0000000000"]){display:block}
html.bl-editing a[href="tel:0000000000"]{display:flex!important;gap:.4em;outline:2px dashed currentColor;outline-offset:4px}
html.bl-editing a[href="tel:0000000000"]::after{content:"Tap the number to add your phone";font-size:.8em;opacity:.8;margin-left:auto;align-self:center}

/* Drawn hero: the business's own product with its logo, labelled as an illustration. */
.hero--art .hero-art{position:relative;margin:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,56px) var(--gutter) clamp(24px,4vw,56px) 0}
.hero-art .art{display:block;width:100%;height:auto}
.hero-art figcaption{align-self:flex-end;margin-top:6px;font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.art .tw{transform-box:fill-box;transform-origin:center;animation:tw 3.2s ease-in-out infinite}
.art .float{animation:float 5s ease-in-out infinite}
.art .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.art .mist{animation:mist 3.6s ease-out infinite}
.art .stripe{transform-box:fill-box;transform-origin:50% 0;animation:paintdown 2.6s cubic-bezier(.45,.05,.3,1) .5s both}
.art .roller{animation:rolldown 2.6s cubic-bezier(.45,.05,.3,1) .5s both}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes mist{0%{opacity:0;transform:translateX(8px)}30%{opacity:1}100%{opacity:0;transform:translateX(-14px)}}
@keyframes paintdown{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
@keyframes rolldown{from{transform:translateY(-222px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.art *{animation:none!important}}
@media (max-width:999px){
  /* Phones: the drawing sits right under the headline, so the business's own product shows on the first screen. */
  .hero--art{display:flex;flex-direction:column;gap:22px;padding:36px 0 34px}
  .hero--art .hero-text{display:contents}
  .hero--art h1{order:1;margin-inline:var(--gutter)}
  .hero--art .hero-art{order:2;padding:0 var(--gutter)}
  .hero--art .hero-text>:not(h1){order:3;margin-inline:var(--gutter)}
}

/* On the Benchlight preview link its own bar sits at the bottom and brings its own spacer ([data-bl-bar-space],
   152px on phones, 100px wider), so the site hides its bar, adds no space of its own (Nov 11, 2026: the old 110/150px
   doubled it into a pale strip under the footer) and gives the spacer the footer's colour. */
body:has([data-benchlight-bar]) .action-bar{display:none}
body:has([data-benchlight-bar]) .foot{padding-bottom:28px}
[data-bl-bar-space]{background:var(--palm-deep)}
/* Benchlight's bar asks for the room it needs (--bl-need, 88px); its 100/152px floor left a tall blank under the
   footer (owner, Nov 11: "footer is really tall"). On a wide screen the bar sits between the two ends of the last
   line. Phones: the page links run in a row (side-by-side columns split long email addresses). */
body>[data-bl-bar-space]{height:calc(max(var(--bl-need,88px),88px) + 22px)}
@media (min-width:1200px){body>[data-bl-bar-space]{height:16px}}
@media (max-width:899px){.foot{padding-top:40px}.foot-grid{gap:24px}.foot-grid>div:last-child ul{display:flex;flex-wrap:wrap;gap:10px 16px}.foot-base{margin-top:30px}}

/* Second-pass fixes from All South Lawn (Nov 11, 2026) */
/* A wide wordmark logo is shown wide, on its own, never squeezed into the square mark. */
.brand-wide{gap:0}
.mark-wide{width:auto;height:auto;max-width:min(62vw,340px)} /* line-break-ok: the logo picture */
.mark-wide img{display:block;width:auto;max-width:100%;height:clamp(46px,36px + 2.2vw,60px);object-fit:contain;border-radius:0} /* line-break-ok: the logo picture */
.mark-wide.plate img{border-radius:8px}
.foot .mark-wide img{height:clamp(52px,42px + 2vw,68px);background:var(--cream);padding:8px 12px;border-radius:8px;box-sizing:content-box} /* line-break-ok: the logo picture */
.foot .mark-wide.plate img{background:none;padding:0}
/* Tablets: three service cards stay in one row (no lone third card); the price band's words keep a plain backing. */
@media (min-width:640px) and (max-width:999px){.cards:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.cards:has(> :nth-child(3):last-child) .card-body{padding:18px 18px 22px}}
@media (max-width:999px){.cta::before{background:rgb(var(--bg-rgb) / .9)}}
/* Phones: the two hero buttons fill their row (side by side when both fit, stacked when not) and the facts sit closer; the service photos run the full width
   of each card instead of a thumbnail. */
@media (max-width:479px){.hero .btn-row .btn{flex:1 1 auto}.meta{gap:8px 14px;font-size:.9rem}}
@media (max-width:639px){
  .cards-full{gap:16px}
  .cards-full .card{flex-direction:column}
  .cards-full .card img{width:100%;aspect-ratio:3/2;height:auto}
  .cards-full .card-body{padding:18px 20px 20px}
  .cards-full .card-more{display:block;padding-top:2px}
}

/* More presence (owner, Nov 11, 2026: "fix where our sites are falling short and make them more impressive"). */
/* The statement is a dark band in the business's own deep colour, with a faint worked-ground stripe. */
.statement{background:var(--palm-deep) repeating-linear-gradient(98deg,rgb(255 255 255 / .04) 0 clamp(44px,7vw,112px),rgb(255 255 255 / 0) 0 clamp(88px,14vw,224px));color:var(--cream);border-bottom:0}
.statement p::before{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--foot-sub);margin-bottom:clamp(18px,2vw,26px)}
@media (max-width:999px){.hero{padding-bottom:clamp(28px,6vw,48px)}}
/* Where we work: one town reads as a place card, not two giant ruled lines. */
.place{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.place-name{display:flex;align-items:center;gap:14px;font:var(--hw) clamp(1.7rem,1.3rem + 1.6vw,2.5rem)/1.1 var(--serif);font-stretch:var(--hs);letter-spacing:var(--hls)}
.place-name svg{flex:none;width:1.5em;height:1.5em;padding:.3em;border-radius:50%;background:var(--palm);color:var(--cream)}
.place-more{font:600 1.05rem/1.3 var(--sans);color:var(--muted)}
.place .area-note{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
/* The state with their town marked (U.S. Census outlines, make_geo.py). */
.area-map{align-items:center}
.area-map .area-note{margin-top:4px}
.state-map{margin:0;justify-self:center;width:100%;max-width:520px} /* line-break-ok: the state map drawing */
.state-map svg{display:block;width:100%;height:auto;max-height:min(62vh,440px);overflow:visible}
.state-map figcaption{margin-top:10px;text-align:center;font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.st-land{fill:var(--palm-deep)}
.st-dot{fill:var(--clay);stroke:var(--ink)}
.st-core{fill:var(--ink)}
.st-pulse{fill:none;stroke:var(--palm);stroke-width:6;opacity:0}
.st-label{font-family:var(--serif);font-weight:var(--hw);font-stretch:var(--hs);fill:var(--ink);stroke:var(--bg-2);paint-order:stroke;stroke-linejoin:round}
.st-label.in{fill:var(--cream);stroke:none}
.st-label.out{stroke:none}
.st-dot{stroke:var(--cream)}
.st-core{fill:var(--palm-deep)}
@media (prefers-reduced-motion:no-preference){.st-pulse{transform-box:fill-box;transform-origin:center;animation:st-pulse 2.8s ease-out infinite}}
@keyframes st-pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.2);opacity:0}}
/* Quiet motion, only where the browser can tie it to scrolling and the visitor has not asked for less: the hero photo
   settles in, and each block rises as it comes into view. Never while editing on Benchlight. */
.hero-photo{overflow:hidden;border-bottom-left-radius:36px}
@media (max-width:999px){.hero-photo{border-radius:var(--radius)}}
@media (prefers-reduced-motion:no-preference){
  .hero-photo img{animation:hero-in 1.8s cubic-bezier(.2,.7,.2,1) both}
  @supports (animation-timeline:view()){
    .statement p,.card,.split-media,.split-text,.step,.place,.state-map,.area-text,.svc-media,.svc-text,.faq-list,.season,.cta-in{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes hero-in{from{transform:scale(1.07)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.bl-editing *{animation:none!important}

/* Cleaning sites: the first screen arrives hazy and a squeegee pulls across it once, leaving it clear. One pass on
   load, then it is gone; never for reduced motion or while editing. The squeegee is plain geometry: a rubber blade, a
   metal channel the height of the pane, and a handle leading in the direction it is pulled. */
@media (prefers-reduced-motion:no-preference){
  .hero--wipe{position:relative;overflow:hidden}
  .hero--wipe::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:rgb(206 212 214 / .5);-webkit-backdrop-filter:blur(7px) saturate(.5);backdrop-filter:blur(7px) saturate(.5);clip-path:inset(0 0 0 0);animation:wipe-veil 1.7s cubic-bezier(.55,.06,.3,1) .55s both}
  .hero--wipe::after{content:"";position:absolute;top:0;bottom:0;left:0;z-index:4;width:168px;pointer-events:none;animation:wipe-tool 1.7s cubic-bezier(.55,.06,.3,1) .55s both;
    background:
      linear-gradient(#17191b,#17191b) 0 0/6px 100% no-repeat,
      linear-gradient(90deg,#9aa3a9,#eef1f3 40%,#c9cfd3 70%,#8e979d) 6px 0/13px 100% no-repeat,
      linear-gradient(#aab2b7,#e9edef 45%,#9aa3a9) 19px 50%/26px 16px no-repeat,
      linear-gradient(rgb(255 255 255 / .28),rgb(255 255 255 / 0) 55%) 45px 50%/118px 30px no-repeat,
      linear-gradient(var(--palm),var(--palm)) 45px 50%/118px 30px no-repeat;
    border-radius:0 15px 15px 0/0 15px 15px 0;
    filter:drop-shadow(-3px 0 5px rgb(0 0 0 / .18))}
}
@keyframes wipe-veil{to{clip-path:inset(0 0 0 100%)}}
@keyframes wipe-tool{from{left:0}to{left:100%}}
html.bl-editing .hero--wipe::before,html.bl-editing .hero--wipe::after{display:none}

.book:has(#s-xexcav:checked) .v-s-xexcav{display:inline}
.book:has(#s-xgrade:checked) .v-s-xgrade{display:inline}
.book:has(#s-drainage:checked) .v-s-drainage{display:inline}
.book:has(#s-xwall:checked) .v-s-xwall{display:inline}
.book:has(#s-clearing:checked) .v-s-clearing{display:inline}
.book:has(#s-xhaul:checked) .v-s-xhaul{display:inline}
.book:has(#s-unsure:checked) .v-s-unsure{display:inline}
.book:has(#d-any:checked) .v-d-any{display:inline}
.book:has(#d-mon:checked) .v-d-mon{display:inline}
.book:has(#d-tue:checked) .v-d-tue{display:inline}
.book:has(#d-wed:checked) .v-d-wed{display:inline}
.book:has(#d-thu:checked) .v-d-thu{display:inline}
.book:has(#d-fri:checked) .v-d-fri{display:inline}
.book:has(#d-sat:checked) .v-d-sat{display:inline}
.book:has(#t-any:checked) .v-t-any{display:inline}
.book:has(#t-am:checked) .v-t-am{display:inline}
.book:has(#t-mid:checked) .v-t-mid{display:inline}
.book:has(#t-pm:checked) .v-t-pm{display:inline}
@supports selector(:has(*)){
.send{display:inline-flex}.send-plain{display:none}
.book:has(#s-xexcav:checked) .send:not(.s-xexcav){display:none}
.book:has(#s-xgrade:checked) .send:not(.s-xgrade){display:none}
.book:has(#s-drainage:checked) .send:not(.s-drainage){display:none}
.book:has(#s-xwall:checked) .send:not(.s-xwall){display:none}
.book:has(#s-clearing:checked) .send:not(.s-clearing){display:none}
.book:has(#s-xhaul:checked) .send:not(.s-xhaul){display:none}
.book:has(#s-unsure:checked) .send:not(.s-unsure){display:none}
.book:has(#d-any:checked) .send:not(.d-any){display:none}
.book:has(#d-mon:checked) .send:not(.d-mon){display:none}
.book:has(#d-tue:checked) .send:not(.d-tue){display:none}
.book:has(#d-wed:checked) .send:not(.d-wed){display:none}
.book:has(#d-thu:checked) .send:not(.d-thu){display:none}
.book:has(#d-fri:checked) .send:not(.d-fri){display:none}
.book:has(#d-sat:checked) .send:not(.d-sat){display:none}
.book:has(#t-any:checked) .send:not(.t-any){display:none}
.book:has(#t-am:checked) .send:not(.t-am){display:none}
.book:has(#t-mid:checked) .send:not(.t-mid){display:none}
.book:has(#t-pm:checked) .send:not(.t-pm){display:none}
}
@supports not selector(:has(*)){.sum{display:none}}

/* Flagship home page (v3.py, Nov 11, 2026). Sticky rooms need no script and work everywhere; the load and scroll
   motion sits behind prefers-reduced-motion and @supports, and is off while editing on Benchlight. */
.v3-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;min-height:calc(100svh - 76px)}
.v3-hero-photo{position:absolute;inset:0;margin:0;z-index:-2;overflow:hidden}
.v3-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.v3-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--bg-rgb) / .97) 0%,rgb(var(--bg-rgb) / .93) 30%,rgb(var(--bg-rgb) / .6) 50%,rgb(var(--bg-rgb) / 0) 70%)}
.v3-hero-in{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px);padding:clamp(48px,8vw,120px) clamp(20px,3vw,48px) clamp(44px,6vw,92px) var(--gutter)}
.v3-hero h1{font-size:clamp(2.9rem,1.1rem + 5.4vw,5.9rem);line-height:.98;letter-spacing:-.022em}
/* a long headline, or one beside a photo, steps down so the buttons stay on the first screen */
.v3-hero h1.h-long{font-size:clamp(2.5rem,1rem + 3.7vw,4.4rem)}
@media (min-width:900px){.v3-hero--split h1{font-size:clamp(2.7rem,1rem + 4.1vw,4.8rem)}.v3-hero--split h1.h-long{font-size:clamp(2.4rem,1rem + 3vw,3.7rem)}}
.v3-hero .lede{font-size:clamp(1.12rem,1rem + .5vw,1.4rem);color:var(--ink)}
.v3-hero .meta{color:var(--ink)}

/* Each service is a room that slides up over the one before it. */
.v3-rooms{padding-top:var(--pad)}
.v3-rooms-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(24px,5vw,96px);align-items:end;padding:0 var(--gutter) clamp(28px,4vw,52px)}
.v3-rooms-head p{color:var(--muted);font-size:1.1rem}
/* The sticky element is 1px wide on purpose and its panel (.v3-room-in) spills out to the full width. Benchlight's
   preview bar lifts itself above anything fixed or sticky that is 40px or wider near the bottom of the screen
   (launch-checkout.mjs siteBarHeight), so a full-width sticky room made the bar jump up over the room's buttons
   whenever the next room's top edge was in the lower half of the screen (found on live links, Nov 11). */
.v3-room{position:sticky;top:76px;width:1px;height:calc(100svh - 76px);min-height:540px;scroll-margin-top:76px} /* line-break-ok: the sticky pin, see above */
.v3-room-in{position:relative;width:100vw;width:100cqw;height:100%;display:grid;align-items:end;isolation:isolate;overflow:hidden;border-radius:28px 28px 0 0;box-shadow:0 -22px 44px -26px rgb(0 0 0 / .45)} /* line-break-ok: the room panel, as wide as the page */
.v3-room-in>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.v3-room-card{justify-self:start;max-width:36rem;margin:clamp(14px,3vw,48px) clamp(14px,3vw,48px) clamp(96px,13vh,128px);padding:clamp(22px,2.6vw,40px);background:var(--card);border-radius:18px;box-shadow:0 24px 60px -30px rgb(0 0 0 / .5);display:flex;flex-direction:column;gap:14px} /* line-break-ok: the service card */
.v3-room-card h3{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.7rem);line-height:1.04}
.v3-room-card>p{color:var(--muted);font-size:1.08rem}
.v3-n{font:600 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v3-n span{color:var(--palm)}
.v3-room-card .btn-row{margin-top:6px}

/* How it works: the rule draws itself across as the steps come into view. */
.v3-how .steps{position:relative}

/* The close: their own bottle, as drawn for them. */
.v3-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center;padding:var(--pad) var(--gutter)}
.v3-close-text{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.v3-close-text h2{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);line-height:1}
.v3-close-text>p{color:var(--muted);font-size:1.15rem}
.v3-close-art{margin:0;display:flex;flex-direction:column}
.v3-close-art .art{display:block;width:100%;height:auto}
.v3-close-art figcaption{align-self:flex-end;margin-top:6px;font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* A tall or small photo sits beside the words instead of running edge to edge, so it is never stretched soft or
   cropped to a sliver. */
@media (min-width:900px){
  .v3-hero--split{grid-template-columns:minmax(0,48%) minmax(0,52%)}
  .v3-hero--split::before{display:none}
  .v3-hero--split .v3-hero-photo{inset:0 0 0 48%;border-bottom-left-radius:36px}
  .v3-hero--split .v3-hero-photo img{object-position:50% 50%}
  .v3-room--split .v3-room-in{background:var(--bg-2);grid-template-columns:minmax(0,44%) minmax(0,56%);align-items:center}
  .v3-room--split .v3-room-in>img{inset:0 0 0 auto;width:56%}
  .v3-room--split .v3-room-in>img.pos-l{object-position:30% 50%}
  .v3-room--split .v3-room-card{justify-self:stretch;max-width:none;margin:0;padding:clamp(24px,4vw,64px) clamp(20px,3vw,48px) clamp(96px,13vh,128px) var(--gutter);background:none;box-shadow:none;border-radius:0}
}
.v3-close-photo{margin:0}
.v3-close-photo img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover}
.v3-close--solo{grid-template-columns:minmax(0,1fr)}
/* Inner pages carry the same headline weight. */
.page-head h1,.book-head h1{font-size:clamp(2.7rem,1.2rem + 4.6vw,5.2rem);line-height:.98;letter-spacing:-.02em}

@media (max-width:899px){
  .v3-hero{grid-template-columns:minmax(0,1fr);min-height:0;align-items:start}
  .v3-hero::before{display:none}
  .v3-hero-photo{position:relative;inset:auto;z-index:0;height:min(46svh,400px)} /* leaves the buttons on the first screen above Benchlight's bar */
  .v3-hero-in{position:relative;margin-top:-44px;padding:30px var(--gutter) 40px;background:var(--bg);border-radius:24px 24px 0 0}
  .v3-rooms-head,.v3-close{grid-template-columns:minmax(0,1fr)}
  /* phones: the photo sits on top at a height that keeps the room recognisable, the words below it; the panel stays
     shorter than the screen less the header and the bar at the bottom, so nothing hides under either */
  .v3-room{height:auto;min-height:0}
  .v3-room-in{height:auto;align-items:start;grid-template-rows:auto auto;border-radius:22px 22px 0 0;background:var(--bg);padding-bottom:22px}
  .v3-room-in>img{position:relative;inset:auto;z-index:0;height:min(38svh,300px)}
  .v3-room-in>img.pos-l{object-position:18% 50%}
  .v3-room-in>img.pos-r{object-position:82% 50%}
  .v3-room-card{justify-self:stretch;max-width:none;margin:0;padding:20px var(--gutter) 4px;gap:10px;background:none;border-radius:0;box-shadow:none}
  .v3-room-card .inc{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .v3-hero-photo img{animation:v3-settle 2.6s cubic-bezier(.2,.7,.2,1) both}
  /* the photo arrives behind hazy glass and is wiped clear once, left to right */
  .v3-hero-photo::after{content:"";position:absolute;inset:0;background:rgb(206 212 214 / .55);-webkit-backdrop-filter:blur(10px) saturate(.4);backdrop-filter:blur(10px) saturate(.4);animation:v3-wipe 1.5s cubic-bezier(.62,.04,.26,1) .45s both}
  .v3-hero-photo::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:1;width:5px;background:linear-gradient(90deg,rgb(255 255 255 / 0),#fff 50%,rgb(255 255 255 / .25));box-shadow:0 0 22px 5px rgb(255 255 255 / .6);animation:v3-edge 1.5s cubic-bezier(.62,.04,.26,1) .45s both}
  .v3-hero-in>*{animation:v3-rise .9s cubic-bezier(.2,.7,.2,1) both}
  .v3-hero-in>:nth-child(1){animation-delay:.25s}
  .v3-hero-in>:nth-child(2){animation-delay:.4s}
  .v3-hero-in>:nth-child(3){animation-delay:.55s}
  .v3-hero-in>:nth-child(4){animation-delay:.7s}
  @supports (animation-timeline:view()){
    .v3-room-card{animation:v3-rise linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
    @media (min-width:800px){
      .v3-how .step{border-top-color:var(--line)}
      .v3-how .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--ink);transform-origin:0 50%;animation:v3-draw linear both;animation-timeline:view();animation-range:entry 40% cover 42%}
    }
  }
}
@keyframes v3-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes v3-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes v3-edge{from{left:0;opacity:1}92%{opacity:1}to{left:100%;opacity:0}}
@keyframes v3-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes v3-draw{from{transform:scaleX(0)}to{transform:none}}
html.bl-editing .v3-hero-photo::before,html.bl-editing .v3-hero-photo::after{display:none}

/* Depth while scrolling (Chrome and Safari 26; plain stacking elsewhere): the hero photo drifts as it leaves, and each
   room's photo eases back and dims a little as the next room slides over it. Pages cross-fade into each other. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  @supports (animation-timeline:view()){
    .v3-hero-photo img{animation:v3-settle 2.6s cubic-bezier(.2,.7,.2,1) both,v3-drift linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
    .v3-rooms{timeline-scope:--room2,--room3,--room4}
    .v3-room:nth-of-type(2){view-timeline-name:--room2}
    .v3-room:nth-of-type(3){view-timeline-name:--room3}
    .v3-room:nth-of-type(4){view-timeline-name:--room4}
    .v3-room:nth-of-type(1):not(:last-of-type) .v3-room-in>img{animation:v3-back linear both;animation-timeline:--room2;animation-range:entry 0% entry 100%}
    .v3-room:nth-of-type(2):not(:last-of-type) .v3-room-in>img{animation:v3-back linear both;animation-timeline:--room3;animation-range:entry 0% entry 100%}
    .v3-room:nth-of-type(3):not(:last-of-type) .v3-room-in>img{animation:v3-back linear both;animation-timeline:--room4;animation-range:entry 0% entry 100%}
  }
}
@keyframes v3-drift{to{translate:0 9%}}
@keyframes v3-back{to{scale:1.07;filter:brightness(.72)}}

/* The footer ends where it ends. Benchlight's bar asks for the room it needs (--bl-need, 88px); its own 100/152px
   floor left a tall blank under the footer (owner, Nov 11: "footer is really tall"). On a wide screen the bar sits
   between the two ends of the last line, so the footer needs almost none. Phones: the page links run in a row (side-by-side columns split long email addresses). */
body>[data-bl-bar-space]{height:calc(max(var(--bl-need,88px),88px) + 22px)} /* + room for the bar's hint bubble */
@media (min-width:1200px){body>[data-bl-bar-space]{height:16px}}
@media (max-width:899px){
  .foot{padding-top:40px}
.foot-grid{gap:24px}.foot-grid>div:last-child ul{display:flex;flex-wrap:wrap;gap:10px 16px}
  .foot-base{margin-top:30px}
}
/* A short screen (a phone on its side): the rooms stop stacking and read as plain sections. */
@media (max-height:620px) and (min-width:900px){.v3-room{position:relative;top:auto;height:auto;min-height:0}.v3-room-in{height:auto;padding-top:42vh}.v3-room-in>img{height:42vh;bottom:auto}.v3-room-card{margin-bottom:24px}}

/* Very large text (200% text or zoom on a phone): let joined pairs and buttons wrap, keep headings above
   body size while long place names still fit. Keep this block last so it wins over the rules above. */
main{container:main/inline-size}
@container main (max-width:15em){
  .nb,.btn{white-space:normal}
  h1,.v3-hero h1,.v3-hero h1.h-long,.page-head h1,.book-head h1{font-size:max(1.5em,12cqi)}
  h2{font-size:max(1.3em,9.5cqi)}
  .towns li{font-size:max(1.25em,9cqi)}
  .opts-svc,.opts-day,.opts-time{grid-template-columns:minmax(0,1fr)}
  .card{flex-direction:column}
  .card img{width:100%;aspect-ratio:4/3}
}
@container bar (max-width:20em){.action-bar svg{display:none}.action-bar a{padding-inline:4px}}

.em-d{display:inline-block;text-decoration:inherit}

/* Nov 12, 2026, the owner's own changes. A service with no photo of its own yet: its words take the whole row. */
.svc.no-media{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.v3-room--text{height:auto;min-height:0}.v3-room--text .v3-room-in{grid-template-columns:minmax(0,1fr);height:auto}.v3-room--text .v3-room-card{padding-bottom:clamp(40px,5vw,72px)}}
@media (max-height:620px) and (min-width:900px){.v3-room--text .v3-room-in{padding-top:clamp(24px,4vw,64px)}}
/* The services, listed at the top of the services page: a numbered index that jumps down to each one. */
.svc-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-index li{border-bottom:1px solid var(--line)}
.svc-index a{display:grid;grid-template-columns:1.8em minmax(0,1fr) 22px;gap:clamp(14px,1.6vw,22px);align-items:center;padding:15px 2px;color:var(--ink);text-decoration:none}
.svc-index .n{font:600 .82rem/1 var(--sans);letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--muted)}
.svc-index strong{display:block;font-family:var(--serif);font-weight:var(--hw);font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);line-height:1.1;letter-spacing:var(--hls);text-wrap:balance}
.svc-index small{display:block;margin-top:6px;color:var(--muted);font:400 1rem/1.4 var(--sans)}
.svc-index svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .2s ease}
.svc-index a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.svc-index a:hover svg,.svc-index a:focus-visible svg{transform:translateY(3px);color:var(--ink)}
/* On a computer the heading and the services sit beside one of his job photos, the same height. */
.svc-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(18px,2.2vw,30px);padding-top:clamp(32px,3.6vw,52px);padding-bottom:clamp(32px,4vw,56px)}
.svc-head+.svc{padding-top:clamp(32px,4vw,56px)}
.svc-head-photo{display:none;margin:0}
@media (min-width:900px){.svc-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,88px);row-gap:clamp(20px,2.4vw,32px)}.svc-head h1{grid-column:1;grid-row:1}.svc-index{grid-column:1;grid-row:2;align-self:start}.svc-head-photo{display:block;grid-column:2;grid-row:1/span 2;position:relative;min-height:100%}.svc-head-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:var(--radius)}}