/* ═══════════════════════════════════════════════════════════
   ABDO YOUNES — Barbershop
   Monochrome design system
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --black: #000000;
  --ink: #050505;
  --panel: #0b0b0b;
  --panel-2: #101010;
  --panel-3: #161616;

  --white: #ffffff;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.60);
  --faint: rgba(255, 255, 255, 0.38);
  --ghost: rgba(255, 255, 255, 0.16);

  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);

  --glow-sm: 0 0 24px rgba(255, 255, 255, 0.10);
  --glow: 0 0 60px rgba(255, 255, 255, 0.14);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.75);

  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-h: 82px;
  --radius: 4px;
  --radius-lg: 10px;
  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

/* Any rule that sets `display` would otherwise beat the browser default for
   [hidden], leaving elements we hid from script still on screen. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--white); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Slim monochrome scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 10px; border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(72px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(52px, 7vw, 90px) 0; }
.section--line { border-top: 1px solid var(--line); }

/* ── Typography ─────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--line-strong);
}

.h-xl { font-size: clamp(2.6rem, 7.2vw, 6.2rem); font-weight: 900; letter-spacing: -0.035em; }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
.h-md { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 800; }
.h-sm { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; }

.lede { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--muted); max-width: 58ch; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease), opacity .3s;
  white-space: nowrap;
}

/* A white curtain wipes up from the bottom on hover. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--black); border-color: var(--white); }
.btn:active { transform: scale(0.975); }

.btn--solid { --btn-bg: var(--white); --btn-fg: var(--black); --btn-bd: var(--white); }
.btn--solid::after { background: var(--black); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--white); border-color: var(--white); }

.btn--ghost { --btn-bd: var(--line); }
.btn--sm { padding: 10px 20px; font-size: 10.5px; letter-spacing: 0.16em; }
.btn--lg { padding: 19px 44px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .35; pointer-events: none; }

.btn__arrow { transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Text link with an underline that draws in */
.link-u {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  font-weight: 600;
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height .45s var(--ease), background-color .45s var(--ease),
              border-color .45s var(--ease), backdrop-filter .45s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  height: 66px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  flex-shrink: 0;
}
.nav__logo svg { width: 52px; height: auto; transition: transform .5s var(--ease); }
.nav__logo:hover svg { transform: scale(1.07); }
.nav__logo-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
}
.nav__logo-text span { display: block; font-size: 8px; font-weight: 600; letter-spacing: 0.34em; color: var(--faint); margin-top: 5px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__link {
  position: relative;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--white); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 12px; margin-left: 10px; }

.nav__cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  transition: color .3s, border-color .3s, transform .3s var(--ease);
}
.nav__cart:hover { color: var(--white); border-color: var(--line-strong); transform: translateY(-2px); }
.nav__cart-count {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  transform: scale(0);
  transition: transform .4s var(--ease);
}
.nav__cart-count.is-on { transform: scale(1); }
.nav__cart-count.pop { animation: cartPop .5s var(--ease); }
@keyframes cartPop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Mobile menu */
.nav__burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 12px;
  width: 18px; height: 1.5px;
  background: var(--white);
  transition: transform .4s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav__burger span:nth-child(3) { top: 25px; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer__link {
  display: block;
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover { color: var(--muted); }
.drawer__foot { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }

/* ── Hero ───────────────────────────────────────────────── */
/* A flex column: the copy takes the free space and centres inside it, and the
   stats row sits after it in normal flow. Floating the stats absolutely made
   them collide with the buttons whenever the viewport was short. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--nav-h);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: grayscale(1) contrast(1.16) brightness(.55);
  transform: scale(1.14);
  animation: kenBurns 26s var(--ease-in-out) infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1.14) translate3d(0, 0, 0); }
  to   { transform: scale(1.26) translate3d(-2.2%, -2.6%, 0); }
}

/* Vignette + gradient so the type always stays legible */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.62) 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.85) 100%);
}

