/* Look BY "Stillwater": a day spa. Belleza (headlines and the spaced wordmark) over Ysabeau (text, and the light italic
   accent words in the headlines), one centre axis and
   one horizontal line, the waterline, under the wordmark, the headings and the closing. The treatment rooms are
   full-width photo bands that slide over each other. Every class starts with by-. Mobile first: 760 and 1000 px steps. */
@font-face{font-family:"Ysabeau BY";font-style:normal;font-weight:1 1000;font-display:swap;src:url(fonts/ysabeau-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Ysabeau BY";font-style:normal;font-weight:1 1000;font-display:swap;src:url(fonts/ysabeau-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Ysabeau BY";font-style:italic;font-weight:1 1000;font-display:swap;src:url(fonts/ysabeau-latin-ext-wght-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Ysabeau BY";font-style:italic;font-weight:1 1000;font-display:swap;src:url(fonts/ysabeau-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Belleza BY";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/belleza-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Belleza BY";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/belleza-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* tokens (palette limestone; design.ts lists every palette and checks each text pair). --fh/--fhw/--fhs = headline
   face, weight and style; --ft2 = text face; --onph = text on photos */
:root{--bg:#e6e0d7;--bg2:#dcd4c9;--ink:#211e1a;--mute:#51493f;--line:#bfb5a8;--acc:#2b5754;--btn:#2b5754;--onbtn:#ffffff;
  --deep:#1e2321;--ondeep:#ece6dd;--ondeep2:#bdb5a9;--glow:#a3cbc2;--onph:#fbf8f3;
  --fh:"Belleza BY",Georgia,serif;--fhw:400;--fhs:normal;--fem:"Ysabeau BY",Georgia,serif;--ft2:"Ysabeau BY",system-ui,sans-serif;
  --pad:clamp(16px,3.6vw,56px);--max:1320px;--band:clamp(72px,9vw,140px);
  --m-accent:var(--acc);
  --g-max:1320px;--g-pad:var(--pad);--g-bg:var(--bg);--g-paper:var(--bg);--g-surface:var(--bg2);--g-ink:var(--ink);--g-muted:var(--mute);
  --g-line:var(--line);--g-accent:var(--acc);--g-radius:calc(2px*var(--tune-radius,1));--g-fd:var(--fh);--g-ft:var(--ft2)}
/* still: the accent words in Ysabeau Light Italic. tide: everything in Belleza, the accent words only in the waterline colour */
.f-tide{--fem:var(--fh)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.by-x{margin:0;background:var(--bg);color:var(--ink);font:420 calc(17px*var(--tune-size,1))/1.62 var(--ft2);overflow-x:clip;font-feature-settings:"kern"}
/* resets carry no class weight (:where), so every by- rule below wins over them */
:where(.by-x) img{display:block;max-width:100%}
:where(.by-x) a{color:inherit}
:where(.by-x) figure{margin:0}
.by-x :is(p,li,dd,dt,summary,figcaption,blockquote){overflow-wrap:break-word;hyphens:manual}
:where(.by-x) :is(h1,h2,h3){font-family:var(--fh);font-weight:var(--fhw);font-style:var(--fhs);margin:0;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
:where(.by-x) h2{font-size:calc(clamp(32px,3.4vw,50px)*var(--tune-size,1));line-height:1.1;letter-spacing:.005em}
:where(.by-x) h3{font-size:calc(clamp(22px,1.9vw,28px)*var(--tune-size,1));line-height:1.2}
.by-x :is(h1,h2,h3,blockquote) em{font-family:var(--fem);font-style:italic;font-weight:300}
.f-tide.by-x :is(h1,h2,h3,blockquote) em{font-style:normal;font-weight:400;color:var(--acc)}
.f-tide.by-x :is(.by-hero,.by-end-water) em{color:inherit}
:where(.by-x) p{margin:0;text-wrap:pretty}
:where(.by-x) :is(ul,ol){list-style:none;margin:0;padding:0}
:where(.by-x) blockquote{margin:0}
.by-w{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.by-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.by-nw{white-space:nowrap}
.by-k{font:560 calc(15px*var(--tune-size,1))/1.4 var(--ft2);letter-spacing:.04em;color:var(--mute);margin:0}
.by-x h2.by-k,.by-x h3.by-k{font:560 calc(15px*var(--tune-size,1))/1.4 var(--ft2);letter-spacing:.04em}
.by-skip{position:absolute;left:12px;top:-60px;z-index:80;background:var(--ink);color:var(--bg);padding:10px 16px}
.by-skip:focus{top:12px}
.by-x :focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* the waterline: one hairline, centred or under a heading */
.by-wl{display:block;width:clamp(56px,6vw,96px);height:1px;background:var(--acc);margin:18px 0}
.by-wl-c{margin-inline:auto}

/* actions: one quiet outlined pill (on photos), one filled pill on the page, a text link with an underline */
.by-pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;border-radius:999px;border:1px solid currentColor;
  font:520 16px/1 var(--ft2);letter-spacing:.03em;text-decoration:none;white-space:nowrap;color:var(--onph);background:transparent}
.by-x .by-pill-ink{background:var(--btn);border-color:var(--btn);color:var(--onbtn)}
.by-acts .by-pill{background:var(--onph);border-color:var(--onph);color:#1b1916}
.by-link{font:520 16px/1.3 var(--ft2);color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;white-space:nowrap}
.by-link::after{content:" →"}
.by-call{font:400 clamp(19px,1.6vw,22px)/1.2 var(--ft2);font-variant-numeric:tabular-nums lining-nums;text-decoration:none;white-space:nowrap}
@media (hover:hover){.by-pill:hover{background:var(--onph);color:#1b1916;border-color:var(--onph)}.by-x .by-pill-ink:hover{filter:brightness(1.1)}
  .by-link:hover,.by-call:hover{text-decoration-thickness:2px}}

/* ── masthead: wordmark, waterline, one row of links, centred ─────────────────────────────────────────────── */
.by-top{position:relative;z-index:30;display:flex;flex-direction:column;align-items:center;padding:13px var(--pad) 11px;color:var(--ink);border-bottom:1px solid var(--line);text-align:center}
.by-top-over{position:absolute;inset:0 0 auto;color:var(--onph);border-bottom:0}
.by-name{display:block;font:300 25px/1 var(--fh);letter-spacing:.2em;margin-right:-.2em;text-decoration:none;white-space:nowrap}
.by-top .by-wl{margin:8px auto 7px;width:min(320px,62vw)}
.by-top-over .by-wl{background:var(--onph);opacity:.55}
.by-row ul{display:flex;justify-content:center;gap:clamp(16px,2.6vw,40px)}
.by-row a{display:block;font:500 14.5px/1.3 var(--ft2);letter-spacing:.03em;text-decoration:none;padding:2px 0;white-space:nowrap}
.by-row a[aria-current]{text-decoration:underline;text-underline-offset:.4em;text-decoration-thickness:1px}
.by-row-b a{text-decoration:underline;text-underline-offset:.4em;text-decoration-thickness:1px}
.by-row-w,.by-row-bl{display:none}
.by-top-l{display:none}
/* phones: one line, Rituals and Book either side of the name, the waterline under it; the other links are in the footer */
@media (max-width:759px){
  .by-top{padding:14px var(--pad) 12px}
  .by-name{max-width:calc(100% - 15em);white-space:normal;text-wrap:balance;line-height:1.1;font-size:calc(23px*var(--tune-size,1))}
  .by-top .by-wl{margin:9px auto 0;width:min(190px,40vw)}
  .by-row{position:absolute;top:14px;left:var(--pad);right:var(--pad);pointer-events:none}
  .by-row ul{justify-content:space-between}
  .by-row li{pointer-events:auto}
  .by-row li:not(:first-child):not(.by-row-b){display:none}
  .by-row a{padding:0;line-height:25px}
}
@media (hover:hover){.by-row a:hover{text-decoration:underline;text-underline-offset:.4em}}
@media (min-width:760px){
  .by-top{padding:22px var(--pad) 18px}
  .by-name{font-size:calc(clamp(30px,2.6vw,40px)*var(--tune-size,1))}
  .by-top .by-wl{margin:14px auto 12px;width:min(460px,40vw)}
  .by-row a{font-size:calc(15.5px*var(--tune-size,1))}
  .by-row-w{display:block}.by-row-bl{display:inline}.by-row-bs{display:none}
  /* the language switch sits on the link row's line, at the right edge, so the name stands alone above the row */
  .by-top-l{display:block;position:absolute;bottom:18px;right:var(--pad)}
  .by-top-l .langs{font-size:calc(15.5px*var(--tune-size,1));line-height:1.3}.by-top-l .langs a{display:inline-block;vertical-align:top;padding:2px 0}
}

/* ── hero ────────────────────────────────────────────────────────────────────────────────────────────────── */
.by-hero{position:relative;display:grid;min-height:max(600px,100svh);color:var(--onph);overflow:hidden;isolation:isolate}
.by-hero-ph{position:absolute;inset:0;z-index:-2}
.by-hero-ph img{width:100%;height:100%;object-fit:cover}
.by-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgb(14 12 10/.5) 0,rgb(14 12 10/0) 26%),linear-gradient(0deg,rgb(14 12 10/.62) 0,rgb(14 12 10/.26) 34%,rgb(14 12 10/0) 56%)}
.by-hero-in{align-self:end;justify-self:center;width:100%;max-width:820px;padding:0 var(--pad) calc(clamp(30px,6vh,72px)*var(--tune-space,1));text-align:center;display:flex;flex-direction:column;align-items:center}
.by-h1{font-size:calc(clamp(34px,3.5vw,50px)*var(--tune-size,1));line-height:1.12;letter-spacing:.005em;max-width:17ch;text-wrap:balance}
.by-h1 em{color:inherit}
.by-lede{margin-top:14px;font-size:calc(clamp(17px,1.3vw,19px)*var(--tune-size,1));line-height:1.5;max-width:42ch}
.by-acts{margin-top:24px}
.by-facts{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:12px;row-gap:2px;font:500 calc(15px*var(--tune-size,1))/1.5 var(--ft2);letter-spacing:.04em}
.by-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
@media (max-width:759px){.by-facts{flex-direction:column}.by-dot{display:none}.by-facts:not(:has(>:nth-child(4))){flex-direction:row;column-gap:12px}.by-facts:not(:has(>:nth-child(4))) .by-dot{display:block}}
/* basin: the photo set in a stone border, the headline big and centred in the middle */
.by-h-basin{padding:clamp(8px,1.3vw,18px);background:var(--bg)}
.by-h-basin .by-hero-ph,.by-h-basin .by-shade{inset:clamp(8px,1.3vw,18px)}
.by-hk-basin .by-top-over{top:clamp(8px,1.3vw,18px)}
.by-h-basin .by-shade{background:linear-gradient(180deg,rgb(14 12 10/.48) 0,rgb(14 12 10/0) 28%),radial-gradient(70% 52% at 50% 58%,rgb(14 12 10/.42),rgb(14 12 10/0) 100%)}
.by-h-basin .by-hero-in{align-self:center;padding-top:calc(110px*var(--tune-space,1));padding-bottom:calc(40px*var(--tune-space,1));max-width:1100px}
/* a real shop's long word ("Schoonheidssalon", --tlw letters, engine/shared/site.ts): the measure widens to hold it, and on narrow
   screens the headline sets smaller to fit */
.by-h-basin .by-h1{font-size:min(calc(clamp(46px,8.2vw,124px)*var(--tune-size,1)),calc((100vw - 2 * var(--pad) - 2 * clamp(8px,1.3vw,18px) - 8px) / (var(--tlw,1) * .45)));line-height:1;letter-spacing:-.012em;max-width:max(12ch,calc(var(--tlw,1) * .45em));font-weight:250}
.by-h-basin .by-facts{margin-top:18px}
@media (max-width:759px){.by-h-basin .by-hero-in{padding-top:calc(96px*var(--tune-space,1))}}

/* ── intro ───────────────────────────────────────────────────────────────────────────────────────────────── */
.by-intro{padding-block:var(--band);text-align:center}
.by-intro h2{max-width:24ch;margin-inline:auto}
.by-intro p{max-width:56ch;margin-inline:auto;font-size:calc(clamp(18px,1.4vw,20px)*var(--tune-size,1));color:var(--mute)}

/* section heads */
.by-head{text-align:center;margin-bottom:calc(clamp(32px,4vw,56px)*var(--tune-space,1))}
.by-head h2{max-width:26ch;margin-inline:auto}
.by-head p{max-width:54ch;margin:14px auto 0;color:var(--mute)}
.by-head h2::after{content:"";display:block;width:clamp(56px,6vw,96px);height:1px;background:var(--acc);margin:18px auto 0}

/* ── the rooms: full-width photo bands ───────────────────────────────────────────────────────────────────── */
.by-rooms{padding-top:0}
/* the rooms' head is a slim strip between the hero and the first photo, not a band of its own */
.by-rooms>.by-head{margin:0;padding:clamp(22px,5vw,30px) var(--pad) clamp(22px,5vw,30px)}
.by-rooms>.by-head h2::after{margin-top:12px}
.by-rooms>.by-head p{margin-top:10px}
@media (min-width:760px){
  .by-rooms>.by-head{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px);padding-block:clamp(22px,2.2vw,32px)}
  .by-rooms>.by-head h2{margin:0;max-width:none}
  .by-rooms>.by-head h2::after{display:none}
  .by-rooms>.by-head p{margin:0;padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--acc);max-width:46ch;text-align:left}
}
.by-room{background:var(--bg);display:flex;flex-direction:column}
.by-room-ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.by-room-ph img{width:100%;height:100%;object-fit:cover}
.by-ledge{border-bottom:1px solid var(--line)}
.by-ledge-in{grid-template-columns:minmax(0,1fr);max-width:var(--max);margin:0 auto;padding:28px var(--pad) 36px;display:grid;gap:22px}
.by-reading{font:560 calc(15px*var(--tune-size,1))/1.4 var(--ft2);letter-spacing:.05em;color:var(--acc)}
.by-ledge-h h3{font-size:calc(clamp(30px,3vw,44px)*var(--tune-size,1));line-height:1.08;margin-top:6px}
.by-ledge-n{margin-top:10px;color:var(--mute);max-width:44ch}
.by-rit li{border-top:1px solid var(--line)}
.by-rit li:last-child{border-bottom:1px solid var(--line)}
.by-rit a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;column-gap:18px;padding:12px 0;text-decoration:none}
.by-rit-n{font-size:calc(18px*var(--tune-size,1))}
.by-rit-d{font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.by-rit-p{font-size:18px;font-variant-numeric:tabular-nums lining-nums;text-align:right;min-width:6.5ch;white-space:nowrap}
@media (hover:hover){.by-rit a:hover .by-rit-n{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}}
.by-ledge-b{align-self:end}
@media (min-width:760px){.by-room-ph{aspect-ratio:16/8}}
/* rooms: with motion allowed, each band holds the screen and the next one slides over it (CSS only, so Basic too) */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){.by-rooms-rooms .by-room{position:sticky;top:0}}
@media (min-width:1000px){
  .by-ledge-in{grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;column-gap:clamp(32px,4vw,72px);padding-block:30px 34px;align-items:start}
  .by-ledge-b{align-self:end;padding-bottom:12px}
  .by-rooms-rooms .by-room{height:min(100svh,920px);border-top:1px solid var(--line)}
  .by-rooms-rooms .by-room-ph{flex:1;min-height:0;aspect-ratio:auto}
  /* ledges: the stone ledge lies over the photo's lower corner, left then right */
  .by-rooms-ledges .by-room{position:relative;margin-bottom:calc(clamp(40px,5vw,80px)*var(--tune-space,1))}
  .by-rooms-ledges .by-room-ph{aspect-ratio:auto;height:min(82svh,820px)}
  .by-rooms-ledges .by-ledge{position:absolute;bottom:0;left:var(--pad);width:min(620px,48%);background:var(--bg);border:0}
  .by-rooms-ledges .by-room:nth-child(even) .by-ledge{left:auto;right:var(--pad)}
  .by-rooms-ledges .by-ledge-in{grid-template-columns:minmax(0,1fr);padding:30px 34px 32px;row-gap:18px}
  .by-rooms-ledges .by-ledge-b{padding:0}
}

/* rooms: from the second on, two bands are a split (photo beside its ledge, the second mirrored) so the run of full-bleed strips breaks */
@media (min-width:900px){
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)){flex-direction:row}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-room-ph{flex:0 0 58%;aspect-ratio:auto;min-height:0}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-ledge{flex:1;min-width:0;display:flex;align-items:center;border-bottom:0;border-left:1px solid var(--line)}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-ledge-in{grid-template-columns:minmax(0,1fr);width:100%;max-width:none;margin:0;padding:clamp(28px,3.4vw,56px);row-gap:22px;align-items:start}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-ledge-b{align-self:start;padding-bottom:0}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)){height:min(82svh,720px)}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-ledge-h h3{font-size:calc(clamp(36px,3.8vw,56px)*var(--tune-size,1))}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-ledge-n{font-size:calc(clamp(17px,1.35vw,19px)*var(--tune-size,1));max-width:34ch}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-rit a{padding-block:16px}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-rit-n,.by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-rit-p{font-size:calc(clamp(18px,1.5vw,21px)*var(--tune-size,1))}
  .by-rooms-rooms .by-room:is(:nth-child(2),:nth-child(3)) .by-ledge-in{row-gap:28px}
  .by-rooms-rooms .by-room:nth-child(3){flex-direction:row-reverse}
  .by-rooms-rooms .by-room:nth-child(3) .by-ledge{border-left:0;border-right:1px solid var(--line)}
}

