/* E-CUTZ — public site styles.
   Black is the brand's main colour (owner, 2026-10-31). The client's logo (gold textured E + off-white wordmark) sits on
   the page background without a seam. Gold is for the brand and thin details only: hairline frame/margin rule, the
   "now" line, a few small labels, focus rings, and at most ONE gold-filled button per view.
   The day sheet (ruled half-hours) stays the site's structural idea: hairline rules, times in the margin.
   All colours and fonts live in the first block. */
/* Sofia Sans + Sofia Sans Condensed (lettersoup), SIL Open Font License 1.1 — assets/fonts/OFL.txt.
   Self-hosted, latin subset, trimmed with fontTools instancer: Sofia Sans wght 400–700, Condensed wght 300–600.
   Condensed was chosen as the closest open match to the logo's thin condensed capitals.
   A weight outside those ranges needs the original font files again. */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/sofia-sans-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Sofia Sans Cond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/sofia-sans-cond-latin.woff2) format('woff2');
}
/* Instrument Serif (Instrument, SIL OFL 1.1 — assets/fonts/OFL-instrument-serif.txt): the display face of every heading
   and of the big prices. Regular + italic, latin subset (Albanian ë ç, € and punctuation), 19 + 20 KB of woff2. Only the
   headings use it; Sofia Sans Condensed keeps the nav, buttons, small-caps labels and the logo, Sofia Sans the text. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-latin-italic.woff2) format('woff2');
}
/* local Georgia, scaled to Instrument Serif's width and line metrics (measured with fontTools), so the swap barely moves */
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: normal;
  src: local('Georgia');
  size-adjust: 74.76%;
  ascent-override: 132.4%;
  descent-override: 41.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: italic;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 77.68%;
  ascent-override: 127.4%;
  descent-override: 39.9%;
  line-gap-override: 0%;
}
/* Metric-matched fallbacks: while the web fonts load (font-display: swap), local Arial is drawn at Sofia's width and
   line metrics, so the swap does not move text. Measured with fontTools over a mixed SQ/EN sample (2026-11-01):
   Sofia Sans 400 / Arial (checked in Edge: same line height, width within 1%) and Sofia Sans Cond 300–400 / Arial;
   Arial (not Arial Narrow) because phones with Arial (iOS)
   have no Arial Narrow. Where Arial is missing (most Android phones) the face is skipped and system-ui is used. */
@font-face {
  font-family: 'Sofia Sans Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 96.5%;
  ascent-override: 93.26%;
  descent-override: 31.09%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Sofia Sans Cond Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 74.07%;
  ascent-override: 121.5%;
  descent-override: 40.5%;
  line-gap-override: 0%;
}
/* ================================================================ tokens (sampled from materiale/e-cutz-logo.png) */
:root {
  /* colour roles (owner 2026-11-02): pure black, CREAM as the second colour, neutral greys, gold only for the logo, the one primary
     button, the focus ring and the slide-to-confirm. The light set below stays dormant ([data-theme=light], only via ?theme=light). */
  --bg: #10100F; --panel: #1C1C1A; --bg-2: #1C1C1A; --bg-3: #2B2B27; --raised: #242421; --field: #1C1C1A;
  --text: #F5F0E6; --text-2: #B9B3A6; --text-3: #8C877C; --text-soft: #DDD7CA; --accent: #D8D2C4;
  --gold: #D9BA8C; --gold-hi: #EBD2A6; --gold-lo: #C5A274; --gold-line: rgba(255, 255, 255, .16);
  --champagne: #FFF8E8; --on-gold: #050505;
  --ink: 245 240 230; --bg-rgb: 16 16 15; --page-bg: #10100F;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --field-line: #707070; --btn-line: #707070;
  --err: #F0907F; --open: #7CC796;

  --font: 'Sofia Sans', 'Sofia Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-c: 'Sofia Sans Cond', 'Sofia Sans Cond Fallback', 'Arial Narrow', system-ui, sans-serif;

  --font-d: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;

  /* shapes and sizes of the button system, in one place */
  --r-pill: 999px;
  --r-field: 12px;         /* inputs, selects, textareas */
  --r-card: 4px;
  --btn-h: 52px;           /* >= 48px on phones */
  --btn-h-sm: 44px;
  --btn-px: 30px;
  --btn-ls: .12em;
  --maxw: 1600px;
  --gutter: clamp(16px, 4vw, 64px);   /* 16px on phones, 64px from 1600px up */
  --pad: 14px;             /* from the rule to the text */
  --line-h: 44px;          /* one ruled line = one touch target */
  --header-h: 60px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --radius: 2px;
  color-scheme: dark;
}
@media (min-width: 768px) {
:root { --line-h: 46px; --header-h: 72px; }
}
/* the surfaces that stay black in every theme (the hero photo, the footer, the intro, the header over the hero) */
.hero, .footer, .intro, .header:not(.docked) {
  color-scheme: dark;
  --bg: #10100F; --panel: #1C1C1A; --bg-2: #1C1C1A; --bg-3: #2B2B27; --raised: #242421; --field: #1C1C1A;
  --text: #F5F0E6; --text-2: #B9B3A6; --text-3: #8C877C; --text-soft: #DDD7CA; --accent: #D8D2C4;
  --gold: #D9BA8C; --champagne: #FFF8E8; --on-gold: #050505;
  --field-line: #707070; --btn-line: #707070;
  --ink: 245 240 230; --bg-rgb: 16 16 15;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
}
/* dormant light theme (cream): not offered, kept for later; preview with ?theme=light */
[data-theme=light] {
  color-scheme: light;
  --bg: #F6F2EA; --bg-2: #EFE8DB; --bg-3: #E6DFD0; --panel: #EFE8DB; --field: #FBF8F2;
  --text: #16130F; --text-2: #5F574B; --text-3: #716859; --text-soft: #2B251D; --accent: #5F574B;
  --gold: #7A5C2B; --gold-hi: #B8924F; --gold-lo: #6E5226; --gold-line: rgba(122, 92, 43, .4);
  --champagne: #6E5226; --on-gold: #FBF8F2;
  --ink: 22 19 15; --bg-rgb: 246 242 234; --page-bg: #F6F2EA;
  --line: rgba(22, 19, 15, .10); --line-2: rgba(22, 19, 15, .16);
  --field-line: #8A8174; --btn-line: #8A8174;
  --err: #B3402F; --open: #2F7D4F;
}
.hero, .footer, .intro { color: var(--text); }
/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.55 var(--font); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
  scrollbar-color: var(--line-2) var(--bg); caret-color: var(--accent);
}
body.is-locked { overflow: hidden; }
::selection { background: var(--accent); color: #050505; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.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; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; }
#app:focus { outline: none; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; padding: 12px 20px; background: var(--text); color: var(--bg); font-weight: 700; border-radius: var(--r-pill); text-decoration: none; }
.skip:focus { top: 8px; }
.noscript { padding: 24px var(--gutter); font-size: 1rem; }
/* ================================================================ type */
.brand-mark { font-family: var(--font-c); font-weight: 400; text-transform: uppercase; letter-spacing: .18em; line-height: 1; }
.h-xl { font-family: var(--font-d); font-weight: 400; font-size: clamp(2.875rem, 11vw, 5.5rem); line-height: .98; letter-spacing: -.01em; text-wrap: balance; margin-bottom: .3em; }
.h-lg { font-family: var(--font-d); font-weight: 400; font-size: clamp(2.25rem, 7.5vw, 3.5rem); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
.h-sm { font-family: var(--font-d); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: 0; }
/* the two-line display heading: the second line italic and a little muted */
.dh { margin: 0; font: 400 clamp(2.5rem, 7vw, 5rem)/.98 var(--font-d); letter-spacing: -.012em; text-wrap: balance; }
.dh em { display: block; font-style: italic; color: var(--text-2); }
/* small label with a short gold dash, and the italic section number */
.lbl { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 500 .8125rem/1.2 var(--font-c); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.lbl::before { content: ''; width: 28px; height: 1px; background: var(--accent); flex: none; }
.no { margin: 0; font: italic 400 1.375rem/1 var(--font-d); color: var(--text-2); }
.lead { font-size: 1.1875rem; line-height: 1.5; color: var(--text-2); max-width: 40ch; text-wrap: pretty; }
.page .row-c > .lead { margin-bottom: 32px; }
.text-link { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-color 160ms ease, color 160ms ease; }
.text-link svg { width: 15px; height: 15px; margin-left: 4px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
.text-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
}
/* letter-spaced gold small caps, as on the brand poster — used sparingly */
.caps { font-family: var(--font-c); font-weight: 400; text-transform: uppercase; letter-spacing: .32em; color: var(--accent); }
/* ================================================================ layout: full-width page, centred wraps; photo bands bleed to the edges */
:root { --gx-l: max(var(--gutter), env(safe-area-inset-left)); --gx-r: max(var(--gutter), env(safe-area-inset-right)); }
#app { position: relative; min-height: 62vh; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gx-l); padding-right: var(--gx-r); }
/* the ruled sheet (portal, 404): margin column with the thin gold rule + content */
.row { position: relative; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gx-l); padding-right: var(--gx-r); }
.row-c { min-width: 0; }
.page .row-c { padding-top: 36px; padding-bottom: 80px; }
@media (min-width: 768px) {
.page .row-c { padding-top: 64px; padding-bottom: 112px; }
}
/* the client's tagline: HAIRCUTS | FADES | BEARDS | SHAVES, letter-spaced, thin gold bars between */
.tagline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; font: 400 .8125rem/1.3 var(--font-c); letter-spacing: .26em; text-transform: uppercase; color: var(--text); }
.tagline span { margin-right: -.26em; }
.tagline i { width: 1px; height: 13px; background: var(--accent); }
@media (min-width: 768px) {
.tagline { gap: 6px 18px; font-size: 1rem; letter-spacing: .34em; }
.tagline span { margin-right: -.34em; }
.tagline i { height: 16px; }
}
/* ================================================================ buttons: one system (owner request 2026-11-01)
   Pills with condensed small-caps labels. gold = the one main action of a view (the header's "Rezervo"; never more);
   light = the off-white primary of the booking band; line = the outlined secondary. Round outlined arrow buttons for
   rows, uppercase text links with a drawing underline, pill chips, circular icon buttons. All sizes, radii and colours
   come from the tokens on :root. Hover: the colour grows as a circle from the pointer (--x/--y, btnPoint() in app.js);
   gold lifts and shines. Press .98. Nothing changes size on hover (no layout shift). */
.btn {
  --h: var(--btn-h); --px: var(--btn-px);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 var(--px);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-c); font-weight: 500; font-size: 1rem; line-height: 1.1; letter-spacing: var(--btn-ls); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: color 280ms ease, border-color 280ms ease, background-color 280ms ease, transform 160ms var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn span { overflow: hidden; text-overflow: ellipsis; }
.btn::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: var(--x, 50%); top: var(--y, 50%); width: 250%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); transition: transform 480ms var(--ease-out);
}
.btn:active { transform: scale(.98); transition-duration: 100ms; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn-sm { --h: var(--btn-h-sm); --px: 20px; font-size: .9375rem; }
/* primary (gold): a very soft champagne → gold gradient with a hairline lighter top edge, dark text (10:1) */
.btn-gold { background: linear-gradient(180deg, #E6CDA2, #D9BA8C); color: #050505; border-color: #C5A274; box-shadow: inset 0 1px 0 rgba(255, 250, 235, .7); }
.btn-gold::before { background: var(--text); }
/* primary light: the off-white pill, dark text */
.btn-light { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-light::before { background: #E9E3D6; }
/* secondary: outlined, off-white text; a soft fill on hover */
.btn-line { background: transparent; color: var(--text); border-color: var(--btn-line); }
.btn-line::before { background: rgb(var(--ink) / .1); }
@media (hover: hover) and (pointer: fine) {
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn-line:hover { border-color: var(--text); }
.btn-light:hover { border-color: #E9E3D6; }
}
@media (prefers-reduced-motion: reduce) {
.btn, .btn::before { transition: none; }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) {
.actions > .btn { flex: 1 1 100%; white-space: normal; text-align: center; padding: 8px 20px; }
}
.btn { max-width: 100%; }
.btn span { min-width: 0; }
.btn-wide { min-width: min(100%, 280px); }
/* the round outlined arrow button (rows: menu, services, lists): a 44px circle, the arrow points up-right and
   steps 2px further on hover while the circle fills */
.arw { position: relative; isolation: isolate; overflow: hidden; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--btn-line); border-radius: 50%; color: var(--text); text-decoration: none; touch-action: manipulation; transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 120ms var(--ease-out); }
.arw svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }
.arw:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
.arw:hover, a:hover > .arw, .row-link:hover .arw { background: var(--text); border-color: var(--text); color: var(--bg); }
.arw:hover svg, a:hover > .arw svg, .row-link:hover .arw svg { transform: translate(2px, -2px); }
}
/* the uppercase text link with an arrow: a thin underline draws in on hover, the arrow steps forward */
.tl { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font: 500 .9375rem/1.2 var(--font-c); letter-spacing: .14em; text-transform: uppercase; touch-action: manipulation; transition: color 160ms ease; }
.tl > span:first-child { padding: 4px 0; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat; transition: background-size 320ms var(--ease-out); }
.tl svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }
.tl:active { color: var(--champagne); }
.tl:focus-visible > span:first-child { background-size: 100% 1px, 100% 1px; }
@media (hover: hover) and (pointer: fine) {
.tl:hover > span:first-child, a:hover > .tl > span:first-child { background-size: 100% 1px, 100% 1px; }
.tl:hover svg, a:hover > .tl svg { transform: translateX(4px); }
.tl:hover { color: var(--champagne); }
}
/* chips and filters: pills, the selected one filled; the small rounded squares are the working days */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--btn-line); border-radius: var(--r-pill); background: transparent; color: var(--text); font: 500 .8125rem/1 var(--font-c); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms var(--ease-out); }
.chip i { font-style: normal; color: var(--text-2); letter-spacing: .06em; transition: color 180ms ease; }
.chip:active { transform: scale(.97); }
.chip[aria-pressed=true], .chip.is-on { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip[aria-pressed=true] i, .chip.is-on i { color: #555555; }
@media (hover: hover) and (pointer: fine) {
.chip:not([aria-pressed=true]):hover { border-color: var(--text); background: rgb(var(--ink) / .08); }
}
.chip-soft { min-height: 36px; padding: 0 14px; border-color: var(--line-2); cursor: default; letter-spacing: .06em; text-transform: none; font-family: var(--font); font-weight: 500; font-size: .875rem; }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { display: inline-grid; place-items: center; min-width: 48px; height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-3); font: 500 .75rem/1 var(--font-c); letter-spacing: .12em; text-transform: uppercase; }
.dchip.is-on { border-color: var(--line-2); background: rgb(var(--ink) / .1); color: var(--text); }
.dchip.is-off { text-decoration: line-through; text-decoration-color: var(--line-2); }
/* ================================================================ header: menu on the left, the logo in the centre, account /
   language / "Book" on the right (3 columns, the logo truly centred). Over the hero it has no panel of its own; the
   near-black panel fades in when the logo has docked (the logo morph in app.js). */
.header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: border-color 240ms ease; }
.header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; opacity: var(--dock, 1); }
.header:not(.docked) { background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.header.docked::before { opacity: 1; }
.header.morph-wait::before { opacity: 0; }
.header.docked.is-solid { border-bottom-color: var(--line); }
.header-inner { max-width: var(--maxw); height: var(--header-h); margin: 0 auto; padding: 0 var(--gx-r) 0 var(--gx-l); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.hdr-l { display: flex; align-items: center; justify-self: start; min-width: 0; }
.hdr-r { display: flex; align-items: center; justify-content: flex-end; gap: 2px; justify-self: end; min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; color: var(--text); text-decoration: none; font-size: 1.25rem; transition: opacity 240ms ease; }
.logo-e, .logo-w { display: block; width: auto; transform-origin: 0 0; }
.logo-e { height: 30px; }
.logo-w { height: 14px; }
@media (min-width: 768px) {
.logo { gap: 12px; }
.logo-e { height: 38px; }
.logo-w { height: 18px; }
}
/* the open phone menu covers the hero: the logo waits in the header */
.menu-open .logo-e, .menu-open .logo-w { transform: none !important; }
/* home page, the first frame: the logo waits (invisible) until the morph has placed it over the hero */
.header.morph-wait .logo { opacity: 0; transition: none; }
/* reduced motion: the hero shows its own lockup; the header logo fades in once the hero is left behind */
.header.logo-away .logo { opacity: 0; }
.header.logo-away .logo:focus-visible { opacity: 1; }
.nav { display: none; margin-left: -12px; }
.nav a, .lang a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-family: var(--font-c); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text); }
@media (hover: hover) and (pointer: fine) {
.lang a:hover { color: var(--accent); }
}
.header .lang { display: none; }
.lang { display: flex; align-items: center; }
.lang a { padding: 0 9px; color: var(--text-2); }
.lang a[aria-current] { color: var(--text); text-decoration: none; }
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--btn-line); border-radius: 50%; background: none; color: var(--text); touch-action: manipulation; transition: border-color 180ms ease, background-color 180ms ease, transform 120ms var(--ease-out); }
.menu-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
.menu-btn:hover { border-color: var(--text); }
}
.menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-btn-icon { position: relative; width: 18px; height: 10px; }
.menu-btn-icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--text); transition: transform 240ms var(--ease-out); }
.menu-btn-icon i:first-child { top: 0; }
.menu-btn-icon i:last-child { bottom: 0; }
.menu-open .menu-btn-icon i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-btn-icon i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
/* the smallest phones: menu icon | emblem + wordmark | account icon */
@media (max-width: 379px) {
.header-inner { gap: 8px; }
}
@media (min-width: 1200px) {
.nav { display: flex; }
.header .lang { display: flex; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); }
.menu-btn { display: none; }
}
/* ================================================================ menu (phones) */
.menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 25; background: var(--bg); color: var(--text); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(-8px); transition: opacity 220ms ease, transform 260ms var(--ease-out); }
.menu.is-open { opacity: 1; transform: none; }
.menu-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); font-family: var(--font-c); font-weight: 300; font-size: 2.5rem; line-height: 1; letter-spacing: .02em; text-decoration: none; color: var(--text); }
.menu-foot { display: grid; gap: 20px; }
.menu .lang a { padding: 0 16px 0 0; text-transform: none; letter-spacing: .04em; font-size: 1.0625rem; }
@media (prefers-reduced-motion: reduce) {
.menu { transition: none; transform: none; }
}
/* ================================================================ hero: a full-bleed dark photo with the poster's lockup over it
   (thin gold frame lines, BARBERSHOP between gold rules, the razor on its gold line, the tagline) */