/* No hero photo uploaded yet — a deliberate brand treatment rather than a
   stand-in image: a soft light pool behind the type and a faint barber-pole
   diagonal, so the section reads as designed instead of unfinished. */
.hero--brand .hero__bg {
  background:
    radial-gradient(58% 62% at 22% 30%, rgba(255, 255, 255, 0.13), transparent 62%),
    radial-gradient(48% 55% at 82% 78%, rgba(255, 255, 255, 0.07), transparent 66%),
    repeating-linear-gradient(
      -52deg,
      rgba(255, 255, 255, 0.030) 0px,
      rgba(255, 255, 255, 0.030) 2px,
      transparent 2px,
      transparent 26px
    ),
    linear-gradient(160deg, #0d0d0d 0%, #000 58%);
}
.hero--brand .hero__bg::after {
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 46%, transparent 78%),
    radial-gradient(120% 92% at 50% 0%, transparent 46%, rgba(0, 0, 0, .78) 100%);
}

/* Fine scanline texture for a filmic feel */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.028) 0px,
    rgba(255,255,255,.028) 1px,
    transparent 1px,
    transparent 3px
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(28px, 6vh, 60px);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}
/* Wide enough that the headline keeps to one line per phrase on desktop. */
.hero__content { max-width: min(100%, 980px); }

/* Copy on the left, portrait panel on the right. The figure is sized by
   height so it can never push the hero past the fold on a short screen. */
.hero__grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.hero__figure {
  position: relative;
  margin: 0;
  /* Centred under the copy on a phone; moved beside it at the desktop
     breakpoint. The 4/5 frame is kept at every size because the crop below
     is measured against it — changing the ratio would slide the shop's logo
     back into view. */
  justify-self: center;
  display: block;
}

/* Offset outline sitting behind the photo, editorial style. */
.hero__figure::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.hero__photo {
  position: relative;
  height: min(54vh, 470px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7);
  /* Wipes open on load, then breathes very slightly. */
  clip-path: inset(0 0 100% 0);
  animation:
    photoReveal 1.1s var(--ease) .55s forwards,
    photoFloat 7s var(--ease-in-out) 1.9s infinite alternate;
}
@keyframes photoReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes photoFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -10px, 0); }
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.16) brightness(.95);
  transition: transform 1.4s var(--ease), filter .6s var(--ease);
}
.hero__figure:hover .hero__photo img { transform: scale(1.045); filter: grayscale(1) contrast(1.2) brightness(1.04); }

/* The stock shop photo carries a large brand logo lower down the frame, so
   it is cropped to the portrait above it (source rect 150,90 448×560). */
.hero__photo--crop img {
  position: absolute;
  /* Deliberately wider than the frame — the global img reset would otherwise
     clamp it back to 100% and undo the crop. */
  max-width: none;
  width: 164.73%;
  height: auto;
  left: -33.48%;
  top: -16.07%;
  object-fit: fill;
}

/* Keeps the type readable where it meets the photo edge. */
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 42%);
  pointer-events: none;
}

.hero__chip {
  position: absolute;
  left: -18px;
  bottom: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  opacity: 0;
  animation: fadeUp .9s var(--ease) 1.5s forwards;
}
.hero__chip svg { flex-shrink: 0; }

.hero__mark {
  /* Tracks viewport height too, so a short laptop screen does not push the
     buttons and stats past the fold. */
  width: clamp(84px, min(12vw, 13vh), 148px);
  color: var(--white);
  margin-bottom: clamp(16px, 3vh, 30px);
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.34));
  opacity: 0;
  animation: markIn 1.3s var(--ease) .15s forwards;
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(26px) scale(.9); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  to   { opacity: 1; transform: none; filter: drop-shadow(0 0 26px rgba(255,255,255,.34)); }
}

.hero__title {
  font-size: clamp(2.5rem, min(7.4vw, 11.5vh), 6.4rem);
  font-weight: 900;
  letter-spacing: -0.038em;
  line-height: .98;
  text-transform: uppercase;
}
/* Each line rises out from behind a mask */
.hero__line { display: block; overflow: hidden; }
.hero__line > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 1.15s var(--ease) forwards;
}
.hero__line:nth-child(1) > span { animation-delay: .35s; }
.hero__line:nth-child(2) > span { animation-delay: .48s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero__title em {
  font-style: normal;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.72);
  color: transparent;
}

.hero__sub {
  margin-top: clamp(14px, 2.6vh, 26px);
  font-size: clamp(.98rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 46ch;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .78s forwards;
}

.hero__cta {
  margin-top: clamp(22px, 4.2vh, 42px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .92s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* In flow, and relying on its own .wrap padding so the stats line up with the
   headline above instead of being indented by a second gutter. */
.hero__meta {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding-bottom: clamp(22px, 4vh, 38px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.15s forwards;
}
.hero__stats { display: flex; gap: clamp(24px, 4vw, 56px); }
.hero__stat-n {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
}
.hero__stat-l {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 8px;
}

.hero__scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Clears the floating WhatsApp button in the bottom-right corner. */
  margin-right: 62px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero__scroll-bar {
  position: relative;
  width: 1px; height: 52px;
  background: var(--line);
  overflow: hidden;
}
.hero__scroll-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  animation: scrollPulse 2.1s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── Marquee ────────────────────────────────────────────── */
.marquee {
  position: relative;
  padding: 22px 0;
  border-block: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  display: flex;
}
.marquee__track {
  display: flex;
  gap: 46px;
  padding-right: 46px;
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 46px;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.7vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ghost);
  white-space: nowrap;
  transition: color .4s;
}
.marquee:hover .marquee__item { color: var(--faint); }
.marquee__item::after { content: '✦'; font-size: .6em; color: var(--faint); }

/* ── Section heading ────────────────────────────────────── */
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 5vw, 64px);
}
.head__text { max-width: 640px; }
.head__title { margin-bottom: 16px; text-transform: uppercase; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease), background-color .5s;
}
.card:hover { border-color: var(--line-strong); background: var(--panel-2); }

/* Service list */
.services { display: grid; gap: 0; border-top: 1px solid var(--line); }
.service {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  padding: clamp(20px, 2.6vw, 30px) clamp(8px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  transition: padding-inline .5s var(--ease), background-color .5s;
  isolation: isolate;
}
.service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--panel-2), transparent);
  opacity: 0;
  transition: opacity .5s;
}
.service:hover::before { opacity: 1; }
.service:hover { padding-inline: clamp(16px, 3vw, 34px) clamp(16px, 3vw, 34px); }
.service__n {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--faint);
  min-width: 30px;
}
.service__name { font-family: var(--font-display); font-size: clamp(1.02rem, 1.9vw, 1.42rem); font-weight: 700; }
.service__desc { font-size: .875rem; color: var(--muted); margin-top: 6px; max-width: 54ch; }
.service__dur {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.service__price {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  font-weight: 800;
  min-width: 76px;
  text-align: right;
}

/* ── Barber cards ───────────────────────────────────────── */
.barbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.barber {
  position: relative;
  /* The card is an anchor on pages that link through to booking, so it has to
     be told to lay out as a block and not to underline its contents. */
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  transition: border-color .5s var(--ease), transform .6s var(--ease);
}

/* A card that goes somewhere should say so before it is clicked. */
a.barber { cursor: pointer; }
a.barber:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.barber:hover { border-color: var(--line-strong); transform: translateY(-6px); }

.barber__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-3), var(--ink));
}
.barber__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.86);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.barber:hover .barber__media img { transform: scale(1.07); filter: grayscale(1) contrast(1.14) brightness(1); }

