/* ==========================================================================
   Beauty template: one codebase, three worlds (data-style = luxe | editorial | barber).
   Colours arrive from SITE.brand at runtime (app.js sets the custom properties below).
   ========================================================================== */

:root {
  /* fallbacks until app.js derives the real palette */
  --bg: #fbf7f5; --surface: #f5efec; --surface-2: #efe7e3; --raised: #fff;
  --ink: #261d20; --ink-soft: #6c5f63; --line: #e4dad7; --line-strong: #c9bbb8;
  --primary: #9c4a60; --primary-hover: #8a3f53; --on-primary: #fff; --primary-ink: #9c4a60;
  --primary-tint: #f3e6e8; --primary-ring: transparent;
  --accent: #f2e3e1; --on-accent: #261d20; --accent-raw: #f2e3e1;
  --deep: #261d20; --on-deep: #f6efec; --on-deep-soft: #b9aaa9; --primary-on-deep: #d88aa0; --deep-line: #3d3134;
  --shadow-rgb: 38 29 32;
  --danger: #b42318; --ok: #2f8f5b;

  --font-heading: Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --sec-pad: clamp(72px, 10vw, 140px);
  --radius: 16px; --radius-sm: 10px; --btn-radius: 999px; --day-radius: 50%;
  --h-weight: 400; --h-track: -0.01em; --h-case: none; --h-line: 1.05;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 18px 40px -18px rgb(var(--shadow-rgb) / .28);
  --hdr-h: 72px;
}
.is-dark { --danger: #f97066; --ok: #5cc98c; }

[data-style="luxe"] {
  --radius: 22px; --radius-sm: 14px; --btn-radius: 999px; --day-radius: 50%;
  --h-weight: 400; --h-track: 0; --h-line: 1.06;
  --sec-pad: clamp(84px, 11vw, 168px);
}
[data-style="editorial"] {
  --radius: 0px; --radius-sm: 0px; --btn-radius: 0px; --day-radius: 0px;
  --h-weight: 500; --h-track: -0.03em; --h-line: .98;
  --sec-pad: clamp(72px, 9vw, 132px);
}
[data-style="barber"] {
  --radius: 4px; --radius-sm: 3px; --btn-radius: 3px; --day-radius: 3px;
  --h-weight: 400; --h-track: .012em; --h-case: uppercase; --h-line: .95;
  --sec-pad: clamp(72px, 9vw, 128px);
  --hdr-h: 76px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); scrollbar-color: var(--line-strong) var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.js body { opacity: 0; animation: failsafe 0s 2.5s forwards; }
.js body.is-ready { opacity: 1; animation: none; transition: opacity .35s ease; }
@keyframes failsafe { to { opacity: 1; } }
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 3px; border-radius: 2px; }
input, textarea { caret-color: var(--primary-ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
em { font-style: italic; }

figure img, .gal-item img, .ig-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-item, .ig-thumb, figure:has(> img) { background: var(--surface-2); }
.img-failed img { opacity: 0; }

/* headings share one voice per style */
.hero-title, .sec-title, .band-title, .pro-name, .wm-name, .menu-cat-title, .rev-feature p {
  font-family: var(--font-heading); font-weight: var(--h-weight); letter-spacing: var(--h-track);
  text-transform: var(--h-case); line-height: var(--h-line); text-wrap: balance;
}
.sec-title { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.sec-lede { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.075rem; line-height: 1.65; max-width: 58ch; text-wrap: pretty; }
.sec { padding: var(--sec-pad) 0; }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-link { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.2rem; font-weight: 600; color: var(--primary-ink); text-decoration: none; }
.sec-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 1.55em; border-radius: var(--btn-radius);
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  font: 600 .95rem/1 var(--font-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { --b-bg: var(--primary); --b-fg: var(--on-primary); --b-bd: var(--primary); box-shadow: 0 0 0 1px var(--primary-ring); }
.btn--primary:hover { --b-bg: var(--primary-hover); --b-bd: var(--primary-hover); }
.btn--ghost:hover { --b-bd: var(--ink); }
.btn--sm { min-height: 42px; padding: 0 1.1em; font-size: .875rem; }
.btn--lg { min-height: 58px; padding: 0 2em; font-size: 1rem; }
.btn--text { --b-bd: transparent; text-decoration: underline; }

[data-style="editorial"] .btn { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; min-height: 54px; padding: 0 1.8em; }
[data-style="editorial"] .btn--sm { min-height: 44px; font-size: .72rem; }
[data-style="barber"] .btn { font-family: var(--font-heading); font-weight: 400; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase; }
[data-style="barber"] .btn--sm { font-size: .92rem; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 40; transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.hdr { display: flex; align-items: center; gap: 24px; height: var(--hdr-h); }
.hdr-brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.logo-img { max-height: 44px; width: auto; }
.hdr-nav { display: flex; gap: clamp(16px, 2.2vw, 32px); }
.hdr-nav a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; }
.hdr-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hdr-nav a:hover::after { transform: scaleX(1); }
.hdr-tel-m { display: none; }
.hdr-actions { display: flex; align-items: center; gap: 12px; }
.hdr-tel { display: inline-flex; align-items: center; gap: .45em; font-size: .9rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.hdr-tel .ic { color: var(--primary-ink); }
.hdr-menu { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); background: transparent; align-items: center; justify-content: center; cursor: pointer; }

@media (max-width: 1080px) { .hdr-tel { display: none; } }
@media (max-width: 900px) {
  .hdr-menu { display: inline-flex; }
  .hdr-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0;
    background: var(--bg); padding: 8px var(--gutter) 20px; box-shadow: 0 16px 24px -16px rgb(var(--shadow-rgb) / .35); border-top: 1px solid var(--line);
  }
  .menu-open .hdr-nav { display: flex; }
  .menu-open { background: var(--bg); }
  .hdr-nav a { padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .hdr-nav a::after { display: none; }
  .hdr-tel-m { display: inline-flex !important; align-items: center; gap: .5em; color: var(--primary-ink) !important; border-bottom: 0 !important; }
}
@media (max-width: 420px) { .hdr-book { padding: 0 .9em; } .hdr-book .ic { display: none; } }

/* wordmarks */
.wm { display: inline-flex; color: var(--ink); line-height: 1; }
.wm--luxe { flex-direction: column; gap: 5px; }
.wm--luxe .wm-name { font-size: 1.5rem; letter-spacing: .02em; }
.wm--luxe .wm-sub { font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); padding-left: .1em; }
.wm--ed { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: 1.65rem; letter-spacing: -.02em; }
.wm--barber { flex-direction: column; align-items: center; gap: 5px; }
.wm--barber .wm-name { font-size: clamp(1.1rem, 4.4vw, 1.45rem); letter-spacing: .06em; white-space: nowrap; }
.wm--barber .wm-sub { display: flex; align-items: center; gap: 8px; font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--primary-ink); }
.wm--barber .wm-sub i { width: 18px; height: 1px; background: currentColor; }

/* ---------------------------------------------------------------- hero: shared */
.hero-title em { font-style: normal; color: var(--primary-ink); }
.hero-sub { color: var(--ink-soft); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.65; max-width: 36em; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.rating-badge { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-size: .9rem; }
a.rating-badge:hover .rb-count { text-decoration: underline; }
.rb-score { font-family: var(--font-heading); font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.rb-count { color: var(--ink-soft); }
.stars { position: relative; display: inline-block; line-height: 0; font-size: 15px; color: var(--star, var(--primary-ink)); }
.stars-bg { display: inline-flex; gap: 1px; color: var(--line-strong); }
.stars-fg { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: 1px; overflow: hidden; white-space: nowrap; }
.stars .ic { width: 1em; height: 1em; }
.open-status { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--ink-soft); }
.open-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.open-status.is-open i { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }

/* ---------------------------------------------------------------- hero: LUXE (arched window, airy split) */
.hero--luxe { padding: clamp(16px, 3vw, 40px) 0 clamp(24px, 4vw, 56px); }
.lx-hero-grid { display: grid; gap: 56px; align-items: center; }
.hero--luxe .hero-title { font-size: clamp(3rem, 6.6vw, 5.75rem); }
.hero--luxe .hero-sub { margin: 1.75rem 0 2.4rem; }
.hero--luxe .hero-meta { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.lx-hero-media { position: relative; width: min(100%, 520px); justify-self: center; padding: 0 0 7% 9%; }
.lx-arch { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); overflow: hidden; background: var(--accent); }
.lx-inset { position: absolute; left: 0; bottom: 0; width: 36%; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; border: 6px solid var(--bg); box-shadow: var(--shadow); }
.lx-seal {
  position: absolute; right: -2%; top: 9%; width: 124px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; gap: 4px; text-align: center; padding: 14px;
  background: var(--bg); box-shadow: var(--shadow); color: var(--ink);
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1.35;
}
.lx-seal span:first-child { font-family: var(--font-heading); font-size: .95rem; letter-spacing: .02em; text-transform: none; line-height: 1.15; }
.lx-seal span + span { color: var(--ink-soft); }
@media (min-width: 900px) {
  .lx-hero-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(48px, 6vw, 104px); min-height: min(calc(100vh - var(--hdr-h) - 40px), 720px); }
  .lx-hero-grid.no-img { grid-template-columns: 1fr; max-width: 820px; text-align: center; }
  .no-img .hero-actions, .no-img .hero-meta { justify-content: center; }
}
@media (max-width: 899px) {
  .lx-hero-media { order: -1; width: min(74%, 340px); padding: 0 0 6% 8%; }
  .lx-inset { width: 34%; border-width: 4px; }
  .lx-seal { width: 104px; font-size: .5rem; letter-spacing: .14em; padding: 10px; }
  .lx-seal span + span { white-space: nowrap; }
}

/* ---------------------------------------------------------------- hero: EDITORIAL (magazine spread) */
.hero--editorial { padding: 8px 0 clamp(64px, 8vw, 120px); }
.ed-mast { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ed-mast span:nth-child(2) { text-align: center; }
.hero--editorial .hero-title { font-size: clamp(3.1rem, 8.4vw, 6rem); max-width: 12ch; }
.hero--editorial .hero-title em, [data-style="editorial"] .sec-title em, [data-style="editorial"] .band-title em { font-style: italic; font-weight: 400; color: inherit; }
.ed-top { display: grid; gap: 28px; padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4vw, 56px); }
.ed-side { display: grid; gap: 24px; align-content: end; }
.ed-side .hero-sub { font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--ink); line-height: 1.55; }
.ed-side .hero-meta { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.ed-images { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: end; }
.ed-main { grid-column: 1 / -1; aspect-ratio: 4 / 5; overflow: hidden; }
.ed-main img { object-position: 50% 30%; }
.ed-second { display: none; overflow: hidden; }
@media (min-width: 900px) {
  .ed-top { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .ed-top .hero-title { grid-column: 1 / span 8; }
  .ed-side { grid-column: 9 / span 4; padding-bottom: .6rem; }
  .ed-images { gap: 24px; }
  .ed-main { grid-column: 1 / span 8; aspect-ratio: 3 / 2; }
  .ed-images.is-single .ed-main { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .ed-second { display: block; grid-column: 9 / span 4; aspect-ratio: 3 / 4; }
}
@media (max-width: 899px) {
  .ed-mast span:nth-child(3) { display: none; }
  .ed-main { aspect-ratio: 4 / 4.6; }
}

/* ---------------------------------------------------------------- hero: BARBER (full-bleed, signage type, pole) */
[data-style="barber"] .site-header { position: fixed; left: 0; right: 0; }
[data-style="barber"] .site-header:not(.is-scrolled):not(.menu-open) { background: linear-gradient(to bottom, rgb(0 0 0 / .55), transparent); }
[data-style="barber"] main { display: block; }
.hero--barber { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; padding: calc(var(--hdr-h) + 64px) 0 clamp(76px, 9vw, 120px); isolation: isolate; overflow: hidden; }
.bb-hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--deep); }
.bb-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.06) brightness(.9); }
.bb-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 1%, color-mix(in srgb, var(--bg) 62%, transparent) 34%, color-mix(in srgb, var(--bg) 8%, transparent) 72%), linear-gradient(to right, color-mix(in srgb, var(--bg) 72%, transparent) 20%, transparent 68%); }
.bb-hero-inner { display: grid; gap: 32px; align-items: end; width: min(100% - 2 * var(--gutter), var(--wrap)); }
.bb-place { display: flex; align-items: center; gap: 14px; font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--primary-ink); margin-bottom: 20px; }
.bb-place::before { content: ""; width: 36px; height: 2px; background: currentColor; }
.hero--barber .hero-title { font-size: clamp(3.4rem, 9.5vw, 6rem); }
.hero--barber .hero-title span { display: block; }
.hero--barber .hero-title span:last-child { color: var(--primary-ink); }
.hero--barber .hero-sub { margin: 26px 0 34px; max-width: 34em; }
.bb-hero-aside .hero-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
.bb-hero-aside .rating-badge { padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 70%, transparent); }
@media (min-width: 900px) { .bb-hero-inner { grid-template-columns: 1fr auto; } }
.pole { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(-45deg, var(--accent-raw) 0 12px, var(--on-deep) 12px 24px, var(--primary) 24px 36px, var(--on-deep) 36px 48px); background-size: 68px 68px; }

/* ---------------------------------------------------------------- hero motion: one authored entrance per world */
@media (prefers-reduced-motion: no-preference) {
  .is-ready .lx-arch { animation: archIn 1.4s var(--ease) both; }
  .is-ready .lx-arch img { animation: settle 1.8s var(--ease) both; }
  .is-ready .lx-inset, .is-ready .lx-seal { animation: rise 1.1s .45s var(--ease) both; }
  .is-ready .ed-main { animation: wipe 1.25s var(--ease) both; }
  .is-ready .ed-main img { animation: settle 1.8s var(--ease) both; }
  .is-ready .hero--barber .hero-title span { animation: rise .9s var(--ease) both; }
  .is-ready .hero--barber .hero-title span:nth-child(2) { animation-delay: .08s; }
  .is-ready .hero--barber .hero-title span:nth-child(3) { animation-delay: .16s; }
  .pole { animation: pole 3.2s linear infinite; }
}
@keyframes archIn { from { clip-path: inset(100% 0 0 0 round 50% 50% 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pole { to { background-position: 68px 0; } }

/* ---------------------------------------------------------------- section heads per world */
[data-style="luxe"] .sec-head { text-align: center; margin-inline: auto; max-width: 760px; }
[data-style="luxe"] .sec-head .sec-lede { margin-inline: auto; }
[data-style="luxe"] .sec-title em { font-style: normal; color: var(--primary-ink); }

[data-style="editorial"] .sec-head { border-top: 2px solid var(--ink); padding-top: 22px; display: grid; gap: 16px; }
[data-style="editorial"] .sec-head .sec-lede { margin-top: 0; }
@media (min-width: 900px) {
  [data-style="editorial"] .sec-head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: 48px; }
  [data-style="editorial"] .sec-head .sec-link { grid-column: 2; justify-self: start; margin: 0; }
}
[data-style="editorial"] .sec-title { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }

[data-style="barber"] .sec-head { max-width: 820px; }
[data-style="barber"] .sec-title { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
[data-style="barber"] .sec-title em { font-style: normal; color: var(--primary-ink); }
[data-style="barber"] .sec-head::before { content: ""; display: block; width: 64px; height: 8px; margin-bottom: 22px; background: repeating-linear-gradient(-45deg, var(--accent-raw) 0 6px, var(--on-deep) 6px 12px, var(--primary) 12px 18px, var(--on-deep) 18px 24px); }
[data-style="barber"] .sec--alt, [data-style="barber"] .sec--about, [data-style="barber"] .sec--reviews, [data-style="barber"] .sec--faq { background: var(--deep); }
[data-style="barber"] .sec { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- services menu */
.menu-list { list-style: none; }
.mi { padding: 20px 0; border-bottom: 1px solid var(--line); }
.mi-row { display: flex; align-items: baseline; gap: 12px; }
.mi-name { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.mi-lead { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.28em); }
.mi-price { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; font-size: 1.05rem; }
.mi-price small, .bk-svc-price small, .rv-list small { font-size: .72em; font-weight: 400; color: var(--ink-soft); }
.mi-sub { display: flex; align-items: flex-start; gap: 18px; margin-top: 6px; }
.mi-desc { flex: 1; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.mi-dur { color: var(--ink-soft); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: .1em; }
.mi-book { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; margin-top: -4px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--primary-ink); white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, opacity .25s; }
.mi-book .ic { width: 14px; height: 14px; }
.mi-book:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
@media (hover: hover) and (min-width: 700px) {
  .mi { position: relative; }
  .mi-dur { transition: opacity .2s; }
  .mi-book { position: absolute; right: 0; bottom: 14px; opacity: 0; background: var(--bg); }
  .mi:hover .mi-book, .mi-book:focus-visible { opacity: 1; }
  .mi:hover .mi-dur, .mi:focus-within .mi-dur { opacity: 0; }
}

/* luxe: centred tabs, one elegant column */
.menu-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto clamp(32px, 4vw, 52px); }
.menu-tabs [role=tab] { padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-size: .92rem; font-weight: 500; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s; white-space: nowrap; }
.menu-tabs [role=tab]:hover { border-color: var(--ink); }
.menu-tabs [role=tab][aria-selected=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 700px) {
  .menu-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .menu-tabs::-webkit-scrollbar { display: none; }
}
.menu--luxe { max-width: 820px; margin-inline: auto; }
.menu--luxe.has-tabs .menu-cat-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu--luxe .menu-cat:not(:first-child) { margin-top: 48px; }
.menu--luxe.has-tabs .menu-cat { margin-top: 0; animation: fadeIn .45s var(--ease); }
.menu--luxe .menu-cat-title { font-size: 1.9rem; text-align: center; margin-bottom: 12px; }
.menu--luxe .mi-name { font-family: var(--font-heading); font-weight: 400; font-size: 1.32rem; letter-spacing: .01em; }
.menu--luxe .mi-price { font-weight: 500; font-size: 1.1rem; letter-spacing: .01em; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* editorial: index spread in two columns */
.menu--editorial { display: grid; gap: 64px 80px; }
@media (min-width: 900px) { .menu--editorial { grid-template-columns: 1fr 1fr; } }
.menu--editorial .menu-cat-title { font-size: clamp(2rem, 3vw, 2.6rem); font-style: italic; font-weight: 400; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.menu--editorial .mi-name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.005em; }
.menu--editorial .mi-lead { border-bottom-style: solid; border-color: var(--line); }

/* barber: framed price boards */
.menu--barber { display: grid; gap: 20px; }
@media (min-width: 900px) { .menu--barber { grid-template-columns: 1fr 1fr; gap: 24px; } }
.menu--barber .menu-cat { border: 1px solid var(--line-strong); padding: clamp(24px, 3vw, 40px); background: var(--deep); position: relative; border-radius: var(--radius); }
.menu--barber .menu-cat::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; border-radius: 2px; }
.menu--barber .menu-cat-title { font-size: clamp(1.9rem, 3vw, 2.4rem); color: var(--primary-ink); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--primary); }
.menu--barber .mi { border-bottom-style: dashed; }
.menu--barber .mi:last-child { border-bottom: 0; padding-bottom: 0; }
.menu--barber .mi-name { font-family: var(--font-heading); font-weight: 400; font-size: 1.35rem; letter-spacing: .03em; text-transform: uppercase; }
.menu--barber .mi-price { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; letter-spacing: .02em; color: var(--primary-ink); }

/* ---------------------------------------------------------------- about */
.about-grid { display: grid; gap: clamp(40px, 6vw, 112px); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 5fr 6fr; } .about-grid.no-img { grid-template-columns: 1fr; max-width: 820px; } }
.about-media { aspect-ratio: 4 / 5; overflow: hidden; }
.about-body { margin-top: 1.6rem; display: grid; gap: 1.1em; color: var(--ink-soft); font-size: 1.075rem; line-height: 1.75; max-width: 60ch; }
.about-since { margin-top: 2rem; font-family: var(--font-heading); font-size: 1.1rem; color: var(--primary-ink); }

[data-style="luxe"] .sec--about { background: var(--surface); }
[data-style="luxe"] .about-media { border-radius: var(--radius); }
[data-style="luxe"] .about-media { border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); }