.hero { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 24px) var(--gx-r) 44px var(--gx-l); overflow: hidden; text-align: center; background: #000; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* scrim: darker at the edges and under the text, so every line keeps AA contrast over the photo */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .38) 22%, rgba(0, 0, 0, .34) 52%, rgba(0, 0, 0, .78) 82%, var(--page-bg)), radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 100%); }
.hero-in { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 640px; }
.hero-mark { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 400; }
.hero-logo { display: block; width: min(62vw, 250px); aspect-ratio: 1100 / 838; }
.hero-mark .brand-xl { font-size: clamp(3.5rem, 18vw, 7rem); }
.hero-rule { display: flex; align-items: center; gap: 16px; width: min(80vw, 420px); margin-top: 18px; font-size: clamp(1rem, 4.2vw, 1.375rem); letter-spacing: .38em; }
.hero-rule::before, .hero-rule::after { content: ''; flex: 1; height: 1px; background: var(--gold); opacity: .8; }
.hero-rule > span { padding-left: .38em; }
/* balances the trailing letter-spacing */
.hero-razor { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold); }
.hero-razor::before, .hero-razor::after { content: ''; width: 1px; height: 18px; background: var(--line-2); }
.hero-razor svg { width: 52px; height: 21px; }
.hero-tags { margin-top: 18px; }
.hero .actions { justify-content: center; width: 100%; max-width: 520px; margin-top: 26px; }
@media (min-width: 768px) {
.hero { padding-bottom: 64px; }
.hero::after { left: 24px; right: 24px; bottom: 24px; }
.hero-logo { width: 330px; }
.hero-razor::before, .hero-razor::after { height: 26px; }
.hero-tags { margin-top: 26px; }
}
@media (min-width: 1100px) {
.hero-logo { width: 390px; }
.hero::after { left: 40px; right: 40px; bottom: 40px; }
}
/* the one load moment: the lockup settles and the two gold rules draw outwards from "Barbershop" */
/* transform only: the logo is never hidden, even if the animation does not run (background tab, slow device) */
@keyframes lockup-in { from { transform: translateY(10px) scale(.985); } to { transform: none; } }
@keyframes rule-out-l { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.is-ready .hero-lockup, .is-ready .hero-mark .brand-xl { animation: lockup-in 900ms var(--ease-out) both; }
.is-ready .hero-rule::before { transform-origin: 100% 50%; animation: rule-out-l 900ms 250ms var(--ease-out) both; }
.is-ready .hero-rule::after { transform-origin: 0 50%; animation: rule-out-l 900ms 250ms var(--ease-out) both; }
/* facts list (label / value) */
.facts { display: grid; gap: 16px; }
.facts dt { font-size: .875rem; font-weight: 600; color: var(--text-2); line-height: 1.6; }
.facts dd { font-size: 1.0625rem; line-height: 1.5; }
.facts dd .num { font-family: var(--font-c); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em; }
@media (min-width: 768px) {
.facts dt { line-height: 1.55; padding-top: 3px; }
.facts dd .num { font-size: 1.625rem; }
}
/* the day sheet (booking time picker): one ruled line per hour, two half-hour cells */
.sheet { position: relative; border-top: 1px solid var(--line-2); }
.slot { position: relative; display: flex; align-items: center; min-height: var(--line-h); padding: 0 14px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; color: var(--text); text-decoration: none; font-family: var(--font-c); font-weight: 400; font-size: 1.1875rem; letter-spacing: .04em; transition: background-color 160ms ease, color 160ms ease; }
.slot.is-void { pointer-events: none; }
.slot + .slot { border-left: 1px solid var(--line); }
.slot.is-past { color: var(--text-2); }
.sheet.is-closed .slot { color: var(--text-2); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }
.status.is-open i { background: var(--open); }
/* ================================================================ photo panels: a photo under a dark scrim, framed by a thin gold
   line like the poster. Used by the category tiles, the barbers, booking and visit. */
.ph { position: relative; isolation: isolate; overflow: hidden; background: var(--panel); }
.ph > img, .ph > picture img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ph::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, .08) 72%); }
.ph::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--line-2); pointer-events: none; }
/* ================================================================ the booking page (/rezervo, /en/book) */
/* header: the salon photo under a dark scrim and the thin gold frame; back link, title, address and phone */
.bp-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 14px; color: rgb(var(--ink) / .86); text-decoration: none; font-weight: 600; font-size: .9375rem; touch-action: manipulation; transition: color var(--dur-ui) ease; }
.bp-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.bp-back:hover { color: var(--champagne); }
.bp-back:hover svg { transform: translateX(-3px); }
}
.bp-back:active { color: var(--champagne); }
.bp-title { font: 400 clamp(2.875rem, 12vw, 5.5rem)/.96 var(--font-d); letter-spacing: -.01em; text-wrap: balance; }
.bp-title::after { content: ''; display: block; width: 56px; height: 1px; margin-top: 18px; background: var(--accent); }
.bp-title:focus { outline: none; }
.bp-meta { margin-top: 16px; color: rgb(var(--ink) / .86); }
.bp-meta .text-link { color: var(--text); white-space: nowrap; }
/* the flow with room to breathe; the summary beside it on wide screens */
.bp { padding-top: 36px; padding-bottom: 96px; }
.bp-grid { display: grid; gap: 48px; }
.bp-sum { display: none; }
/* the flow's own sheet: step numbers, durations and hours in the margin left of the thin gold rule */
.bp-flow { min-width: 0; }
@media (min-width: 768px) {
.bp { padding-top: 56px; }
}
/* the day and the time are the heart of the page: a larger month, and the free times as large chips */
.bp .cal { max-width: 580px; }
.bp .cal-day { min-height: 54px; font-size: 1.375rem; }
.bp .cal-title { font-size: 2rem; }
@media (min-width: 768px) {
.bp .cal-day { min-height: 62px; }
}
/* slide to book (owner request): a pill track, a gold knob that follows the finger, the track fills gold behind it */
.slide { position: relative; display: block; width: 100%; max-width: 440px; height: 60px; padding: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 999px; background: var(--field); color: var(--text); cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.slide:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.slide[disabled] { cursor: progress; }
.slide-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--ink) / .18), rgb(var(--ink) / .55)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease-out); }
.slide-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 18px 0 70px; font: 500 .9375rem/1.2 var(--font-c); letter-spacing: .1em; text-transform: uppercase; color: var(--text); transition: opacity 240ms ease; }
.slide-knob { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--gold); color: var(--on-gold); cursor: grab; touch-action: none; transition: transform 240ms var(--ease-out); }
.slide-knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slide-knob > span { display: grid; place-items: center; }
.slide .ic-check, .slide-spin { display: none; }
.slide.is-dragging .slide-knob, .slide.is-dragging .slide-fill, .slide.is-dragging .slide-text { transition: none; }
.slide.is-dragging .slide-knob { cursor: grabbing; }
.slide.is-done .ic-arrow, .slide.is-sending .ic-arrow, .slide.is-sending .ic-check { display: none; }
.slide.is-done .ic-check { display: grid; }
@keyframes slide-spin { to { transform: rotate(360deg); } }
.slide-spin { width: 22px; height: 22px; border: 2px solid rgba(0, 0, 0, .25); border-top-color: var(--bg); border-radius: 50%; animation: slide-spin 700ms linear infinite; }
.slide.is-sending .slide-spin { display: block; }
.slide.is-done .slide-fill, .slide.is-sending .slide-fill { transform: scaleX(1); }
.slide.is-done .slide-text, .slide.is-sending .slide-text { opacity: 0; }
/* a fine pointer gets a small hint that the knob moves */
@media (hover: hover) and (pointer: fine) {
.slide:not([disabled]):not(.is-done):hover .slide-knob { transform: translateX(6px); }
}
.book-go .hint { max-width: 440px; }
/* summary (wide screens): what is chosen so far, in a thin gold frame, staying in view */
.bp-sum { padding: 26px 28px 22px; border: 1px solid var(--line-2); background: var(--panel); }
.sum-title { margin-bottom: 8px; font: 400 .9375rem var(--font-c); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.sum-list > div { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sum-list dt { color: var(--text-2); font-size: .8125rem; font-weight: 600; }
.sum-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 1.375rem/1.2 var(--font-d); letter-spacing: 0; overflow-wrap: anywhere; }
.sum-sub { color: var(--accent); font-size: .9375rem; }
.sum-empty { color: var(--text-3); }
.sum-av { width: 36px; }
.sum-list .sum-total { border-bottom: 0; }
.sum-total dd { font: 400 2rem/1.1 var(--font-d); }
.bp-sum .hint { margin-top: 4px; }
@media (min-width: 1024px) {
.bp-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.bp-sum { display: block; position: sticky; top: calc(var(--header-h) + 24px); }
.bp-sum[hidden] { display: none; }
.bp.is-done .bp-grid { grid-template-columns: minmax(0, 1fr); }
}
/* offline: call or visit, with the hours */
.bp-off { display: grid; gap: 40px; }
.bp-off-lead { max-width: 30ch; margin-bottom: 24px; font: 300 clamp(1.5rem, 5.5vw, 2.25rem)/1.25 var(--font-c); text-wrap: pretty; }
@media (min-width: 1024px) {
.bp-off { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
}
/* empty page: blank ruled lines with the note written on them */
.empty { position: relative; max-width: 760px; }
.empty-lines { position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--line-2); pointer-events: none; }
.empty-lines i { display: block; height: var(--line-h); border-bottom: 1px solid var(--line); }
.empty-text { position: relative; top: 9px; min-height: calc(var(--line-h) * 3); padding-top: 1px; font-family: var(--font-d); font-weight: 400; font-size: clamp(1.5rem, 5.4vw, 2rem); line-height: var(--line-h); letter-spacing: .01em; color: var(--text); max-width: 22ch; text-wrap: pretty; }
.empty .actions { margin-top: 28px; }
.empty-after { margin-top: 22px; font-size: 1.1875rem; }
.viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); }
.viewer::backdrop { background: rgba(0, 0, 0, .9); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer-fig { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.viewer-fig img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; }
.viewer-count { font-family: var(--font-c); letter-spacing: .06em; color: var(--text-2); }
.viewer-ui { display: flex; justify-content: center; gap: 12px; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--btn-line); border-radius: 50%; background: transparent; color: var(--text); touch-action: manipulation; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms var(--ease-out); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
.icon-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
}
/* ================================================================ booking form */
.book { max-width: 640px; }
.book-fields { display: grid; gap: 22px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { font-weight: 600; font-size: .9375rem; line-height: 1.35; padding: 0; }
.opt { font-weight: 400; color: var(--text-2); }
.req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font-size: 1.0625rem; line-height: 1.4;
  background: var(--field); border: 1px solid var(--field-line); border-radius: var(--r-field); color: var(--text);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.field textarea { resize: vertical; min-height: 104px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9BA8C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field select option { background: var(--bg); color: var(--text); }
.field input[type=date] { -webkit-appearance: none; appearance: none; font-family: var(--font-c); font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); background: var(--bg-2); }
@media (hover: hover) and (pointer: fine) {
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-2); }
}
.field [aria-invalid=true] { border-color: var(--err); }
.hint { font-size: .875rem; color: var(--text-2); }
.hint:empty { display: none; }
.field-error { color: var(--err); font-weight: 600; font-size: .9375rem; }
fieldset[aria-invalid=true] .sheet { border-top-color: var(--err); }
.check-field { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.check-field input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 10px 0 0; border: 1.5px solid var(--field-line); border-radius: 7px; background: var(--field); cursor: pointer; }
.check-field input::after { content: ''; width: 12px; height: 7px; border-left: 2px solid var(--on-gold); border-bottom: 2px solid var(--on-gold); transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.check-field input:checked { background: var(--accent); border-color: var(--accent); }
.check-field input:checked::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.check-field input:hover { border-color: var(--text-2); }
}
.check-field label { padding: 8px 0; line-height: 1.45; cursor: pointer; }
.check-field .field-error { grid-column: 2; }
.check-field input[aria-invalid=true] { outline: 2px solid var(--err); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.book-out:empty { display: none; }
.notice { padding: 18px 0 20px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.notice p { font-weight: 600; font-size: 1.0625rem; margin-bottom: 14px; max-width: 52ch; }
@media (min-width: 768px) {
.page-book .field > label, .page-book .field > legend { top: 15px; }
.page-book .field > label .opt { display: block; }
}
/* sent: a gold stamp on the request */
.sent { max-width: 640px; display: grid; gap: 14px; justify-items: start; }
.sent h2:focus { outline: none; }
.sent p { font-size: 1.125rem; max-width: 46ch; }
.sent .actions { margin-top: 10px; }
.stamp { display: inline-block; padding: 5px 16px 4px; border: 1px solid var(--accent); outline: 1px solid var(--line-2); outline-offset: 3px; color: var(--accent); font-family: var(--font-c); font-weight: 500; font-size: 1.25rem; line-height: 1.1; letter-spacing: .3em; text-transform: uppercase; transform: rotate(-3deg); animation: stamp 320ms var(--ease-out) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-3deg) scale(1.3); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
.sent h3:focus { outline: none; }
.sent .hint { font-size: .9375rem; }
.receipt { display: grid; width: 100%; max-width: 520px; border-top: 1px solid var(--line-2); }
.receipt > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.receipt dt { color: var(--text-2); font-size: .9375rem; font-weight: 600; flex: none; }
.receipt dd { text-align: right; font-family: var(--font-c); font-size: 1.25rem; line-height: 1.25; letter-spacing: .02em; }
/* text that acts: a button styled as an underlined link */
.text-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font-weight: 600; font-size: .9375rem; text-align: left; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: .24em; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: color 160ms ease, text-decoration-color 160ms ease; }
.text-btn:active { color: var(--accent); }
.text-btn[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
.text-btn:hover { color: var(--accent); text-decoration-color: var(--accent); }
}
.btn-sm { --h: 44px; padding: 0 18px; font-size: 1.0625rem; }
.btn-danger { background: transparent; color: var(--err); border-color: var(--err); }
.btn-danger::before { background: var(--err); }
@media (hover: hover) and (pointer: fine) {
.btn-danger:hover { color: var(--bg); }
}
.loading { padding: 14px 0; color: var(--text-2); font-weight: 600; }
.notice p:last-child { margin-bottom: 0; }
.form-out:empty { display: none; }
/* ================================================================ booking flow: five ruled steps, the number in the margin */
.flow { max-width: 760px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.step { position: relative; border-bottom: 1px solid var(--line); }
.flow-msg { margin: 0 0 14px; padding: 12px 0; border-top: 1px solid var(--accent); font-weight: 600; max-width: 52ch; }
.pick-status { display: grid; gap: 2px; justify-items: start; padding: 14px 0 4px; }
.pick-status p { font-weight: 600; }
/* choices as ledger lines (service: duration in the margin, price on the right; barber: avatar) */
.picks { border-top: 1px solid var(--line-2); }
.pick { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 4px 14px; width: 100%; min-height: 64px; padding: 12px 10px 12px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease; }
.pick:active, .pick[aria-pressed=true] { background: var(--raised); }
.pick:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
.pick:hover { background: var(--raised); }
}
.pick-dur { font: 400 .9375rem/1.2 var(--font-c); letter-spacing: .04em; color: var(--accent); }
.pick-main { display: grid; gap: 2px; min-width: 0; }
.pick-name { font: 400 1.5625rem/1.1 var(--font-d); letter-spacing: 0; overflow-wrap: anywhere; }
.pick-desc { font-size: .9375rem; line-height: 1.4; color: var(--text-2); }
.pick-price { font: 400 1.625rem/1.1 var(--font-d); letter-spacing: 0; white-space: nowrap; }
.pick-check { width: 22px; height: 22px; color: var(--gold); opacity: 0; }
.pick-check svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pick[aria-pressed=true] .pick-check { opacity: 1; }
.pick-barber { grid-template-columns: auto minmax(0, 1fr) 22px; }
/* avatars: square photo, or the initial on a dark tile with a thin gold rule */
.avatar { position: relative; display: block; flex: none; width: 56px; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); container-type: inline-size; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-init { display: grid; place-items: center; background: var(--bg-2); }
.avatar-init > span { font: 300 52cqi/1 var(--font-c); color: var(--text); transform: translateY(-4%); }
.avatar-init::after { content: ''; position: absolute; left: 26%; right: 26%; bottom: 17%; height: 1px; background: var(--accent); opacity: .8; }
/* the month: ruled week lines (Monday first), the chosen day filled off-white, today marked with the gold dot */
.cal { max-width: 520px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cal-title { font: 400 1.875rem/1.1 var(--font-d); letter-spacing: 0; }
.icon-sm { width: 44px; height: 44px; }
.icon-btn[disabled] { opacity: .3; cursor: default; }
.cal-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-bottom: 6px; }
.cal-wd span { text-align: center; font: 500 .8125rem var(--font-c); letter-spacing: .06em; color: var(--text-2); }
.cal-grid { border-top: 1px solid var(--line-2); transition: opacity 160ms ease; }
.cal.is-busy .cal-grid { opacity: .45; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0; border: 0; background: none; color: var(--text); font: 500 1.25rem/1 var(--font-c); letter-spacing: .02em; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, color 160ms ease; }
.cal-day + .cal-day { border-left: 1px solid var(--line); }
.cal-day.is-off { color: var(--text-2); opacity: .5; font-weight: 400; cursor: default; }
.cal-day[aria-pressed=true] { background: var(--text); color: var(--bg); font-weight: 600; }
.cal-day:not(.is-off):active { background: var(--raised); }
.cal-day:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
.cal-day:not(.is-off):not([aria-pressed=true]):hover { background: var(--raised); }
}
.cal-today { position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
/* small phones: the month starts at the gold rule so each day stays a full touch target */
/* free times: the day sheet with one line per hour and a cell per start time */
button.slot { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.slot[aria-pressed=true] { background: var(--text); color: var(--bg); font-weight: 600; }
button.slot:active { background: var(--raised); }
button.slot:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
button.slot:not([aria-pressed=true]):hover { background: var(--raised); }
}
/* details: the logged-in customer's details instead of the fields */
.book-login { font-size: .9375rem; }
.as-me { display: grid; gap: 8px; justify-items: start; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.as-me-title { font-weight: 600; font-size: .9375rem; color: var(--text-2); }
.as-me-list { display: grid; gap: 4px; }
.as-me-list div { display: flex; flex-wrap: wrap; gap: 0 12px; }
.as-me-list dt { min-width: 7.5ch; color: var(--text-2); }
.as-me-list dd { overflow-wrap: anywhere; }
.book-go { display: grid; gap: 10px; }
/* ================================================================ account link (header + menu) */
.acct-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 8px; color: var(--text); text-decoration: none; font: 500 1rem var(--font-c); text-transform: uppercase; letter-spacing: .1em; touch-action: manipulation; transition: color 160ms ease; }
.acct-link[hidden], .menu-acct[hidden] { display: none; }
.acct-link svg, .menu-acct svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.acct-link[aria-current] svg { color: var(--accent); }
.acct-label { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
.acct-link:hover, .menu-acct:hover { color: var(--accent); }
}
/* phones: the icon alone in the header (its name is in the label); the menu shows it written out */
@media (max-width: 1023px) {
.header .acct-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu-acct { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; justify-self: start; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.menu-acct .acct-label { max-width: 20em; }
/* ================================================================ customer portal */
.page-acct .row-c > * { max-width: 980px; }
.acct-head { margin-bottom: 24px; }
.acct-head h1 { overflow-wrap: anywhere; }
.acct-head h1:focus { outline: none; }
.acct-head .lead { overflow-wrap: anywhere; }
.acct-form { margin-top: 8px; }
.acct-alt { color: var(--text-2); font-size: .9375rem; }
.acct-alt .text-btn, .acct-links .text-btn { margin-left: 2px; }
.acct-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 4px 0 32px; border-bottom: 1px solid var(--line-2); }
.tabs { display: flex; }
.tab { position: relative; min-height: 48px; margin-right: 22px; padding: 0; border: 0; background: none; color: var(--text-2); font: 500 1.125rem var(--font-c); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; touch-action: manipulation; transition: color 160ms ease; }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease-out); }
.tab[aria-current] { color: var(--text); }
.tab[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
.tab:hover { color: var(--text); }
}
.acct-h { margin-bottom: 14px; }
.policy { max-width: 62ch; margin-bottom: 16px; color: var(--text-2); font-size: .9375rem; }
.appts { list-style: none; border-top: 1px solid var(--line-2); }
.appt { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
.appt { grid-template-columns: 72px minmax(0, 1fr); gap: 0 20px; }
}
.appt-m { display: grid; justify-items: center; align-content: start; padding-top: 2px; text-align: center; font: 400 .8125rem/1.15 var(--font-c); letter-spacing: .04em; color: var(--text-2); }
.appt-m b { font-weight: 300; font-size: 1.625rem; line-height: 1; color: var(--text); }
@media (min-width: 768px) {
.appt-m { font-size: .9375rem; }
.appt-m b { font-size: 2.25rem; }
}
.appt-when { font: 400 1.75rem/1.1 var(--font-d); letter-spacing: 0; }
.appt-what { margin-top: 2px; color: var(--text-2); }
.appt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.appt-price { margin-left: auto; font: 400 1.5rem var(--font-d); letter-spacing: 0; }
.appt.is-cancelled .appt-when { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--line-2); }
.appts.is-past .appt-m b { color: var(--text-2); }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--text); }
.tag-cancelled, .tag-no_show, .tag-pay-unpaid { color: var(--text-2); }
.appt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; }
.appt-late { margin-top: 12px; }
.appt-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.confirm-q { font-weight: 600; margin-bottom: 12px; max-width: 46ch; }
.move > h3 { margin-bottom: 10px; }
.move > h3:focus { outline: none; }
.move-day { margin: 16px 0 4px; font: 400 1.25rem var(--font-c); letter-spacing: .01em; }
.move .actions { margin-top: 18px; }
.move .form-out { margin-top: 14px; }
.acct-danger { margin-top: 64px; border-top: 1px solid var(--line); }
.danger > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; list-style: none; }
.danger > summary::-webkit-details-marker { display: none; }
.danger > summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--ease-out); }
.danger[open] > summary svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
.danger > summary:hover .h-sm { color: var(--err); }
}
.danger-text { max-width: 62ch; margin: 4px 0 18px; color: var(--text-soft); }
/* password field with a show / hide switch inside */
.pw { position: relative; }
.field .pw input { padding-right: 84px; }
.pw-toggle { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 72px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); font-weight: 600; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .24em; cursor: pointer; touch-action: manipulation; }
.pw-toggle:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
.pw-toggle:hover { color: var(--accent); }
}
/* ================================================================ interaction pass: one easing family (--ease-out, strong ease-out),
   press 100–120ms, UI 160–240ms, reveals ≤ 400ms. Only transform and opacity move; colours fade. Hover motion only for a
   fine pointer; touch gets press feedback instead. */