/* Monogram fallback when no photo has been uploaded yet */
.barber__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.09);
  transition: color .6s, transform 1.1s var(--ease);
}
.barber:hover .barber__mono { color: rgba(255, 255, 255, 0.15); transform: scale(1.05); }

.barber__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.94) 4%, rgba(0,0,0,.28) 46%, transparent 72%);
}
.barber__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px;
  z-index: 2;
}
.barber__name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; }
.barber__title { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.barber__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
.barber__reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .65s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease);
}
.barber:hover .barber__reveal, .barber:focus-within .barber__reveal {
  max-height: 190px;
  opacity: 1;
  margin-top: 16px;
}
.barber__bio { font-size: .84rem; color: var(--muted); line-height: 1.6; }

/* Touch screens have no hover, so the bio and the Book pill would stay shut
   away for good. Show them from the start there instead. */
@media (hover: none) {
  .barber__reveal { max-height: 190px; opacity: 1; margin-top: 16px; }
}

/* ── Product grid ───────────────────────────────────────── */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.product {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.product:hover { border-color: var(--line-strong); transform: translateY(-5px); }

.product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(150deg, var(--panel-3) 0%, var(--ink) 100%);
  display: grid;
  place-items: center;
}
.product__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform 1s var(--ease);
}
.product:hover .product__media img { transform: scale(1.08); }

/* Bottle silhouette placeholder for products with no photo */
.product__ph {
  color: rgba(255, 255, 255, 0.11);
  transition: color .6s var(--ease), transform .8s var(--ease);
}
.product:hover .product__ph { color: rgba(255, 255, 255, 0.2); transform: translateY(-4px); }

.product__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge {
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--black);
  border-radius: 3px;
}
.badge--out { background: rgba(0,0,0,.8); color: var(--white); border: 1px solid var(--line-strong); }
.badge--low { background: transparent; color: var(--white); border: 1px solid var(--white); }

.product__body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.product__cat { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.product__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.product__desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product__price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.product__was { font-size: .82rem; color: var(--faint); text-decoration: line-through; margin-left: 8px; font-weight: 500; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--white);
  transition: background-color .35s var(--ease), color .35s, transform .3s var(--ease);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--white); color: var(--black); transform: translateY(-2px); }
.icon-btn[disabled] { opacity: .3; pointer-events: none; }

/* ── Filters ────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 40px;
  transition: all .35s var(--ease);
}
.chip:hover { color: var(--white); border-color: var(--line-strong); }
.chip.is-on { background: var(--white); color: var(--black); border-color: var(--white); }

/* ── Forms ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 9px; }
.label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.input, .textarea, .select {
  width: 100%;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--white);
  font-size: .95rem;
  transition: border-color .35s, background-color .35s, box-shadow .35s;
}
.input::placeholder, .textarea::placeholder { color: rgba(255, 255, 255, 0.26); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--line-strong);
  background: var(--panel-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
.textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,.5)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.select option { background: #0b0b0b; color: #fff; }

/* Country code + national number, joined into one control. */
.phone-field { display: flex; gap: 0; }
.phone-field__code {
  width: auto;
  flex: 0 0 auto;
  max-width: 130px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
  padding-right: 32px;
  background-position: right 10px center;
}
.phone-field__num {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.phone-field__code:focus { position: relative; z-index: 1; border-right-color: var(--line-strong); }

.field-error { font-size: .8rem; color: var(--white); opacity: .85; }
.input.has-error, .textarea.has-error { border-color: rgba(255, 255, 255, 0.5); }

.checkbox { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: .9rem; color: var(--muted); }
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox__box {
  width: 19px; height: 19px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: background-color .3s, border-color .3s;
}
.checkbox__box::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(-45deg) scale(0);
  transition: transform .3s var(--ease);
}
.checkbox input:checked + .checkbox__box { background: var(--white); border-color: var(--white); }
.checkbox input:checked + .checkbox__box::after { transform: rotate(-45deg) scale(1); }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--white); outline-offset: 3px; }

/* ── Booking flow ───────────────────────────────────────── */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: clamp(30px, 4vw, 50px); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 11px; opacity: .35; transition: opacity .5s var(--ease); }
.step.is-on, .step.is-done { opacity: 1; }
.step__n {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .72rem;
  transition: background-color .4s, color .4s, border-color .4s;
  flex-shrink: 0;
}
.step.is-on .step__n { background: var(--white); color: var(--black); border-color: var(--white); }
.step.is-done .step__n { background: transparent; color: var(--white); border-color: var(--white); }
.step__label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.step__bar { width: clamp(18px, 4vw, 58px); height: 1px; background: var(--line); margin-inline: 12px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 34px);
}

/* Selectable option tile */
.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 17px 19px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .35s var(--ease), background-color .35s, transform .3s var(--ease);
}
.pick:hover { border-color: var(--line-strong); background: var(--panel-2); transform: translateX(3px); }
.pick.is-on { border-color: var(--white); background: var(--panel-2); }
.pick.is-on::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--white);
}
.pick[disabled] { opacity: .32; pointer-events: none; }
.pick__tick {
  width: 21px; height: 21px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background-color .3s, border-color .3s;
}
.pick__tick::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(-45deg) scale(0);
  transition: transform .3s var(--ease);
}
.pick.is-on .pick__tick { background: var(--white); border-color: var(--white); }
.pick.is-on .pick__tick::after { transform: rotate(-45deg) scale(1); }
.pick__body { flex: 1; min-width: 0; }
.pick__name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.pick__meta { font-size: .8rem; color: var(--faint); margin-top: 3px; }
.pick__price { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; white-space: nowrap; }

.pick__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.pick__avatar--mono {
  display: grid;
  place-items: center;
  background: var(--panel-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--muted);
}

/* Calendar */
.cal { display: flex; flex-direction: column; gap: 16px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__month { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.cal__nav { display: flex; gap: 8px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 6px;
}
.cal__day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--muted);
  transition: all .3s var(--ease);
}
.cal__day:hover:not([disabled]) { border-color: var(--line-strong); color: var(--white); background: var(--panel-2); }
.cal__day.is-on { background: var(--white); color: var(--black); border-color: var(--white); font-weight: 700; }
.cal__day[disabled] { opacity: .2; pointer-events: none; text-decoration: line-through; }
.cal__day.is-empty { pointer-events: none; }
.cal__day.is-today::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* Time slots */
/* Calendar beside the times on a wide screen. This used to be an inline
   style, which no media query could reach — so a phone kept both columns and
   squeezed the times into a sliver one per row. */
.when-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  align-items: start;
  gap: 32px;
}

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot {
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  transition: all .3s var(--ease);
}
.slot:hover { border-color: var(--line-strong); color: var(--white); background: var(--panel-2); transform: translateY(-2px); }
.slot.is-on { background: var(--white); color: var(--black); border-color: var(--white); font-weight: 600; }

.slot-group { margin-bottom: 22px; }
.slot-group__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.slot-group__label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Summary rail */
.summary { position: sticky; top: calc(var(--nav-h) + 20px); }
.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: .9rem; }
.summary__row + .summary__row { border-top: 1px dashed var(--line); }
.summary__label { color: var(--muted); }
.summary__value { text-align: right; font-weight: 600; }
.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}
.summary__total-n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; }

.cash-note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
}
.cash-note svg { flex-shrink: 0; margin-top: 2px; color: var(--white); }

/* ── Cart ───────────────────────────────────────────────── */
.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line__media {
  width: 84px; height: 84px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--panel-3), var(--ink));
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qty button {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background-color .3s, color .3s;
}
.qty button:hover { background: var(--white); color: var(--black); }
.qty span { min-width: 40px; text-align: center; font-family: var(--font-mono); font-size: .85rem; }

/* ── Sheet (public modal) ───────────────────────────────── */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s var(--ease);
}
.sheet.is-open { opacity: 1; pointer-events: auto; }

.sheet__card {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: clamp(26px, 5vw, 38px);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
  transform: translateY(26px) scale(.96);
  transition: transform .48s var(--ease);
}
.sheet.is-open .sheet__card { transform: none; }

.sheet__close {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--faint);
  transition: color .3s, background-color .3s, transform .3s;
}
.sheet__close:hover { color: var(--white); background: var(--panel-3); transform: rotate(90deg); }

.sheet__icon {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
}
.sheet__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.sheet__text { margin-top: 12px; font-size: .92rem; color: var(--muted); line-height: 1.65; }

/* The appointment restated, so the popup stands on its own. */
.sheet__when {
  margin-top: 20px;
  padding: 15px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.7;
}
.sheet__when strong { font-family: var(--font-display); font-size: 1.02rem; }

.sheet__actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.sheet__skip {
  margin-top: 4px;
  font-size: .82rem;
  color: var(--faint);
  transition: color .3s;
}
.sheet__skip:hover { color: var(--white); }

/* ── Toast ──────────────────────────────────────────────── */
.toasts {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(390px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: .89rem;
  font-weight: 500;
  line-height: 1.5;
  pointer-events: auto;
  transform: translateX(120%);
  animation: toastIn .55s var(--ease) forwards;
}
.toast.is-out { animation: toastOut .4s var(--ease) forwards; }
.toast--err { background: var(--ink); color: var(--white); border: 1px solid var(--line-strong); }
.toast svg { flex-shrink: 0; margin-top: 1px; }
@keyframes toastIn { to { transform: none; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* ── Reveal on scroll ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

/* Headline that wipes in line by line */
.reveal-mask > span { display: block; overflow: hidden; }
.reveal-mask > span > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.reveal-mask.is-in > span > span { transform: none; }
.reveal-mask.is-in > span:nth-child(2) > span { transition-delay: .1s; }
.reveal-mask.is-in > span:nth-child(3) > span { transition-delay: .2s; }

/* ── About split ────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-3), var(--ink));
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Biased to the top of the frame so portrait shots show faces, not torsos. */
  object-position: 50% 8%;
  filter: grayscale(1) contrast(1.1) brightness(.9);
  transition: transform 1.4s var(--ease);
}
.split__media:hover img { transform: scale(1.05); }

/* No about photo yet — a brand panel carrying the mark, so the block still
   reads as finished design rather than a missing image. */
.split__media--brand {
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(255, 255, 255, 0.11), transparent 64%),
    repeating-linear-gradient(
      -52deg,
      rgba(255, 255, 255, 0.028) 0px,
      rgba(255, 255, 255, 0.028) 2px,
      transparent 2px,
      transparent 24px
    ),
    linear-gradient(160deg, #131313, #050505);
}
.split__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22%;
  color: rgba(255, 255, 255, 0.13);
  transition: color .7s var(--ease), transform 1.2s var(--ease);
}
.split__media--brand:hover .split__mono { color: rgba(255, 255, 255, 0.2); transform: scale(1.04); }
.split__badge {
  position: absolute;
  right: 20px; bottom: 20px;
  padding: 16px 22px;
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
}
.split__badge-n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 900; line-height: 1; }
.split__badge-l { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 5px; opacity: .7; }

/* ── Feature list ───────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.feature { padding: clamp(24px, 3vw, 36px); background: var(--panel); transition: background-color .5s; }
.feature:hover { background: var(--panel-2); }
.feature__icon { color: var(--white); margin-bottom: 18px; opacity: .82; }
.feature__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin-bottom: 9px; }
.feature__text { font-size: .87rem; color: var(--muted); line-height: 1.6; }

/* ── CTA band ───────────────────────────────────────────── */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(64px, 9vw, 120px) 0;
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 130% at 50% 50%, rgba(255,255,255,.07), transparent 68%);
}
.cta__inner { position: relative; z-index: 1; }

