/* Look BB "Gentry": the old gentlemen's barber of the grand houses. A big, calm photo; the name and the headlines in
   light Roman capitals (Cinzel), widely tracked; Crimson Pro for text, with its italic for the one quiet line; bottle
   black and cream with one gold or oxblood; the only ornament is a hairline double rule, as on engraved stationery.
   The prices sit on an engraved cream card. Every class starts with bb-. */
@font-face{font-family:"Cinzel BB";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/cinzel-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:"Cinzel BB";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/cinzel-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:"Crimson BB";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/crimson-pro-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:"Crimson BB";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/crimson-pro-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:"Crimson BB";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/crimson-pro-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:"Crimson BB";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/crimson-pro-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:"Gantari BB";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/gantari-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:"Gantari BB";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/gantari-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}

/* tokens (dark palette bottle; design.ts lists every palette and checks each text pair) and type:
   --fd = Cinzel (capitals), --ft = Crimson Pro (text; Gantari in the modern pairing), --fi = the italic voice
   (Crimson italic; Gantari keeps upright text and takes the italic from Crimson), --fz = body size */
:root{--bg:#0d1310;--bg2:#141c18;--ink:#efe7d6;--mute:#b2ab99;--line:#2a3530;--acc:#c9a45c;--onacc:#12100b;
  --night:#080c0a;--onnight:#efe7d6;--onnight2:#b8b09d;--gild:#c9a45c;--card:#efe6d3;--oncard:#1a1a15;--oncard2:#4f4a3d;--cardline:#b9ab8c;
  --w:1240px;--pad:clamp(20px,4.4vw,64px);--gap:clamp(88px,10vw,152px);
  --fd:"Cinzel BB",Georgia,serif;--ft:"Crimson BB",Georgia,serif;--fi:"Crimson BB",Georgia,serif;--fz:calc(19px*var(--tune-size,1));--fl:1.6;
  --track:.2em;--mat:clamp(8px,3.4vw,52px);--veil:color-mix(in oklab,var(--night) 50%,transparent);
  --lift:0 1px 1px color-mix(in oklab,var(--night) 10%,transparent),0 4px 8px color-mix(in oklab,var(--night) 8%,transparent),0 16px 32px color-mix(in oklab,var(--night) 8%,transparent),0 40px 80px color-mix(in oklab,var(--night) 10%,transparent);
  --m-accent:var(--acc);--m-header-bg:var(--night);
  --g-max:calc(var(--w) + 2 * var(--pad));--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-on-accent:var(--onacc);--g-radius:0px;--g-fd:var(--fd);--g-ft:var(--ft);--g-top:24px}
.f-modern{--ft:"Gantari BB",system-ui,sans-serif;--fz:calc(17px*var(--tune-size,1));--fl:1.65}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{overflow-wrap:anywhere;margin:0;background:var(--bg);color:var(--ink);font:400 var(--fz)/var(--fl) var(--ft);-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.24em;text-decoration-thickness:1px}
h1,h2,h3,h4,summary{overflow-wrap:anywhere}
h1,h2,h3{margin:0;font-family:var(--fd);font-weight:400;letter-spacing:.12em;line-height:1.18;text-wrap:balance}
h2{font-size:calc(clamp(26px,2.7vw,40px)*var(--tune-size,1))}
h3{font-size:calc(clamp(17px,1.4vw,20px)*var(--tune-size,1));letter-spacing:.14em}
p,figure,blockquote,dl,dd{margin:0}
p{text-wrap:pretty}
ul,ol{list-style:none;margin:0;padding:0}
.bb-w{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad);box-sizing:content-box}
.bb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bb-nw{white-space:nowrap}
.bb-skip{position:absolute;left:12px;top:-60px;background:var(--acc);color:var(--onacc);padding:10px 16px;z-index:40}
.bb-skip:focus{top:12px}
.bb-it{font-family:var(--fi);font-style:italic;color:var(--mute);font-size:1.08em;line-height:1.45}
.bb-k{font:400 calc(15px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:var(--track);color:var(--mute)}
.bb-head{text-align:center;margin-bottom:calc(clamp(36px,4.4vw,60px)*var(--tune-space,1))}
.bb-head .bb-it{margin-top:12px}

/* the double rule: two hairlines 3 px apart */
.bb-dbl{display:block;height:5px;border-block:1px solid currentColor;opacity:.75}
.bb-dbl-h{width:88px;margin:22px auto}

/* buttons: one outlined action in tracked capitals, filling with the accent on hover */
.bb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;border:1px solid var(--acc);color:var(--acc);background:transparent;
  font:400 calc(15px*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--track);text-decoration:none;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s}