:root { --champagne: #E6CDA2; --dur-press: 110ms; --dur-ui: 180ms; }
/* nav: each letter tilts a few degrees on its baseline and settles, letter by letter (18ms apart, ≤ 360ms in all);
   the gold underline grows under the hovered link and stays under the section on screen */
.ltrs { display: inline-block; pointer-events: none; transition: transform var(--dur-press) var(--ease-out); }
.ltr { display: inline-block; transform-origin: 50% 85%; }
@keyframes ltr-tilt { 0% { transform: none; } 42% { transform: translateY(-1.5px) rotate(-7deg); } 100% { transform: none; } }
.nav a { transition: color var(--dur-ui) ease; }
.nav a.is-active { color: var(--champagne); }
.nav a:focus-visible { color: var(--champagne); }
.nav a:focus-visible .ltr { animation: ltr-tilt 260ms var(--ease-out) calc(var(--i) * 18ms) both; }
@media (hover: hover) and (pointer: fine) {
.nav a:hover { color: var(--champagne); }
.nav a:hover .ltr { animation: ltr-tilt 260ms var(--ease-out) calc(var(--i) * 18ms) both; }
}
/* touch: a short press instead of a hover */
.nav a:active { color: var(--champagne); }
.nav a:active .ltrs { transform: translateY(1px); }
.menu-links a { transition: color var(--dur-ui) ease; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.menu-links a.is-active { color: var(--champagne); }
.menu-links a:active { color: var(--champagne); }
.menu-links a:active .ltrs { transform: translateX(6px); }
.menu-links a:focus-visible .ltr { animation: ltr-tilt 260ms var(--ease-out) calc(var(--i) * 18ms) both; }
/* the gold call to action: lifts 2px, a sheen crosses once, a soft light rim comes up, the icon steps forward; press 0.98 */
.btn svg { transition: transform var(--dur-ui) var(--ease-out); }
.btn-gold { transition: color 280ms ease, border-color 280ms ease, transform var(--dur-ui) var(--ease-out); }
.btn-gold::before { left: 0; top: 0; width: 42%; height: 100%; aspect-ratio: auto; border-radius: 0; background: linear-gradient(100deg, rgba(255, 252, 240, 0), rgba(255, 252, 240, .55), rgba(255, 252, 240, 0)); transform: translateX(-130%) skewX(-20deg); transition: none; }
.btn-gold::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 250, 235, .5), inset 0 -12px 24px rgba(255, 248, 228, .3); opacity: 0; transition: opacity 220ms ease; }
@media (hover: hover) and (pointer: fine) {
.btn-gold:hover { transform: translateY(-2px); border-color: #EBD2A6; }
.btn-gold:hover::before { transform: translateX(360%) skewX(-20deg); transition: transform 400ms var(--ease-out); }
.btn-gold:hover::after { opacity: 1; }
.btn-gold:hover svg { transform: translateX(2px); }
.btn-line:hover svg, .btn-light:hover svg { transform: translateX(2px); }
}
.btn-gold:focus-visible { transform: translateY(-2px); }
.btn-gold:focus-visible::after { opacity: 1; }
.btn-gold:active { transform: scale(.98); transition-duration: var(--dur-press); }
/* links that act: the arrow steps forward */
.text-link svg { transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.text-link:hover svg { transform: translateX(3px); }
}
@keyframes viewer-in { from { opacity: 0; transform: scale(.98); } }
@keyframes viewer-out { to { opacity: 0; transform: scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.viewer[open] { animation: viewer-in 220ms var(--ease-out); }
.viewer[open]::backdrop { animation: fade-in 220ms ease; }
.viewer.is-closing { animation: viewer-out 160ms var(--ease-out) forwards; }
.viewer.is-closing::backdrop { animation: fade-out 160ms ease forwards; }
/* booking: the opened step settles in; chosen states; press on days and times; skeleton while the times load; messages */
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
.pick-check { transform: scale(.7); transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.pick[aria-pressed=true] .pick-check { transform: none; }
.cal-day .num, button.slot .num { display: inline-block; transition: transform var(--dur-press) var(--ease-out); }
.cal-day:not(.is-off):active .num, button.slot:active .num { transform: scale(.92); }
@keyframes skel { from { opacity: .3; } to { opacity: .75; } }
.is-skel .slot { pointer-events: none; }
.is-skel .slot i { display: block; width: min(46px, 70%); height: 12px; border-radius: 2px; background: var(--line-2); animation: skel 900ms ease-in-out infinite alternate; }
.flow-msg, .notice, .field-error, .pick-status { animation: rise-in 200ms var(--ease-out); }
/* ================================================================ reduced motion: no lockup settle, no rule draw, no stamp, no fades */
@media (prefers-reduced-motion: reduce) {
/* nav: colour and underline only (the underline fades instead of growing) */
.ltr { animation: none !important; }
.ltrs { transform: none !important; }
/* no lift, sheen, nudge, zoom or press scale; the light rim and colours still answer */
.btn:hover, .btn:active, .btn:focus-visible { transform: none !important; }
.btn-gold::before { display: none; }
.btn svg, .text-link svg, .photo img, .cal-day .num, button.slot .num { transform: none !important; transition: none; }
.flow-msg, .notice, .field-error, .pick-status { animation: none; }
.viewer[open], .viewer.is-closing { animation: none; }
.is-skel .slot i { animation: none; opacity: .5; }
/* the slide still drags, without the spring back */
.slide-knob, .slide-fill, .slide-text { transition: none; }
.slide:hover .slide-knob { transform: none; }
.slide-spin { animation: skel 900ms ease-in-out infinite alternate; }
.bp-back svg { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.is-ready .hero-lockup, .is-ready .hero-mark .brand-xl, .is-ready .hero-rule::before, .is-ready .hero-rule::after, .stamp { animation: none; }
#app > * { transition: none; }
.slot, .menu-btn-icon i, .logo { transition: none; }
.pick, .cal-day, .cal-grid, .tab, .tab::after, .text-btn, .acct-link, .danger > summary svg { transition: none; }
}
/* ================================================================ intro (first visit of a session; index.html carries it, visible from the first paint)
   Pure black. The gold E is wiped in from the top, a gold cut crosses it, the E-CUTZ word is revealed left to right, a thin
   gold line fills beneath; then the curtain lifts (clip-path) and shows the hero. ~1.9 s; app.js lifts it when the page is
   ready (never later than ~3 s, CSS and data.js cap it too). The page cannot scroll while it plays. */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #10100F; pointer-events: none; clip-path: inset(0); transition: clip-path 700ms cubic-bezier(.77, 0, .175, 1); animation: intro-max 400ms ease-out 3s forwards; }
.intro-mark { position: relative; display: grid; justify-items: center; gap: 22px; transition: opacity 400ms ease, transform 600ms var(--ease-out); }
.intro-e { width: min(32vw, 132px); height: auto; clip-path: inset(0 0 100% 0); animation: intro-e 700ms cubic-bezier(.77, 0, .175, 1) 100ms forwards; }
.intro-w { width: min(48vw, 220px); height: auto; clip-path: inset(0 100% 0 0); animation: intro-w 700ms cubic-bezier(.77, 0, .175, 1) 750ms forwards; }
.intro-cut { position: absolute; left: 50%; top: calc(min(32vw, 132px) * .5); width: min(52vw, 220px); height: 2px; margin: -1px 0 0 calc(min(52vw, 220px) / -2); transform: rotate(-25deg); }
.intro-cut::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(235, 210, 166, 0), var(--gold-hi) 35%, var(--gold) 70%, rgba(217, 186, 140, 0)); transform-origin: 0 50%; animation: intro-cut 500ms cubic-bezier(.65, 0, .35, 1) 600ms both; }
.intro-bar { display: block; width: min(40vw, 160px); height: 1px; background: rgba(245, 240, 230, .14); overflow: hidden; }
.intro-bar::after { content: ''; display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; animation: intro-bar 1500ms cubic-bezier(.4, 0, .2, 1) 300ms forwards; }
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro.is-out .intro-mark { opacity: 0; transform: translateY(-10px); }
@keyframes intro-e { to { clip-path: inset(0); } }
@keyframes intro-w { to { clip-path: inset(0); } }
@keyframes intro-cut { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes intro-bar { to { transform: scaleX(1); } }
@keyframes intro-max { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
html:has(#intro:not(.is-out)) { overflow: hidden; }
/* later loads in the same session: the mark stands still and the curtain lifts as soon as the page is ready */
.intro-seen .intro-e, .intro-seen .intro-w { animation: none; clip-path: inset(0); }
.intro-seen .intro-cut, .intro-seen .intro-bar { display: none; }
.intro-seen .intro { transition-duration: 300ms; }
@media (prefers-reduced-motion: reduce) {
.intro-e, .intro-w { animation: none; clip-path: inset(0); }
.intro-cut, .intro-bar { display: none; }
.intro { clip-path: none; transition: opacity 150ms ease; }
.intro.is-out { clip-path: none; opacity: 0; }
.intro-mark, .intro.is-out .intro-mark { transition: none; transform: none; }
}
/* ================================================================ page changes: the old view fades out, a gold line
   runs along the bottom of the header, the new view fades in (≈ 400 ms). Reduced motion: a short cross-fade. */
#app, .footer { transition: opacity 260ms var(--ease-out); }
.pt-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
html.pt .pt-line { animation: pt-line 420ms var(--ease-out) both; }
@keyframes pt-line { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
html.pt .pt-line { animation: none; }
#app, .footer { transition: opacity 120ms ease; }
}
/* ================================================================ legal pages: a photo-free head, the contents, the
   text at a reading width */
.legal-head { padding: 36px 0 28px; border-bottom: 1px solid var(--line); }
.legal-head .bp-back { color: var(--text-2); }
.legal-title { max-width: 18ch; font: 400 clamp(2.5rem, 9vw, 4.5rem)/1 var(--font-d); letter-spacing: -.01em; text-wrap: balance; }
.legal-title::after { content: ''; display: block; width: 56px; height: 1px; margin-top: 18px; background: var(--accent); }
.legal-title:focus, .legal-h:focus { outline: none; }
.legal-lead { max-width: 58ch; margin-top: 18px; color: var(--text-2); font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.legal-updated { margin-top: 10px; color: var(--text-3); font-size: .875rem; }
.legal-grid { display: grid; gap: 36px; padding-top: 32px; padding-bottom: 88px; }
.legal-toc-h { margin-bottom: 8px; font: 400 .875rem var(--font-c); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--line); }
.legal-toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.legal-toc a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; color: var(--text-2); text-decoration: none; font-size: .9375rem; line-height: 1.3; transition: color 160ms ease; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); min-width: 1.7em; font: 400 .8125rem var(--font-c); letter-spacing: .06em; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
.legal-toc a:hover { color: var(--text); }
}
.legal-body { max-width: 70ch; }
.legal-sec + .legal-sec { margin-top: 36px; }
.legal-h { margin-bottom: 10px; font: 400 1.875rem/1.15 var(--font-d); letter-spacing: 0; }
.legal-sec p { color: var(--text-soft); line-height: 1.65; }
.legal-sec p + p { margin-top: 12px; }
.legal-also { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-2); }
@media (min-width: 768px) {
.legal-head { padding: 56px 0 40px; }
.legal-grid { padding-top: 48px; }
}
@media (min-width: 1024px) {
.legal-grid { grid-template-columns: 260px minmax(0, 70ch); gap: 72px; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
.nf-links { margin-top: 28px; color: var(--text-2); }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* ================================================================ back to top: the hair clipper */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 22;
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: rgb(var(--bg-rgb) / .92); color: var(--accent); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 220ms ease, transform 300ms var(--ease-out), visibility 0s linear 300ms, background-color 200ms ease, border-color 200ms ease; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms ease, transform 320ms var(--ease-out), visibility 0s, background-color 200ms ease, border-color 200ms ease; }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.clip { position: relative; display: block; width: 22px; height: 33px; }
.clip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.clip-teeth { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; }
.clip-blade { fill: var(--gold); }
.clip-head { fill: #1B1B1B; stroke: var(--gold); stroke-width: .9; stroke-linejoin: round; }
.clip-body { fill: var(--panel); stroke: var(--gold); stroke-width: 1; }
.clip-slot { fill: #050505; stroke: #2A2A2A; stroke-width: .8; }
.clip-switch { fill: var(--gold-hi); }
.clip-grip { fill: none; stroke: #333333; stroke-width: 1.2; stroke-linecap: round; }
.clip-glow { position: absolute; left: 50%; top: -7px; width: 36px; height: 18px; margin-left: -18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 210, 166, .6), rgba(235, 210, 166, 0)); opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
@keyframes clip-buzz { 0% { transform: translate(-.7px, .3px) rotate(-.5deg); } 50% { transform: translate(.6px, -.4px) rotate(.5deg); } 100% { transform: translate(-.4px, -.2px) rotate(-.3deg); } }
@media (hover: hover) and (pointer: fine) {
.to-top:hover .clip, .to-top:focus-visible .clip { animation: clip-buzz 50ms linear infinite; }
.to-top:hover .clip-glow, .to-top:focus-visible .clip-glow { opacity: 1; }
.to-top:hover { border-color: var(--gold); }
}
@media (hover: none) {
.to-top:active .clip { animation: clip-buzz 50ms linear 6; }
}
/* the launch: the clipper flies up with the scroll; the button's ring fades behind it */
.to-top.is-launch { background-color: rgba(15, 15, 15, 0); border-color: transparent; opacity: 0; transition: background-color 160ms ease, border-color 160ms ease, opacity 180ms ease 540ms; }
.to-top.is-launch .clip { animation: clip-launch 720ms cubic-bezier(.55, 0, .25, 1) forwards; }
.to-top.is-launch .clip-glow { opacity: 1; }
@keyframes clip-launch { 0% { transform: none; } 16% { transform: translateY(6px) rotate(3deg); } 100% { transform: translateY(-110vh) rotate(-10deg); } }
.menu-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 767px) {
body[data-route=book] .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.to-top .clip, .to-top:hover .clip, .to-top:active .clip, .to-top.is-launch .clip { animation: none !important; }
.to-top, .to-top.is-on { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
}
/* ================================================================ the booking wizard: 1 barber · 2 services · 3 day and
   time · 4 summary. The stepper's line fills in gold; the step changes slide (direction-aware, ≤ 320 ms). */
.wz-track { position: relative; margin-bottom: 30px; }
.wz-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.wz-step { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.wz-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; touch-action: manipulation; }
.wz-dot::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); transition: border-color 200ms ease, background-color 200ms ease, transform 240ms var(--ease-out); }
.wz-dot:disabled { cursor: default; }
.wz-n { position: relative; font: 400 1.0625rem/1 var(--font-c); transition: opacity 160ms ease; }
.wz-check { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; fill: none; stroke: var(--on-gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.wz-label { font: 500 .8125rem/1.2 var(--font-c); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.is-current .wz-dot { color: var(--accent); }
.is-current .wz-dot::before { border-color: var(--accent); transform: scale(1.1); animation: wz-dot-in 320ms var(--ease-out); }
.is-current .wz-label { color: var(--text); }
.is-done .wz-dot::before { background: var(--accent); border-color: var(--accent); }
.is-done .wz-n { opacity: 0; }
.is-done .wz-check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 300ms var(--ease-out) 60ms; }
.is-future .wz-dot, .is-future .wz-label { color: var(--text-3); }
@keyframes wz-dot-in { from { transform: scale(.6); } }
@media (hover: hover) and (pointer: fine) {
.is-done .wz-dot:hover::before { transform: scale(1.12); }
}
.wz-dot:active:not(:disabled)::before { transform: scale(.94); }
/* the line between the first and the last dot */
.wz-line { position: absolute; left: 12.5%; right: 12.5%; top: 21.5px; height: 1px; background: var(--line-2); }
.wz-line i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 350ms var(--ease-out); }
/* phones: only the current label, the first and last held to the edges */
@media (max-width: 559px) {
.wz-step:not(.is-current) .wz-label { visibility: hidden; }
.wz-step:first-child .wz-label { justify-self: start; }
.wz-step:last-child .wz-label { justify-self: end; }
}
.wz-stage { position: relative; overflow-x: clip; }
.wz-panel.is-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.wz-title { margin-bottom: 18px; font: 400 clamp(2.125rem, 7vw, 3rem)/1.02 var(--font-d); letter-spacing: -.005em; text-wrap: balance; }
.wz-title:focus { outline: none; }
.wz-hint { margin: -6px 0 16px; color: var(--text-2); font-size: .9375rem; }
.wz-hint:empty { display: none; }
@keyframes wz-in-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes wz-in-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes wz-out-fwd { to { opacity: 0; transform: translateX(-28px); } }
@keyframes wz-out-back { to { opacity: 0; transform: translateX(28px); } }
.wz-in-fwd { animation: wz-in-fwd 320ms var(--ease-out) both; }
.wz-in-back { animation: wz-in-back 320ms var(--ease-out) both; }
.wz-out-fwd { animation: wz-out-fwd 240ms cubic-bezier(.4, 0, 1, 1) both; }
.wz-out-back { animation: wz-out-back 240ms cubic-bezier(.4, 0, 1, 1) both; }
/* a chosen card or time: a quick press, a gold ring */
.pick { transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms var(--ease-out); }
.pick:active { transform: scale(.985); }
.pick[aria-pressed=true] { box-shadow: inset 0 0 0 1px var(--accent); }
button.slot[aria-pressed=true] { box-shadow: inset 0 0 0 1px var(--accent); }
.svc-total { margin-top: 18px; padding: 14px 0 0; border-top: 1px solid var(--line-2); font: 400 1.5rem/1.3 var(--font-d); letter-spacing: 0; }
.svc-total.is-bump { animation: rise-in 240ms var(--ease-out); }
.wz-day { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.wz-day-h { margin-bottom: 12px; font: 400 1.875rem/1.1 var(--font-d); letter-spacing: 0; }
.sum-line { display: block; flex-basis: 100%; }
/* Back / Continue under the step; phones: a bar at the bottom (steps 1–3) */
.wz-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.wz-sum { display: none; flex: 1; min-width: 0; }
.wz-why { flex: 1; min-width: 0; color: var(--text-2); font-size: .875rem; text-align: right; }
.wz-next { margin-left: auto; }
.wz-next[aria-disabled=true] { opacity: .5; }
.wz-next[hidden] { display: none; }
@media (max-width: 767px) {
.wz-nav:not(.is-last) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 10px var(--gx-r) calc(10px + env(safe-area-inset-bottom)) var(--gx-l); background: rgb(var(--bg-rgb) / .97); border-top: 1px solid var(--line-2); transition: transform 240ms var(--ease-out); }
.wz-nav:not(.is-last) .wz-sum { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--accent); font-size: .875rem; }
.wz-nav:not(.is-last) .wz-why { display: none; }
.wz-nav.has-why:not(.is-last) .wz-sum { display: none; }
.wz-nav.has-why:not(.is-last) .wz-why { display: block; text-align: left; }
.is-typing .wz-nav, .menu-open .wz-nav { transform: translateY(110%); }
body[data-route=book] .footer-inner { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
/* step 4: the summary card, each row leading back to its step; the rows come in with a short stagger */
.recap { margin-bottom: 32px; padding: 4px 20px; border: 1px solid var(--line-2); background: var(--panel); }
.recap-row { display: grid; grid-template-columns: minmax(84px, 28%) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); animation: rise-in 280ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.recap-row:last-child { border-bottom: 0; }
.recap-row dt { color: var(--text-2); font-size: .875rem; font-weight: 600; }
.recap-row dd { min-width: 0; font: 400 1.1875rem/1.3 var(--font-c); letter-spacing: .02em; overflow-wrap: anywhere; }
.recap-svcs { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.recap-svcs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.recap-svcs .num { color: var(--accent); font-size: .9375rem; }
.recap-barber { display: flex; align-items: center; gap: 10px; }
.recap-price { font: 400 1.875rem/1 var(--font-d); }
.recap-change { justify-self: end; }
@media (max-width: 479px) {
.recap { padding: 4px 16px; }
.recap-row { grid-template-columns: minmax(0, 1fr) auto; }
.recap-row dt { grid-column: 1 / -1; }
}
/* a logged-in customer: terms and privacy accepted with the account */
.accepted { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: .9375rem; }
.accepted svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
.wz-in-fwd, .wz-in-back { animation: fade-in 140ms ease both; }
.wz-out-fwd, .wz-out-back { animation: fade-out 120ms ease both; }
.wz-line i, .wz-dot::before, .wz-check, .wz-nav { transition: none; }
.is-current .wz-dot::before { animation: none; transform: none; }
.pick:active { transform: none; }
.recap-row, .svc-total.is-bump { animation: none; }
}
/* ================================================================ Phase A: the multi-page site (owner request 2026-11-01)
   Home = hero + six bands; Services, Barbers, Gallery, About, Contact and the barber profile are pages of their own.
   Rhythm: near-black bands alternate with the lifted panel tone, thin 1px rules between them, 64–128px of air.
   Headings: Instrument Serif (the second line of a two-line heading italic and muted); labels: Sofia Sans Condensed
   small caps with a short gold dash. Gold stays a thin accent; the header's "Rezervo" is the one gold button. */
.band { position: relative; padding: clamp(64px, 9vw, 128px) 0; }
.band-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-head { display: grid; gap: 20px 48px; margin-bottom: clamp(32px, 5vw, 64px); }
.band-side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
@media (min-width: 900px) {
.band-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.band-side { flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
}
.band-title { margin-top: 18px; }
/* scroll reveals: once, transform + opacity, <= 400ms; nothing is hidden unless this script runs (html.js-rv) */
.js-rv .rv { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js-rv .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-rv .rv, .js-rv .rv.is-in { opacity: 1; transform: none; transition: none; }
}
/* 1. the house: label + number and a portrait on the left, the heading, two text columns and four facts on the right */
.house { display: grid; gap: 40px; }
.house-pic { position: relative; margin: 28px 0 0; overflow: hidden; background: var(--panel); }
.house-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.8) contrast(1.03) brightness(.95); }
.house-cols { display: grid; gap: 22px 56px; margin-top: 36px; }
.house-lead { font-size: 1.25rem; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.house-p { color: var(--text-2); line-height: 1.65; text-wrap: pretty; }
.facts4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; margin: 44px 0 36px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.fact { min-width: 0; padding: 0 16px 0 0; }
.fact dt { margin-bottom: 8px; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.fact dd { font: 400 1.875rem/1.1 var(--font-d); overflow-wrap: anywhere; }
@media (min-width: 700px) {
.house-cols { grid-template-columns: 1.3fr 1fr; }
.facts4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fact { padding: 0 24px; border-left: 1px solid var(--line-2); }
.fact:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 900px) {
.house { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 96px); align-items: start; }
.house-pic { margin-top: 36px; max-width: 440px; }
}
/* 2. the short menu: heading left, a small photo and a line right, three numbered rows (or the four categories) */
.mrows { list-style: none; margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.mrows > li { border-bottom: 1px solid var(--line-2); }
.mrow { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; grid-template-areas: "n body arw" ". meta arw"; gap: 6px 14px; align-items: center; padding: 24px 0; color: var(--text); text-decoration: none; touch-action: manipulation; }
.mrow-n { grid-area: n; align-self: start; padding-top: 6px; font: italic 400 1.125rem/1 var(--font-d); color: var(--text-2); }
.mrow-body { grid-area: body; display: grid; gap: 6px; min-width: 0; }
.mrow-name { font: 400 clamp(1.875rem, 3.8vw, 2.625rem)/1.08 var(--font-d); overflow-wrap: anywhere; transition: color 200ms ease; }
.mrow-desc { color: var(--text-2); font-size: .9375rem; line-height: 1.45; max-width: 56ch; }
.mrow-inc { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: .875rem; }
.mrow-inc li::before { content: '— '; color: var(--text-3); }
.mrow-meta { grid-area: meta; display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; }
.mrow-dur { font: 500 .75rem/1.2 var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.mrow-price { font: 400 clamp(1.875rem, 3.4vw, 2.5rem)/1 var(--font-d); white-space: nowrap; }
.mrow .arw { grid-area: arw; }
@media (hover: hover) and (pointer: fine) {
.mrow:hover .mrow-name { color: var(--champagne); }
}
@media (min-width: 768px) {
.mrow { grid-template-columns: 56px minmax(0, 1fr) 110px 150px 44px; grid-template-areas: "n body dur price arw"; gap: 4px 24px; padding: 32px 0; }
.mrow-meta { display: contents; }
.mrow-dur { grid-area: dur; text-align: right; }
.mrow-price { grid-area: price; text-align: right; }
}
.mrows-cat .mrow-price { display: none; }
.mrows-cat .mrow { grid-template-columns: 32px minmax(0, 1fr) 44px; grid-template-areas: "n body arw"; }
@media (min-width: 768px) {
.mrows-cat .mrow { grid-template-columns: 56px minmax(0, 1fr) 44px; grid-template-areas: "n body arw"; }
}
/* 3. the barbers: portrait cards, the middle one lower, a muted treatment, the years on a small badge */
.tgrid { list-style: none; display: grid; gap: 52px 28px; margin: 0; padding: 0; }
.tgrid > li { min-width: 0; }
.tgrid.is-1 { max-width: 420px; }
@media (min-width: 640px) {
.tgrid.is-2, .tgrid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tgrid.is-2 > li:nth-child(2) { margin-top: 56px; }
}
@media (min-width: 960px) {
.tgrid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.tgrid.is-3 > li:nth-child(2) { margin-top: 80px; }
.tgrid.is-2 { max-width: 880px; gap: 0 48px; }
}
.tcard-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.tcard-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.88) contrast(1.05) brightness(.92); transition: filter 400ms ease, transform 500ms var(--ease-out); }
.tcard-init { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #1b1a17, #0f0f0e); font: 400 clamp(5rem, 16vw, 8rem)/1 var(--font-d); color: var(--text-2); }
.tcard-init::after { content: ''; position: absolute; left: 38%; right: 38%; bottom: 26%; height: 1px; background: var(--accent); opacity: .8; }
.tbadge { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(0, 0, 0, .82); font: 500 .75rem/1 var(--font-c); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.tcard-name { margin: 22px 0 6px; font: 400 clamp(1.875rem, 3vw, 2.375rem)/1.05 var(--font-d); overflow-wrap: anywhere; }
.tcard-name a { color: var(--text); text-decoration: none; }
.tcard-role { margin: 0; font: 500 .8125rem/1.3 var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.tcard-blurb { margin: 14px 0 0; color: var(--text-soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-spec { margin: 14px 0 0; font-size: .875rem; color: var(--text-2); }
.tcard-spec b { margin-right: 8px; font: 500 .75rem var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.tcard .tl { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
.tcard:hover .tcard-pic img { filter: grayscale(.35) contrast(1.04) brightness(1); transform: scale(1.03); }
}
/* 4. the gallery strip: an asymmetric mosaic, the caption left and the category right under each photo */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin: 0; padding: 0; list-style: none; }
.mo { margin: 0; min-width: 0; }
.mo-pic { display: block; overflow: hidden; background: var(--panel); aspect-ratio: 4 / 5; }
.mo-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.mo-cap { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-top: 10px; font-size: .875rem; color: var(--text-2); }
.mo-cap span:last-child { font: 500 .6875rem/1.4 var(--font-c); letter-spacing: .2em; text-transform: uppercase; text-align: right; }
.mo-cap:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
.mo-pic:hover img { transform: scale(1.04); }
}
@media (min-width: 768px) {
.mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; align-items: start; }
.mo-1 { grid-column: 1 / 6; }
.mo-2 { grid-column: 6 / 10; margin-top: 72px; }
.mo-3 { grid-column: 10 / 13; }
.mo-4 { grid-column: 2 / 6; }
.mo-5 { grid-column: 7 / 12; margin-top: 56px; }
.mo-2 .mo-pic { aspect-ratio: 1; }
.mo-4 .mo-pic { aspect-ratio: 5 / 4; }
.mo-5 .mo-pic { aspect-ratio: 4 / 5; }
}
/* 5. the booking band: one primary (off-white) button, the hours as a table, a tall photo with a warm dark vignette */
.bb { display: grid; gap: 48px; }
.bb-p { max-width: 46ch; margin-top: 24px; color: var(--text-2); font-size: 1.125rem; line-height: 1.6; }
.bb .actions { margin-top: 32px; }
.bb-h { margin: 0 0 12px; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.bb-addr { font-size: 1.0625rem; line-height: 1.5; }
.bb-addr .tl { margin-top: 6px; }
@media (min-width: 960px) {
.bb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
}
/* the hours as a table: thin dividers, today in bold */
.htable { margin: 0; border-top: 1px solid var(--line); }
.htable > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.htable dt { font-size: .9375rem; color: var(--text-2); }
.htable dd { font: 400 1.0625rem/1.2 var(--font-c); letter-spacing: .06em; text-align: right; }
.htable .is-today dt { color: var(--text); font-weight: 700; }
.htable .is-closed dd { color: var(--text-2); }
.today-tag { margin-left: 6px; font-size: .75rem; font-weight: 700; color: var(--accent); }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; font-size: .9375rem; }
/* 6. the footer: brand, hours, pages, booking and phone, a giant faint watermark, the legal bar */
.footer { position: relative; overflow: hidden; background: var(--panel); color: var(--text); border-top: 1px solid var(--line); }
.footer a { color: var(--text); text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
.footer a:not(.btn):hover { color: var(--champagne); }
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gx-r) 0 var(--gx-l); }
.footer-grid { display: grid; gap: 44px 48px; }
.f-p { margin: 14px 0 0; max-width: 36ch; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.f-h { margin: 0 0 14px; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.f-list { list-style: none; margin: 0; padding: 0; }
.f-list a { display: inline-flex; align-items: center; min-height: 44px; }
.f-list a[aria-current] { color: var(--champagne); }
.f-phone { font: 400 1.75rem/1.2 var(--font-d); }
.f-col p { margin: 0 0 4px; }
.footer .htable dt, .footer .htable dd { font-size: .875rem; }
.footer-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; padding: 18px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--text-2); font-size: .875rem; }
.footer-bottom p { margin: 0; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.footer-bottom .lang a { color: var(--text-2); }
.footer-bottom .lang a[aria-current] { color: var(--text); }
.footer-bottom .fb-end { margin-left: auto; text-align: right; }
@media (min-width: 700px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, .9fr); gap: 56px; }
.f-brand { grid-column: auto; }
}
@media (max-width: 767px) {
.footer-bottom { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.footer-bottom .fb-end { margin-left: 0; text-align: left; }
}
/* the page header (Services, Barbers, Gallery, About, Contact): breadcrumb, two-line heading, a lead line */
.phd { padding: clamp(36px, 5vw, 72px) 0 clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: clamp(20px, 3vw, 40px); font: 500 .75rem/1.2 var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
.crumbs a:hover { color: var(--text); }
}
.crumbs [aria-current] { color: var(--text); }
.phd-grid { display: grid; gap: 24px 64px; }
.phd-h { font-size: clamp(2.75rem, 8vw, 5.75rem); }
.phd-h:focus { outline: none; }
@media (min-width: 900px) {
.phd-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
}
.pg { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(72px, 9vw, 128px); }
.soon { display: grid; justify-items: start; gap: 18px; max-width: 640px; padding: clamp(24px, 4vw, 56px) 0; }
.soon-text { margin: 0; font: 400 clamp(1.875rem, 5vw, 3rem)/1.1 var(--font-d); text-wrap: balance; }
.soon-note { margin: 0; color: var(--text-2); }
/* the services page */
.pg-services .mrows { margin-top: 0; }
.scat { display: grid; gap: 28px; padding: clamp(32px, 5vw, 64px) 0; border-top: 1px solid var(--line-2); }
.scat:first-child { border-top: 0; padding-top: 0; }
.scat-head .no { margin-bottom: 12px; }
.scat-title { margin: 0 0 14px; font: 400 clamp(2.5rem, 5vw, 3.75rem)/1 var(--font-d); }
.scat-intro { color: var(--text-2); max-width: 36ch; line-height: 1.6; }
@media (min-width: 900px) {
.scat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); }
.scat-head { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
}
.cats-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.cat-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); }
.cat-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 55%); }
.cat-tile div { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; }
.cat-tile h3 { margin: 0; font: 400 clamp(1.75rem, 3vw, 2.25rem)/1 var(--font-d); }
.cat-tile p { margin: 4px 0 0; color: rgb(var(--ink) / .8); font-size: .875rem; }
@media (min-width: 900px) {
.cats-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
.ask { display: grid; justify-items: start; gap: 6px; margin-top: 44px; }
.ask-text { margin: 0; font-size: 1.0625rem; }
.ask-phone { display: inline-flex; align-items: center; min-height: 56px; color: var(--text); text-decoration: none; font: 400 clamp(2.5rem, 9vw, 4rem)/1 var(--font-d); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
.ask-phone:hover { color: var(--champagne); }
}
.ask-note { margin: 0; color: var(--text-2); font-size: .9375rem; }
/* the barbers page: a big block per barber, the portrait alternating sides */
.bblocks { display: grid; gap: clamp(64px, 9vw, 128px); }
.bblock { display: grid; gap: 32px 72px; align-items: center; }
.bblock-pic { position: relative; display: block; width: 100%; max-width: 520px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.bblock-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05) brightness(.93); }
.bblock-k { margin: 0 0 14px; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.bblock-name { margin: 0; font: 400 clamp(2.75rem, 6vw, 4.5rem)/1 var(--font-d); overflow-wrap: anywhere; }
.bblock-name a { color: var(--text); text-decoration: none; }
.bblock-tag { margin: 14px 0 0; font: italic 400 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--font-d); color: var(--text-2); text-wrap: balance; }
.bblock-bio { margin: 20px 0 0; max-width: 52ch; color: var(--text-soft); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.specs { margin: 24px 0 0; max-width: 560px; }
.specs > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.specs > div:last-child { border-bottom: 1px solid var(--line); }
.specs dt { font: 500 .75rem/1.2 var(--font-c); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.specs dd { font-size: 1.0625rem; }
.bblock .dchips, .bblock .chips { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bblock-ctas { margin-top: 28px; }
@media (min-width: 900px) {
.bblock { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.bblock:nth-child(even) .bblock-pic { order: 2; justify-self: end; }
.specs > div { grid-template-columns: 180px 1fr; align-items: baseline; }
}
/* the barber profile */
.prof-head { display: grid; gap: 36px 72px; align-items: center; }
.prof-name { margin: 0; font: 400 clamp(3.25rem, 9vw, 7rem)/.94 var(--font-d); overflow-wrap: anywhere; }
.prof-name em { display: block; font-style: italic; }
.prof-name:focus { outline: none; }
.prof-tag { margin: 22px 0 0; max-width: 34ch; font-size: 1.25rem; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.prof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 32px 0; padding-top: 22px; border-top: 1px solid var(--line-2); max-width: 640px; }
.prof-stats > div { padding: 0 20px; border-left: 1px solid var(--line-2); }
.prof-stats > div:first-child { padding-left: 0; border-left: 0; }
.prof-stats dt { margin-bottom: 6px; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.prof-stats dd { font: 400 1.5rem/1.15 var(--font-d); }
.prof-pic { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); justify-self: end; }
.prof-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05) brightness(.93); }
.prof-sec { padding: clamp(48px, 7vw, 96px) 0 0; display: grid; gap: 24px 64px; }
.prof-sec > h2 { margin: 0; font: 400 clamp(2rem, 4.4vw, 3.25rem)/1.05 var(--font-d); }
.prof-about p { max-width: 62ch; color: var(--text-soft); font-size: 1.125rem; line-height: 1.7; }
.prof-about p + p { margin-top: 16px; }
.prof-quote { margin: clamp(48px, 7vw, 96px) 0 0; padding: clamp(40px, 6vw, 80px) 0; border-block: 1px solid var(--line-2); text-align: center; }
.prof-quote p { margin: 14px auto 0; max-width: 24ch; font: italic 400 clamp(2rem, 5vw, 3.5rem)/1.1 var(--font-d); text-wrap: balance; }
.numlist { list-style: none; margin: 0; padding: 0; counter-reset: nl; border-top: 1px solid var(--line-2); }
.numlist li { counter-increment: nl; display: flex; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-2); font: 400 1.5rem/1.2 var(--font-d); }
.numlist li::before { content: counter(nl, decimal-leading-zero); min-width: 2ch; font: italic 400 1.125rem var(--font-d); color: var(--text-2); }
@media (min-width: 900px) {
.prof-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.prof-sec { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}
/* the gallery page: category chips with counts, a masonry with captions, the lightbox */
.gfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 4vw, 48px); }
.gmas { column-count: 2; column-gap: 14px; margin: 0; padding: 0; list-style: none; }
.gitem { break-inside: avoid; margin: 0 0 24px; }
.gitem[hidden] { display: none; }
.gph { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--panel); overflow: hidden; cursor: zoom-in; touch-action: manipulation; }
.gph img { display: block; width: 100%; height: auto; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.gph:hover img { transform: scale(1.03); }
}
.gph:active img { transform: scale(1.01); transition-duration: var(--dur-press); }
.gph:focus-visible { outline-offset: 2px; }
.gcap { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: .875rem; color: var(--text-2); }
.gcap:empty { display: none; }
.gcap .gcat { font: 500 .6875rem/1.5 var(--font-c); letter-spacing: .2em; text-transform: uppercase; text-align: right; }
.gcap a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .22em; }
@media (min-width: 900px) {
.gmas { column-count: 3; column-gap: 24px; }
}
.viewer-cap { max-width: min(92vw, 720px); margin: 0; text-align: center; color: var(--text); font-size: .9375rem; }
.viewer-cap:empty { display: none; }
/* about and contact */
.about { display: grid; gap: 48px 80px; }
.about-body p { max-width: 58ch; color: var(--text-soft); font-size: 1.1875rem; line-height: 1.7; }
.about-body p:first-child { color: var(--text); font-size: 1.5rem; line-height: 1.5; }
.about-body p + p { margin-top: 18px; }
.panel { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line-2); background: var(--panel); }
.panel + .panel { margin-top: 20px; }
.about-pic { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--panel); }
.about-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: clamp(56px, 8vw, 104px); padding: clamp(28px, 4vw, 48px) 0; border-block: 1px solid var(--line-2); }
.cta-band p { margin: 0; font: 400 clamp(1.875rem, 4vw, 3rem)/1.1 var(--font-d); }
.cta-band p em { font-style: italic; color: var(--text-2); }
@media (min-width: 960px) {
.about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
/* the mobile menu: the page names large, in the display face */
.menu-links a { font-family: var(--font-d); font-weight: 400; font-size: 2.875rem; letter-spacing: 0; min-height: 64px; }
/* ================================================================ the booking page, compact (owner request 2026-11-02)
   A slim title bar instead of the photo header; one screen per step: tighter stepper, titles and gaps, cards in two
   or three columns, the month smaller beside the free times (4+ per row), step 4 as summary + form side by side.
   No back-to-top button on this page. */
.bp-slim { border-bottom: 1px solid var(--line); }
.bp-slim-in { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; min-height: 96px; }
.bp-slim .bp-back { margin: 0; flex: none; }
.bp-slim .bp-title { margin: 0; font: 400 clamp(1.875rem, 4.4vw, 2.75rem)/1.05 var(--font-d); letter-spacing: -.005em; }
.bp-slim .bp-title::after { display: none; }
.bp-slim .bp-meta { margin: 0 0 0 auto; font-size: .9375rem; color: var(--text-2); }
@media (min-width: 768px) {
.bp-slim-in { min-height: 128px; gap: 0 28px; }
}
@media (max-width: 599px) {
.bp-slim .bp-meta { display: none; }
.bp-slim .bp-back { width: 44px; justify-content: center; border: 1px solid var(--btn-line); border-radius: 50%; }
.bp-slim .bp-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
body[data-route=book] .to-top { display: none !important; }
.bp { padding-top: 18px; padding-bottom: 96px; }
@media (min-width: 768px) {
.bp { padding-top: 26px; padding-bottom: 64px; }
}
.bp-grid { gap: 24px; }
@media (min-width: 1024px) {
.bp-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.bp.is-checkout .bp-grid { grid-template-columns: minmax(0, 1fr); }
}
.bp-flow { container-type: inline-size; }
.bp-flow .flow { max-width: none; }
.wz-track { margin-bottom: 12px; max-width: 760px; }
.wz-label { font-size: .75rem; }
.wz-title { margin-bottom: 10px; font-size: clamp(1.625rem, 3.6vw, 2.25rem); }
.wz-hint { margin: -2px 0 10px; }
.wz-nav { margin-top: 14px; padding-top: 12px; }
/* barber and service cards: two or three columns where the flow is wide enough */
.picks { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; }
.pick { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.pick-name { font-size: 1.4375rem; }
.pick-price { font-size: 1.5rem; }
.pick-barber .avatar { width: 48px; }
@container (min-width: 560px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .picks-barbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the month smaller, beside the free times on wide flows */
.bp .cal { max-width: 400px; }
.bp .cal-day { min-height: 44px; font-size: 1.125rem; }
.bp .cal-title { font-size: 1.625rem; }
@media (min-width: 768px) {
.bp .cal-day { min-height: 46px; }
}
.when-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wz-day { margin-top: 4px; padding-top: 12px; }
.wz-day-h { margin-bottom: 10px; font-size: 1.625rem; }
@container (min-width: 800px) {
  .when-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .when-grid .wz-day { margin-top: 0; padding-top: 0; border-top: 0; }
}
/* the free times: a flat grid of chips, 4 per row from 360px (3 at 320), 5-6 on wide flows; the time only */
.tgroup + .tgroup { margin-top: 12px; }
.tg-h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; max-width: 560px; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.tg-h::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; max-width: 560px; }
.slots .slot { justify-content: center; min-height: 44px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: var(--r-field); background: none; color: var(--text); font: 400 1.125rem/1 var(--font-c); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: center; }
.slots .slot + .slot { border-left: 1px solid var(--line-2); }
.slots button.slot[aria-pressed=true] { border-color: var(--text); background: var(--text); color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
.slots button.slot:not([aria-pressed=true]):hover { border-color: var(--text-2); background: var(--raised); }
}
.slots.is-skel .slot i { margin: 0 auto; }
/* step 4: the summary card and the form side by side on wide flows */
.recap { margin-bottom: 20px; }
.recap-row { padding: 9px 0; }
.book-fields { gap: 16px; }
@container (min-width: 880px) {
  [data-panel=checkout] .wz-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  [data-panel=checkout] .recap { margin-bottom: 0; }
}
.about-cap { position: absolute; left: 16px; bottom: 14px; margin: 0; font: 500 .75rem/1.2 var(--font-c); letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--ink) / .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.about-pic { position: relative; }
/* the hero's two pills side by side on every width */
.hero .actions { flex-wrap: nowrap; gap: 12px; }
.hero .actions > .btn { flex: 0 1 auto; }
@media (max-width: 599px) {
.hero .actions > .btn { flex: 1 1 0; min-width: 0; padding: 0 14px; font-size: .9375rem; letter-spacing: .1em; }
}
@media (max-width: 359px) {
.hero .actions { gap: 8px; }
.hero .actions > .btn { padding: 0 8px; font-size: .8125rem; letter-spacing: .06em; }
}
/* ================================================================ lines audit (owner feedback 2026-11-02): fewer rules, more space and tone
   A hairline is kept only where it carries structure: between the rows of a list or a table, the footer's top edge, form
   fields, the focus ring. Everything else is separated by space and by the alternating tone of the bands. */
.hero::after, .ph::after { display: none; }
.phd, .legal-head, .bp-slim { border-bottom: 0; }
.band-alt { border-top: 0; border-bottom: 0; }
.footer-bottom, .legal-also, .scat, .cta-band, .prof-quote, .wz-nav, .wz-day, .svc-total, .appt-panel, .acct-danger { border-top: 0; border-bottom: 0; border-block: 0; }
.cta-band, .prof-quote { border: 0; }
.scat + .scat { padding-top: clamp(40px, 6vw, 80px); }
/* lists and tables: one hairline between the rows, no box around them, none above the first or below the last */
.mrows, .htable, .numlist, .specs, .appts, .legal-toc ol { border-top: 0; }
.mrows > li, .htable > div, .numlist li, .specs > div, .specs > div:last-child, .appt, .legal-toc li { border-bottom: 0; border-top: 0; }
.mrows > li + li, .htable > div + div, .numlist li + li, .specs > div + div, .appt + .appt { border-top: 1px solid var(--line); }
.mrow { padding-top: 26px; padding-bottom: 26px; }
.legal-toc a { min-height: 40px; }
/* cards: tone, radius and a soft inner highlight instead of an outline */
.bp-sum, .recap, .panel { border: 0; border-radius: 14px; background: var(--panel); box-shadow: inset 0 1px 0 rgb(var(--ink) / .05); }
.bp-sum { padding: 24px 26px 20px; }
.recap { padding: 6px 22px; }
.sum-list > div, .recap-row { border-bottom: 0; }
.recap-row + .recap-row, .sum-list > div + div { border-top: 1px solid var(--line); }
.as-me, .notice, .receipt, .receipt > div { border: 0; }
.as-me, .notice { padding: 16px 18px; border-radius: 12px; background: var(--panel); }
.receipt > div + div { border-top: 1px solid var(--line); }
.flow-msg { border-top: 0; padding: 12px 16px; border-radius: 12px; background: var(--panel); }
.tbadge { border: 0; background: rgba(0, 0, 0, .8); }
.stamp { outline: 0; }
/* facts and stats: space between, no vertical rules */
.facts4, .prof-stats { border-top: 0; padding-top: 0; }
.fact, .prof-stats > div { border-left: 0; }
@media (min-width: 700px) {
.fact { padding: 0 32px 0 0; border-left: 0; }
.fact:first-child { padding-left: 0; }
}
.prof-stats > div { padding: 0 28px 0 0; }
.header .lang { border-left: 0; padding-left: 0; margin-left: 10px; }
.menu-links a { border-bottom: 0; }
.tg-h::after { display: none; }
/* chips, days, times, cards of the wizard: tone instead of boxes */
.slots .slot, .slots .slot + .slot { border: 0; background: rgb(var(--ink) / .06); }
.slots button.slot[aria-pressed=true] { background: var(--text); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
.slots button.slot:not([aria-pressed=true]):hover { background: rgb(var(--ink) / .12); }
}
.dchip { border: 0; background: rgb(var(--ink) / .05); }
.dchip.is-on { background: rgb(var(--ink) / .16); }
.picks { border-top: 0; row-gap: 4px; }
.pick { border-bottom: 0; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
.pick:hover { background: var(--raised); }
}
.cal-grid, .cal-row { border: 0; }
.cal-day + .cal-day { border-left: 0; }
.cal-day { border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
.cal-day:not(.is-off):not([aria-pressed=true]):hover { background: var(--raised); }
}
.chip { border-color: var(--line-2); }
.to-top { border: 0; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1), 0 6px 24px rgba(0, 0, 0, .35); }
.to-top:hover { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .5), 0 6px 24px rgba(0, 0, 0, .35); }
.empty-lines { display: none; }
.empty-text { top: 0; min-height: 0; line-height: 1.2; }
.slide { border-color: var(--line-2); }
.btn-line { border-color: rgb(var(--ink) / .35); }
.arw, .icon-btn, .menu-btn { border-color: rgb(var(--ink) / .22); }
/* press and hover: only the properties that change, strong ease-out (--ease-out) */
.pick, .cal-day, .slots .slot, .chip, .arw, .icon-btn, .menu-btn { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: 160ms; transition-timing-function: var(--ease-out); }
.slots .slot:active, .cal-day:not(.is-off):active { transform: scale(.97); }
/* footer, redesigned: the real logo and one short line, three quiet columns, the legal bar */
.f-logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer-lockup { width: 150px; height: auto; }
.f-p { margin: 14px 0 0; max-width: 28ch; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.f-addr { margin: 0 0 4px; color: var(--text-2); }
.f-addr a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.f-phone { display: inline-flex; align-items: center; min-height: 44px; font: 400 1.75rem/1.2 var(--font-d); }
.footer-grid { padding-bottom: clamp(40px, 6vw, 72px); }
@media (min-width: 1024px) {
.footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.2fr); }
}
.footer-bottom { padding-right: 76px; }
/* room for the back-to-top button */
/* the one gold "Rezervo": fixed on the right, follows the page; above the back-to-top button while that is shown */
.book-fab { position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 21; --h: 48px; --px: 24px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 250, 235, .7); transition: opacity 220ms ease, visibility 220ms, transform 220ms var(--ease-out), bottom 260ms var(--ease-out), color 280ms ease, border-color 280ms ease; }
.has-top .book-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
.book-fab.cta-off, .menu-open .book-fab { opacity: 0; visibility: hidden; transform: translateY(8px); }
.book-fab[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.book-fab { transition: opacity 120ms ease, visibility 120ms; }
.book-fab.cta-off, .menu-open .book-fab { transform: none; }
}
/* the booking page: no footer, a shorter title bar, the Back / Continue bar stuck to the bottom of the screen */
body[data-route=book] .footer { display: none; }
.bp { padding-bottom: 24px; }
.bp-slim-in { min-height: 72px; }
@media (min-width: 768px) {
.bp-slim-in { min-height: 96px; }
.wz-nav:not(.is-last) { position: sticky; bottom: 0; z-index: 5; margin-top: 8px; padding-bottom: 12px; background: var(--bg); }
}
@media (max-width: 767px) {
.bp { padding-bottom: 88px; }
}
/* barber profile: label + serif title left, content right; gold italic list numbers; the barber's own work */
.prof-sec > div > .lbl { margin-bottom: 16px; }
.numlist li::before { color: var(--accent); }
.mo-pic { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.prof-works .mosaic { grid-column: 1 / -1; margin-top: 12px; }
.prof-works .tl { margin-top: 18px; }
@media (min-width: 900px) {
.prof-works { grid-template-columns: minmax(0, 1fr); }
}
/* back-to-top sits ABOVE the fixed Rezervo (same right column, 12px apart); alone it drops to the bottom */
.to-top { bottom: calc(16px + env(safe-area-inset-bottom)); }
.book-fab, .has-top .book-fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
.book-fab:not(.cta-off):not([hidden]) ~ .to-top, html:has(.book-fab:not(.cta-off):not([hidden])) .to-top { bottom: calc(16px + 48px + 12px + env(safe-area-inset-bottom)); }
.to-top { right: max(var(--gutter), env(safe-area-inset-right)); width: 48px; height: 48px; }
/* ================================================================ the phone menu: a compact sheet that slides down under the header
   (transform + opacity; open ~300ms ease-out, close ~220ms ease-in-out), a dimmed backdrop, links staggering in */
#menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 25; overflow: hidden; border: 0; background: rgb(var(--bg-rgb) / .62); opacity: 0; transform: none; transition: opacity 220ms ease; }
#menu.is-open { opacity: 1; transition: opacity 300ms var(--ease-out); }
#menu .menu-inner { display: block; min-height: 0; max-height: 85svh; overflow-y: auto; overscroll-behavior: contain; padding: 6px var(--gutter) 18px; background: var(--bg); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); transform: translateY(-100%); opacity: 0; transition: transform 220ms cubic-bezier(.77, 0, .175, 1), opacity 160ms ease; }
#menu.is-open .menu-inner { transform: none; opacity: 1; transition: transform 300ms var(--ease-out), opacity 220ms ease; }
#menu.menu-anim .menu-inner { will-change: transform, opacity; }
#menu .menu-links { display: flex; flex-direction: column; }
#menu .menu-links a { display: flex; align-items: center; min-height: 46px; border: 0; font: 400 1.375rem/1.2 var(--font-d); letter-spacing: 0; opacity: 0; transform: translateY(12px); transition: opacity 120ms ease, transform 120ms ease, color 160ms ease; }
#menu.is-open .menu-links a { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out) calc(110ms + var(--i, 0) * 45ms), transform 260ms var(--ease-out) calc(110ms + var(--i, 0) * 45ms), color 160ms ease; }
#menu .menu-links a[aria-current] { color: var(--champagne); }
#menu .menu-foot { display: grid; gap: 12px; margin-top: 10px; }
#menu .menu-foot .btn { width: 100%; }
#menu .lang a { padding: 0 10px 0 0; font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase; }
.menu-small { margin: 0; color: var(--text-2); font-size: .8125rem; }
.menu-small a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
#menu, #menu.is-open { transition: opacity 120ms ease; }
#menu .menu-inner, #menu.is-open .menu-inner { transform: none; transition: opacity 120ms ease; }
#menu .menu-links a, #menu.is-open .menu-links a { transform: none; transition: opacity 120ms ease; }
}
/* phone scale: smaller headings, 48px buttons, tighter section padding */
@media (max-width: 599px) {
.btn { --h: 48px; --px: 22px; }
.dh { font-size: clamp(2rem, 9.5vw, 2.75rem); }
.phd-h { font-size: clamp(2.25rem, 11vw, 3.25rem); }
.prof-name { font-size: clamp(2.75rem, 14vw, 4rem); }
.bblock-name { font-size: clamp(2.25rem, 11vw, 3rem); }
.band { padding: 56px 0; }
.pg { padding-top: 28px; padding-bottom: 64px; }
.mrow-name { font-size: 1.625rem; }
.mrow-price { font-size: 1.625rem; }
.fact dd { font-size: 1.5rem; }
.tcard-name { font-size: 1.75rem; }
.house-lead { font-size: 1.125rem; }
.bb-p { font-size: 1rem; }
}
/* the barber step: portrait cards (4:5 photo, or the logo / monogram on a dark panel), serif names, a gold ring and a check for the chosen one */
.prof-sec h2 { margin: 0; font: 400 clamp(2rem, 4.4vw, 3.25rem)/1.05 var(--font-d); }
.prof-about .lbl, .prof-quote .lbl { margin: 0 0 16px; max-width: none; color: var(--text-2); font: 500 .8125rem/1.2 var(--font-c); }
.prof-quote .lbl { justify-content: center; margin-bottom: 14px; }
.bcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.bcard { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-content: center; align-items: center; width: 100%; padding: 6px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; animation: rise-in 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background-color 160ms ease, transform 120ms var(--ease-out); }
.bcard:active { transform: scale(.98); }
.bcard-pic { position: relative; display: block; grid-row: 1 / span 2; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--panel); transition: box-shadow 200ms ease; }
.bcard-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) contrast(1.04); transition: transform 500ms var(--ease-out), filter 300ms ease; }
.bcard-emblem { position: absolute; left: 50%; top: 50%; width: 56%; height: auto; transform: translate(-50%, -50%); }
.bcard .tcard-init { font-size: 2rem; }
.bcard-ck { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-gold); opacity: 0; transform: scale(.8); transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.bcard-ck svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bcard-name { font: 400 1.4375rem/1.1 var(--font-d); }
.bcard-role { color: var(--text-2); font-size: .875rem; }
.bcard-role:empty { display: none; }
.bcard-tag, .bcard-chips { display: none; }
.bcard[aria-pressed=true] { background: var(--bg-2); }
.bcard[aria-pressed=true] .bcard-pic { box-shadow: inset 0 0 0 2px var(--accent); }
.bcard[aria-pressed=true] .bcard-ck { opacity: 1; transform: none; }
.bcard:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.bcard:hover .bcard-pic { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .6); }
.bcard:hover .bcard-pic img { transform: scale(1.04); filter: grayscale(.3); }
}
@container (min-width: 600px) {
  .bcards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
  .bcard { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; background: none !important; }
  .bcard-pic { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; }
  .bcard-name { margin-top: 8px; font-size: 1.625rem; }
  .bcard-role { font: 500 .75rem/1.3 var(--font-c); letter-spacing: .18em; text-transform: uppercase; }
  .bcard-tag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-soft); font-size: .875rem; line-height: 1.45; }
  .bcard-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .bcard-chips i { padding: 3px 8px; border-radius: 6px; background: rgb(var(--ink) / .05); color: var(--text-3); font: 500 .6875rem/1.2 var(--font-c); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
  .bcard-chips i.is-on { background: rgb(var(--ink) / .14); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
.bcard { animation: none; }
.bcard-pic img { transition: none; }
}
.bcard-pic .bcard-emblem { position: absolute; inset: auto; left: 50%; top: 50%; width: 54%; height: auto; max-height: 60%; object-fit: contain; filter: none; transform: translate(-50%, -50%); }
/* ================================================================ theme toggle and the light-theme details */
/* the header logo on cream: the wordmark's light letters turn dark, the E a deeper gold (over the hero photo it stays as is) */
html:not([data-theme=dark]) .header.docked .logo-w { filter: brightness(.14); }
html:not([data-theme=dark]) .header.docked .logo-e { filter: brightness(.8) saturate(1.15); }
.logo-w, .logo-e { transition: filter 240ms ease; }
html:not([data-theme=dark]) .btn-light { background: var(--text); color: var(--bg); }
html:not([data-theme=dark]) .hero .btn-light, html:not([data-theme=dark]) .footer .btn-light { background: #F3EEE4; color: #050505; }
.header { transition: border-color 240ms ease, background-color 240ms ease; }
body { transition: background-color 240ms ease, color 240ms ease; }
@media (prefers-reduced-motion: reduce) {
body, .header, .logo-w, .logo-e { transition: none; }
}
/* ================================================================ the phone menu, FULL SCREEN (owner 2026-11-02): a black overlay that slides down from the
   top (clip-path, ~320ms ease-out; closing 220ms ease-in-out), its own top bar (logo + close), the links spread over the screen,
   one primary button, account + language, a small contact line. No scroll at 360x640; the page behind is inert and locked. */
#menu { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #10100F; opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 220ms cubic-bezier(.77, 0, .175, 1); }
#menu.is-open { opacity: 1; clip-path: inset(0); transition: clip-path 320ms var(--ease-out); }
#menu .menu-inner, #menu.is-open .menu-inner { display: flex; flex-direction: column; height: 100svh; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 0 max(var(--gutter), env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); background: transparent; box-shadow: none; transform: none; opacity: 1; transition: none; }
.menu-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-top: env(safe-area-inset-top); }
.menu-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.mlogo-e { display: block; width: auto; height: 30px; }
.mlogo-w { display: block; width: auto; height: 14px; }
#menu .menu-links { flex: 1 1 auto; justify-content: center; gap: clamp(2px, 1.2svh, 12px); }
#menu .menu-links a { min-height: 46px; font-size: clamp(1.5rem, 4.4svh, 2rem); }
#menu .menu-foot { flex: none; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
#menu { clip-path: none; opacity: 0; transition: opacity 150ms ease; }
#menu.is-open { opacity: 1; clip-path: none; transition: opacity 150ms ease; }
}
/* ================================================================ action buttons (owner 2026-11-02, reference image 16): SQUARE, 3px corners, small wide-tracked
   Sofia Sans caps. Primary = filled CREAM with black text and an arrow after the label; secondary = thin cream outline that fills
   softly on hover. Gold is no longer used on buttons (only the logo, the focus ring and the logo's hairline). Chips, pills, the
   calendar and the round icon buttons keep their shapes. One primary per view. */