/* Huge ghosted word behind the CTA */
.cta__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 17rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.026);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

/* ── Footer ─────────────────────────────────────────────── */
/* Extra bottom room so the floating WhatsApp button never sits on top of
   the last footer row. */
.footer { padding: clamp(52px, 7vw, 84px) 0 96px; border-top: 1px solid var(--line); background: var(--ink); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 52px;
}
.footer__logo { color: var(--white); width: 108px; margin-bottom: 20px; }
.footer__title {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}
.footer__list { display: flex; flex-direction: column; gap: 11px; }
.footer__list a, .footer__list li { color: var(--muted); font-size: .9rem; transition: color .3s; }
.footer__list a:hover { color: var(--white); }
.footer__hours { white-space: pre-line; font-size: .9rem; color: var(--muted); line-height: 1.9; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--faint);
}
.socials { display: flex; gap: 9px; }
.social {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  transition: all .35s var(--ease);
}
.social:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-3px); }

/* ── Floating WhatsApp button ───────────────────────────── */
.wa-fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  transition: transform .4s var(--ease), box-shadow .4s;
  opacity: 0;
  transform: scale(0) translateY(20px);
}
.wa-fab.is-in { opacity: 1; transform: none; }
.wa-fab:hover { transform: scale(1.09); box-shadow: 0 16px 50px rgba(255, 255, 255, .18); }
.wa-fab::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: waPing 2.6s var(--ease-in-out) infinite;
}
@keyframes waPing {
  0% { transform: scale(1); opacity: .7; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ── Page header (inner pages) ──────────────────────────── */
.page-head {
  position: relative;
  padding: calc(var(--nav-h) + clamp(52px, 8vw, 104px)) 0 clamp(40px, 6vw, 70px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 130% at 15% 0%, rgba(255,255,255,.055), transparent 62%);
}
.page-head__inner { position: relative; z-index: 1; }
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 20px; }
.crumbs a:hover { color: var(--white); }

/* ── Utilities ──────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-14 { gap: 14px; } .gap-18 { gap: 18px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.row { display: flex; align-items: center; }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.grow { flex: 1; min-width: 0; }
.mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } .mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; } .mt-40 { margin-top: 40px; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.book-layout { display: grid; grid-template-columns: 1fr 370px; gap: clamp(22px, 3vw, 40px); align-items: start; }

/* Empty state */
.empty { padding: clamp(46px, 7vw, 78px) 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.empty__icon { color: var(--ghost); margin: 0 auto 20px; }
.empty__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 9px; }
.empty__text { color: var(--muted); font-size: .9rem; max-width: 42ch; margin: 0 auto; }

/* Skeleton loading */
.skel {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-3) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel--card { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }
.skel--line { height: 14px; margin-bottom: 10px; }
.skel--row { height: 76px; margin-bottom: 8px; }

/* ── Confirmation ───────────────────────────────────────── */
.confirm-hero { text-align: center; padding: calc(var(--nav-h) + 60px) 0 40px; }
.confirm-mark {
  width: 76px; height: 76px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--white);
  border-radius: 50%;
  color: var(--white);
  animation: markPop .8s var(--ease) both;
}
@keyframes markPop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.confirm-mark svg { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawTick .7s var(--ease) .45s forwards; }
@keyframes drawTick { to { stroke-dashoffset: 0; } }

/* Booking that started from a barber's card: that step is not part of the
   walk, so it should not sit in the progress bar counting against them. */
.barber-chosen .step[data-step="2"],
.barber-chosen .step[data-step="2"] + .step__bar { display: none; }

.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.14em;
}

/* Long-form pages (privacy, terms): a comfortable measure and enough air
   between blocks that the text can actually be read. */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 42px; text-transform: uppercase; letter-spacing: .08em; }
.prose h2:first-of-type { margin-top: 28px; }
.prose h3 { margin-top: 22px; }
.prose p { margin-top: 14px; color: var(--muted); line-height: 1.75; }
.prose ul { margin-top: 14px; padding-left: 20px; }
.prose li {
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.7;
  list-style: disc;
}
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--text); }
.prose .footer__list li { list-style: none; margin-left: -20px; }

/* ── Responsive ─────────────────────────────────────────── */

/* Hero splits into copy + portrait only where there is room for both.
   Placed here, after the base rules, so the smaller headline size wins. */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__figure { justify-self: end; }
  .hero__title { font-size: clamp(2.4rem, min(5.2vw, 9.6vh), 4.5rem); }
  .hero__mark { width: clamp(76px, min(9vw, 11vh), 116px); }
}

/* Phone: the portrait stacks beneath the copy rather than disappearing.
   The copy above it is tightened so a useful amount of the photo lands above
   the fold on a short handset, not just a sliver. */
@media (max-width: 899px) {
  .hero__photo { height: min(38vh, 340px); }
  .hero__figure::before { inset: 12px -12px -12px 12px; }

  /* Side by side rather than wrapped onto two rows — worth ~70px, which is
     the difference between a glimpse of the photo and a third of it. */
  .hero .btn--lg { padding: 16px 18px; letter-spacing: .14em; }
  .hero__cta { gap: 10px; margin-top: clamp(16px, 2.6vh, 28px); }
  .hero__sub { margin-top: clamp(10px, 1.8vh, 18px); }
  .hero__inner { padding-block: clamp(20px, 3.4vh, 40px); }
}

/* Phone/tablet: the calendar and the times each take the full width, so the
   times land in a proper grid of chips instead of a single tall column. */
@media (max-width: 860px) {
  .when-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .when-grid > div:last-child {
    border-top: 1px solid var(--line);
    padding-top: 22px;
  }
  .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; }
  .slot { padding: 14px 8px; font-size: .86rem; }
}

@media (max-width: 1080px) {
  .book-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__actions { margin-left: auto; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__scroll { display: none; }
  .service { grid-template-columns: 1fr auto; row-gap: 6px; }
  .service__n { display: none; }
  .service__dur { grid-column: 1; font-size: 10px; }
  .service__price { grid-row: 1; grid-column: 2; }
  .split__media { aspect-ratio: 3 / 2; }
}

/* Very narrow handsets (320px): trim further so the pair still shares a row. */
@media (max-width: 360px) {
  .hero .btn--lg { padding: 14px 13px; font-size: 12px; letter-spacing: .1em; }
  .hero__photo { height: min(32vh, 260px); }
}

@media (max-width: 560px) {
  :root { --nav-h: 70px; }
  /* Logo + bag + burger only — the drawer already carries "Book an Appointment",
     and keeping the button here overflows the bar on small phones. */
  .nav__actions > .btn { display: none; }
  .nav__logo svg { width: 42px; }
  .nav__logo-text { font-size: 11px; letter-spacing: .2em; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .cart-line { grid-template-columns: 64px 1fr; row-gap: 14px; }
  .cart-line__media { width: 64px; height: 64px; }
  .cart-line > :last-child { grid-column: 1 / -1; }
  .steps { gap: 4px; }
  .step__label { display: none; }
  .step__bar { margin-inline: 6px; }
  .toasts { left: 16px; right: 16px; max-width: none; }
  .hero__stats { gap: 14px; }
  .hero__stat-l { font-size: 8.5px; letter-spacing: 0.14em; }
  .hero__stat-n { font-size: 1.35rem; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__line > span, .reveal-mask > span > span { transform: none; }
  .hero__mark, .hero__sub, .hero__cta, .hero__meta { opacity: 1; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .nav, .footer, .wa-fab, .toasts, .hero__grain { display: none !important; }
  body { background: #fff; color: #000; }
}