.bb-btn:hover{background:var(--acc);color:var(--onacc)}
.bb-btn:focus-visible,.bb-res:focus-visible,.bb-with:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- header: the split nav ---------- */
.bb-top{position:relative;z-index:20;background:var(--night);color:var(--onnight)}
.bb-top-over{position:absolute;inset:0 0 auto;background:transparent}
.bb-top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:calc(var(--w) + 2 * var(--pad));margin-inline:auto;padding:0 var(--pad);min-height:96px}
.bb-top-in::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:color-mix(in oklab,var(--onnight) 22%,transparent)}
.bb-name{grid-column:2;font:400 clamp(19px,1.8vw,26px)/1.1 var(--fd);letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;text-decoration:none;text-align:center;white-space:nowrap}
.bb-name img{max-height:44px;width:auto}
.bb-nl{grid-column:1;justify-self:start}
.bb-nl ul{display:flex;gap:clamp(20px,2.6vw,40px)}
.bb-nl a,.bb-res{font:400 15px/1 var(--fd);letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.bb-nl a{padding-block:10px;color:var(--onnight)}
.bb-nl a:hover,.bb-nl a[aria-current]{text-decoration:underline;text-underline-offset:.5em}
.bb-nr{grid-column:3;justify-self:end;display:flex;align-items:center;gap:28px}
.bb-res{display:inline-block;padding:10px 0 8px;border-bottom:1px solid var(--gild);color:var(--onnight)}
.bb-res:hover{color:var(--gild)}
.bb-res-s{display:none}
.langs{display:flex;gap:4px;list-style:none;margin:0;padding:0;font:400 calc(15px*var(--tune-size,1))/1 var(--fd);letter-spacing:.14em}
.langs a{display:inline-block;padding:8px 6px;text-decoration:none;opacity:.78}
.langs a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:.4em}
.bb-menu{display:none;grid-column:1;justify-self:start}
.bb-menu summary{list-style:none;cursor:pointer;white-space:nowrap;overflow-wrap:normal;font:400 15px/1 var(--fd);letter-spacing:var(--track);text-transform:uppercase;padding:14px 0}
.bb-menu summary::-webkit-details-marker{display:none}
.bb-sheet{position:absolute;left:0;right:0;top:100%;background:var(--night);color:var(--onnight);padding:12px var(--pad) 28px;border-top:1px solid color-mix(in oklab,var(--onnight) 22%,transparent)}
.bb-sheet li a{display:block;padding:15px 0;border-bottom:1px solid color-mix(in oklab,var(--onnight) 14%,transparent);font:400 calc(17px*var(--tune-size,1))/1.2 var(--fd);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.bb-sheet .langs{margin-top:18px}
@media (max-width:960px){
  .bb-top-in{min-height:64px;gap:12px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .bb-menu summary,.bb-res{font-size:calc(13px*var(--tune-size,1));letter-spacing:.14em}
  .bb-res-s{display:inline}
  .bb-res-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .bb-nl,.bb-nr-l{display:none}
  .bb-menu{display:block}
  .bb-name{font-size:calc(clamp(15px,4.2vw,19px)*var(--tune-size,1));letter-spacing:.2em;margin-right:-.2em}
  .bb-nr{gap:0}
}

/* ---------- hero: salon (the photo fills the screen, the capitals centred on it) ---------- */
.bb-hero{position:relative;color:var(--onnight);background:var(--night);overflow:hidden}
/* the photo sits in the page like a framed print: a paper margin all round (--mat) and a gold hairline just outside
   the photo; the header is printed on the photo inside the frame */
.bb-h-salon{display:grid;padding:var(--mat);background:var(--bg)}
.bb-plate{position:relative;display:grid;min-height:calc(max(620px,min(100svh,1000px)) - 2 * var(--mat));overflow:hidden;background:var(--night);
  box-shadow:0 0 0 5px var(--bg),0 0 0 6px color-mix(in oklab,var(--gild) 70%,transparent)}
.bb-hk-salon .bb-top-over{inset:var(--mat) var(--mat) auto}
.bb-salon-ph,.bb-veil,.bb-lamp{position:absolute;inset:0}
.bb-salon-ph img,.bb-study-ph img,.bb-end-ph img{width:100%;height:100%;object-fit:cover}
.bb-veil{background:linear-gradient(180deg,color-mix(in oklab,var(--night) 62%,transparent) 0,transparent 22%,transparent 60%,color-mix(in oklab,var(--night) 55%,transparent) 100%),radial-gradient(ellipse 60% 52% at 50% 56%,color-mix(in oklab,var(--night) 62%,transparent),color-mix(in oklab,var(--night) 30%,transparent) 70%,color-mix(in oklab,var(--night) 22%,transparent))}
.bb-lamp{background:var(--night);opacity:0;pointer-events:none}
.bb-salon-in{position:relative;display:grid;place-items:center;padding:calc(132px*var(--tune-space,1)) var(--pad) calc(72px*var(--tune-space,1))}
.bb-words{max-width:820px;text-align:center}
.bb-kicker{font:italic 400 calc(clamp(19px,1.5vw,22px)*var(--tune-size,1))/1.4 var(--fi);color:var(--onnight2)}
.bb-h1{font-size:calc(clamp(28px,3.25vw,48px)*var(--tune-size,1));letter-spacing:var(--track);margin-right:calc(-1 * var(--track));line-height:1.3;text-transform:uppercase}
@media (max-width:520px){.bb-h1{--track:.1em;font-size:calc(27px*var(--tune-size,1))}}
.bb-l{display:block}
.bb-lede{max-width:36ch;margin-inline:auto;font-size:calc(clamp(19px,1.45vw,22px)*var(--tune-size,1));line-height:1.5;color:var(--onnight)}
.bb-acts{margin-top:calc(clamp(28px,3vw,40px)*var(--tune-space,1))}
.bb-hero .bb-btn,.bb-end-chair .bb-btn,.bb-page .bb-btn{border-color:var(--gild);color:var(--onnight)}
.bb-hero .bb-btn,.bb-end-chair .bb-btn{background:var(--gild);color:var(--night)}
.bb-hero .bb-btn:hover,.bb-end-chair .bb-btn:hover{background:var(--onnight);border-color:var(--onnight);color:var(--night)}

/* study: the same full photo, lit from the left like a reading lamp; the words stand left-aligned in the dark third */
.bb-h-study{display:grid;min-height:max(620px,min(100svh,1000px))}
.bb-study-ph{position:absolute;inset:0;overflow:hidden}
.bb-veil-s{background:linear-gradient(180deg,color-mix(in oklab,var(--night) 62%,transparent) 0,transparent 22%),linear-gradient(90deg,color-mix(in oklab,var(--night) 90%,transparent) 0,color-mix(in oklab,var(--night) 74%,transparent) 34%,color-mix(in oklab,var(--night) 10%,transparent) 66%,transparent)}
.bb-study-in{position:relative;display:grid;align-items:center;justify-items:start;width:100%;max-width:var(--w);margin-inline:auto;padding:calc(132px*var(--tune-space,1)) var(--pad) calc(72px*var(--tune-space,1));box-sizing:content-box}
.bb-h-study .bb-words{max-width:600px;text-align:left}
.bb-h-study .bb-dbl-h,.bb-h-study .bb-lede{margin-inline:0}
@media (max-width:760px){
  .bb-plate{min-height:calc(max(540px,70svh) - 2 * var(--mat))}   /* sales step 4: a taller slice of the photo on phones */
  .bb-plate{box-shadow:0 0 0 3px var(--bg),0 0 0 4px color-mix(in oklab,var(--gild) 70%,transparent)}
  .bb-salon-in{padding:calc(96px*var(--tune-space,1)) 10px calc(48px*var(--tune-space,1))}
  .bb-dbl-h{width:64px;margin:16px auto}
  .bb-h-study{min-height:max(540px,70svh)}
  .bb-veil-s{background:linear-gradient(180deg,color-mix(in oklab,var(--night) 62%,transparent) 0,transparent 20%,transparent 34%,color-mix(in oklab,var(--night) 86%,transparent) 78%)}
  .bb-study-in{align-items:end;padding:calc(96px*var(--tune-space,1)) 20px calc(44px*var(--tune-space,1));box-sizing:border-box}
}

/* ---------- the house ---------- */
.bb-about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:center;padding-block:var(--gap)}
.bb-about-t{max-width:560px}
.bb-about-t h2{margin:14px 0 26px}
.bb-about-x{font-size:1.08em;line-height:1.65}
.bb-sign{margin-top:26px;font:400 calc(15px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:var(--track);color:var(--acc)}
/* the frame: a hairline double rule standing a little off the photo */
.bb-frame{position:relative;margin:14px;box-shadow:0 0 0 9px var(--bg),0 0 0 10px var(--line),0 0 0 13px var(--bg),0 0 0 14px var(--line)}
.bb-about-ph img{aspect-ratio:4/5;width:100%;object-fit:cover}
@media (max-width:760px){.bb-about{grid-template-columns:1fr}.bb-about-ph{order:-1;max-width:420px}}

/* ---------- the rituals: card ---------- */
.bb-menu-c{padding-block:0 var(--gap)}
.bb-card{position:relative;background:var(--card);color:var(--oncard);box-shadow:var(--lift)}
.bb-card::before{content:"";position:absolute;inset:9px;border:1px solid var(--cardline);pointer-events:none}
.bb-card .bb-it,.bb-card .bb-k{color:var(--oncard2)}
.bb-ritual{max-width:960px;margin-inline:auto;padding:calc(clamp(40px,6vw,88px)*var(--tune-space,1)) clamp(24px,6vw,96px)}
.bb-ritual-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,3vw,36px);color:var(--oncard)}
.bb-ritual-h .bb-dbl{opacity:.55}
.bb-ritual-h h2{text-align:center}
.bb-ritual-n{text-align:center;margin:14px auto 0;max-width:46ch}
.bb-rows{margin-top:calc(clamp(28px,4vw,52px)*var(--tune-space,1));font-variant-numeric:lining-nums tabular-nums}
.bb-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto repeat(var(--nc,1),7rem);gap:8px clamp(16px,2.4vw,36px);align-items:baseline;padding:20px 0;border-top:1px solid var(--cardline)}
.bb-c2{--nc:2}
.bb-rows li:last-child{border-bottom:1px solid var(--cardline)}
.bb-rows li.bb-rows-h{border-top:0;padding:0 0 10px;font:400 calc(14px*var(--tune-size,1))/1.2 var(--fd);letter-spacing:.16em;color:var(--oncard2);text-transform:uppercase}
.bb-rows-n{font:400 calc(18px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:.1em;text-transform:uppercase}
.bb-rows-n a{text-decoration:none}
.bb-rows-n a:hover{text-decoration:underline}
.bb-rows-x{display:block;margin-top:5px;font:italic 400 calc(18px*var(--tune-size,1))/1.4 var(--fi);letter-spacing:0;text-transform:none;color:var(--oncard2)}
.bb-rows-t{font-style:italic;color:var(--oncard2);white-space:nowrap}
.bb-rows-p{text-align:right;font-size:20px;white-space:nowrap}
@media (max-width:820px){
  .bb-rows li{grid-template-columns:minmax(0,1fr) repeat(var(--nc,1),6.5rem);row-gap:6px}
  .bb-rows-n{grid-column:1/-1}
  .bb-rows-t{grid-column:1;grid-row:2;font-size:calc(17px*var(--tune-size,1))}
  .bb-rows li>.bb-rows-p{grid-row:2}
  .bb-rows li.bb-rows-h>span:nth-child(2){display:none}
  .bb-rows li.bb-rows-h>.bb-rows-p{grid-row:1}
  .bb-rows li.bb-rows-h>.bb-rows-p:nth-child(3){grid-column:2}
  .bb-rows li.bb-rows-h>.bb-rows-p:nth-child(4){grid-column:3}
  .bb-rows-p{font-size:calc(18px*var(--tune-size,1))}
  .bb-rows li.bb-rows-h>.bb-rows-p{font-size:calc(13px*var(--tune-size,1));letter-spacing:.12em}
  .bb-rows-n{font-size:calc(16px*var(--tune-size,1))}
  .bb-rows-x{font-size:calc(17px*var(--tune-size,1))}
}

/* the rituals: ledger (open on the page beside one tall photo) */
.bb-menu-l{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start;padding-block:0 var(--gap)}
.bb-menu-ph{position:sticky;top:40px}
.bb-menu-ph img{aspect-ratio:3/4;width:100%;object-fit:cover}
.bb-menu-lt .bb-it{margin-top:12px}
.bb-menu-l .bb-rows li{border-color:var(--line)}
.bb-menu-l .bb-rows-x,.bb-menu-l .bb-rows-t,.bb-menu-l .bb-rows-h{color:var(--mute)}
@media (max-width:900px){.bb-menu-l{grid-template-columns:1fr}.bb-menu-ph{position:static;max-width:420px}}

/* ---------- the barbers ---------- */
.bb-crew,.bb-crew-l{padding-block:0 var(--gap)}
.bb-crew-g{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(28px,4vw,64px) clamp(24px,3.4vw,52px);text-align:center}
.bb-crew-g.bb-n1{--n:1;max-width:360px;margin-inline:auto}.bb-crew-g.bb-n2{--n:2;max-width:760px;margin-inline:auto}.bb-crew-g.bb-n4{--n:4}
.bb-crew-f{aspect-ratio:4/5;background:var(--bg2);display:grid;place-items:center;overflow:hidden;margin-bottom:34px}
.bb-crew-f img{width:100%;height:100%;object-fit:cover}
/* no portrait: the barber's monogram in a thin oval, like a seal */
.bb-crew-m{aspect-ratio:5/4}
.bb-ini{display:grid;place-items:center;width:clamp(120px,11vw,156px);aspect-ratio:3/4;border:1px solid color-mix(in oklab,var(--acc) 60%,transparent);border-radius:50%;box-shadow:0 0 0 5px var(--bg2),0 0 0 6px color-mix(in oklab,var(--acc) 30%,transparent);font:400 calc(clamp(34px,3vw,44px)*var(--tune-size,1))/1 var(--fd);letter-spacing:.12em;text-indent:.12em;color:var(--acc)}
.bb-crew-g h3,.bb-crew-l h3{margin-bottom:6px}
.bb-crew-b{margin-top:12px;color:var(--mute)}
.bb-with{display:inline-block;margin-top:18px;padding-bottom:6px;border-bottom:1px solid var(--acc);font:400 calc(15px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.bb-with:hover{color:var(--acc)}
.bb-crew-l ul{max-width:900px;margin-inline:auto}
.bb-crew-l li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px 32px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.bb-crew-l li:last-child{border-bottom:1px solid var(--line)}
.bb-crew-l .bb-crew-b{grid-column:1/3;margin:0}
.bb-crew-l .bb-with{margin:0;grid-column:3;grid-row:1}
@media (max-width:760px){
  .bb-crew-g,.bb-crew-g.bb-n4{--n:2;gap:40px 18px}
  .bb-crew-g.bb-n1{--n:1}
  .bb-crew-l li{grid-template-columns:1fr}
  .bb-crew-l .bb-crew-b,.bb-crew-l .bb-with{grid-column:1;grid-row:auto}
}
@media (max-width:420px){.bb-crew-g h3{font-size:calc(15px*var(--tune-size,1));letter-spacing:.1em}.bb-with{font-size:calc(14px*var(--tune-size,1));letter-spacing:.1em}}

/* ---------- finished cuts: a tight grid ---------- */
.bb-cuts{padding-block:0 var(--gap)}
.bb-cuts-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.bb-cuts-g.bb-n4,.bb-cuts-g.bb-n8{grid-template-columns:repeat(4,minmax(0,1fr))}
.bb-cuts-g li{aspect-ratio:1;overflow:hidden;background:var(--bg2)}
.bb-cuts-g img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.bb-cuts-g,.bb-cuts-g.bb-n4,.bb-cuts-g.bb-n8{grid-template-columns:repeat(2,minmax(0,1fr))}.bb-cuts-g.bb-n3 li:first-child{grid-column:1/-1;aspect-ratio:2/1}}
.bb-gal{padding-block:0 var(--gap)}

/* ---------- rating and quotes ---------- */
.bb-rating{text-align:center;padding-block:0 var(--gap)}
.bb-score{max-width:420px;margin:28px auto 0;color:var(--acc)}
.bb-score .bb-dbl{opacity:.6}
.bb-score-n{font:400 calc(clamp(96px,11vw,168px)*var(--tune-size,1))/1 var(--fd);letter-spacing:.06em;margin:22px -.06em 4px 0;font-variant-numeric:lining-nums}
.bb-score-l{margin-bottom:22px;font:400 calc(15px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute)}
.bb-quote{max-width:34ch;margin:calc(clamp(40px,5vw,64px)*var(--tune-space,1)) auto 0}
.bb-quote p{font:italic 400 calc(clamp(24px,2.3vw,34px)*var(--tune-size,1))/1.35 var(--fi)}
.bb-quote em,.bb-letters em{font-style:normal}
.bb-quote figcaption,.bb-letters figcaption,.bb-more figcaption{margin-top:20px;font:400 calc(15px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute)}
.bb-letters{padding-block:0 var(--gap)}
.bb-score-s{margin-top:14px;font:400 calc(15px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.bb-score-s .bb-score-n{font-size:calc(28px*var(--tune-size,1));letter-spacing:.06em;color:var(--acc);margin:0 .3em 0 0}
.bb-letters-l{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.bb-letters-l.bb-n1{--n:1;max-width:640px;margin-inline:auto}.bb-letters-l.bb-n2{--n:2}
.bb-letters-l{row-gap:clamp(36px,4vw,56px)}
.bb-letters-l.bb-n4,.bb-letters-l.bb-n5,.bb-letters-l.bb-n6{--n:3}
.bb-letters-l li{padding:8px clamp(20px,3vw,44px);border-left:1px solid var(--line)}
.bb-letters-l li:nth-child(3n+1){border-left:0}
.bb-more{max-width:var(--w);margin:calc(clamp(48px,6vw,80px)*var(--tune-space,1)) auto 0;padding-top:calc(clamp(40px,5vw,64px)*var(--tune-space,1));border-top:1px solid var(--line);text-align:left}
.bb-letters-l.bb-more p{font-size:calc(19px*var(--tune-size,1))}
.bb-letters-l p{font:italic 400 calc(21px*var(--tune-size,1))/1.5 var(--fi)}
@media (max-width:760px){.bb-letters-l{grid-template-columns:1fr;row-gap:0}.bb-letters-l li{border-left:0;border-top:1px solid var(--line);padding:28px 0}.bb-letters-l li:first-child{border-top:0}.bb-more{padding-top:0}}

/* ---------- visit: the photo, the card laid over its edge ---------- */
.bb-visit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;padding-block:0 var(--gap)}
.bb-visit-ph{position:relative;grid-column:1/3;grid-row:1;width:68%}
.bb-visit-ph img{aspect-ratio:4/3;width:100%;object-fit:cover}
.bb-visit-c{grid-column:2;grid-row:1;padding:clamp(32px,4vw,56px);z-index:1}
.bb-visit-c h2{margin-bottom:12px}
.bb-addr{margin-top:22px;font-size:1.1em}
.bb-visit-k{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:10px}
.bb-visit-k a{text-decoration-color:var(--cardline)}
.bb-hrs-p,.bb-map-p{margin-top:22px;padding-top:18px;border-top:1px solid var(--cardline)}
.bb-map-b{display:inline-block;padding:8px 0 6px;border:0;border-bottom:1px solid var(--acc);background:none;color:var(--oncard);font:400 calc(14px*var(--tune-size,1))/1 var(--fd);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.bb-map-b:hover{color:var(--acc)}
.bb-map-n{display:block;margin-top:8px;font-size:calc(15px*var(--tune-size,1));color:var(--oncard2)}
.bb-visit-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) sepia(.32) contrast(1.06) brightness(.94)}
.bb-wk-p{margin-top:28px}
.bb-hrs-p .bb-k,.bb-wk-p .bb-k{margin-bottom:10px}
.bb-hrs div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--cardline)}
.bb-hrs dd{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.bb-shut{color:var(--oncard2)}
@media (max-width:900px){.bb-visit{grid-template-columns:1fr}.bb-visit-ph{grid-column:1;width:100%}.bb-visit-c{grid-column:1;grid-row:2;margin:-56px 16px 0}}
.wk{font:400 calc(16px*var(--tune-size,1))/1.2 var(--ft)}
.wk ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wk li{display:grid;grid-template-columns:2.6em 1fr 7.4em;align-items:center;gap:12px}
.wk-bar{position:relative;height:4px;background:color-mix(in oklab,var(--oncard) 10%,transparent)}
.wk-bar i{position:absolute;top:0;bottom:0;background:var(--acc)}
.wk-t{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wk li.off{color:var(--oncard2)}
.wk-scale{white-space:nowrap;display:flex;justify-content:space-between;margin:12px calc(7.4em + 12px) 0 calc(2.6em + 12px);font-size:15px;color:var(--oncard2)}

/* ---------- closing: chair (photo band) | plain ---------- */
.bb-end{text-align:center}
.bb-end h2{font-size:calc(clamp(28px,3.3vw,50px)*var(--tune-size,1));letter-spacing:.16em;margin-right:-.16em}
.bb-end .bb-it{margin-top:16px}
.bb-end-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 36px;margin-top:calc(clamp(28px,3.4vw,44px)*var(--tune-space,1))}
.bb-end-tel{font:400 calc(22px*var(--tune-size,1))/1.2 var(--ft);text-decoration:none;font-variant-numeric:lining-nums}
.bb-end-tel:hover{text-decoration:underline}
.bb-end-chair{position:relative;display:grid;min-height:min(78svh,760px);color:var(--onnight);background:var(--night)}
.bb-end-ph{position:absolute;inset:0}
.bb-end-chair .bb-veil{background:color-mix(in oklab,var(--night) 58%,transparent)}
.bb-end-chair .bb-it{color:var(--onnight2)}
.bb-end-in{position:relative;place-self:center;padding:calc(96px*var(--tune-space,1)) var(--pad);max-width:860px}
.bb-end-plain{padding-block:0 var(--gap)}
.bb-end-plain>.bb-dbl{max-width:420px;margin-inline:auto;color:var(--acc)}
.bb-end-plain h2{margin-top:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}
.bb-end-plain .bb-end-a{margin-bottom:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}

/* ---------- inner pages ---------- */
.bb-page{background:var(--night);color:var(--onnight);text-align:center}
.bb-page-in{padding-block:calc(clamp(56px,7vw,104px)*var(--tune-space,1)) calc(clamp(64px,8vw,112px)*var(--tune-space,1))}
.bb-page .bb-lede{color:var(--onnight2)}
.bb-items{padding-block:var(--gap);display:grid;gap:var(--gap)}
.bb-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px);align-items:center}
.bb-item-r .bb-item-ph{order:2}
.bb-item-ph img{aspect-ratio:4/5;width:100%;object-fit:cover}
.bb-item-t h2{margin-bottom:12px}
.bb-item-t>p:not(.bb-it){margin-top:18px;max-width:58ch}
.bb-facts{display:flex;flex-wrap:wrap;margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bb-facts div{padding:14px 28px 14px 0;margin-right:28px}
.bb-facts dt{font:400 calc(14px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.bb-facts dd{margin-top:4px;font-size:1.05em}
@media (max-width:900px){.bb-item{grid-template-columns:1fr}.bb-item-r .bb-item-ph{order:0}.bb-item-ph{max-width:460px}}
.bb-faq{padding-block:0 var(--gap);max-width:900px}
.bb-faq h2{text-align:center;margin-bottom:calc(clamp(32px,4vw,52px)*var(--tune-space,1))}
.bb-faq details{border-top:1px solid var(--line)}
.bb-faq details:last-child{border-bottom:1px solid var(--line)}
.bb-faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 44px 22px 0;font:500 calc(21px*var(--tune-size,1))/1.4 var(--ft)}
.bb-faq summary::-webkit-details-marker{display:none}
.bb-faq summary::after{content:"+";position:absolute;right:6px;top:50%;translate:0 -50%;font:400 calc(26px*var(--tune-size,1))/1 var(--fd);color:var(--acc)}
.bb-faq details[open] summary::after{content:"−"}
.bb-faq details p{padding-bottom:24px;max-width:64ch;color:var(--mute)}
.bb-faq-open dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px}
.bb-faq-open dt{font:500 calc(21px*var(--tune-size,1))/1.4 var(--ft);padding-top:18px;border-top:1px solid var(--line)}
.bb-faq-open dd{margin-top:8px;color:var(--mute)}
@media (max-width:760px){.bb-faq-open dl{grid-template-columns:1fr}}
.bb-next{text-align:center;padding-block:0 var(--gap)}
.bb-ct{padding-block:0 var(--gap)}
.bb-crew+.bb-ct,.bb-crew-l+.bb-ct{padding-top:0}
.bb-page+.bb-crew,.bb-page+.bb-crew-l,.bb-page+.bb-ct{padding-top:var(--gap)}
.bb-ct-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.bb-ct-nf{grid-template-columns:minmax(0,640px);justify-content:center}
.bb-ct-i{padding:clamp(32px,4vw,52px)}
.bb-ct-d div{padding:12px 0;border-top:1px solid var(--cardline)}
.bb-ct-d div:first-child{border-top:0;padding-top:0}
.bb-ct-d dt{font:400 calc(14px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--oncard2)}
.bb-ct-d dd{margin-top:4px}
.bb-form{display:grid;gap:22px}
.bb-form label{display:grid;gap:8px;font:400 calc(14px*var(--tune-size,1))/1.3 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.bb-form input,.bb-form textarea{font:400 calc(19px*var(--tune-size,1))/1.5 var(--ft);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--mute);padding:10px 0;border-radius:0;letter-spacing:0;text-transform:none}
.bb-form input:focus,.bb-form textarea:focus{outline:none;border-bottom-color:var(--acc);box-shadow:0 1px 0 var(--acc)}
.bb-form .bb-btn{justify-self:start}
.bb-form-n{font-size:calc(16px*var(--tune-size,1));color:var(--mute)}
.bb-ct-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.bb-ct-m li{padding:12px clamp(16px,3vw,40px);border-left:1px solid var(--line)}
.bb-ct-m li:first-child{border-left:0}
.bb-ct-v{display:block;margin-top:12px;font-size:1.2em;text-decoration:none}
a.bb-ct-v:hover{text-decoration:underline}
@media (max-width:760px){.bb-ct-g{grid-template-columns:1fr}.bb-ct-m{grid-template-columns:1fr}.bb-ct-m li{border-left:0;border-top:1px solid var(--line);padding:24px 0}.bb-ct-m li:first-child{border-top:0}}
.bb-reg{padding-bottom:calc(56px*var(--tune-space,1));font-size:calc(16px*var(--tune-size,1));color:var(--mute);text-align:center}
.bb-legal{padding-block:calc(72px*var(--tune-space,1)) var(--gap);max-width:780px}
.bb-legal h1{font-size:calc(clamp(24px,3vw,36px)*var(--tune-size,1));letter-spacing:.06em}
.bb-legal :is(h1,h2,h3){hyphens:auto}
.bb-legal :is(h2,h3){letter-spacing:.06em}

/* ---------- footer ---------- */
.bb-foot{background:var(--night);color:var(--onnight);padding:calc(clamp(64px,7vw,96px)*var(--tune-space,1)) 0 calc(48px*var(--tune-space,1));font-size:calc(17px*var(--tune-size,1))}
.bb-foot-n{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,3vw,40px);color:var(--gild)}
.bb-foot-n .bb-dbl{opacity:.6}
.bb-foot-name{font:400 calc(clamp(20px,2.2vw,30px)*var(--tune-size,1))/1.2 var(--fd);letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;color:var(--onnight);text-align:center}
.bb-foot-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:calc(clamp(40px,5vw,64px)*var(--tune-space,1))}
.bb-foot-g p+p{margin-top:6px}
.bb-foot .bb-k{color:var(--onnight2);margin-bottom:10px}
.bb-foot .bb-hrs div{border-color:color-mix(in oklab,var(--onnight) 16%,transparent);padding:6px 0}
.bb-foot .bb-shut{color:var(--onnight2)}
.bb-foot-l{text-align:right}
.bb-legal-l li{margin-bottom:6px}
.bb-foot-l .langs{justify-content:flex-end;margin-top:10px}
.bb-foot-f{margin-top:14px;color:var(--onnight2);font-size:calc(16px*var(--tune-size,1))}
.bb-foot a{text-decoration-color:color-mix(in oklab,var(--onnight) 40%,transparent)}
@media (max-width:760px){.bb-foot-g{grid-template-columns:1fr}.bb-foot-l{text-align:left}.bb-foot-l .langs{justify-content:flex-start}.bb-foot-name{letter-spacing:.2em;margin-right:-.2em}}