:root { --r-btn: 3px; --btn-h: 50px; --btn-px: 28px; --btn-ls: .14em; --cream: #F5F0E6; }
.btn { border-radius: var(--r-btn); font: 600 .8125rem/1.1 var(--font); letter-spacing: var(--btn-ls); text-transform: uppercase; }
.btn-sm { --h: 44px; --px: 18px; font-size: .75rem; }
.btn.btn-gold, .btn.btn-light { background: var(--cream); color: #050505; border-color: var(--cream); box-shadow: none; }
.btn.btn-gold::before, .btn.btn-light::before, .btn.btn-line::before { display: none; }
.btn.btn-gold::after, .btn.btn-light::after { content: ''; position: static; inset: auto; z-index: auto; flex: none; width: 16px; height: 16px; background: currentColor; box-shadow: none; opacity: 1; transition: transform var(--dur-ui) var(--ease-out); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.btn-gold:has(svg)::after, .btn.btn-light:has(svg)::after, .btn.btn-gold[disabled]::after { display: none; }
.btn.btn-line { background: transparent; color: var(--cream); border-color: rgba(245, 240, 230, .35); }
@media (hover: hover) and (pointer: fine) {
.btn.btn-gold:hover, .btn.btn-light:hover { background: #FFFFFF; border-color: #FFFFFF; transform: none; }
.btn.btn-gold:hover::after, .btn.btn-light:hover::after { transform: translateX(3px); }
.btn.btn-line:hover { background: rgba(245, 240, 230, .12); border-color: var(--cream); }
}
.btn.btn-gold:focus-visible, .btn.btn-light:focus-visible { transform: none; }
.btn.book-fab { box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
/* the slide-to-confirm: the knob is cream too */
.slide-knob { background: var(--cream); color: #050505; }
.slide-fill { background: linear-gradient(90deg, rgba(245, 240, 230, .10), rgba(245, 240, 230, .32)); }
/* working days: seven small square cells; the days he works are brighter (cream, bold), the others muted, the salon's closed days struck through */
.dchips { gap: 6px; }
.dchip { min-width: 44px; height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--text-3); font: 600 .75rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; position: relative; }
.dchip.is-on { border-color: rgba(245, 240, 230, .4); background: rgba(245, 240, 230, .08); color: var(--text); }
.dchip.is-off { text-decoration: none; opacity: .8; }
.dchip.is-closed { color: var(--text-3); opacity: .55; }
.dchip.is-closed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), rgba(245, 240, 230, .35) calc(50% - .5px), rgba(245, 240, 230, .35) calc(50% + .5px), transparent calc(50% + .5px)); }
a.chip-soft { cursor: pointer; text-decoration: none; letter-spacing: .02em; text-transform: none; font-family: var(--font); }
/* ================================================================ v30 (owner 2026-11-02)
   1) every button is square AND filled: primary = cream, secondary = a filled surface with a very thin cream border, tertiary = text + arrow
   2) header: no hairline in any state; the dark panel only fades in (soft blur), the transition line is gone
   3) phones: "Rezervo" (left) | logo (centre) | "Menu" (right) in the header, no fixed pill, account lives in the menu
   4) the phone menu follows the reference: numbered serif links, one primary, short facts, grouped hours, account + language
   5) barber cards and profile hero on phones follow reference image 18 */
.btn.btn-line { background: #141414; color: var(--cream); border-color: rgba(245, 240, 230, .18); }
.btn.btn-danger { background: #141414; color: var(--err); border-color: var(--err); border-radius: var(--r-btn); }
@media (hover: hover) and (pointer: fine) {
.btn.btn-line:hover { background: #242424; border-color: rgba(245, 240, 230, .34); }
.btn.btn-danger:hover { background: #242424; }
}
.btn.btn-line:active { background: #1B1B1B; }
.slide { border-radius: 4px; background: #141414; border-color: rgba(245, 240, 230, .18); }
.slide-knob { border-radius: 3px; }
.slide-spin { border-radius: 50%; }
.header { border-bottom: 0 !important; transition: background-color 240ms ease; }
.header.docked.is-solid { border-bottom-color: transparent; }
.header::before { background: rgba(16, 16, 15, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pt-line { display: none; }
.nav-acct[hidden] { display: none; }
.hdr-book { display: none; }
@media (max-width: 767px) {
.hdr-book { display: inline-flex; --h: 40px; --px: 14px; font-size: .6875rem; letter-spacing: .16em; }
.hdr-book[hidden] { display: none; }
.menu-btn { width: auto; height: 44px; gap: 10px; padding: 0 0 0 8px; border: 0; border-radius: 0; background: none; display: inline-flex; align-items: center; }
.menu-btn-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.menu-btn-icon { width: 22px; height: 11px; }
.menu-btn-icon i:last-child { left: auto; width: 14px; }
.book-fab, .book-fab:not(.cta-off):not([hidden]) { display: none !important; }
.to-top, html:has(.book-fab:not(.cta-off):not([hidden])) .to-top { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
.hdr-book { --px: 10px; letter-spacing: .12em; }
.menu-btn { gap: 8px; padding-left: 0; }
.menu-btn-label { letter-spacing: .12em; }
.header-inner { gap: 6px; }
}
/* phone menu */
#menu .menu-inner, #menu.is-open .menu-inner { display: block; }
.menu-top { position: sticky; top: 0; z-index: 2; background: #10100F; border-bottom: 1px solid rgba(255, 255, 255, .1); margin: 0 calc(-1 * var(--gx-l)) 0 calc(-1 * var(--gx-r)); padding-left: var(--gx-l); padding-right: var(--gx-r); }
#menu .menu-top .icon-btn { border: 0; background: none; color: var(--text); margin-right: -12px; }
@media (hover: hover) and (pointer: fine) {
#menu .menu-top .icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
}
#menu .menu-links { display: block; padding-top: 0; }
#menu .menu-links a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; min-height: 63px; border-bottom: 1px solid rgba(255, 255, 255, .1); font: 400 clamp(2.25rem, 9.6vw, 3rem)/1 var(--font-d); color: rgba(245, 240, 230, .74); }
#menu .menu-links a .mn { font: 500 .6875rem/1 var(--font); letter-spacing: .14em; color: var(--text-3); }
#menu .menu-links a .ml { min-width: 0; overflow-wrap: anywhere; }
#menu .menu-links a[aria-current], #menu .menu-links a.is-active, #menu .menu-links a:active { color: var(--cream); }
#menu .menu-foot { display: block; margin-top: 32px; padding-bottom: 8px; }
#menu .menu-foot .btn { width: 100%; --h: 56px; }
.menu-about { margin: 24px 0 0; color: var(--text-2); font-size: 1rem; line-height: 1.6; }
#menu .menu-small { margin: 12px 0 0; font-size: 1rem; }
#menu .menu-small a { color: var(--text-2); }
.menu-hours { margin: 24px 0 0; display: grid; gap: 4px; }
.menu-hours > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 32px; align-items: baseline; color: var(--text-2); font-size: 1rem; }
.menu-hours dd { margin: 0; }
/* barber cards + profile hero on phones (reference image 18): photo 4:5 without radius, small caps eyebrow, serif name, italic tagline,
   muted bio, hairlines and two-column facts */
@media (max-width: 767px) {
.bblocks { gap: 72px; }
.bblock { gap: 48px; align-items: start; }
.bblock-pic, .prof-pic { max-width: none; width: 100%; border-radius: 0; aspect-ratio: 4 / 5; justify-self: stretch; }
.bblock-k, .prof-head .lbl { margin: 0; font: 500 .75rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.bblock-name, .prof-name { margin: 14px 0 0; font: 400 2.5rem/1.05 var(--font-d); }
.prof-name { margin-top: 14px !important; }
.prof-name em { display: inline; font-style: normal; }
.prof-name em::before { content: ' '; }
.bblock-tag, .prof-tag { margin: 20px 0 0; max-width: none; font: italic 400 1.5rem/1.3 var(--font-d); color: var(--text); }
.bblock-bio { margin: 28px 0 0; max-width: none; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); -webkit-line-clamp: 6; }
.specs, .prof-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0 0; padding: 0; max-width: none; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.specs > div, .prof-stats > div { display: grid; gap: 14px; padding: 20px 0; border: 0 !important; }
.specs > div:nth-child(3), .prof-stats > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .1) !important; }
.specs dt, .prof-stats dt { margin: 0; font: 500 .75rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.specs dd, .prof-stats dd { margin: 0; font: 400 1.0625rem/1.4 var(--font); color: var(--text); }
.prof-head { gap: 48px; }
.prof-pic { order: -1; }
.prof-head .actions { margin-top: 28px; }
}
@media (max-width: 767px) {
.prof-head .lbl::before { display: none; }
.prof-head .lbl { gap: 0; }
.hero .actions .btn { --px: 14px; letter-spacing: .1em; }
}
/* v32 (owner correction): the dark/secondary buttons are OUTLINE ONLY (no fill); cream primaries stay filled */
.btn.btn-line { background: transparent; color: var(--cream); border-color: rgba(245, 240, 230, .5); }
.btn.btn-danger { background: transparent; color: var(--err); border-color: var(--err); }
.slide { background: transparent; border-color: rgba(245, 240, 230, .5); }
@media (hover: hover) and (pointer: fine) {
.btn.btn-line:hover { background: rgba(245, 240, 230, .08); border-color: var(--cream); }
.btn.btn-danger:hover { background: rgba(255, 255, 255, .06); }
}
.btn.btn-line:active { background: rgba(245, 240, 230, .14); border-color: var(--cream); }
.btn.btn-line:focus-visible, .btn.btn-gold:focus-visible, .btn.btn-light:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn.btn-line[disabled], .btn.btn-line[aria-disabled=true] { opacity: .45; }
.hero .btn.btn-line { background: transparent; }
/* v34: the full-page menu opens slowly and softly: the curtain drops in ~600ms, the links follow one by one, then the button, hours and account;
   it closes faster (the links leave first, then the curtain lifts). transform / opacity / clip-path only. */
#menu { clip-path: inset(0 0 100% 0); transition: clip-path 420ms cubic-bezier(.65, 0, .35, 1) 90ms; }
#menu.is-open { clip-path: inset(0); transition: clip-path 620ms cubic-bezier(.22, 1, .36, 1); }
#menu .menu-links a, #menu .menu-foot > * { opacity: 0; transform: translateY(18px); transition: opacity 150ms ease, transform 150ms ease, color 160ms ease; }
#menu.is-open .menu-links a { opacity: 1; transform: none; transition: opacity 520ms cubic-bezier(.22, 1, .36, 1) calc(220ms + var(--i, 0) * 75ms), transform 520ms cubic-bezier(.22, 1, .36, 1) calc(220ms + var(--i, 0) * 75ms), color 160ms ease; }
#menu.is-open .menu-foot > * { opacity: 1; transform: none; transition: opacity 520ms cubic-bezier(.22, 1, .36, 1) var(--fd, 700ms), transform 520ms cubic-bezier(.22, 1, .36, 1) var(--fd, 700ms); }
#menu .menu-foot > :nth-child(1) { --fd: 700ms; }
#menu .menu-foot > :nth-child(2) { --fd: 760ms; }
#menu .menu-foot > :nth-child(3) { --fd: 820ms; }
#menu .menu-foot > :nth-child(4) { --fd: 880ms; }
#menu .menu-foot > :nth-child(5) { --fd: 940ms; }
@media (prefers-reduced-motion: reduce) {
#menu, #menu.is-open { clip-path: none; transition: opacity 150ms ease; }
#menu .menu-links a, #menu .menu-foot > *, #menu.is-open .menu-links a, #menu.is-open .menu-foot > * { transform: none; transition: opacity 150ms ease; }
}
/* v36: booking "Prapa" at the top of the wizard; inputs never trigger the iOS zoom (16px+); livelier but short motion (transform/opacity only) */
.wz-top { margin: 0 0 6px; }
.wz-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 0; border: 0; background: none; color: var(--text); font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1); }
.wz-back[hidden] { display: none; }
.wz-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms cubic-bezier(.23, 1, .32, 1); }
.wz-back:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.wz-back:hover svg { transform: translateX(-4px); }
.wz-back:hover { color: var(--cream); }
}
.wz-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wz-nav { justify-content: flex-end; }
.wz-nav .wz-sum, .wz-nav .wz-why { margin-right: auto; }
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1em); }
.field input, .field select, .field textarea { font-size: max(16px, 1.0625rem); }
#app, .footer { transition: opacity 420ms cubic-bezier(.23, 1, .32, 1); }
#app { transition: opacity 420ms cubic-bezier(.23, 1, .32, 1), transform 420ms cubic-bezier(.23, 1, .32, 1); }
.btn:active, .chip:active, .pick:active, .slots .slot:active, .cal-day:active { transform: scale(.97); }
.pick, .slots .slot, .cal-day, .chip { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
.mrow-body, .bblock-name a { transition: transform 260ms cubic-bezier(.23, 1, .32, 1), color 160ms ease; }
.bblock-pic img, .prof-pic img { transition: transform 700ms cubic-bezier(.23, 1, .32, 1), filter 400ms ease; }
@media (hover: hover) and (pointer: fine) {
.mrow.row-link:hover .mrow-body { transform: translateX(8px); }
.bblock-pic:hover img { transform: scale(1.03); }
.btn.btn-line:hover svg, .tl:hover svg { transform: translateX(3px); }
}
.slots .slot { animation: rise-in 280ms cubic-bezier(.23, 1, .32, 1) both; }
.slots .slot:nth-child(1) { animation-delay: 16ms; }
.slots .slot:nth-child(2) { animation-delay: 32ms; }
.slots .slot:nth-child(3) { animation-delay: 48ms; }
.slots .slot:nth-child(4) { animation-delay: 64ms; }
.slots .slot:nth-child(5) { animation-delay: 80ms; }
.slots .slot:nth-child(6) { animation-delay: 96ms; }
.slots .slot:nth-child(7) { animation-delay: 112ms; }
.slots .slot:nth-child(8) { animation-delay: 128ms; }
.slots .slot:nth-child(9) { animation-delay: 144ms; }
.slots .slot:nth-child(10) { animation-delay: 160ms; }
.slots .slot:nth-child(11) { animation-delay: 176ms; }
.slots .slot:nth-child(12) { animation-delay: 192ms; }
.slots .slot:nth-child(13) { animation-delay: 208ms; }
.slots .slot:nth-child(14) { animation-delay: 224ms; }
.slots .slot:nth-child(15) { animation-delay: 240ms; }
.slots .slot:nth-child(16) { animation-delay: 256ms; }
@media (prefers-reduced-motion: reduce) {
#app, #app, .footer { transition: opacity 120ms ease; }
.slots .slot { animation: none; }
.mrow-body, .bblock-pic img, .prof-pic img, .wz-back svg { transition: none; }
.mrow.row-link:hover .mrow-body, .bblock-pic:hover img, .wz-back:hover svg { transform: none; }
.btn:active, .chip:active, .pick:active, .slots .slot:active, .cal-day:active { transform: none; }
}
/* v37: the "choose a new password" screen: a short checklist that lights up as the rules are met */
.pw-rules { list-style: none; margin: -4px 0 4px; padding: 0; display: grid; gap: 8px; color: var(--text-2); font-size: .9375rem; }
.pw-rules li { position: relative; padding-left: 26px; transition: color 200ms ease; }
.pw-rules li::before { content: ''; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color 200ms ease, border-color 200ms ease; }
.pw-rules li.is-ok { color: var(--text); }
.pw-rules li.is-ok::before { background: var(--cream); border-color: var(--cream); }
/* v38: header "Rezervo" also on desktop (right, next to the language), no fixed pill anywhere; language dropdown with flags; the account
   link is always the word "Llogaria" (a small dot when signed in) */
.book-fab, .book-fab:not(.cta-off):not([hidden]) { display: none !important; }
.to-top, html:has(.book-fab:not(.cta-off):not([hidden])) .to-top { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
.hdr-r { gap: 0; }
}
@media (min-width: 1200px) {
.header .lang.lang-dd { margin: 0; padding: 0; border-left: 0; }
.header .lang-dd { display: block; }
}
.lang-dd { position: relative; }
.ld-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--text); font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: color 160ms ease; }
.ld-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms cubic-bezier(.23, 1, .32, 1); }
.lang-dd.is-open .ld-btn svg { transform: rotate(180deg); }
.flag { display: block; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); flex: none; }
.ld-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: #1C1C1A; border: 1px solid rgba(245, 240, 230, .14); border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 200ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 200ms; }
.lang-dd.is-open .ld-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1), visibility 0s; }
.ld-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 3px; color: var(--text-2); text-decoration: none; font: 500 .9375rem/1 var(--font); text-transform: none; letter-spacing: .02em; transition: background-color 160ms ease, color 160ms ease; }
.ld-menu a[aria-current] { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
.ld-menu a:hover { background: rgba(245, 240, 230, .08); color: var(--cream); }
.ld-btn:hover { color: var(--cream); }
}
.ld-menu a:focus-visible, .ld-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lang.lang-rows { display: grid; gap: 0; margin-top: 8px; }
.lang.lang-rows a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0; color: var(--text-2); text-transform: none; letter-spacing: .02em; font-size: 1rem; }
.lang.lang-rows a[aria-current] { color: var(--cream); }
.acct-dot { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--cream); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) {
.ld-menu, .lang-dd.is-open .ld-menu { transition: opacity 120ms ease; transform: none; }
.ld-btn svg { transition: none; }
}
/* v39: menu language rows keep their names in normal case; hero buttons stay on one line each; header "Rezervo" is a 44px touch target */
#menu .lang.lang-rows a { text-transform: none; letter-spacing: .02em; font-size: 1rem; font-weight: 500; }
.hdr-book { --h: 44px; }
@media (max-width: 599px) {
.hero .actions { flex-wrap: nowrap; gap: 10px; }
.hero .actions > .btn { flex: 0 1 auto; white-space: nowrap; padding: 0 14px; letter-spacing: .1em; font-size: .75rem; }
.hero .actions > .btn:first-child { flex: 1 1 auto; }
}
@media (max-width: 359px) {
.hero .actions > .btn { padding: 0 10px; letter-spacing: .06em; font-size: .6875rem; }
.hero .actions > .btn.btn-gold::after, .hero .actions > .btn.btn-light::after { display: none; }
}
/* v40: one-line titles, no decorative eyebrows; barber rows as in reference 21 (photo left, info right, hairline rows); the photos are black and
   white and return to colour on hover (soft colour on touch) */
