/* The barber look: everything here is scoped to .site[data-look="barber"]. Appended after base.css (bun run --filter @platform/sections css).

   A Dutch kapsalon on a street corner (looks/barber.tsx), in the spirit of the
   old Rotterdam shops: the shopfront painted grachtengroen with the name
   sign-written on the fascia (header); the big shop window with the barber at
   work behind the glass and the headline painted on it, the moulded panel
   under the window and the bluestone step (hero); inside, the felt
   letterboard with push-in letters on white glazed tiles (prices), the look's
   one prop; the shop door with its hours in cut vinyl, the hanging sign and
   the enamel address plate on the dark street (hours); the chair and an
   enamel year plaque, then one wide photo of the work (about); what customers
   say on the barber's red; the address on a green enamel street sign
   (contact); the green footer. No brick or granito (judge round 2026-10-16).

   Type: Alfa Slab One (OFL), the sign-writer's slab, for the display lines,
   always with the one hard 2px shade a sign-writer paints; Rubik (OFL) for
   text and as the moulded plastic letters of the board and the door vinyl. */

.site[data-look="barber"] {
  --bb-sign: "Alfa Slab One", "Alfa Slab One fallback", Rockwell, "Roboto Slab", Georgia, serif;
  --bb-ink: #171717;
  --bb-tile: #f4f3ef;
  --bb-tile-grout: #d6d2c9;
  /* Grachtengroen: the near-black green of Dutch shopfronts and doors. */
  --bb-green: #1d2a23;
  --bb-green-deep: #121b16;
  --bb-green-lit: #2b3b32;
  /* The sign-writer's cream and his shade. */
  --bb-cream: #f3ecda;
  --bb-cream-muted: #c9c3b2;
  --bb-shade: #0a0f0c;
  --bb-red: #b3261e;
  --bb-enamel: #1d2a23;      /* enamel in the shopfront green (was a navy that sat off the palette) */
  --bb-glass: #101615;
  --bb-stone: #4d5457;
  --fs-base: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --bb-head: 5.25rem;
  /* White glazed tiles (2:1, running bond): grout lines, the glaze catching
     light on each row's top edge, a little shade at its foot. */
  --bb-tiles:
    linear-gradient(to bottom, var(--bb-tile-grout) 0 2px, rgb(255 255 255 / 0.85) 2px 4px, transparent 4px 25px, rgb(0 0 0 / 0.028) 25px 32px),
    conic-gradient(at 2px 32px, transparent 0 270deg, var(--bb-tile-grout) 0),
    conic-gradient(at 2px 32px, transparent 0 270deg, var(--bb-tile-grout) 0);
  --bb-tiles-size: 100% 32px, 64px 64px, 64px 64px;
  --bb-tiles-pos: 0 0, 0 0, 32px 32px;
  /* The same tiles in black glaze (the dado under the board). */
  --bb-black-tiles:
    linear-gradient(to bottom, #2b2b2c 0 2px, rgb(255 255 255 / 0.09) 2px 4px, transparent 4px 25px, rgb(0 0 0 / 0.25) 25px 32px),
    conic-gradient(at 2px 32px, transparent 0 270deg, #2b2b2c 0),
    conic-gradient(at 2px 32px, transparent 0 270deg, #2b2b2c 0);
  background: var(--bb-tile);
}
.site[data-look="barber"] main > .s + .s { border-top: 0; }

/* Headings: the sign-writer's slab, big; ink on the tiles. */
.site[data-look="barber"] :is(h1, h2):not(.h3) { font-family: var(--bb-sign); font-weight: 400; letter-spacing: -0.005em; text-transform: none; line-height: 1; }
.site[data-look="barber"] h2:not(.h3) { font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.6rem); margin-bottom: 0.45em; }
.site[data-look="barber"] main > .s:first-child:not(.s-hero, .s-services, .s-request, .s-contact, .s-booking) > .wrap h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem); }
.site[data-look="barber"] :is(h1, h2, h3) { hyphens: manual; overflow-wrap: break-word; }
.site[data-look="barber"] .lead { color: var(--muted); }
.site[data-look="barber"] p { font-size: var(--fs-base); }

/* Buttons: an enamel sign with a hard edge under it; it lifts on hover. */
.site[data-look="barber"] .btn {
  border-radius: 0; min-height: 54px; padding: 0.7rem 1.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 0.95rem;
  border: 2px solid var(--bb-ink); box-shadow: 0 4px 0 var(--bb-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.site[data-look="barber"] .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 0 var(--bb-ink); }
.site[data-look="barber"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bb-ink); }
.site[data-look="barber"] .cta-alt { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* --- Header: the fascia over the window, sign-written, with a coach line. -- */
.site[data-look="barber"] .site-header {
  --text: var(--bb-cream); --bg: var(--bb-green); --muted: var(--bb-cream-muted);
  background-color: var(--bb-green); color: var(--bb-cream); border-bottom: 0;
  /* The coach lines a sign-writer pulls along the board's edges, and the
     moulding under it. */
  background-image: linear-gradient(rgb(243 236 218 / 0.55), rgb(243 236 218 / 0.55)), linear-gradient(rgb(243 236 218 / 0.55), rgb(243 236 218 / 0.55));
  background-size: calc(100% - 2 * var(--gap)) 1px, calc(100% - 2 * var(--gap)) 1px;
  background-position: 50% 7px, 50% calc(100% - 14px);
  background-repeat: no-repeat;
  box-shadow: inset 0 -6px 0 var(--bb-green-deep);
}
.site[data-look="barber"] .header-inner { min-height: var(--bb-head); padding-block: 0.75rem calc(0.75rem + 14px); }
.site[data-look="barber"] .brand { flex: 1 1 18rem; min-width: 0; overflow-wrap: break-word; line-height: 1.1; font-family: var(--bb-sign); font-weight: 400; text-transform: none; letter-spacing: 0.01em; font-size: clamp(1.25rem, 0.95rem + 1vw, 1.9rem); color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade); }
.site[data-look="barber"] .site-header nav a { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--bb-cream); }
.site[data-look="barber"] .site-header .btn { box-shadow: 0 3px 0 var(--bb-shade); border-color: var(--bb-shade); min-height: 46px; }
.site[data-look="barber"] .site-header .btn:hover { transform: none; }

/* --- Hero: the shop window in the green front. --------------------------- */
.site[data-look="barber"] .s-hero[data-bb-hero] { padding: 0; background: var(--bb-green); position: relative; overflow: clip; }
.site[data-look="barber"] .bb-front {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  /* Capped, so a preview frame that grows to its page can't grow the hero. */
  min-height: min(calc(100svh - var(--bb-head)), 62rem);
  padding: clamp(10px, 1.3vw, 20px) clamp(10px, 1.3vw, 20px) 0;
}
/* The glass: the photo behind it, the shop's own dusk inside, a reflection. */
.site[data-look="barber"] .bb-window {
  position: relative; overflow: hidden; min-height: 20rem; isolation: isolate;
  background-color: var(--bb-glass);
  background-image: linear-gradient(160deg, rgb(16 22 21 / 0.8), rgb(16 22 21 / 0.9) 60%, rgb(8 11 10 / 0.95)), var(--bb-tiles);
  background-size: 100% 100%, var(--bb-tiles-size); background-position: 0 0, var(--bb-tiles-pos); background-color: var(--bb-tile);
  /* The rebate where the glass sits in the frame. */
  box-shadow: 0 0 0 3px var(--bb-green-deep), 0 0 0 4px rgb(255 255 255 / 0.08);
}
.site[data-look="barber"] .bb-window .hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; max-height: none; filter: brightness(1.08) saturate(1.05); }
/* Dusk inside the shop on the side the sign-writing sits, so the cream reads. */
.site[data-look="barber"] .bb-window::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgb(10 15 12 / 0.8) 0%, rgb(10 15 12 / 0.5) 34%, rgb(10 15 12 / 0.06) 58%, transparent 70%);
}
/* The street reflected in the glass: two soft diagonal bands. */
.site[data-look="barber"] .bb-window::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 0 56%, rgb(255 255 255 / 0.05) 56% 62%, transparent 62% 64%, rgb(255 255 255 / 0.035) 64% 66%, transparent 66%);
}
.site[data-look="barber"] .bb-glass-line {
  display: flex; flex-wrap: wrap; row-gap: 1em; height: 1.6em; overflow: hidden; line-height: 1.6; margin: 0 0 clamp(1.25rem, 3vh, 2.25rem); max-width: 46rem;
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
  color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade);
}
.site[data-look="barber"] .bb-glass-line span { white-space: nowrap; }
.site[data-look="barber"] .bb-glass-line span + span::before { content: '\00B7'; margin-inline: 0.7em; }
.site[data-look="barber"] .bb-glass-text {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 4vw, 4.5rem);
  padding-left: max(clamp(1.5rem, 4vw, 4.5rem), (100vw - var(--wrap)) / 2 - clamp(10px, 1.3vw, 20px));
}
/* The headline painted on the inside of the glass: cream, one hard shade. */
.site[data-look="barber"] .s-hero[data-bb-hero] :is(h1, h2) {
  font-size: clamp(3rem, 1rem + 6.4vw, 8.75rem); line-height: 0.93; letter-spacing: -0.01em; max-width: 9.5ch; margin: 0;
  color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade);
}
.site[data-look="barber"] .s-hero[data-bb-long] :is(h1, h2) { font-size: clamp(2.5rem, 1rem + 4.6vw, 6.25rem); max-width: 13ch; }
.site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-front { min-height: min(calc(100svh - var(--bb-head)), 46rem); }
/* The moulded panel under the window: the lead and the one button. */
.site[data-look="barber"] .bb-riser { padding: clamp(10px, 1.3vw, 20px) 0; position: relative; }
.site[data-look="barber"] .bb-riser-panel {
  --text: var(--bb-cream); --muted: var(--bb-cream-muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.25rem, 4vw, 4.5rem);
  padding-left: max(clamp(1.25rem, 4vw, 4.5rem), (100vw - var(--wrap)) / 2 - clamp(10px, 1.3vw, 20px));
  color: var(--bb-cream);
  /* Raised field inside a sunk moulding. */
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(0 0 0 / 0.12));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), inset 0 0 0 8px var(--bb-green), inset 0 0 0 9px rgb(255 255 255 / 0.07), inset 0 0 0 10px rgb(0 0 0 / 0.35);
}
.site[data-look="barber"] .s-hero[data-bb-hero] .lead { margin: 0; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.55rem); line-height: 1.45; max-width: 36rem; color: var(--bb-cream); }
.site[data-look="barber"] .s-hero[data-bb-hero] .actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; }
.site[data-look="barber"] .s-hero[data-bb-hero] .actions .btn { box-shadow: 0 4px 0 var(--bb-shade); border-color: var(--bb-shade); min-height: 58px; padding-inline: 2rem; font-size: 1rem; }
.site[data-look="barber"] .s-hero[data-bb-hero] .cta-alt { color: var(--bb-cream); }
/* The bluestone step in front of the shop. */
.site[data-look="barber"] .s-hero[data-bb-hero]::after {
  content: ''; display: block; height: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(to bottom, #737b7e 0 2px, var(--bb-stone) 2px calc(100% - 3px), #2c3133 calc(100% - 3px));
}
@media (max-width: 51.99rem) {
  .site[data-look="barber"] { --bb-head: 3.9rem; }
  /* The window fills the screen above the quick bar. */
  .site[data-look="barber"] .bb-front { min-height: min(calc(100svh - var(--bb-head) - 58px - 14px - var(--vb-bar, 0px)), 54rem); }
  .site[data-look="barber"] .bb-window { min-height: clamp(17rem, 47svh, 27rem); }
  .site[data-look="barber"] .bb-window::before { background: linear-gradient(to top, rgb(10 15 12 / 0.9) 0%, rgb(10 15 12 / 0.55) 42%, rgb(10 15 12 / 0.05) 72%); }
  .site[data-look="barber"] .bb-glass-text { justify-content: flex-end; padding: 1.25rem 1.1rem 1.4rem; }
  .site[data-look="barber"] .s-hero[data-bb-hero] :is(h1, h2) { font-size: clamp(2.6rem, 1.2rem + 7.2vw, 5.25rem); max-width: 11ch; }
  .site[data-look="barber"] .s-hero[data-bb-long] :is(h1, h2) { font-size: clamp(1.9rem, 1rem + 4.4vw, 3rem); max-width: 14ch; }
  .site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-window { min-height: 0; }
  .site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-front { min-height: 0; }
  .site[data-look="barber"] .header-inner { padding-block: 0.7rem calc(0.7rem + 12px); }
  .site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-glass-text { padding-top: 3rem; }
  .site[data-look="barber"] .bb-riser-panel { padding: 1.3rem 1.1rem 1.5rem; }
  .site[data-look="barber"] .s-hero[data-bb-hero] .lead { font-size: 1.08rem; }
}

/* --- Prices: the felt letterboard on the tiles, over a black dado. -------- */
.site[data-look="barber"] .bb-prices {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos);
}
.site[data-look="barber"] .bb-prices::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background-color: #141414; background-image: var(--bb-black-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos);
  border-top: 10px solid #9da1a6; box-shadow: inset 0 3px 0 #e6e8ea, 0 -2px 0 #5d6166;
}
.site[data-look="barber"] .bb-board {
  position: relative; max-width: 60rem; margin-inline: auto; padding: clamp(9px, 1.1vw, 14px);
  /* Brushed aluminium frame. */
  background: linear-gradient(135deg, #eef0f2, #a4a8ae 38%, #dfe1e4 55%, #8a8e94);
  box-shadow: 0 34px 40px -26px rgb(0 0 0 / 0.65), 0 2px 3px rgb(0 0 0 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.5);
}
.site[data-look="barber"] .bb-board.is-long { max-width: 78rem; }
/* Board screws in the frame's corners. */
.site[data-look="barber"] .bb-board::before, .site[data-look="barber"] .bb-board::after {
  content: ''; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #7d8187 70%);
}
.site[data-look="barber"] .bb-board::before { left: 3px; }
.site[data-look="barber"] .bb-board::after { right: 3px; }
/* The felt: a groove every 8px, each a dark slot with a lit lip under it. */
.site[data-look="barber"] .bb-felt {
  --text: var(--on-felt); --muted: var(--felt-muted);
  --bb-groove: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.72) 0 1px, rgb(255 255 255 / 0.075) 1px 2px, transparent 2px 8px);
  --bb-large: clamp(1.15rem, 0.92rem + 0.95vw, 1.8rem);
  --bb-small: 0.86rem;
  position: relative; isolation: isolate;
  color: var(--on-felt);
  background-color: var(--felt); background-image: var(--bb-groove);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.7), inset 0 0 70px rgb(0 0 0 / 0.6);
  padding: clamp(1.75rem, 5vw, 4rem) clamp(1.1rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.25rem);
  font-family: var(--font-body); text-transform: uppercase; font-weight: 500;
}
/* The grooves show faintly across the letters too: each letter's tab sits
   in a groove, and the felt's ribs catch the light around it. */