/* serious tone: the card's lift stays soft; nothing here tilts or casts a hard shadow, so there is nothing to calm */

/* ---------- Advanced hero moment: "the lamps come up" ----------
   The room starts in the dark: a night layer over the photo fades away as the photo settles from a slow push-in, and
   the two double rules draw out from the centre. The words are there from the first frame (they are the LCP). On a
   mouse or trackpad the photo then drifts a few pixels with the pointer (data-depth). */
@media (prefers-reduced-motion:no-preference){
  .m-js .bb-hero .bb-lamp{animation:bb-lamp 1.6s cubic-bezier(.3,.1,.2,1) both}
  .m-js .bb-salon-ph img,.m-js .bb-study-ph img{animation:bb-settle 2s cubic-bezier(.2,.6,.2,1) both}
  .m-js .bb-salon-ph,.m-js .bb-study-ph{animation:bb-fade 1s ease-out backwards}
  .m-js .bb-hero .bb-dbl-h{animation:bb-draw 1.1s .45s cubic-bezier(.3,.7,.2,1) both}
  .m-js .bb-hero .bb-kicker,.m-js .bb-hero .bb-lede,.m-js .bb-hero .bb-acts{animation:bb-rise .9s .7s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes bb-lamp{from{opacity:.85}to{opacity:0}}
@keyframes bb-settle{from{transform:scale(1.06)}to{transform:none}}
@keyframes bb-fade{from{opacity:.4}}
@keyframes bb-draw{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:.75}}
@keyframes bb-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* long shop names on small screens (html.name-mid / name-xl from engine/shared/site.ts; qa tests "Loodgietersbedrijf Jansen") */
@media(max-width:960px){html.name-mid .bb-name{font-size:calc(14px*var(--tune-size,1));letter-spacing:.14em;margin-right:-.14em;line-height:1.35;white-space:normal;text-wrap:balance}}
@media(min-width:601px) and (max-width:960px){html.name-mid .bb-top-in{grid-template-columns:auto minmax(0,1fr) auto}}
@media(max-width:600px){html.name-mid .bb-nr{display:none}html.name-mid .bb-name{grid-column:1/-1;grid-row:1;justify-self:center;max-width:calc(100% - 152px)}html.name-mid .bb-menu{grid-row:1;position:relative;z-index:1}html.name-xl .bb-name{font-size:calc(12.5px*var(--tune-size,1));letter-spacing:.06em;margin-right:-.06em}}
@media(min-width:961px) and (max-width:1200px){html.name-mid .bb-nl,html.name-mid .bb-nr-l{display:none}html.name-mid .bb-menu{display:block}}
@media(min-width:961px){html.name-mid .bb-name{white-space:normal;text-wrap:balance;font-size:calc(clamp(16px,1.5vw,22px)*var(--tune-size,1));letter-spacing:.2em;margin-right:-.2em}}
@media (max-width:760px){html.pb-on .bb-nr .bb-res{display:none}}   /* the phone bar carries the booking button; the header name had no room beside it */

/* phone bar on: the booking link leaves the header, so the languages balance "Menu" and the name stays centred between them */
@media (max-width:760px){html.pb-on:not(.name-mid) .bb-nr-l{display:block}html.pb-on:not(.name-mid) .bb-nr .langs{font-size:calc(13px*var(--tune-size,1));letter-spacing:.14em}}

/* phones, salon hero: the words sit at the foot of a taller print, clear of the face, on a deeper shade */
@media (max-width:520px){
  .bb-h-salon .bb-plate{min-height:calc(max(620px,76svh) - 2 * var(--mat))}
  .bb-h-salon .bb-salon-in{place-items:end center;padding-top:calc(96px*var(--tune-space,1))}
  .bb-h-salon .bb-veil{background:linear-gradient(180deg,color-mix(in oklab,var(--night) 62%,transparent) 0,transparent 20%,transparent 36%,color-mix(in oklab,var(--night) 74%,transparent) 58%,color-mix(in oklab,var(--night) 90%,transparent) 100%)}
  .bb-h-salon .bb-kicker{display:none}
}
.bb-sample-n{margin-top:10px;font-size:calc(17px*var(--tune-size,1));color:var(--mute)}