.dh, .phd-h, .band-title { white-space: nowrap; text-wrap: nowrap; }
.dh { font-size: clamp(1.75rem, 8.4vw, 5rem); }
.phd-h { font-size: clamp(2rem, 9vw, 5.75rem); }
.prof-name { white-space: normal; }
.cta-band { justify-content: center; }
.house-r .dh, .bb-l .dh { max-width: 100%; }
.specs { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0 0; max-width: none; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.specs > div { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 20px 0; border: 0 !important; }
.specs > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .1) !important; }
.brow { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.brow .bblock-k { margin-bottom: 14px; }
.brow .dchips, .brow .chips { margin-top: 0 !important; }
.bblock-ctas { margin-top: 28px; }
@media (min-width: 900px) {
.bblock { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(48px, 6vw, 96px); align-items: center; }
.bblock:nth-child(even) .bblock-pic { order: 0; justify-self: stretch; }
.bblock-pic { max-width: none; }
.bblock-name { font-size: clamp(3.25rem, 5.4vw, 5.25rem); line-height: 1.02; margin-top: 4px; }
.bblock-tag { font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--text); }
.bblock-bio { -webkit-line-clamp: 5; max-width: 56ch; color: var(--text-2); }
.specs > div { grid-template-columns: 1fr; }
}
.bblock-pic img, .prof-pic img, .tcard-pic img { filter: grayscale(1) contrast(1.06) brightness(.94); transition: filter 450ms cubic-bezier(.23, 1, .32, 1), transform 700ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
.bblock-pic:hover img, .prof-pic:hover img, .tcard:hover .tcard-pic img { filter: grayscale(0) contrast(1.03) brightness(1); transform: scale(1.025); }
}
@media (hover: none), (max-width: 767px) {
.bblock-pic img, .prof-pic img, .tcard-pic img { filter: saturate(.85) contrast(1.03); }
}
@media (prefers-reduced-motion: reduce) {
.bblock-pic img, .prof-pic img, .tcard-pic img { transition: filter 150ms ease; }
.bblock-pic:hover img, .prof-pic:hover img, .tcard:hover .tcard-pic img { transform: none; }
}
/* v40b: the gallery page without photos */
.gempty { display: grid; gap: 32px; align-items: center; }
.gempty-line { margin: 0 0 24px; max-width: 34ch; font: 400 clamp(1.5rem, 3vw, 2.25rem)/1.25 var(--font-d); color: var(--text); }
.gempty .about-pic { margin: 0; }
@media (min-width: 900px) {
.gempty { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); }
}
/* v41: the home team as a horizontal slider (native scroll-snap carousel by default; pinned by GSAP + ScrollTrigger on desktop) */
.team-slider { overflow: clip; }
.ts-vp { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 0 var(--gx-l); scroll-padding-inline: var(--gx-l); margin-top: 28px; }
.ts-vp::-webkit-scrollbar { display: none; }
.ts-track { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ts-panel { flex: 0 0 86%; scroll-snap-align: start; display: grid; gap: 24px; align-content: start; min-width: 0; }
.ts-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.ts-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.03); }
.ts-name { margin: 6px 0 0; font: 400 clamp(2.25rem, 8vw, 2.5rem)/1.05 var(--font-d); }
.ts-name a { color: var(--text); text-decoration: none; }
.ts-tag { margin: 16px 0 0; font: italic 400 1.5rem/1.3 var(--font-d); color: var(--text); }
.ts-txt .actions { margin-top: 24px; }
.ts-ui { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.ts-count { font: 500 .75rem/1 var(--font); letter-spacing: .14em; color: var(--text-2); white-space: nowrap; }
.ts-count b { color: var(--text); font-weight: 600; }
.ts-line { position: relative; flex: 1 1 auto; height: 1px; background: var(--line-2); overflow: hidden; }
.ts-line i { position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; }
.ts-arrows { display: inline-flex; gap: 8px; }
.ts-arw { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(245, 240, 230, .5); border-radius: 3px; background: transparent; color: var(--cream); cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
.ts-arw svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ts-arw:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) {
.ts-arw:hover { background: rgba(245, 240, 230, .08); }
}
.ts-arw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 900px) {
.ts-vp { padding: 0; scroll-padding-inline: 0; }
.ts-track { gap: 0; }
.ts-panel { flex: 0 0 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 5vw, 80px); padding: 0 var(--gx-r) 0 var(--gx-l); }
.ts-pic { width: auto; height: clamp(280px, calc(100svh - var(--header-h) - 340px), 620px); max-width: 100%; justify-self: start; }
.ts-name { font-size: clamp(3rem, 5vw, 4.75rem); }
.ts-pic img { filter: grayscale(1) contrast(1.06) brightness(.94); transition: filter 450ms cubic-bezier(.23, 1, .32, 1), transform 700ms cubic-bezier(.23, 1, .32, 1); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.ts-pic:hover img { filter: grayscale(0) contrast(1.03) brightness(1); transform: scale(1.025); }
}
.team-slider.is-pinned .ts-vp { overflow: hidden; scroll-snap-type: none; }
.team-slider.is-pinned .ts-track { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
.ts-pic img { transition: none; }
}
/* v42: header from 768px: language dropdown on the LEFT, logo in the centre, "Rezervo" on the RIGHT; the page links move to the menu button below 1360px */
@media (min-width: 768px) {
.header .lang.lang-dd { display: block; margin: 0 8px 0 -10px; padding: 0; border: 0; }
.ld-menu { left: 0; right: auto; }
}
@media (min-width: 768px) and (max-width: 1359px) {
.header .nav { display: none; }
.header .menu-btn { display: inline-grid; }
}
@media (min-width: 1360px) {
.header .nav { display: flex; }
.header .menu-btn { display: none; }
}
/* v43: route curtain (see changeView): #10100F, the gold E drawn with a wipe, a thin progress line */
.rc { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #10100F; pointer-events: none; clip-path: inset(100% 0 0 0); }
.rc.is-in { clip-path: inset(0); transition: clip-path 260ms cubic-bezier(.77, 0, .175, 1); }
.rc.is-in.is-out { clip-path: inset(0 0 100% 0); transition: clip-path 320ms cubic-bezier(.77, 0, .175, 1); }
.rc-mark { display: grid; justify-items: center; gap: 22px; }
.rc-e { display: block; width: min(32vw, 132px); height: auto; clip-path: inset(0 0 100% 0); }
.rc.is-in .rc-e { animation: rc-e 520ms cubic-bezier(.77, 0, .175, 1) 120ms forwards; }
.rc-bar { display: block; width: min(40vw, 160px); height: 1px; background: rgba(245, 240, 230, .14); overflow: hidden; }
.rc-bar b { display: block; height: 100%; background: rgba(245, 240, 230, .7); transform: scaleX(0); transform-origin: 0 50%; }
.rc.is-in .rc-bar b { animation: rc-bar 560ms cubic-bezier(.23, 1, .32, 1) 100ms forwards; }
@keyframes rc-e { to { clip-path: inset(0); } }
@keyframes rc-bar { to { transform: scaleX(1); } }
/* reduced motion: the same curtain and the gold E, opacity only (no movement), about the same length */
@media (prefers-reduced-motion: reduce) {
.rc { clip-path: none; opacity: 0; visibility: hidden; }
.rc.is-in { opacity: 1; visibility: visible; transition: opacity 260ms ease; }
.rc.is-in.is-out { opacity: 0; transition: opacity 320ms ease; }
.rc-e { clip-path: none; opacity: 0; }
.rc.is-in .rc-e { animation: rc-fade 520ms ease 120ms forwards; }
.rc-bar b { transform: none; opacity: 0; }
.rc.is-in .rc-bar b { animation: rc-fade 560ms ease 100ms forwards; }
}
@keyframes rc-fade { to { opacity: 1; } }
/* header nav stays on one line next to the language dropdown */
.nav a { white-space: nowrap; }
@media (min-width: 1360px) and (max-width: 1599px) {
.nav a { padding: 0 8px; font-size: .875rem; letter-spacing: .08em; }
.nav { margin-left: -8px; }
}
/* the home team slider fits the pinned viewport */
.team-slider { padding: clamp(32px, 5svh, 56px) 0; }
@media (min-width: 900px) {
.ts-pic { height: clamp(260px, calc(100svh - var(--header-h) - 380px), 620px); }
}
/* v44: phone header (<768px): MENU left, logo centre, REZERVO right; the open menu has its own "Mbyll" (X) on the left, in the same place */
@media (max-width: 767px) {
.hdr-l { order: 3; justify-self: end; }
.hdr-r { order: 1; justify-self: start; }
.logo { order: 2; }
.menu-btn { padding: 0 8px 0 0; }
}
.menu-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.menu-close { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; color: var(--text); font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.menu-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.menu-close:hover { color: var(--cream); }
}
@media (max-width: 359px) {
.menu-close { gap: 8px; letter-spacing: .12em; }
}
/* v45: home services as a clean price list; the team title in the soft italic display style; one reusable salon + address + hours block */
.mrow-price { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-d); font-variant-numeric: tabular-nums; }
.mrow-dur { font: 400 .875rem/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.dh-soft { font-style: italic; color: var(--text-2); }
.loc { display: grid; gap: 20px; }
.loc .panel + .panel { margin-top: 0; }
.bb-r { min-width: 0; }
/* v46: the phone menu: Account + Language side by side as two outline buttons right after the page links, then the primary button */
.menu-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 24px 0 12px; }
#menu .menu-foot .menu-acct, .menu-actions .ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid rgba(245, 240, 230, .5); border-radius: 3px; background: transparent; color: var(--cream); font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease, border-color 160ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
#menu .menu-foot .menu-acct[hidden] { display: none; }
#menu .menu-foot .menu-acct svg { width: 18px; height: 18px; }
#menu .menu-foot .menu-acct:active, .menu-actions .ld-btn:active { transform: scale(.97); background: rgba(245, 240, 230, .14); }
@media (hover: hover) and (pointer: fine) {
#menu .menu-foot .menu-acct:hover, .menu-actions .ld-btn:hover { background: rgba(245, 240, 230, .08); border-color: var(--cream); }
}
.menu-actions .lang-dd { display: block; margin: 0; }
.menu-actions .ld-menu { left: 0; right: 0; min-width: 0; }
.menu-actions .ld-menu a { min-height: 48px; }
.menu-actions .acct-dot { margin-left: 2px; }
/* v47: the customer portal. Header with the greeting and a small "Dil"; segmented tabs; the next appointment first (kicker + larger card);
   appointment cards on the B surface with a big serif date block; a segmented Upcoming | Past; the profile as grouped cards, two columns on desktop. */