.site[data-look="barber"] .bb-felt::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 8px);
}
/* A push-in letter: white moulded plastic, a little thickness on its lower
   edge and a shadow on the felt. Each word sits a hair off level. */
.site[data-look="barber"] .bb-felt :is(h1, h2, h3, .price, .service-note, .bb-board-intro) {
  color: #f4f2ec;
  text-shadow: 0 1px 0 #c9c5bb, 0 2px 0 #8b877e, 0 3px 3px rgb(0 0 0 / 0.9), 0 0 1px rgb(255 255 255 / 0.4);
}
.site[data-look="barber"] .bb-felt .bb-w { display: inline-block; transform: translateY(var(--y, 0)); transition: transform 0.18s ease, text-shadow 0.18s ease; }
.site[data-look="barber"] .bb-board-head { text-align: center; margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
.site[data-look="barber"] main .bb-felt .bb-board-head :is(h1, h2) {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.9rem); letter-spacing: 0.24em; margin: 0 -0.24em 0.4em 0; line-height: 1.1;
}
.site[data-look="barber"] .bb-board-intro { margin: 0 auto; max-width: 38rem; font-size: clamp(0.86rem, 0.82rem + 0.2vw, 1rem); letter-spacing: 0.14em; line-height: 2; color: #dedad0; }
.site[data-look="barber"] .bb-felt .service-list { border: 0; margin: 0; display: grid; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 64rem) { .site[data-look="barber"] .is-long .bb-felt .service-list { grid-template-columns: 1fr 1fr; } }
/* One row per service. The row sets its own letter size so name and price
   fit on one line: the large letters when they fit, smaller ones for a long
   name (as a board comes with two sizes). Below the smallest size a name
   wraps between words, never inside one. */
.site[data-look="barber"] .bb-felt .service { container-type: inline-size; border: 0; padding-block: clamp(0.5rem, 1.1vw, 0.8rem); }
.site[data-look="barber"] .bb-felt .service .price-row {
  display: grid; grid-template-columns: minmax(min-content, 1fr) auto; align-items: baseline; gap: 1.1em;
  font-size: clamp(var(--bb-small), min(100cqi / (var(--nb, 20) * 0.68 + 1.6), 100cqi / (var(--n, 20) * 0.68 + 1.6)), var(--bb-large));
  letter-spacing: 0.09em; line-height: 1.3;
}
.site[data-look="barber"] .bb-felt .service :is(h2, h3) {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; font-size: 1em; letter-spacing: inherit; line-height: inherit; margin: 0;
  hyphens: none; overflow-wrap: break-word; word-break: normal;
}
.site[data-look="barber"] .bb-felt .service .price { margin: 0; font-size: 1em; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: normal; }
.site[data-look="barber"] .bb-felt .service .price-amount { white-space: nowrap; }
.site[data-look="barber"] .bb-felt .service .price-from, .site[data-look="barber"] .bb-felt .service .price-unit { font-size: 0.72em; letter-spacing: 0.1em; }
.site[data-look="barber"] .bb-felt .service .service-note { font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.98rem); letter-spacing: 0.12em; line-height: 1.6; margin: 0.15rem 0 0; max-width: 38rem; color: var(--felt-muted); text-shadow: 0 1px 0 #77746c, 0 2px 2px rgb(0 0 0 / 0.9); }
.site[data-look="barber"] .bb-felt .service:hover .bb-w { transform: translateY(calc(var(--y, 0px) - 2px)); text-shadow: 0 1px 0 #c9c5bb, 0 2px 0 #8b877e, 0 7px 6px rgb(0 0 0 / 0.85); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="barber"] .bb-felt .service .bb-w { animation: bb-push linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
  }
}
/* Movement only, never hidden: a name must read before (or without) the scroll
   that plays it, as in a full-page capture or a preview frame (experience audit minor). */
@keyframes bb-push { from { transform: translateY(-0.35em) scale(1.04); } }
@media (max-width: 40rem) {
  .site[data-look="barber"] .bb-felt { --bb-large: 1.15rem; --bb-small: 0.8rem; padding-inline: 1rem; }
  .site[data-look="barber"] .bb-felt .service .price-row { letter-spacing: 0.06em; gap: 0.8em; }
  .site[data-look="barber"] .bb-felt .bb-w { transform: none; }
}
@media (min-width: 64rem) {
  .site[data-look="barber"] .is-long .bb-felt { --bb-large: clamp(1rem, 0.75rem + 0.45vw, 1.3rem); }
}

/* --- Hours: the shop door, on the dark of the street at closing time. ----- */
/* (No brick or granito any more: the letterboard on the tiles is the look's
   one prop; judge round 2026-10-16.) */
.site[data-look="barber"] .bb-facade {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--bb-ink);
}
/* The bluestone step the door stands on runs the width of the facade. */
.site[data-look="barber"] .bb-facade::after {
  content: ''; display: block; height: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(to bottom, #737b7e 0 2px, var(--bb-stone) 2px calc(100% - 3px), #2c3133 calc(100% - 3px));
}
.site[data-look="barber"] .bb-facade-inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
@media (min-width: 52rem) { .site[data-look="barber"] .bb-facade-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
/* The door: a green frame, the glass, an aluminium kick plate. */
.site[data-look="barber"] .bb-door {
  position: relative; background: var(--bb-green); padding: clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 0 0 7px var(--bb-green), inset 0 0 0 8px rgb(255 255 255 / 0.07), -10px 0 0 -4px var(--bb-green-deep), 10px 0 0 -4px var(--bb-green-deep);
  max-width: 40rem;
}
.site[data-look="barber"] .bb-door-glass {
  --text: #f6f5f1; --muted: #aeb6b3; --border: rgb(246 245 241 / 0.3);
  position: relative; color: #f6f5f1;
  padding: clamp(2rem, 5vw, 4rem) clamp(3.25rem, 6vw, 5.5rem) clamp(2rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 3.25rem);
  background:
    linear-gradient(112deg, transparent 0 20%, rgb(255 255 255 / 0.06) 20% 28%, transparent 28% 31%, rgb(255 255 255 / 0.045) 31% 33%, transparent 33%),
    linear-gradient(170deg, #1d2826, var(--bb-glass) 55%, #090c0c);
  box-shadow: 0 0 0 3px var(--bb-green-deep);
}
/* Cut white vinyl on the glass: the sans of a door sticker, not the slab. */
.site[data-look="barber"] main .bb-door-glass :is(h1, h2) {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: #f6f5f1;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem); line-height: 1.2; margin: 0 0 1.4em;
  padding-bottom: 0.9em; border-bottom: 2px solid rgb(246 245 241 / 0.85);
}
.site[data-look="barber"] .bb-door-glass .hours-table { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); max-width: 30rem; }
.site[data-look="barber"] .bb-door-glass .hours-table :is(th, td) { padding-block: 0.6rem; border-bottom: 0; color: #f6f5f1; }
.site[data-look="barber"] .bb-door-glass .hours-table th { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; font-size: 0.82em; }
.site[data-look="barber"] .bb-door-glass .hours-table td { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; }
.site[data-look="barber"] .bb-door-glass .hours-table .is-closed :is(th, td) { color: #aeb6b3; }
.site[data-look="barber"] .bb-door-glass .hours-table th::after { background: var(--bb-red); color: #fff; }
.site[data-look="barber"] .bb-door-glass .hours-table th::before { background: var(--bb-red) !important; width: 6px !important; left: -1rem !important; }
/* The push bar on the door. */
.site[data-look="barber"] .bb-door-bar {
  position: absolute; right: clamp(1rem, 2vw, 1.75rem); top: 28%; height: 44%; width: 12px; border-radius: 6px;
  background: linear-gradient(to right, #6c7076, #f5f6f7 35%, #b6babf 60%, #5b5f64);
  box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
}
.site[data-look="barber"] .bb-door-kick {
  display: block; height: clamp(3rem, 6vw, 5rem); margin-top: clamp(12px, 1.6vw, 22px);
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px), linear-gradient(to bottom, #c7cbcf, #8f9499 60%, #a9adb2);
  box-shadow: inset 0 1px 0 #eef0f2, inset 0 -1px 0 #5d6166;
}
.site[data-look="barber"] .bb-street { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-content: end; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
/* The hanging sign: an iron arm, the board on two rings, sign-written like
   the fascia. */
.site[data-look="barber"] .bb-blade { position: relative; margin: 0; padding-top: 2.6rem; justify-self: start; max-width: 100%; font-size: inherit; }
.site[data-look="barber"] .bb-blade::before { content: ''; position: absolute; top: 0; left: -1.5rem; right: -1rem; height: 6px; background: #111; border-radius: 3px; box-shadow: 0 2px 0 rgb(0 0 0 / 0.3); }
.site[data-look="barber"] .bb-blade::after { content: ''; position: absolute; top: 6px; left: 1.6rem; right: 1.6rem; height: calc(2.6rem - 6px); border-inline: 3px dotted #111; }
.site[data-look="barber"] .bb-blade-board {
  display: block; padding: 1.15rem 1.7rem 1.25rem; background: var(--bb-green); color: var(--bb-cream);
  font-family: var(--bb-sign); font-size: clamp(1.35rem, 1rem + 1.3vw, 2.2rem); line-height: 1.05; overflow-wrap: break-word; hyphens: manual;
  text-shadow: 2px 2px 0 var(--bb-shade);
  box-shadow: inset 0 0 0 6px var(--bb-green), inset 0 0 0 7px rgb(243 236 218 / 0.6), 0 16px 18px -12px rgb(0 0 0 / 0.65);
}
/* Address and phone on a white enamel plate beside the door. */
.site[data-look="barber"] .bb-plate {
  --text: var(--bb-ink); --muted: #4f4d48;
  background: #fff; color: var(--bb-ink); border-radius: 0.6rem; padding: clamp(1.25rem, 2.6vw, 2rem);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--bb-ink), 0 14px 18px -12px rgb(0 0 0 / 0.6);
}
.site[data-look="barber"] .bb-plate p { margin: 0; }
.site[data-look="barber"] .bb-plate .hours-place { color: var(--bb-ink); max-width: none; display: grid; gap: 0.1rem; }
.site[data-look="barber"] .bb-plate-line { font-family: var(--bb-sign); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.15; overflow-wrap: anywhere; }
.site[data-look="barber"] .bb-plate .hours-place a { margin-top: 0.6rem; justify-self: start; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site[data-look="barber"] .bb-plate .hours-call { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--bb-ink); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.site[data-look="barber"] .bb-plate .hours-call:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.site[data-look="barber"] .bb-plate .hours-call a { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (max-width: 30rem) {
  .site[data-look="barber"] .bb-door-glass .hours-table { font-size: 1rem; }
  .site[data-look="barber"] .bb-door-glass .hours-table th { letter-spacing: 0.08em; white-space: normal; }
  /* The hidden "vandaag" badge wrapped long day names onto a second line,
     so rows had uneven gaps: on a phone the red bar alone marks today. */
  .site[data-look="barber"] .bb-door-glass .hours-table th::after { display: none; }
  .site[data-look="barber"] .bb-door-glass { padding-right: 2.5rem; }
  .site[data-look="barber"] .bb-door-bar { right: 0.85rem; width: 9px; }
}

/* --- About: the chair, the year on an enamel plaque; one wide photo. ------- */
.site[data-look="barber"] .bb-about { padding: 0; background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); }
.site[data-look="barber"] .bb-about-grid { display: grid; }
.site[data-look="barber"] .bb-about-photo { position: relative; min-height: clamp(18rem, 70vw, 28rem); background: var(--bb-ink); }
.site[data-look="barber"] .bb-about-photo .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; max-height: none; }
.site[data-look="barber"] .bb-about-text { padding: clamp(3rem, 7vw, 6rem) var(--gap); max-width: 46rem; }
.site[data-look="barber"] .bb-about-body p { font-size: var(--fs-base); line-height: 1.65; max-width: 36rem; }
.site[data-look="barber"] .bb-about-body p:first-child { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); line-height: 1.42; }
@media (min-width: 52rem) {
  .site[data-look="barber"] .bb-about.has-photo .bb-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(46rem, 88vh); }
  .site[data-look="barber"] .bb-about-photo { min-height: 0; border-right: 6px solid var(--bb-ink); }
  .site[data-look="barber"] .bb-about:not(.is-left) .bb-about-photo { order: 2; border-right: 0; border-left: 6px solid var(--bb-ink); }
  .site[data-look="barber"] .bb-about.has-photo .bb-about-text { align-self: center; padding-inline: clamp(2.5rem, 5vw, 5rem) max(var(--gap), (100vw - var(--wrap)) / 2); }
  .site[data-look="barber"] .bb-about.has-photo:not(.is-left) .bb-about-text { padding-inline: max(var(--gap), (100vw - var(--wrap)) / 2) clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="barber"] .bb-about:not(.has-photo) .bb-about-text { margin-left: max(var(--gap), (100vw - var(--wrap)) / 2); padding-left: 0; }
}
@media (min-width: 90rem) {
  .site[data-look="barber"] .bb-about.has-photo .bb-about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .site[data-look="barber"] .bb-about.has-photo.is-left .bb-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.site[data-look="barber"] .bb-plaque {
  display: inline-flex; align-items: baseline; gap: 0.55em; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0.7em 1.15em 0.6em; border-radius: 0.5rem; background: #fff; color: var(--bb-ink);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--bb-enamel), 0 10px 14px -10px rgb(0 0 0 / 0.5);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
}
.site[data-look="barber"] .bb-plaque strong { font-family: var(--bb-sign); font-weight: 400; font-size: 2.4em; letter-spacing: 0.02em; line-height: 1; color: var(--bb-enamel); }
/* One wide photo of the work, edge to edge. */
.site[data-look="barber"] .bb-wide { border-top: 6px solid var(--bb-ink); background: var(--bb-ink); overflow: hidden; }
.site[data-look="barber"] .bb-wide img { display: block; width: 100%; height: clamp(15rem, 38vw, 34rem); object-fit: cover; max-height: none; aspect-ratio: auto; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="barber"] .bb-wide img { animation: bb-pan linear both; animation-timeline: view(); }
  }
}
@keyframes bb-pan { from { transform: scale(1.08) translateY(-2%); } to { transform: scale(1.02) translateY(2%); } }

/* --- Reviews: big set quotes on the barber's red. ------------------------- */
.site[data-look="barber"] .bb-reviews {
  --text: var(--on-primary); --muted: var(--on-primary);
  background: var(--primary); color: var(--on-primary); padding-block: clamp(4.5rem, 10vw, 8rem); overflow: clip;
}
.site[data-look="barber"] .bb-reviews :is(h1, h2) { color: var(--on-primary); position: relative; text-shadow: 2px 2px 0 rgb(0 0 0 / 0.35); }
.site[data-look="barber"] .bb-quotes { gap: clamp(2.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5.5rem); margin-top: clamp(1.75rem, 3.5vw, 3rem); position: relative; }
.site[data-look="barber"] .bb-quotes figure { border-top: 3px solid currentColor; padding-top: 1.5rem; }
.site[data-look="barber"] .bb-quotes blockquote { font-size: clamp(1.4rem, 1.05rem + 1.25vw, 2.25rem); line-height: 1.32; font-weight: 500; letter-spacing: -0.01em; }
.site[data-look="barber"] .bb-quotes blockquote p { font-size: inherit; text-indent: -0.42em; }
.site[data-look="barber"] .bb-quotes figcaption { color: var(--on-primary); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.88rem; font-weight: 600; margin-top: 1.25rem; }
.site[data-look="barber"] .bb-reviews.is-single .bb-quotes { grid-template-columns: minmax(0, 56rem); }
.site[data-look="barber"] .bb-reviews.is-single blockquote { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.25; }

/* --- Contact: big links on the tiles; the address on a street sign. ------- */
.site[data-look="barber"] .s-contact { background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); padding-block: clamp(4rem, 9vw, 7rem); }
.site[data-look="barber"] .s-contact .lead { color: #3c3a36; }
.site[data-look="barber"] .contact-list { border-top: 3px solid var(--bb-ink); margin-top: 0; }
.site[data-look="barber"] .contact-list li { border-bottom: 2px solid var(--bb-ink); background: rgb(244 243 239 / 0.82); }
.site[data-look="barber"] .contact-link { padding: 1.1rem 0.25rem; }
.site[data-look="barber"] .contact-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 600; color: #3c3a36; }
.site[data-look="barber"] .contact-value { font-family: var(--bb-sign); font-weight: 400; letter-spacing: 0; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.3rem); line-height: 1.05; transition: transform 0.15s ease; display: inline-block; }
.site[data-look="barber"] .contact-link:hover .contact-value { text-decoration: none; transform: translateX(0.15em); }
.site[data-look="barber"] .contact-also { margin: -0.4rem 0 0.6rem 0.25rem; font-weight: 600; text-decoration-thickness: 2px; }
/* The address: a blue enamel street-name sign with a white rim. */
.site[data-look="barber"] .contact-list li:has(> .contact-link[href^="https://www.google.com/maps"]) { border-bottom: 0; background: none; padding-top: 1.75rem; }
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] {
  --text: #fff; --muted: #fff;
  display: inline-grid; max-width: 100%; padding: 1.1rem 1.6rem 1rem; border-radius: 0.7rem; background: var(--bb-enamel); color: #fff;
  box-shadow: inset 0 0 0 5px var(--bb-enamel), inset 0 0 0 8px #fff, 0 14px 18px -12px rgb(0 0 0 / 0.55);
}
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] .contact-label { color: #fff; }
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] .contact-value { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.2; }
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] .contact-note { color: #fff; margin-top: 0.35rem; }
@media (min-width: 52rem) {
  .site[data-look="barber"] .contact-details_only .contact-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .site[data-look="barber"] .s-contact :is(h1, h2) { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.8rem); }
}

/* --- Footer: the shopfront green. ---------------------------------------- */
.site[data-look="barber"] .site-footer {
  --deep: var(--bb-green); --on-deep: var(--bb-cream); --deep-muted: var(--bb-cream-muted);
  background: var(--bb-green); color: var(--bb-cream); position: relative; padding-top: clamp(3rem, 6vw, 4.5rem);
}
.site[data-look="barber"] .footer-brand .footer-name { font-family: var(--bb-sign); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade); overflow-wrap: break-word; hyphens: manual; max-width: 22ch; }
.site[data-look="barber"] .footer-title { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; }

/* --- The rest of the page in the same shop. -------------------------------- */
/* Trust strip: one line under the fascia, in its paint. */
.site[data-look="barber"] .s-trust { background: var(--bb-green); color: var(--bb-cream); padding-block: 1rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
.site[data-look="barber"] .s-trust .trust-list li:not(:last-child)::after { content: '\00B7'; color: var(--bb-cream-muted); margin-inline: 0.6rem; }
/* Gallery: photos tight together like the mirror wall, no gaps. */
.site[data-look="barber"] .s-gallery { background: var(--bb-ink); color: var(--bb-tile); --text: var(--bb-tile); }
.site[data-look="barber"] .s-gallery :is(h1, h2) { color: var(--bb-tile); }
.site[data-look="barber"] .gallery-items { gap: 6px; }
.site[data-look="barber"] .gallery-items li { background: #000; overflow: hidden; }
.site[data-look="barber"] .gallery-items img { transition: transform 0.6s ease; }
.site[data-look="barber"] .gallery-items li:hover img { transform: scale(1.03); }
/* Call to action: black tiles, the slab in white. */
.site[data-look="barber"] .s-cta {
  --text: var(--bb-tile); --muted: #c9c6be;
  background-color: #141414; background-image: var(--bb-black-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); color: var(--bb-tile);
}
.site[data-look="barber"] .s-cta .btn { box-shadow: 0 4px 0 #000; border-color: #000; }
/* Service area: the places in big slab letters. */
.site[data-look="barber"] .s-area ul.area-list { font-family: var(--bb-sign); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 400; gap: 0.2rem 0; line-height: 1.2; }
.site[data-look="barber"] .s-area ul.area-list li { white-space: normal; }
.site[data-look="barber"] .s-area ul.area-list li:not(:last-child)::after { content: '\00B7'; color: var(--bb-red); margin-inline: 0.5rem; }
.site[data-look="barber"] .area-places { font-family: var(--bb-sign); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.25; }
/* FAQ: heavy rules, the question in Rubik, a red plus. */
.site[data-look="barber"] .faq-items details { border-bottom: 2px solid var(--bb-ink); }
.site[data-look="barber"] .faq-items details:first-child { border-top: 3px solid var(--bb-ink); }
.site[data-look="barber"] .faq-items summary { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); min-height: 4rem; }
.site[data-look="barber"] .faq-items summary::after { font-family: var(--bb-sign); color: var(--bb-red); font-size: 1.8rem; }
.site[data-look="barber"] .faq-items details p { color: #3c3a36; font-size: var(--fs-base); }
/* Booking and request forms: a white enamel card on the tiles. */
.site[data-look="barber"] :is(.s-booking, .s-request, .s-faq, .s-area) { background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); }
.site[data-look="barber"] .s-booking .booking-inner, .site[data-look="barber"] .request-form, .site[data-look="barber"] .contact-form {
  background: #fff; border: 3px solid var(--bb-ink); box-shadow: 0 8px 0 var(--bb-ink); padding: clamp(1.25rem, 4vw, 2.5rem);
}
.site[data-look="barber"] .s-booking .booking-inner { max-width: 50rem; }
.site[data-look="barber"] .booking-services { border-top: 3px solid var(--bb-ink); }
.site[data-look="barber"] .booking-name { font-size: 1.1rem; }
.site[data-look="barber"] .booking-go { color: var(--bb-ink); }
.site[data-look="barber"] :where(form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-radius: 0; border: 2px solid var(--bb-ink); background: #fff; }
/* Narrow columns (forms, contact, booking): the slab one size down, so a
   word like "aanvragen" never breaks. */
.site[data-look="barber"] main :is(.s-request, .s-contact, .s-booking, .s-booking-flow) :is(h1, h2):not(.h3) { font-size: clamp(2rem, 1rem + 2.4vw, 3.6rem); }

/* --- The booking flow page (SiteFrame): a white enamel card on the tiles. - */
.site[data-look="barber"] .s-booking-flow { background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); }
.site[data-look="barber"] .s-booking-flow .booking-inner { background: #fff; border: 3px solid var(--bb-ink); box-shadow: 0 8px 0 var(--bb-ink); padding: clamp(1.25rem, 4vw, 2.75rem); max-width: 50rem; }
.site[data-look="barber"] .s-booking-flow .booking-inner > p:first-child a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site[data-look="barber"] main .s-booking-flow :is(.booking-step, .booking-form) h2 { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1rem; }
.site[data-look="barber"] .booking-choices a { border-radius: 0; border: 2px solid var(--bb-ink); font-weight: 600; font-variant-numeric: tabular-nums; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.site[data-look="barber"] .booking-choices a:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--bb-ink); }
.site[data-look="barber"] .booking-choices a[aria-current] { background: var(--bb-ink); color: var(--bb-tile); border-color: var(--bb-ink); }
.site[data-look="barber"] .booking-services a[aria-current] { box-shadow: inset 6px 0 0 var(--bb-red); }
.site[data-look="barber"] .s-booking-flow form { border: 0; box-shadow: none; padding: 0; background: none; }
.site[data-look="barber"] .s-booking-flow .booking-form { border-top: 3px solid var(--bb-ink); padding-top: 1.5rem; }

/* --- Phones: the quick bar is the shopfront again. ------------------------ */
@media (max-width: 51.99rem) {
  .site[data-look="barber"] .quickbar { background: var(--bb-green); border-top: 2px solid var(--bb-green-deep); box-shadow: inset 0 3px 0 rgb(243 236 218 / 0.45); }
  .site[data-look="barber"] .quick { color: var(--bb-cream); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
  .site[data-look="barber"] .quick-primary { color: #fff; }
  .site[data-look="barber"]:has(.quickbar) .site-header .btn { display: none; }
}