/* ── day passes ──────────────────────────────────────────────────────────────────────────────────────────── */
.by-passes{padding-block:var(--band)}
.by-pass-l{grid-template-columns:minmax(0,1fr);display:grid;gap:0}
.by-pass-l li{padding:26px 0;border-top:1px solid var(--line);text-align:center}
.by-pass-l li:last-child{border-bottom:1px solid var(--line)}
.by-pass-l p{color:var(--mute);margin:10px auto 0;max-width:36ch}
.by-x .by-pass-p{color:var(--ink);font:300 calc(clamp(26px,2.4vw,34px)*var(--tune-size,1))/1.1 var(--fh);font-variant-numeric:tabular-nums lining-nums;margin-top:16px}
@media (min-width:760px){
  .by-pass-l.by-n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.by-pass-l.by-n3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .by-pass-l li,.by-pass-l li:last-child{border:0;border-left:1px solid var(--line);padding:8px clamp(20px,3vw,44px)}
  .by-pass-l li:first-child{border-left:0}
}

/* a calm detail, full width */
.by-detail{height:clamp(260px,42vw,600px);overflow:hidden}
.by-detail img{width:100%;height:100%;object-fit:cover}
.by-gal{padding-block:var(--band)}

/* ── reviews: the score, one review large, 2–5 more ruled ────────────────────────────────────────────────── */
.by-revs{padding-block:var(--band)}
.by-revs-lead{text-align:center}
.by-score{display:flex;justify-content:center;align-items:baseline;gap:12px;margin-top:14px;color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
.by-score-v{font:300 calc(clamp(40px,4vw,56px)*var(--tune-size,1))/1 var(--fh);color:var(--ink);font-variant-numeric:lining-nums}
.by-stars,.by-stars-s{color:var(--acc);letter-spacing:.14em}
.by-stars-s{font-size:calc(14px*var(--tune-size,1))}
.by-revs-lead blockquote{margin-top:28px}
.by-revs-lead blockquote p{font:var(--fhs) var(--fhw) calc(clamp(25px,2.5vw,36px)*var(--tune-size,1))/1.28 var(--fh);max-width:30ch;margin-inline:auto;text-wrap:balance}
.by-cite{margin-top:16px;font-size:calc(15px*var(--tune-size,1));color:var(--mute);letter-spacing:.02em}
.by-revs-l{grid-template-columns:minmax(0,1fr);display:grid;gap:0;margin-top:calc(clamp(40px,5vw,72px)*var(--tune-space,1))}
.by-revs-l li{border-top:1px solid var(--line);padding:22px 0}
.by-revs-l blockquote p{margin-top:8px;font-size:calc(17.5px*var(--tune-size,1))}
@media (min-width:760px){
  .by-revs-quote .by-revs-l{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)}
  .by-revs-quote .by-revs-l.by-n3,.by-revs-quote .by-revs-l.by-n5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px){
  .by-revs-column{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,110px);align-items:start}
  .by-revs-column .by-revs-lead{text-align:left;position:sticky;top:32px}
  .by-revs-column .by-score{justify-content:flex-start}
  .by-revs-column .by-revs-lead blockquote p{margin-inline:0}
  .by-revs-column .by-revs-l{margin-top:0}
}

/* ── therapists ──────────────────────────────────────────────────────────────────────────────────────────── */
.by-team{padding-block:var(--band)}
.by-ppl li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:20px 0;border-top:1px solid var(--line)}
.by-ppl li:last-child{border-bottom:1px solid var(--line)}
.by-ppl-n{font:var(--fhs) var(--fhw) calc(clamp(26px,2.4vw,34px)*var(--tune-size,1))/1.15 var(--fh)}
.by-ppl-r{color:var(--mute)}
.by-ppl-l{display:block;font-size:calc(15px*var(--tune-size,1));letter-spacing:.06em;margin-top:2px}
.by-ppl-x{color:var(--mute);font-size:calc(16px*var(--tune-size,1));max-width:52ch}
.by-ppl-b{font:520 calc(16px*var(--tune-size,1))/1.3 var(--ft2);color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;margin-top:6px;justify-self:start}
@media (min-width:1000px){
  .by-ppl li{grid-template-columns:minmax(0,5fr) minmax(0,5fr) 11em;column-gap:32px;align-items:baseline}
  .by-ppl-x{grid-column:2}
  .by-ppl-b{grid-column:3;grid-row:1;margin:0;justify-self:end}
  .by-team-pair{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .by-team-pair .by-head{text-align:left}.by-team-pair .by-head h2,.by-team-pair .by-head h2::after{margin-left:0}.by-team-pair .by-head p{margin-left:0}
  .by-team-pair .by-ppl li{grid-template-columns:minmax(0,1fr) 11em}
  .by-team-pair .by-ppl-r,.by-team-pair .by-ppl-x{grid-column:1}
  .by-team-pair .by-ppl-b{grid-column:2;grid-row:1}
}
.by-team-ph{margin-bottom:32px;aspect-ratio:4/5;overflow:hidden}
.by-team-ph img{width:100%;height:100%;object-fit:cover}

/* ── visit ───────────────────────────────────────────────────────────────────────────────────────────────── */
.by-visit{grid-template-columns:minmax(0,1fr);padding-block:var(--band);display:grid;gap:clamp(36px,5vw,72px);background:linear-gradient(var(--line),var(--line)) 50% 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.by-visit h2{margin-bottom:22px}
.by-addr{font:var(--fhs) 300 calc(clamp(24px,2.2vw,30px)*var(--tune-size,1))/1.3 var(--fh)}
.by-get{margin-top:18px}
.by-get li{padding-left:28px;position:relative;color:var(--mute)}
.by-get li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:1px;background:var(--acc)}
.by-visit-c{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:calc(18px*var(--tune-size,1))}
.by-visit-c a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.by-hrs-p,.by-wk-p{margin-top:28px}
/* hours as a week: each day a hairline with its open hours drawn as a thicker stretch of the same line */
.by-x .wk{margin-top:12px;max-width:440px}
.by-x .wk li{display:grid;grid-template-columns:3.2em minmax(0,1fr) 7.6em;gap:14px;align-items:center;padding:7px 0;font-size:calc(16px*var(--tune-size,1));font-variant-numeric:tabular-nums lining-nums}
.by-x .wk-bar{position:relative;height:1px;background:var(--line)}
.by-x .wk-bar i{position:absolute;top:-1px;height:3px;background:var(--acc)}
.by-x .wk li.off{color:var(--mute)}
.by-x .wk-t{text-align:right;white-space:nowrap}
.by-x .wk-scale{display:flex;justify-content:space-between;margin:4px calc(7.6em + 14px) 0 calc(3.2em + 14px);font-size:calc(14px*var(--tune-size,1));color:var(--mute);font-variant-numeric:tabular-nums lining-nums}
.by-hrs{margin:8px 0 0;max-width:420px}
.by-hrs div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line)}
.by-hrs dt{margin:0}.by-hrs dd{margin:0;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.by-shut dd{color:var(--mute)}
.by-bring ul{margin-top:8px}
.by-bring li{padding:6px 0;border-bottom:1px solid var(--line)}
.by-pol{margin-top:22px;color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
.by-pol li{padding:3px 0}
.by-pol li::before{content:"— ";color:var(--acc)}
.by-map{margin-top:26px}
.by-map-f{display:block;width:100%;aspect-ratio:16/10;border:1px solid var(--line);background:var(--bg2);filter:grayscale(1) sepia(.12) contrast(.96)}
.by-map-d{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:calc(15px*var(--tune-size,1))}
.by-map-d a{color:var(--acc);text-underline-offset:.3em}
.by-map-c{color:var(--mute)}
@media (min-width:1000px){.by-visit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.by-bring{margin-top:6px}}
.wk{margin-top:10px}

/* ── closing ─────────────────────────────────────────────────────────────────────────────────────────────── */
.by-end{position:relative;text-align:center;isolation:isolate}
.by-end-line{padding-block:var(--band);background:var(--bg2)}
.by-end-water{display:grid;min-height:clamp(440px,52vw,720px);color:var(--onph);overflow:hidden}
.by-end-ph{position:absolute;inset:0;z-index:-2}
.by-end-ph img{width:100%;height:100%;object-fit:cover}
.by-end-water .by-shade{background:rgb(14 12 10/.46)}
.by-end-in{align-self:center;padding-block:calc(56px*var(--tune-space,1))}
.by-end-water .by-wl{background:var(--onph);opacity:.6}
.by-end h2{font-size:calc(clamp(34px,4vw,60px)*var(--tune-size,1));max-width:20ch;margin-inline:auto}
.by-end-x{margin:16px auto 0;max-width:46ch;font-size:calc(18px*var(--tune-size,1))}
.by-end-line .by-end-x{color:var(--mute)}
.by-end-a{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 28px}
.by-end-line .by-pill{background:var(--btn);border-color:var(--btn);color:var(--onbtn)}

/* ── footer: a quiet centred sign-off ────────────────────────────────────────────────────────────────────── */
.by-foot{background:var(--deep);color:var(--ondeep);padding-block:calc(clamp(56px,7vw,96px)*var(--tune-space,1)) calc(40px*var(--tune-space,1));text-align:center}
.by-foot-n{font:300 calc(clamp(26px,2.4vw,34px)*var(--tune-size,1))/1 var(--fh);letter-spacing:.2em;margin-right:-.2em}
.by-foot .by-wl{background:var(--glow);margin:18px auto 26px}
.by-foot-g{display:grid;gap:18px;justify-items:center;color:var(--ondeep2)}
.by-foot-g a{color:var(--ondeep)}
.by-foot .by-hrs{min-width:min(320px,100%);margin-top:0}.by-foot .by-hrs div:first-child{padding-top:0}
.by-foot .by-hrs div{border-color:color-mix(in srgb,var(--ondeep) 18%,transparent)}
.by-foot .by-shut dd{color:var(--ondeep2)}
.by-legal-l{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:34px;font-size:calc(15px*var(--tune-size,1))}
.by-legal-l a{text-decoration:none}.by-legal-l a:hover,.by-legal-l a[aria-current]{text-decoration:underline;text-underline-offset:.3em}
.by-foot .langs{justify-content:center;margin-top:14px}
.by-foot-f{margin-top:16px;font-size:calc(14px*var(--tune-size,1));color:var(--ondeep2)}
@media (min-width:760px){.by-foot-g{grid-template-columns:repeat(3,auto);justify-content:center;column-gap:clamp(40px,6vw,96px);align-items:start;text-align:left;justify-items:start}}

/* ── inner pages ─────────────────────────────────────────────────────────────────────────────────────────── */
.by-page{text-align:center}
.by-page-t{padding-block:calc(clamp(48px,7vw,110px)*var(--tune-space,1)) calc(clamp(36px,5vw,64px)*var(--tune-space,1))}
.by-page .by-h1{font-size:calc(clamp(40px,5vw,76px)*var(--tune-size,1));line-height:1.04;margin-inline:auto;max-width:16ch}
.by-page .by-lede{margin:0 auto;max-width:48ch;color:var(--mute)}
.by-page-ph{height:clamp(240px,40vw,560px);overflow:hidden}
.by-page-ph img{width:100%;height:100%;object-fit:cover}
.by-menu{padding-block:var(--band) 0}
.by-grp{margin-bottom:calc(clamp(48px,6vw,88px)*var(--tune-space,1))}
.by-grp-h h2{min-width:0}
.by-grp-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.by-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:4px;padding:20px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.by-item-t{grid-column:1/-1}
.by-item-t p{color:var(--mute);margin-top:6px;max-width:60ch}
.by-item-w{font-size:calc(15.5px*var(--tune-size,1))}
.by-item-d{color:var(--mute);font-size:calc(15px*var(--tune-size,1));font-variant-numeric:tabular-nums lining-nums}
.by-item-p{text-align:right;font-size:19px;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
@media (min-width:760px){.by-item{grid-template-columns:minmax(0,1fr) 9ch 11ch;column-gap:28px;align-items:baseline}.by-item-t{grid-column:auto}.by-item-d{text-align:right}}
.by-rules{padding-block:calc(clamp(24px,3vw,40px)*var(--tune-space,1)) var(--band)}
.by-rules ul{grid-template-columns:minmax(0,1fr);margin-top:18px;display:grid;gap:10px}
.by-rules li{padding-left:28px;position:relative}
.by-rules li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:1px;background:var(--acc)}
.by-faq{padding-bottom:var(--band)}
.by-faq h2{margin-bottom:22px}
.by-faq details{border-top:1px solid var(--line)}
.by-faq details:last-child{border-bottom:1px solid var(--line)}
.by-faq summary{cursor:pointer;padding:18px 40px 18px 0;font-size:calc(19px*var(--tune-size,1));list-style:none;display:block;position:relative}
.by-faq summary::-webkit-details-marker{display:none}
.by-faq summary::after{content:"";position:absolute;right:0;top:50%;margin-top:-6.5px;width:13px;height:13px;background:linear-gradient(var(--acc),var(--acc)) center/13px 1px no-repeat,linear-gradient(var(--acc),var(--acc)) center/1px 13px no-repeat;transition:transform .3s}
.by-faq details[open] summary::after{transform:rotate(45deg)}
.by-faq details p{padding:0 0 20px;color:var(--mute);max-width:64ch}
.by-faq dl{grid-template-columns:minmax(0,1fr);margin:0;display:grid;gap:0 clamp(32px,4vw,64px)}
.by-faq dl div{border-top:1px solid var(--line);padding:18px 0}
.by-faq dt{font-size:calc(19px*var(--tune-size,1))}.by-faq dd{margin:6px 0 0;color:var(--mute)}
@media (min-width:1000px){.by-faq dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.by-next{text-align:center;padding-bottom:var(--band)}
.by-team-full{padding-top:var(--band)}
.by-ct{padding-block:var(--band);background:linear-gradient(var(--line),var(--line)) 50% 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.by-ct-g{grid-template-columns:minmax(0,1fr);display:grid;gap:40px}
.by-ct-d{margin:0}.by-ct-d div{padding:12px 0;border-bottom:1px solid var(--line)}
.by-ct-d dt{font-size:calc(15px*var(--tune-size,1));color:var(--mute)}.by-ct-d dd{margin:2px 0 0;font-size:calc(19px*var(--tune-size,1))}
.by-ct-d a{text-underline-offset:.3em}
.by-form{display:grid;gap:16px}
.by-form label{display:grid;gap:6px;font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
.by-form input,.by-form textarea{font:inherit;font-size:calc(17px*var(--tune-size,1));color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0}
.by-form button{justify-self:start;cursor:pointer;font:520 calc(16px*var(--tune-size,1))/1 var(--ft2)}
.by-form-n{font-size:calc(14.5px*var(--tune-size,1));color:var(--mute)}
@media (min-width:1000px){.by-ct-g{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,6vw,96px)}.by-ct-nf{grid-template-columns:minmax(0,1fr)}}
.by-ct-m{grid-template-columns:minmax(0,1fr);display:grid;gap:0;text-align:center}
.by-ct-m li{padding:26px 0;border-top:1px solid var(--line)}
.by-ct-v{display:block;margin-top:6px;font:var(--fhs) 300 calc(clamp(26px,3vw,42px)*var(--tune-size,1))/1.2 var(--fh);text-decoration:none}
.by-reg{padding-bottom:calc(40px*var(--tune-space,1));font-size:calc(14.5px*var(--tune-size,1));color:var(--mute);text-align:center}
.by-legal{padding-block:calc(clamp(40px,6vw,80px)*var(--tune-space,1))}

/* ── motion: transform and opacity only, off with reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .by-hero-ph img{animation:by-drift 1.6s cubic-bezier(.2,.6,.2,1) both}
  @keyframes by-drift{from{transform:scale(1.04)}to{transform:scale(1)}}
}
/* Advanced hero moment, "the still": the photo settles, the waterline draws out from the centre, then the
   headline, the line and the action rise as if surfacing */
@media (prefers-reduced-motion:no-preference){
  .m-js .by-top-over .by-wl{animation:by-line 1.1s .2s cubic-bezier(.3,.7,.2,1) backwards}
  .m-js .by-top-over .by-name{animation:by-rise .9s .05s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .by-top-over .by-row{animation:by-fade .8s .55s ease-out backwards}
  .m-js .by-hero .by-h1{animation:by-rise 1s .6s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .by-hero .by-lede{animation:by-rise 1s .78s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .by-hero .by-acts{animation:by-rise 1s .92s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .by-hero .by-facts{animation:by-fade .9s 1.05s ease-out backwards}
  @keyframes by-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.55}}
  @keyframes by-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  @keyframes by-fade{from{opacity:0}to{opacity:1}}
}
/* tablets and phones: the therapist photo and the map in a wider frame, so neither fills the screen */
@media (max-width:999px){.by-team-ph{aspect-ratio:3/2}.by-team-ph img{object-position:50% 30%}.by-map-f{aspect-ratio:16/10}}

/* long shop names on small screens (html.name-long / name-xl from engine/shared/site.ts; qa tests "Loodgietersbedrijf Jansen") */
@media(max-width:600px){html.name-mid .by-name{font-size:calc(17px*var(--tune-size,1));letter-spacing:.1em;margin-right:-.1em}}
@media (min-width:1000px){.by-ppl li{padding:30px 0}.by-team{padding-block:calc(var(--band)*1.25)}.by-visit{padding-block:calc(var(--band)*1.5) calc(var(--band)*1.2);row-gap:clamp(48px,6vw,88px)}}

/* sales step 4 (photo-slice): on phones the first photo keeps more of the picture; the main button and the phone bar stay on the first screen */
@media (max-width:760px){.by-hero{min-height:max(540px,70svh)}}

/* stacked bands share one gap: the upper band's bottom padding and the lower one's top padding together make one --band */
.by-passes+.by-revs{padding-top:0}
.by-revs:has(+.by-visit){padding-bottom:calc(var(--band)*.5)}
.by-revs+.by-visit{padding-top:calc(var(--band)*.5)}
@media (min-width:1000px){.by-revs+.by-visit{padding-top:calc(var(--band)*.5)}}