[data-style="editorial"] .about-grid { align-items: start; }
@media (min-width: 900px) { [data-style="editorial"] .about-grid { grid-template-columns: 6fr 6fr; } [data-style="editorial"] .about-media { order: 2; aspect-ratio: 3 / 4; } }
[data-style="editorial"] .about-copy { border-top: 2px solid var(--ink); padding-top: 22px; }
[data-style="editorial"] .about-copy .sec-title { font-size: clamp(2.2rem, 4vw, 3.5rem); }
[data-style="editorial"] .about-body p:first-child { font-size: clamp(1.2rem, 1.6vw, 1.42rem); color: var(--ink); line-height: 1.5; }
[data-style="editorial"] .about-since { font-style: italic; color: var(--ink); }

[data-style="barber"] .about-media { outline: 1px solid var(--primary); outline-offset: 12px; margin: 12px; border-radius: var(--radius); }
[data-style="barber"] .about-media img { filter: grayscale(.3) contrast(1.05); }
[data-style="barber"] .about-since { font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- team */
.team-grid { list-style: none; display: grid; gap: clamp(28px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.team-grid[data-count="1"] { max-width: 420px; }
.team-grid[data-count="2"] { max-width: 840px; }
[data-style="luxe"] .team-grid { margin-inline: auto; }
.pro { display: grid; gap: 20px; align-content: start; }
.pro-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
.pro-photo.is-mono { display: grid; place-items: center; background: var(--accent); aspect-ratio: 1 / 1.1; position: relative; }
.pro-photo.is-mono::after { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--on-accent) 18%, transparent); border-radius: inherit; pointer-events: none; }
.mono { font-family: var(--font-heading); font-size: clamp(3.4rem, 7vw, 5.2rem); line-height: 1; color: var(--on-accent); letter-spacing: .02em; }
.pro-name { font-size: 1.7rem; }
.pro-role { margin-top: 6px; color: var(--primary-ink); font-size: .9rem; font-weight: 600; }
.pro-bio { margin-top: 10px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.pro-days { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--ink-soft); }
.pro-days .ic { width: 16px; height: 16px; }
.pro-book { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: border-color .2s, gap .3s var(--ease); }
.pro-book:hover { border-color: var(--ink); gap: 12px; }
.pro-book .ic { width: 16px; height: 16px; }

[data-style="luxe"] .pro { text-align: center; justify-items: center; }
[data-style="luxe"] .pro-photo { width: 100%; border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); }
[data-style="luxe"] .pro-photo.is-mono { border-radius: 50% 50% var(--radius) var(--radius) / 45% 45% var(--radius) var(--radius); }
[data-style="luxe"] .pro-days { justify-content: center; }
[data-style="luxe"] .pro-bio { max-width: 30ch; margin-inline: auto; }
[data-style="editorial"] .pro-photo img { filter: grayscale(1) contrast(1.05); transition: filter .6s var(--ease); }
[data-style="editorial"] .pro:hover .pro-photo img { filter: none; }
[data-style="editorial"] .pro-name { font-style: italic; font-weight: 400; font-size: 2rem; }
[data-style="editorial"] .pro-photo.is-mono .mono { font-style: italic; }
[data-style="barber"] .pro-photo { border: 1px solid var(--line-strong); }
[data-style="barber"] .pro-photo img { filter: grayscale(1) contrast(1.1); }
[data-style="barber"] .pro-photo.is-mono { background: var(--deep); }
[data-style="barber"] .pro-photo.is-mono .mono { color: var(--primary-ink); }
[data-style="barber"] .pro-name { font-size: 2rem; }

/* ---------------------------------------------------------------- gallery */
.gal { list-style: none; columns: 2; column-gap: 12px; }
.gal li { break-inside: avoid; margin-bottom: 12px; }
.gal-item { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.gal-item img { transition: transform .9s var(--ease), filter .6s var(--ease); }
.gal-item:hover img { transform: scale(1.04); }
.gal li:nth-child(4n+2) .gal-item { aspect-ratio: 1; }
.gal li:nth-child(4n+3) .gal-item { aspect-ratio: 3 / 4; }
.gal li:nth-child(4n+4) .gal-item { aspect-ratio: 4 / 5.6; }
@media (min-width: 900px) { .gal { columns: 3; column-gap: 20px; } .gal li { margin-bottom: 20px; } }

.gal--luxe .gal-item { border-radius: var(--radius); }
.gal--editorial { column-gap: 8px; }
.gal--editorial li { margin-bottom: 8px; }
.gal--editorial li:nth-child(3n+1) .gal-item { aspect-ratio: 2 / 3; }
.gal--editorial li:nth-child(3n+2) .gal-item { aspect-ratio: 1; }
.gal--editorial li:nth-child(3n+3) .gal-item { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .gal--editorial { columns: 3; column-gap: 12px; } .gal--editorial li { margin-bottom: 12px; } }
.gal--barber { columns: unset; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gal--barber li { margin: 0; }
.gal--barber .gal-item, .gal--barber li:nth-child(n) .gal-item { aspect-ratio: 1; border-radius: var(--radius-sm); }
.gal--barber .gal-item img { filter: grayscale(1) contrast(1.1); }
.gal--barber .gal-item:hover img { filter: none; }
@media (min-width: 900px) { .gal--barber { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

/* lightbox */
.lb { padding: 0; margin: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgb(12 10 10 / .94); color: #fff; }
.lb::backdrop { background: rgb(12 10 10 / .6); }
.lb-shell { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 16px; }
.lb-fig { background: none; display: grid; justify-items: center; gap: 14px; }
.lb-img { max-width: min(92vw, 1400px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; }
.lb-cap { font-size: .85rem; letter-spacing: .1em; color: rgb(255 255 255 / .7); font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.lb-btn:hover { background: rgb(255 255 255 / .16); }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 16px; top: 16px; }
@media (max-width: 700px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } .lb-prev { left: calc(50% - 64px); } .lb-next { right: calc(50% - 64px); } }

/* ---------------------------------------------------------------- reviews */
.rev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.rb--block { padding: 14px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.rev-feature { max-width: 980px; }
.rev-feature p { font-size: clamp(1.55rem, 3.2vw, 2.55rem); line-height: 1.22; text-transform: none; letter-spacing: -.005em; }
.rev-feature figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-weight: 600; }
.rev-list { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(84vw, 300px), 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: clamp(48px, 6vw, 80px); padding-bottom: 12px; scrollbar-width: thin; }
.rev { scroll-snap-align: start; }
@media (min-width: 1000px) { .rev-list { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; } }
.rev figure { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.rev blockquote { flex: 1; font-size: .98rem; line-height: 1.65; }
.rev figcaption { font-weight: 600; font-size: .9rem; }
.rev-list:focus-visible { outline-offset: 6px; }

[data-style="luxe"] .sec--reviews { background: var(--surface); }
[data-style="luxe"] .rev-head { flex-direction: column; align-items: center; text-align: center; }
[data-style="luxe"] .rev-feature { margin-inline: auto; text-align: center; }
[data-style="luxe"] .rev-feature figcaption { justify-content: center; }
[data-style="luxe"] .rev figure { border-color: transparent; box-shadow: var(--shadow); }

/* editorial: the reviews spread is drenched in the brand colour */
[data-style="editorial"] .sec--reviews { background: var(--primary); color: var(--on-primary); --line: color-mix(in srgb, var(--on-primary) 22%, transparent); --line-strong: color-mix(in srgb, var(--on-primary) 45%, transparent); --ink: var(--on-primary); --ink-soft: color-mix(in srgb, var(--on-primary) 78%, var(--primary)); --primary-ink: var(--on-primary); --star: var(--on-primary); }
[data-style="editorial"] .sec--reviews .sec-head { border-color: var(--on-primary); }
[data-style="editorial"] .sec--reviews ::selection { background: var(--on-primary); color: var(--primary); }
[data-style="editorial"] .sec--reviews :focus-visible { outline-color: var(--on-primary); }
[data-style="editorial"] .rev-feature p { font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; }
[data-style="editorial"] .rev figure { background: transparent; border: 0; border-top: 1px solid var(--line-strong); padding: 22px 0 0; }
[data-style="editorial"] .rev-list { grid-auto-columns: minmax(min(80vw, 280px), 1fr); gap: 28px; }

[data-style="barber"] .rev-feature p { font-size: clamp(1.9rem, 4.2vw, 3.2rem); text-transform: uppercase; line-height: 1.02; letter-spacing: .01em; }
[data-style="barber"] .rev-feature p::before { content: "\201C"; color: var(--primary-ink); margin-right: .05em; }
[data-style="barber"] .rev figure { background: var(--bg); border-color: var(--line-strong); }
[data-style="barber"] .stars { --star: var(--primary-ink); }

/* ---------------------------------------------------------------- book band */
.band { display: grid; gap: 28px; align-items: center; }
.band-title { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.band-side { display: grid; gap: 24px; justify-items: start; }
.band-side p { font-size: 1.1rem; line-height: 1.6; max-width: 40ch; }
@media (min-width: 900px) { .band { grid-template-columns: 1.25fr 1fr; gap: 64px; } }

[data-style="luxe"] .sec--band { padding: clamp(56px, 7vw, 104px) 0 0; }
[data-style="luxe"] .band { background: var(--accent); color: var(--on-accent); border-radius: calc(var(--radius) * 1.6); padding: clamp(40px, 6vw, 88px); }
[data-style="luxe"] .band-side p { color: color-mix(in srgb, var(--on-accent) 80%, var(--accent)); }

[data-style="editorial"] .sec--band { background: var(--deep); color: var(--on-deep); }
[data-style="editorial"] .band-title { font-style: italic; font-weight: 400; }
[data-style="editorial"] .band-side p { color: var(--on-deep-soft); }
[data-style="editorial"] .sec--band .btn--primary { --b-bg: var(--on-deep); --b-fg: var(--deep); --b-bd: var(--on-deep); }
[data-style="editorial"] .sec--band .btn--primary:hover { --b-bg: var(--primary); --b-fg: var(--on-primary); --b-bd: var(--primary); }
[data-style="editorial"] .sec--band :focus-visible { outline-color: var(--on-deep); }

[data-style="barber"] .sec--band { background: var(--primary); color: var(--on-primary); border-top: 0; position: relative; }
[data-style="barber"] .sec--band::before, [data-style="barber"] .sec--band::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--accent-raw) 0 10px, var(--on-deep) 10px 20px, var(--deep) 20px 30px, var(--on-deep) 30px 40px); }
[data-style="barber"] .sec--band::before { top: 0; } [data-style="barber"] .sec--band::after { bottom: 0; }
[data-style="barber"] .band-title { font-size: clamp(3rem, 8vw, 6rem); }
[data-style="barber"] .sec--band .btn--primary { --b-bg: var(--deep); --b-fg: var(--on-deep); --b-bd: var(--deep); box-shadow: none; }
[data-style="barber"] .sec--band .btn--primary:hover { --b-bg: var(--bg); --b-bd: var(--bg); }
[data-style="barber"] .sec--band :focus-visible { outline-color: var(--on-primary); }
[data-style="barber"] .sec--band ::selection { background: var(--deep); color: var(--on-deep); }

/* ---------------------------------------------------------------- visit */
.visit-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: 1fr 1fr 1.25fr; gap: clamp(32px, 4vw, 64px); align-items: start; } .visit-grid.no-map { grid-template-columns: 1fr 1fr; max-width: 900px; } }
.visit-sub { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.visit-sub .ic { color: var(--primary-ink); width: 18px; height: 18px; }
.visit-hours .open-status { margin-bottom: 14px; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hours th { text-align: left; font-weight: 400; color: var(--ink-soft); }
.hours td { text-align: right; }
.hours .is-today th, .hours .is-today td { color: var(--ink); font-weight: 700; }
.hours .is-today th::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-ink); margin-left: 8px; vertical-align: middle; }
.hours .closed { color: var(--ink-soft); }
.visit-loc address { font-style: normal; font-size: clamp(1.3rem, 2vw, 1.6rem); font-family: var(--font-heading); line-height: 1.3; letter-spacing: var(--h-track); text-transform: var(--h-case); }
.visit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.visit-mail { margin-top: 18px; }
.visit-mail a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.visit-map { position: relative; min-height: 340px; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); display: flex; flex-direction: column; }
.visit-map iframe { flex: 1; width: 100%; min-height: 300px; border: 0; }
.map-open { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: .85rem; font-weight: 600; background: var(--bg); border-top: 1px solid var(--line); text-decoration: none; color: var(--primary-ink); }
.map-open .ic { width: 14px; height: 14px; }
[data-style="luxe"] .visit-map iframe { filter: saturate(.55) sepia(.12); }
[data-style="editorial"] .visit-map iframe { filter: grayscale(1) contrast(1.05); }
[data-style="barber"] .visit-map iframe { filter: grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9); }
[data-style="barber"] .visit-map { border: 1px solid var(--line-strong); }
[data-style="barber"] .map-open { background: var(--deep); }

/* ---------------------------------------------------------------- faq */
.faq-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .faq-grid .sec-head { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.faq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover span { text-decoration: underline; text-decoration-color: var(--line-strong); }
.qa-ic { width: 20px; height: 20px; color: var(--primary-ink); transition: transform .35s var(--ease); }
.qa[open] .qa-ic { transform: rotate(45deg); }
.qa-a { padding: 0 48px 24px 0; color: var(--ink-soft); line-height: 1.7; display: grid; gap: .8em; max-width: 64ch; }
[data-style="luxe"] .sec--faq .faq-grid { grid-template-columns: 1fr; max-width: 820px; }
[data-style="luxe"] .sec--faq .sec-head { position: static; }
[data-style="luxe"] .qa summary { font-family: var(--font-heading); font-weight: 400; font-size: 1.3rem; }
[data-style="editorial"] .qa summary { font-size: 1.15rem; }
[data-style="editorial"] .faq-list { border-top: 0; }
[data-style="barber"] .qa summary { font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; }

/* ---------------------------------------------------------------- instagram */
.ig { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .ig { grid-template-columns: 1fr 1.5fr; gap: 72px; } }
.ig-copy { display: grid; gap: 18px; justify-items: start; }
.ig-copy p { color: var(--ink-soft); max-width: 40ch; font-size: 1.05rem; line-height: 1.6; }
.ig-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-decoration: none; }
.ig-thumb { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); }
.ig-thumb img { transition: transform .8s var(--ease); }
.ig-strip:hover .ig-thumb img { transform: scale(1.05); }
@media (max-width: 700px) { .ig-strip { grid-template-columns: repeat(3, 1fr); } .ig-thumb:nth-child(n+4) { display: none; } }
[data-style="luxe"] .sec--ig { padding-top: 0; }
[data-style="barber"] .ig-thumb img { filter: grayscale(1); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--deep); color: var(--on-deep); --ink: var(--on-deep); --ink-soft: var(--on-deep-soft); --primary-ink: var(--primary-on-deep); --line: var(--deep-line); --line-strong: color-mix(in srgb, var(--on-deep) 30%, transparent); }
.site-footer :focus-visible { outline-color: var(--on-deep); }
.ftr { display: grid; gap: 40px; padding: clamp(64px, 8vw, 104px) 0 48px; }
@media (min-width: 900px) { .ftr { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; } }
.ftr-brand p { margin-top: 18px; color: var(--on-deep-soft); max-width: 32ch; line-height: 1.6; }
.ftr .wm { color: var(--on-deep); }
.ftr-social { display: flex; gap: 10px; margin-top: 22px; }
.ftr-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--on-deep); transition: background-color .2s, color .2s; }
.ftr-social a:hover { background: var(--on-deep); color: var(--deep); }
.ftr-col h2 { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-deep-soft); margin-bottom: 16px; }
.ftr-col p { margin-bottom: 8px; line-height: 1.55; }
.ftr-col a { text-decoration: none; }
.ftr-col a:hover { text-decoration: underline; }
.ftr-hours { list-style: none; display: grid; gap: 6px; font-variant-numeric: tabular-nums; font-size: .92rem; }
.ftr-hours li { display: flex; justify-content: space-between; gap: 16px; max-width: 250px; }
.ftr-hours li span:first-child { color: var(--on-deep-soft); }
.ftr-cta p { color: var(--on-deep-soft); margin-bottom: 16px; }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0 28px; border-top: 1px solid var(--deep-line); font-size: .85rem; color: var(--on-deep-soft); }
[data-style="barber"] .site-footer { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- mobile book bar */
.mbar { display: none; }
@media (max-width: 759px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -12px 28px -18px rgb(var(--shadow-rgb) / .5); }
  .mbar .btn { min-height: 52px; }
  .mbar-call { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 60px; height: 52px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); font-size: .7rem; font-weight: 600; text-decoration: none; color: var(--ink); }
  .mbar-call .ic { width: 20px; height: 20px; color: var(--primary-ink); }
  [data-style="luxe"] .mbar-call { border-radius: 26px; }
  body.has-mbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mbar:only-child { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOOKING SHEET
   ========================================================================== */
.bk-dialog { padding: 0; border: 0; margin: 0 0 0 auto; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--bg); color: var(--ink); box-shadow: -24px 0 60px -24px rgb(0 0 0 / .45); overflow: hidden; }
.bk-dialog::backdrop { background: rgb(18 14 15 / .5); }
.bk-dialog[open] { animation: sheetIn .5s var(--ease); }
.bk-dialog[open]::backdrop { animation: fade .4s ease; }
.bk-dialog.is-closing { animation: sheetOut .22s ease-in forwards; }
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetOut { to { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
[data-style="luxe"] .bk-dialog { border-radius: 28px 0 0 28px; }
@media (max-width: 719px) {
  .bk-dialog, [data-style="luxe"] .bk-dialog { inset: 0; width: 100%; max-width: 100%; border-radius: 0; margin: 0; }
  @keyframes sheetIn { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes sheetOut { to { transform: translateY(48px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .bk-dialog[open], .bk-dialog.is-closing { animation: none; } }

.bk { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.bk-top { padding: 12px 16px 0; border-bottom: 1px solid var(--line); }
.bk-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.bk-heading { text-align: center; min-width: 0; }
.bk-heading h2 { font-family: var(--font-heading); font-weight: var(--h-weight); text-transform: var(--h-case); letter-spacing: var(--h-track); font-size: 1.3rem; line-height: 1.15; outline: none; }
[data-style="barber"] .bk-heading h2 { font-size: 1.5rem; letter-spacing: .03em; }
.bk-where { font-size: .78rem; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-icon { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background-color .2s; }
.bk-icon:hover:not(:disabled) { background: var(--surface-2); }
.bk-icon:disabled { opacity: .3; cursor: default; }
.bk-icon .ic { width: 22px; height: 22px; }
.bk-back.is-hidden { visibility: hidden; }
.bk-prog { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 12px 4px 0; padding-bottom: 12px; }
.bk-prog li { display: grid; gap: 7px; font-size: .7rem; color: var(--ink-soft); text-align: center; }
.bk-prog li::before { content: ""; height: 3px; border-radius: 3px; background: var(--line); transition: background-color .4s var(--ease); }
.bk-prog li.is-done { cursor: pointer; }
.bk-prog li.is-done::before, .bk-prog li.is-current::before { background: var(--primary-ink); }
.bk-prog li.is-current { color: var(--ink); font-weight: 600; }
.bk-prog li.is-done:hover span { text-decoration: underline; }
@media (max-width: 380px) { .bk-prog li span { display: none; } }
[data-step="done"] .bk-prog li::before { background: var(--primary-ink); }

.bk-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 36px; scroll-padding-top: 64px; }
.bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
[data-step="done"] .bk-foot { display: none; }
.bk-sum { min-width: 0; display: grid; gap: 2px; }
.bk-sum strong { font-family: var(--font-heading); font-weight: var(--h-weight); font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-style="luxe"] .bk-sum strong, [data-style="editorial"] .bk-sum strong { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; }
.bk-sum span { font-size: .82rem; color: var(--ink-soft); }
.bk-next { flex: none; }
.bk-next.is-waiting { opacity: .5; }
.bk-next.is-loading { pointer-events: none; }
.bk-next.is-loading .ic { animation: nudge .8s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: translateX(4px); } }

.bk-alert { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.5; background: color-mix(in srgb, var(--danger) 9%, var(--bg)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--ink); }
.bk-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* step 1: services */
.bk-find { position: relative; }
.bk-find .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); width: 20px; height: 20px; pointer-events: none; }
.bk-find input { width: 100%; height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); background: var(--raised); color: var(--ink); font: inherit; font-size: 1rem; }
.bk-find input:focus { outline: none; border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-tint); }
.bk-cats { position: sticky; top: -20px; z-index: 2; display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 12px 20px; background: var(--bg); scrollbar-width: none; }
.bk-cats::-webkit-scrollbar { display: none; }
.bk-cats button, .chip { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.bk-cats button:hover { border-color: var(--ink); }
.bk-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-tint); border-color: transparent; padding: 7px 10px 7px 14px; color: var(--ink); }
.chip .ic { width: 14px; height: 14px; opacity: .7; }
.chip:hover .ic { opacity: 1; }
[data-style="editorial"] .bk-cats button, [data-style="editorial"] .chip, [data-style="barber"] .bk-cats button, [data-style="barber"] .chip { border-radius: var(--radius-sm); }
.bk-group { border: 0; margin: 20px 0 0; padding: 0; min-width: 0; }
.bk-group legend { padding: 0; margin-bottom: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.bk-svc, .bk-pro { position: relative; display: grid; align-items: center; gap: 4px 14px; padding: 14px 16px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.bk-svc { grid-template-columns: 1fr auto 26px; }
.bk-svc:hover, .bk-pro:hover { border-color: var(--line-strong); }
.bk-svc input, .bk-pro input, .chk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-svc:has(input:focus-visible), .bk-pro:has(input:focus-visible) { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
.bk-svc.is-on, .bk-pro.is-on { border-color: var(--primary-ink); background: var(--primary-tint); box-shadow: inset 0 0 0 1px var(--primary-ink); }
.bk-svc-main, .bk-pro-main { display: grid; gap: 3px; min-width: 0; }
.bk-svc-name, .bk-pro-name { font-weight: 600; line-height: 1.3; }
.bk-svc-desc { font-size: .84rem; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-svc-meta { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; }
.bk-svc-price { font-weight: 600; white-space: nowrap; }
.bk-svc-dur { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.bk-tick { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
[data-style="editorial"] .bk-tick, [data-style="barber"] .bk-tick { border-radius: var(--radius-sm); }
.bk-tick .ic { width: 16px; height: 16px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease); stroke-width: 2.2; }
.is-on .bk-tick { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.is-on .bk-tick .ic { opacity: 1; transform: none; }
.bk-empty { padding: 28px 0; text-align: center; color: var(--ink-soft); }

/* step 2: staff */
.bk-pros { margin-top: 0; }
.bk-pro { grid-template-columns: 56px 1fr 26px; }
.bk-ava { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
[data-style="editorial"] .bk-ava, [data-style="barber"] .bk-ava { border-radius: var(--radius-sm); }
.bk-ava img { width: 100%; height: 100%; object-fit: cover; }
.bk-ava .mono { font-size: 1.35rem; }
.bk-ava--any { background: var(--primary-tint); color: var(--primary-ink); }
.bk-ava--any .ic { width: 26px; height: 26px; }
.bk-pro-role { font-size: .85rem; color: var(--ink-soft); }
.bk-pro-days { font-size: .8rem; color: var(--ink-soft); }
.bk-pro-no { font-size: .8rem; color: var(--ink-soft); font-style: italic; }
.bk-pro.is-off { cursor: not-allowed; background: transparent; }
.bk-pro.is-off .bk-ava, .bk-pro.is-off .bk-pro-name, .bk-pro.is-off .bk-tick { opacity: .45; }

/* step 3: calendar + slots */
.bk-cal { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 14px; background: var(--raised); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-title { font-family: var(--font-heading); font-weight: var(--h-weight); text-transform: var(--h-case); letter-spacing: var(--h-track); font-size: 1.15rem; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: .7rem; font-weight: 600; color: var(--ink-soft); padding: 6px 0; }
.cal-day { position: relative; aspect-ratio: 1; max-height: 48px; width: 100%; margin: auto; border: 0; border-radius: var(--day-radius); background: transparent; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink); transition: background-color .2s, color .2s; }
.cal-day:hover:not(:disabled):not(.is-sel) { background: var(--primary-tint); }
.cal-day:disabled { color: var(--ink-soft); opacity: .45; font-weight: 400; cursor: default; text-decoration: line-through; text-decoration-color: var(--line-strong); }
.cal-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal-day.is-sel { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 1px var(--primary-ring); }
.bk-slots { margin-top: 24px; }
.slots-date { font-family: var(--font-heading); font-weight: var(--h-weight); text-transform: var(--h-case); letter-spacing: var(--h-track); font-size: 1.2rem; }
.slots-date span { display: block; margin-top: 4px; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink-soft); font-weight: 400; }
.slot-group h4 { margin: 20px 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--raised); font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.slot:hover:not(.is-sel) { border-color: var(--ink); }
.slot.is-sel { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 1px var(--primary-ring); }
.bk-none { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 48px 12px; color: var(--ink-soft); }
.bk-none .ic { width: 36px; height: 36px; color: var(--primary-ink); }
.bk-none strong { color: var(--ink); }

/* step 4: details */
.bk-form { display: grid; gap: 4px; }
.fld { margin-bottom: 14px; }
.fld label { display: block; margin-bottom: 7px; font-size: .9rem; font-weight: 600; }
.opt { font-weight: 400; color: var(--ink-soft); font-size: .85em; margin-left: 4px; }
.fld input, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--raised); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s; }
.fld textarea { resize: vertical; min-height: 96px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-soft); opacity: .8; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-tint); }
.fld.is-bad input { border-color: var(--danger); }
.fld.is-bad input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.fld-hint { margin-top: 6px; font-size: .8rem; color: var(--ink-soft); }
.fld-err { margin-top: 6px; font-size: .85rem; color: var(--danger); font-weight: 500; }
.fld-err:empty { display: none; }
.chk { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 0; cursor: pointer; font-size: .95rem; line-height: 1.45; }
.chk small { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-soft); }
.chk-box { width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 7px; display: grid; place-items: center; background: var(--raised); transition: background-color .2s, border-color .2s; }
[data-style="editorial"] .chk-box, [data-style="barber"] .chk-box { border-radius: var(--radius-sm); }
.chk-box .ic { width: 16px; height: 16px; opacity: 0; stroke-width: 2.4; }
.chk input:checked + .chk-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chk input:checked + .chk-box .ic { opacity: 1; }
.chk input:focus-visible + .chk-box { outline: 2px solid var(--primary-ink); outline-offset: 2px; }

/* step 5: review */
.rv-block { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rv-block:first-child { padding-top: 4px; }
.rv-block h3, .rv-policy h3 { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.rv-block p { line-height: 1.5; }
.rv-big { font-family: var(--font-heading); font-weight: var(--h-weight); text-transform: var(--h-case); letter-spacing: var(--h-track); font-size: 1.45rem; line-height: 1.15; margin-bottom: 4px; }
.rv-grow { flex: 1; }
.bk-edit { flex: none; border: 0; background: none; padding: 6px 0; color: var(--primary-ink); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.rv-list { list-style: none; }
.rv-list li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.rv-list li small { display: block; }
.rv-list li > span:last-child { white-space: nowrap; text-align: right; }
.rv-list li > span:last-child small { display: inline; }
.rv-total { margin-top: 8px; padding-top: 12px !important; border-top: 1px solid var(--line); font-weight: 700; }
.rv-note { color: var(--ink-soft); font-style: italic; margin-top: 6px; }
.rv-tag { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--primary-tint); font-size: .78rem; font-weight: 600; }
.rv-deposit { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--primary-tint); font-size: .92rem; line-height: 1.5; }
.rv-deposit .ic { color: var(--primary-ink); margin-top: 1px; }
.rv-policy { margin-top: 16px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.rv-policy p { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.rv-agree { margin-top: 14px; font-size: .8rem; color: var(--ink-soft); }

/* confirmation */
.bk-done { text-align: center; display: grid; justify-items: center; gap: 18px; padding-top: 12px; }
.done-mark svg { width: 76px; height: 76px; fill: none; stroke: var(--primary-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.done-mark circle { stroke-dasharray: 183; stroke-dashoffset: 0; opacity: .35; }
.done-mark path { stroke-dasharray: 42; stroke-dashoffset: 0; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .done-mark circle { animation: draw .8s var(--ease) both; --len: 183; }
  .done-mark path { animation: draw .5s .45s var(--ease) both; --len: 42; }
  .done-mark { animation: pop .6s .35s var(--ease) both; }
}
@keyframes draw { from { stroke-dashoffset: var(--len); } }
@keyframes pop { 50% { transform: scale(1.08); } }
.done-lede { font-size: 1.05rem; line-height: 1.6; max-width: 38ch; }
.done-card { width: 100%; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); display: grid; gap: 4px; }
.done-svcs { color: var(--ink-soft); font-size: .92rem; margin-top: 6px; }
.done-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.done-addr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: .88rem; }
.done-addr .ic { color: var(--primary-ink); width: 16px; height: 16px; }
.done-send { width: 100%; display: grid; gap: 10px; }
.done-send .btn { width: 100%; }
.done-cal { display: grid; gap: 10px; justify-items: center; }
.done-cal > p { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.done-cal > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.done-policy { font-size: .82rem; color: var(--ink-soft); max-width: 44ch; line-height: 1.55; }
.done-close { min-height: 44px; }

@media (min-width: 720px) {
  .bk-top { padding: 18px 24px 0; }
  .bk-body { padding: 24px 28px 40px; }
  .bk-foot { padding: 16px 28px; }
  .bk-cats { margin: 0 -28px; padding: 12px 28px; top: -24px; }
}

/* luxe display faces often ship old-style or ambiguous numerals: numbers inside the booking UI use the body face */
[data-style="luxe"] .cal-title, [data-style="luxe"] .slots-date, [data-style="luxe"] .rv-big { font-family: var(--font-body); font-weight: 600; letter-spacing: -.01em; }
.bk-dialog:focus, .bk-dialog:focus-visible, .lb:focus-visible { outline: none; }
[data-style="editorial"] .rev-head .rating-badge { justify-self: start; }
[data-style="barber"] .rev-head::before { flex-basis: 100%; margin-bottom: 0; }
[data-style="barber"] .rev-head { row-gap: 22px; }

/* phones: team becomes compact rows so three people don't cost three screens */
@media (max-width: 600px) {
  .pro, [data-style="luxe"] .pro { grid-template-columns: 112px 1fr; gap: 18px; text-align: left; justify-items: stretch; align-items: start; }
  .pro-photo, [data-style="luxe"] .pro-photo, .pro-photo.is-mono { width: 112px; aspect-ratio: 4 / 5; }
  .pro-photo.is-mono::after { inset: 5px; }
  .pro .mono { font-size: 2.4rem; }
  .pro-name, [data-style="editorial"] .pro-name, [data-style="barber"] .pro-name { font-size: 1.5rem; }
  [data-style="luxe"] .pro-days { justify-content: flex-start; }
  [data-style="luxe"] .pro-bio { margin-inline: 0; }
}