.acct-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.acct-top .acct-head { margin-bottom: 0; min-width: 0; }
.acct-top h1 { white-space: nowrap; text-wrap: nowrap; font-size: clamp(1.75rem, 7.4vw, 3.25rem); overflow: hidden; text-overflow: ellipsis; }
.acct-out { flex: none; margin-top: 6px; }
.acct-bar { border-bottom: 0; margin: 20px 0 28px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); }
.seg .tab { margin: 0; min-height: 44px; padding: 0 20px; border-radius: 3px; color: var(--text-2); font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; transition: background-color 180ms ease, color 180ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
.seg .tab::after { display: none; }
.seg .tab[aria-current], .seg .tab[aria-pressed=true] { background: var(--cream); color: #10100F; }
.seg .tab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.seg .tab:not([aria-current]):not([aria-pressed=true]):hover { background: rgba(245, 240, 230, .08); color: var(--cream); }
}
.seg .tab i { margin-left: 8px; font-style: normal; opacity: .6; }
.seg-sm { margin: 0 0 20px; }
.acct-kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.acct-kicker span { color: var(--cream); }
.seg-panel.seg-in { animation: seg-in 280ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes seg-in { from { opacity: 0; transform: translateX(14px); } }
.appts { display: grid; gap: 12px; border: 0 !important; }
.appts > li + li { border-top: 0 !important; }
.appt { grid-template-columns: 72px minmax(0, 1fr); gap: 0 18px; padding: 18px; border: 0 !important; border-radius: 4px; background: var(--panel); animation: rise-in 320ms cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@media (min-width: 768px) {
.appt { grid-template-columns: 104px minmax(0, 1fr); gap: 0 28px; padding: 24px 28px; }
}
.appt-date { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 10px 0; border-right: 1px solid var(--line); text-align: center; }
.appt-wd, .appt-mo { font: 600 .6875rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.appt-date b { font: 400 clamp(2.5rem, 9vw, 3.5rem)/1 var(--font-d); color: var(--text); }
.appt-when { font: 400 clamp(1.75rem, 5.4vw, 2.25rem)/1.1 var(--font-d); font-variant-numeric: tabular-nums; }
.appt-what { margin-top: 6px; color: var(--text-2); }
.appt-who { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--text); font-size: .9375rem; }
.appt-who .avatar { width: 32px; border-radius: 50%; }
.appt-meta { margin-top: 14px; }
.appt-price { font-variant-numeric: tabular-nums; }
.appt-actions { gap: 10px 20px; }
.appt-cancel { min-height: 44px; padding: 0 4px; border: 0; background: none; color: #E8A598; font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: color 160ms ease, transform 120ms ease; }
.appt-cancel:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.appt-cancel:hover { color: #F4C2B8; }
}
.appt.is-cancelled { opacity: .72; }
.appts:not(.is-past) > li:first-child { background: var(--bg-3); box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .14); }
.appts:not(.is-past) > li:first-child .appt-date b { font-size: clamp(3rem, 11vw, 4.5rem); }
@media (hover: hover) and (pointer: fine) {
.appt { transition: background-color 200ms ease, transform 260ms cubic-bezier(.23, 1, .32, 1); }
.appt:hover { background: var(--raised); transform: translateY(-2px); }
}
.acct-empty { display: grid; gap: 24px; align-items: center; padding: 0; border-radius: 4px; overflow: hidden; background: var(--panel); }
.acct-empty-pic { aspect-ratio: 16 / 10; overflow: hidden; }
.acct-empty-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); }
.acct-empty > div:last-child { padding: 0 20px 24px; }
.acct-empty-t { margin: 0 0 18px; font: 400 clamp(1.5rem, 4vw, 2rem)/1.2 var(--font-d); }
@media (min-width: 768px) {
.acct-empty { grid-template-columns: 320px minmax(0, 1fr); gap: 36px; }
.acct-empty-pic { aspect-ratio: 4 / 5; }
.acct-empty > div:last-child { padding: 24px 32px 24px 0; }
}
.prof-grid { display: grid; gap: 16px; align-items: start; }
.acct-col { display: grid; gap: 16px; }
.acct-card { padding: 22px 20px; border-radius: 4px; background: var(--panel); animation: rise-in 320ms cubic-bezier(.23, 1, .32, 1) both; }
.acct-card .acct-h { margin-bottom: 18px; }
.acct-group { margin: 6px 0 -2px; font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.acct-card .field input, .acct-card .field select { background: var(--bg); }
.acct-card.acct-danger { margin-top: 0; border: 0; }
@media (max-width: 767px) {
.acct-card .actions .btn, .appt-actions .btn { width: 100%; }
}
@media (min-width: 900px) {
.prof-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.acct-card { padding: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.appt, .acct-card, .seg-panel.seg-in { animation: none; }
.appt:hover { transform: none; }
}
/* v48: the hours component (menu, footer, contact, About, home): two columns, grouped days, today marked, tabular numbers */
.htable, .menu-hours { margin: 0; display: grid; gap: 2px; }
.htable > div, .menu-hours > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 12px; min-height: 36px; padding: 6px 0; border: 0 !important; }
.htable dt, .menu-hours dt { display: flex; align-items: baseline; gap: 8px; font: 400 1rem/1.3 var(--font); color: var(--text-2); }
.htable dd, .menu-hours dd { margin: 0; font: 400 1rem/1.3 var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; text-align: left; color: var(--text-2); }
.htable .is-today dt, .htable .is-today dd, .menu-hours .is-today dt, .menu-hours .is-today dd { color: var(--cream); font-weight: 600; }
.today-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cream); transform: translateY(-2px); flex: none; }
.today-tag { margin-left: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.htable .is-closed dd, .menu-hours .is-closed dd { color: var(--text-3); }
.footer .htable dt, .footer .htable dd { font-size: .9375rem; }
.status { margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.menu-hours { margin-top: 20px; }
/* v50: header = [menu | page links] [logo] [language + Rezervo] at every width (phones: menu left, logo centre, Rezervo right, the language lives in the menu);
   one title style for every page and section title (the soft italic display of "Profesionistët tanë") */
.hdr-l { order: 0; justify-self: start; }
.hdr-r { order: 0; justify-self: end; gap: 0; }
.logo { order: 0; }
.header .hdr-book { display: inline-flex; --h: 44px; --px: 14px; font-size: .6875rem; letter-spacing: .16em; margin: 0; }
.header .hdr-book[hidden] { display: none; }
.header .menu-btn { display: inline-flex; padding: 0 8px 0 0; }
@media (min-width: 768px) {
.header .hdr-book { --px: 16px; font-size: .75rem; }
.header .lang.lang-dd { display: block; margin: 0 4px 0 0; padding: 0; border: 0; }
.header .ld-menu { left: auto; right: 0; }
.header .menu-btn { display: inline-grid; padding: 0; }
.header .nav { display: none; }
}
@media (min-width: 1360px) {
.header .nav { display: flex; }
.header .menu-btn { display: none; }
}
@media (max-width: 767px) {
.header .lang.lang-dd { display: none; }
}
:root { --title-fs: clamp(1.75rem, 8.4vw, 5rem); --title-fs-sm: clamp(1.5rem, 5.2vw, 2.5rem); }
.dh, .h-xl, .bp-title, .legal-title, .phd-h, .prof-name, .band-title, .acct-top h1 {
  font-family: var(--font-d); font-weight: 400; font-style: italic; font-size: var(--title-fs); line-height: 1.05; letter-spacing: -.012em;
  color: var(--text-2); text-transform: none; white-space: nowrap; text-wrap: nowrap; margin-bottom: 0;
}
.dh em, .prof-name em { display: inline; font-style: italic; color: inherit; }
.prof-name em::before { content: ' '; }
.prof-name, .legal-title { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
.bp-title::after { display: none; }
.h-sm, .legal-h, .scat-title, .wz-title, .prof-sec h2, .prof-sec > h2, .acct-h {
  font-family: var(--font-d); font-weight: 400; font-style: italic; font-size: var(--title-fs-sm); line-height: 1.1; letter-spacing: -.01em;
  color: var(--text-2); text-transform: none; text-wrap: balance;
}
/* v50b: the team slider is pinned on phones too (compact two-column panels so a panel fits the screen); reduced motion keeps the native carousel */
@media (max-width: 899px) {
.ts-vp { padding: 0; scroll-padding-inline: 0; margin-top: 16px; }
.ts-track { gap: 0; }
.ts-panel { flex: 0 0 100%; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 var(--gx-r) 0 var(--gx-l); }
.ts-pic { width: 100%; }
.ts-name { font-size: clamp(1.625rem, 7vw, 2rem); margin: 4px 0 0; }
.ts-tag { display: none; }
.ts-txt .actions { margin-top: 14px; display: grid; gap: 8px; }
.ts-txt .actions .btn { --h: 44px; width: 100%; padding: 0 10px; letter-spacing: .1em; font-size: .6875rem; }
.team-slider { padding: 24px 0; }
.team-slider .band-head { gap: 8px 16px; }
.ts-ui { margin-top: 16px; }
}
/* v50c: service rows on phones: name left, duration + price right on one line, the description under the name; the photo above the list at a fixed ratio; the whole row is the booking link */
@media (max-width: 767px) {
.mrows { margin-top: 24px; }
.mrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name meta" "desc desc" "inc inc"; gap: 6px 14px; align-items: start; padding: 16px 0; min-height: 56px; }
.mrow-body { display: contents; }
.mrow-n, .mrow .arw { display: none; }
.mrow-name { grid-area: name; font-size: 1.375rem; line-height: 1.15; }
.mrow-desc { grid-area: desc; font-size: .875rem; line-height: 1.45; max-width: none; }
.mrow-inc { grid-area: inc; }
.mrow-meta { grid-area: meta; display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.mrow-dur { font: 400 .8125rem/1.2 var(--font); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.mrow-price { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.mrow:active .mrow-name { color: var(--cream); }
}
/* v51: services = photo on the left (sticky on desktop), title + list + link on the right; on phones the photo sits above the list at a fixed ratio.
   Booking title in the shared title style; the gallery's empty state has no photo. */
.svc-layout { display: grid; gap: 28px; }
.svc-pic { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--panel); }
.svc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.95); }
.svc-main { min-width: 0; }
.svc-main .band-head { margin-bottom: 8px; }
@media (min-width: 900px) {
.svc-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.svc-pic { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + 24px); }
.svc-main .mrows { margin-top: 12px; }
.svc-main .mrow { grid-template-columns: 36px minmax(0, 1fr) auto 44px; grid-template-areas: "n body meta arw"; gap: 4px 20px; padding: 24px 0; }
.svc-main .mrow-meta { display: flex; align-items: baseline; gap: 16px; white-space: nowrap; justify-content: flex-end; }
.svc-main .mrow-dur, .svc-main .mrow-price { grid-area: auto; text-align: right; }
.svc-main .mrow-name { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.svc-main .scat-head { margin-top: 24px; }
}
.gempty { display: block; }
body[data-route=book] .bp-title { font-family: var(--font-d); font-style: italic; font-weight: 400; font-size: var(--title-fs); color: var(--text-2); letter-spacing: -.012em; line-height: 1.05; white-space: nowrap; }
/* v53: phone hero: the two buttons side by side, equal width, same height, same gap */
@media (max-width: 599px) {
.hero .actions { flex-wrap: nowrap; gap: 10px; }
.hero .actions > .btn, .hero .actions > .btn:first-child { flex: 1 1 0; min-width: 0; width: auto; height: 48px; min-height: 48px; padding: 0 8px; justify-content: center; white-space: nowrap; letter-spacing: .1em; font-size: .75rem; }
.hero .actions > .btn span { overflow: visible; }
}
/* v55: closures (notice + greyed calendar days), the recurring mark, the barber name on one line */
.closure-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 3px; background: var(--bg-3); color: var(--text); font-size: .9375rem; line-height: 1.45; }
.closure-note p + p { margin-top: 6px; }
.cal-closures { margin-top: 12px; background: var(--panel); color: var(--text-2); }
.cal-day.is-closure { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(245, 240, 230, .06) 5px 6px); color: var(--text-3); }
.tag-recurring { color: var(--cream); border-color: rgba(245, 240, 230, .35); }
.prof-name { white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal; }
/* v56: the barber profile's works sit on the B surface (A, B rhythm) */
.prof-band .prof-sec { padding-top: 0; }
.prof-band { margin-top: clamp(40px, 6vw, 80px); }
/* v58: /berberet on desktop: the rows zigzag (1 photo left, 2 photo right, ...) */
@media (min-width: 900px) {
  .bblock:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .bblock:nth-child(even) .bblock-pic { order: 2; }
}
/* v58: on phones / touch the page change is only a ~120ms fade (no curtain) */
html.pt-fast #app, html.pt-fast .footer { transition: opacity 120ms ease; }
html.pt-fast.pt-out #app, html.pt-fast.pt-out .footer { opacity: 0; }
/* v58b: the barber rows follow reference 24: hairline facts grid, then working days + best booked in one block without a line between them */
.bblock .specs { margin-top: 28px; }
.bblock .brow { padding: 22px 0 0; border: 0; }
.bblock .brow + .brow { padding-top: 18px; }
.bblock .brow .bblock-k { margin-bottom: 12px; }
.bblock-ctas { margin-top: 30px; }
@media (min-width: 900px) { .bblock { gap: 32px clamp(56px, 9vw, 136px); } .bblock-pic { max-width: 100%; } }
.ts-best { margin-top: 18px; }
.ts-best .bblock-k { margin-bottom: 10px; }
@media (max-width: 899px) { .ts-best { display: none; } }

/* v61: home order and surfaces; circled section numbers; the closing booking band */
.sec-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sec-no { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; font: 500 .75rem/1 var(--font); letter-spacing: .06em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sec-title .dh { min-width: 0; }
.band-alt { background: var(--panel); }
.cta-close { text-align: center; padding: clamp(72px, 11vw, 160px) 0; }
.cta-close-in { display: grid; justify-items: center; gap: 0; }
.cta-close-h { margin: 0; font: italic 400 clamp(2.5rem, 11vw, 7rem)/1.02 var(--font-d); letter-spacing: -.015em; color: var(--text); white-space: nowrap; }
.cta-close-p { margin: 20px 0 0; max-width: 40ch; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: balance; }
.cta-close .actions { justify-content: center; margin-top: 36px; }
@media (max-width: 599px) { .cta-close .actions { width: 100%; } .cta-close .actions > .btn { flex: 1 1 100%; } }
.loc-band .closure-note { margin: 0 0 24px; }
.loc-band .loc { display: grid; gap: 16px; }
@media (min-width: 900px) { .loc-band .loc { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); align-items: stretch; gap: 20px; } .loc-band .about-pic { height: 100%; aspect-ratio: auto; min-height: 320px; } .loc-band .panel { display: flex; flex-direction: column; justify-content: flex-start; } }

/* v62: one merged last band: photo, "Rezervo termin" call to action, address, hours */
.fm { display: grid; gap: 24px; }
.fm-pic { margin: 0; }
.fm-cta { display: grid; justify-items: start; }
.fm-cta .cta-close-h { text-align: left; font-size: clamp(2.5rem, 11vw, 4.5rem); }
.fm-cta .cta-close-p { margin-top: 16px; text-align: left; max-width: 44ch; text-wrap: pretty; }
.fm-cta .closure-note { margin: 20px 0 0; align-self: stretch; }
.fm-cta .actions { justify-content: flex-start; margin-top: 28px; width: 100%; }
@media (max-width: 599px) { .fm-cta .actions > .btn { flex: 1 1 100%; } }
@media (min-width: 900px) {
  .fm { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); grid-template-areas: "pic cta cta" "pic find hours"; gap: 24px 24px; align-items: start; }
  .fm-pic { grid-area: pic; height: 100%; aspect-ratio: auto; min-height: 420px; }
  .fm-pic img { height: 100%; }
  .fm-cta { grid-area: cta; padding-bottom: 8px; }
  .fm-cta .cta-close-h { font-size: clamp(3rem, 5.6vw, 5.25rem); }
  .fm-find { grid-area: find; }
  .fm-hours { grid-area: hours; }
}
.fm .panel, .fm .panel + .panel { margin-top: 0; }
@media (min-width: 900px) { .fm-find, .fm-hours { align-self: stretch; } }
/* v63: the times, one hour per row (four 15-minute chips); the hour label on the left from 768px */
.slots.slots-rows { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 560px; }
.slot-row { display: grid; grid-template-columns: repeat(var(--per, 4), minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.slot-h { display: none; }
.slots-rows .slot { justify-content: center; min-height: 44px; padding: 0 2px; font-size: 1rem; }
.slots-rows .slot.is-taken { opacity: .32; border-style: dashed; pointer-events: none; text-decoration: line-through; text-decoration-color: rgba(245, 240, 230, .3); }
@media (min-width: 768px) {
  .slot-row { grid-template-columns: 56px repeat(var(--per, 4), minmax(0, 1fr)); }
  .slot-h { display: block; align-self: center; font: 500 .8125rem/1 var(--font); letter-spacing: .08em; color: var(--text-2); font-variant-numeric: tabular-nums; }
}
/* v64: phone footer: the page links in a tidy three-column grid (two rows), tap targets 44px */
@media (max-width: 767px) {
  .footer-grid > .f-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-grid > .f-col:nth-child(2) .f-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .footer-grid > .f-col:nth-child(2) .f-list li { min-width: 0; }
  .footer-grid > .f-col:nth-child(2) .f-list a { width: 100%; min-height: 44px; overflow-wrap: anywhere; }
}
/* v65: the header (docked) and the phone menu's top bar are a softer warm dark (#201F1D at .94, light blur), still no bottom line */
.header::before { background: rgba(32, 31, 29, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-top { background: #201F1D; }
/* v66: the default barber portrait (line art, transparent): shown whole on the page surface, no colour hover, no frame */
img.bd-img { object-fit: contain !important; filter: none !important; transform: none !important; padding: 6%; }
:is(.bblock-pic, .prof-pic, .tcard-pic, .ts-pic, .bcard-pic):has(.bd-img) { background: transparent; box-shadow: none; }
.bblock-pic:hover img.bd-img, .prof-pic:hover img.bd-img, .tcard:hover .tcard-pic img.bd-img, .ts-pic:hover img.bd-img { transform: none !important; filter: none !important; }
.avatar-default { background: transparent; }
.avatar-default img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* v66b: booking switched off: the contact buttons (Telefono / WhatsApp) take the place of "Rezervo"; the menu's WhatsApp button sits full width under the call button */
.menu-wa { margin-top: 10px; }
.menu-wa .btn { width: 100%; }

/* v69: the contact chooser (online booking off): a bottom sheet on phones, a centred dialog on desktop, the same list inline on the booking page */
.chooser { margin: auto 0 0; width: 100%; max-width: none; max-height: 88svh; padding: 0; border: 0; border-radius: 12px 12px 0 0; background: #1C1C1A; color: var(--text); overflow: auto; }
.chooser::backdrop { background: rgba(0, 0, 0, .62); }
.chooser[open] { animation: ch-sheet 280ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes ch-sheet { from { opacity: 0; transform: translateY(24px); } }
.chooser-in { position: relative; padding: 28px var(--gx-l) calc(28px + env(safe-area-inset-bottom)); }
.ch-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--text); cursor: pointer; touch-action: manipulation; }
.ch-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ch-h { margin: 0 0 18px; padding-right: 44px; font: italic 400 var(--title-fs-sm)/1.1 var(--font-d); color: var(--text-2); outline: none; }
.ch-sub { margin: -10px 0 20px; color: var(--text-2); }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 8px 14px 8px 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
.ch-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .ch-card:hover { background: var(--raised); } }
.ch-card svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); }
.ch-av { width: 56px; border-radius: 50%; overflow: hidden; }
.ch-salon { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line-2); background: var(--panel); }
.ch-salon svg { width: 24px; height: 24px; }
.ch-txt { display: grid; gap: 2px; min-width: 0; }
.ch-txt b { font: 400 1.375rem/1.1 var(--font-d); overflow-wrap: anywhere; }
.ch-txt span { color: var(--text-2); font-size: .875rem; }
.ch-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 6px -4px; padding: 0 8px 0 0; border: 0; background: none; color: var(--text); font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.ch-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ch-actions { display: grid; gap: 12px; }
.ch-big { --h: 56px; width: 100%; justify-content: center; }
.ch-big i { font-style: normal; opacity: .7; letter-spacing: .04em; }
@media (min-width: 768px) {
  .chooser { margin: auto; width: min(520px, 92vw); border-radius: 6px; max-height: 86vh; }
  .chooser-in { padding: 36px 36px 36px; }
}
.chooser-inline { max-width: 520px; }
.chooser-inline .ch-h { padding-right: 0; }
@media (prefers-reduced-motion: reduce) { .chooser[open] { animation: none; } }

/* v72: the phone hero is full height again (photo edge to edge); its photo is a tall crop (salon-main-t-*). The header's blur never reaches the photo. */
.header:not(.docked)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* v73: the first screen on phones fits the visible viewport exactly (100vh fallback, 100svh) and melts into the next section (A #10100F) with a soft dark gradient;
   anything the photo does not cover is the page colour, never a different band */
.hero { background: var(--page-bg); min-height: 100vh; min-height: 100svh; }
.hero::before { background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .38) 22%, rgba(0, 0, 0, .34) 52%, rgba(10, 10, 9, .82) 80%, rgba(16, 16, 15, .97) 94%, var(--page-bg)), radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 100%); }
/* v77: the barber's photo and name are the link to his profile (clear hover and focus); the rows and slider panels carry one button only */
.bblock-name a, .ts-name a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .12em; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .bblock-name a:hover, .ts-name a:hover { text-decoration-color: var(--text-2); } .bblock-pic:hover, .ts-pic:hover { box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .35); } }
.bblock-name a:focus-visible, .ts-name a:focus-visible, .bblock-pic:focus-visible, .ts-pic:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }