/* ===== New Man Barbershop =====
   Palette: white · barber red · barber navy (classic red/white/blue)
   White is the main surface; red is the primary accent (buttons, labels),
   navy the secondary (signature rule, links, sub-headings).
   Display: Cormorant Garamond (high-contrast serif, editorial)
   Body: Inter (clean, legible on light)
   Signature: blade-draw animation — a navy rule that sweeps in under the
   hero headline on load, referencing the single clean stroke of a perfect cut.
   Note: the --gold token name is kept template-wide; its value is barber red.
   Mobile-first. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Tokens ─────────────────────────────────────── */
:root {
  --bg:          #ECEDEF;
  --bg-alt:      #E2E4E8;
  --card:        #FFFFFF;
  --gold:        #C8102E;                    /* primary accent — barber red */
  --gold-pale:   rgba(200, 16, 46, 0.08);
  --gold-dim:    rgba(200, 16, 46, 0.30);
  --blue:        #0A2463;                    /* secondary accent — barber navy */
  --blue-dim:    rgba(10, 36, 99, 0.30);
  --text:        #15181F;
  --text-muted:  #5B6472;
  --text-dim:    #C7CCD4;
  --border:      #CDD1D8;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --max:    1080px;
  --radius: 3px;

  color-scheme: light;
}

/* ─── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── Layout ─────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ─── Eyebrow label ──────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ─── Signature: blade-draw rule ─────────────────── */
/* The gold hairline that sweeps across the hero on load,
   referencing the single decisive stroke of a clean cut. */
.blade-rule {
  display: block;
  height: 1px;
  max-width: 620px;
  background: var(--blue);
  transform-origin: center;
  transform: scaleX(0);
  animation: blade-draw 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  margin: 1.1rem auto 1.2rem;
}
@keyframes blade-draw { to { transform: scaleX(1); } }

/* ─── Buttons ────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.75rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.05s;
  /* Embossed / raised finish */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.28),
    0 2px 5px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.btn:hover { opacity: 0.82; }
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.22);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  box-shadow: none;
  text-shadow: none;
}
.btn-outline:hover { background: var(--gold-pale); opacity: 1; }
.btn-outline:active { transform: translateY(1px); box-shadow: none; }
.btn-large { padding: 1.05rem 2.3rem; font-size: 0.82rem; }
.btn-small { padding: 0.7rem 1.35rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* ─── Header / nav ───────────────────────────────── */
.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ─── Barber-pole header divider ─────────────────── */
/* Classic red / white / navy barber pole.
   Spins only while the user scrolls — JS translates .barber-pole__stripes. */
.barber-pole-track {
  line-height: 0;
}
.barber-pole {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  overflow: hidden;
  /* Raised off the page — same emboss as the booking-page pole frames. */
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
/* Stripes live on an oversized child slid with transform. One gradient image
   covers the whole layer, so no tiling seam can appear at any scroll offset.
   The 80px overhang each side exceeds the 67.9px max translation (see JS). */
.barber-pole__stripes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  width: calc(100% + 160px);
  background: repeating-linear-gradient(
    -45deg,
    #C8102E 0px,  #C8102E 12px,    /* red */
    #FFFFFF 12px, #FFFFFF 24px,    /* white */
    #0A2463 24px, #0A2463 36px,    /* navy */
    #FFFFFF 36px, #FFFFFF 48px     /* white */
  );
  will-change: transform;
}
/* Cylindrical gloss — top highlight fading to a bottom shadow, same overlay
   as .booksy-loading__bar::after, so the divider reads as a rounded 3D tube. */
.barber-pole::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.15) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(0, 0, 0, 0.08) 65%,
    rgba(0, 0, 0, 0.28) 100%
  );
}

/* Anchor offset — keeps section titles clear of the sticky header */
#services, #reviews, #hours, #contact {
  scroll-margin-top: 72px;
}
@media (prefers-reduced-motion: reduce) {
  .barber-pole { animation: none; }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  max-width: var(--max);
  margin: 0 auto;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.logo img { height: 64px; width: auto; display: block; }
.logo span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.nav-links {
  display: none;
  list-style: none;
  align-items: center;
  gap: 1.75rem;
}
.nav-links a {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text); }

/* ─── Hero ───────────────────────────────────────── */
.hero {
  padding: 5rem 0 4.5rem;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.hero-inner {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.hero .eyebrow { margin-bottom: 2rem; }

.hero-logo {
  margin: 0 0 1.75rem;
  line-height: 0;
}
.hero-logo img {
  width: min(100%, 620px);
  height: auto;
  margin: 0 auto;
}
.hero-sub-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 4.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 2.25rem;
}
/* Cycling word in the hero sub-title: "New man / style / you" */
.cycle-word {
  color: var(--gold);
  font-style: italic;
  display: inline-block;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cycle-word.is-out { opacity: 0; transform: translateY(0.18em); }
.hero-body {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.hero-walkin {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─── Generic section shell ──────────────────────── */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--bg-alt); }
.section-head { margin-bottom: 2.75rem; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  margin-top: 0.5rem;
}
.section-lead { color: var(--text-muted); margin-top: 0.5rem; font-size: 0.97rem; }

/* ─── About ──────────────────────────────────────── */
.about-grid { display: grid; gap: 2.75rem; align-items: center; }

.about-portrait {
  position: relative;
  margin: 0;
  max-width: 400px;
  justify-self: center;
  width: 100%;
}
.about-portrait img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
}
/* Signature: barber-station nameplate — a full-width bar across the
   portrait's foot, red hairline on top, like the plate on a barber station. */
.about-nameplate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.6rem 1.1rem 0.7rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  line-height: 1.15;
}
.about-nameplate-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}
.about-nameplate-role {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.about-body .section-title { margin-top: 0.4rem; margin-bottom: 1.4rem; }
.about-body p:not(.eyebrow) {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 1rem;
}
.about-body p:not(.eyebrow):last-of-type { margin-bottom: 0; }
.about-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.about-facts li {
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 500;
}
.about-facts strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
}

/* ─── Services / price board ─────────────────────── */
.price-board { border-top: 1px solid var(--border); }

.price-row {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.price-row-top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.svc-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.svc-leader {
  flex: 1;
  border-bottom: 1px dotted var(--text-dim);
  margin-bottom: 0.4rem;
  min-width: 0.75rem;
}
.svc-price {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.svc-tag {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.15rem;
  align-items: center;
}
.svc-duration {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.svc-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Flagship highlight row */
.price-row--flagship {
  background: var(--gold-pale);
  border-top: 1px solid var(--gold-dim);
  border-bottom-color: var(--gold-dim);
  margin: 0 -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.price-row--flagship .svc-name,
.price-row--flagship .svc-price { color: var(--gold); }
.price-row--flagship .svc-leader { border-color: var(--gold-dim); }

/* ─── Reviews ────────────────────────────────────── */
.reviews-track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  /* Edge fades are scroll-driven: JS in index.html sets --fade-l/--fade-r
     from the scroll position, so an edge only fades when there are more
     cards hidden beyond it. */
  --fade-l: 0px;
  --fade-r: 56px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 min(82vw, 360px);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.review-stars { color: var(--gold); letter-spacing: 0.05em; font-size: 0.85rem; }
.review-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
}
.review-author {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}
.reviews-note {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.reviews-note a { color: var(--blue); border-bottom: 1px solid var(--blue-dim); padding-bottom: 1px; }
.reviews-note a:hover { border-color: var(--blue); }

/* ─── Hours ──────────────────────────────────────── */
.hours-grid { display: grid; gap: 3rem; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid var(--border); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 0.7rem 0; font-size: 0.94rem; }
.hours-table td:first-child { color: var(--text-muted); }
.hours-table td:last-child { text-align: right; }
.hours-table tr.today-row td { color: var(--gold); font-weight: 600; }
.hours-cta p { color: var(--text-muted); margin: 0.75rem 0 1.75rem; line-height: 1.65; }

/* ─── Contact ────────────────────────────────────── */
.contact-grid { display: grid; gap: 1.75rem; }
.contact-label {
  font-size: 0.65rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.contact-value { font-size: 1rem; color: var(--text); }
.contact-value a {
  color: var(--text);
  border-bottom: 1px solid var(--text-dim);
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.contact-value a:hover { color: var(--blue); border-color: var(--blue); }

/* ─── Footer ─────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.social-links {
  display: flex;
  justify-content: flex-start;
  gap: 1.4rem;
  margin-top: 0.85rem;
}
.social-links a {
  display: inline-flex;
  color: var(--text-muted);
  transition: color 0.18s ease, transform 0.18s ease;
}
.social-links a:hover { color: var(--gold); transform: translateY(-2px); }
.social-links svg { width: 30px; height: 30px; fill: currentColor; display: block; }

/* ─── Booking page ───────────────────────────────── */
.booking-section { padding-top: 2.5rem; }
.booking-container { max-width: 640px; }
.booksy-widget {
  position: relative;           /* anchor the loading overlay */
  margin-top: 2rem;
  width: 100%;
  min-height: 600px;            /* guard against collapse before JS resize */
  padding: 14px;                /* thickness of the barber-pole frame */
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  /* Static barber-pole stripes form the frame; the iframe sits in the window. */
  background: repeating-linear-gradient(
    -45deg,
    #C8102E 0,    #C8102E 10px,    /* red */
    #FFFFFF 10px, #FFFFFF 20px,    /* white */
    #0A2463 20px, #0A2463 30px,    /* navy */
    #FFFFFF 30px, #FFFFFF 40px     /* white */
  );
  /* Raised, embossed tube: outer drop shadow + inset top highlight / bottom shadow. */
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.18),
    inset 0 2px 2px rgba(255, 255, 255, 0.55),
    inset 0 -3px 5px rgba(0, 0, 0, 0.32);
}
/* Recessed inner edge — makes the booking window look set into the pole frame. */
.booksy-widget::before {
  content: "";
  position: absolute;
  inset: 14px;                  /* matches the padding — sits over the window */
  border-radius: 11px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    inset 0 2px 7px rgba(0, 0, 0, 0.30);
  pointer-events: none;
  z-index: 4;
}
.booksy-widget iframe {
  width: 100% !important;       /* beat the inline width="770" attribute */
  max-width: 100%;
  border: 0;
  display: block;
  border-radius: 11px;
  background: #fff;
}
/* Loading state — barber-pole shimmer (the site's signature motif) shown
   immediately so the box is never blank while Booksy's app loads. Styled as a
   glossy, embossed 3D tube: stripes animate inside, a cylindrical highlight/
   shadow overlay gives it real depth. */
.booksy-loading {
  position: absolute;
  inset: 14px;                  /* sit inside the pole frame, not over it */
  border-radius: 11px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #fff;
  transition: opacity 0.45s ease;
}
.booksy-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.booksy-loading__bar {
  position: relative;
  width: 220px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  /* Raised off the page: soft drop shadow below + crisp highlight on top. */
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
/* Continuous diagonal red/white/navy stripes, drawn wider than the bar and
   slid left with transform — GPU-composited, so it stays smooth even while
   Booksy's app loads and the main thread is busy. */
.booksy-loading__bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: repeating-linear-gradient(
    -45deg,
    #C8102E 0,    #C8102E 10px,    /* red */
    #FFFFFF 10px, #FFFFFF 20px,    /* white */
    #0A2463 20px, #0A2463 30px,    /* navy */
    #FFFFFF 30px, #FFFFFF 40px     /* white */
  );
  will-change: transform;
  animation: booksy-pole 0.7s linear infinite;
}
/* Cylindrical gloss overlay — top highlight fading to a bottom shadow makes the
   striped bar read as a rounded, embossed barber-pole tube. */
.booksy-loading__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.15) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(0, 0, 0, 0.08) 65%,
    rgba(0, 0, 0, 0.28) 100%
  );
}
.booksy-loading__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
/* 40px stripe period ÷ cos(45°) ≈ 56.57px horizontal → perfectly seamless loop. */
@keyframes booksy-pole {
  from { transform: translateX(0); }
  to   { transform: translateX(-56.57px); }
}
@media (prefers-reduced-motion: reduce) {
  .booksy-loading__bar::before { animation: none; }
}
.demo-note {
  border: 1px solid var(--gold-dim);
  border-left: 3px solid var(--gold);
  background: var(--gold-pale);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.87rem;
  color: var(--gold);
  font-weight: 500;
  margin: 1.5rem 0 2rem;
}
.booking-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--card);
  min-width: 0;
}
.form-step legend {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  padding: 0 0.5rem;
}
.service-options { display: grid; gap: 0.55rem; }
.service-option {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  cursor: pointer;
  background: var(--bg-alt);
  transition: border-color 0.15s;
}
.service-option:hover { border-color: var(--gold-dim); }
.service-option input { position: absolute; opacity: 0; pointer-events: none; }
.service-option.selected {
  border-color: var(--gold);
  background: var(--gold-pale);
  box-shadow: inset 3px 0 0 var(--gold);
}
.opt-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  display: block;
}
.opt-meta { font-size: 0.83rem; color: var(--text-muted); }
.date-input, .field input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem;
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font-body);
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  box-sizing: border-box;
}
.date-input::-webkit-datetime-edit { color: var(--text); }
.date-input::-webkit-datetime-edit-fields-wrapper { color: var(--text); }
.date-input::-webkit-calendar-picker-indicator { opacity: 0.6; }
.date-input:focus, .field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
}
.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 600; }
.optional { color: var(--text-muted); font-weight: 400; font-size: 0.82rem; }
.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
}
.slots-placeholder { color: var(--text-muted); grid-column: 1 / -1; font-size: 0.94rem; }
.slot-btn {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}
.slot-btn:hover { border-color: var(--gold-dim); }
.slot-btn.selected { background: var(--gold); color: #fff; border-color: var(--gold); }
.booking-summary {
  background: var(--card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.booking-summary h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

/* ─── Responsive ─────────────────────────────────── */
@media (min-width: 680px) {
  .nav-links { display: flex; }
  .hero { padding: 7rem 0 6rem; }
  .service-options { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 0.85fr 1fr; gap: 3.5rem; }
  .about-portrait { justify-self: start; }
  .hours-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .price-row--flagship {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}

/* ─── Parallax background sections ───────────────── */
[data-parallax] {
  position: relative;
  overflow: hidden;
}
.parallax-bg {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}
.parallax-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.80);
  pointer-events: none;
}
[data-parallax] > .container {
  position: relative;
  z-index: 1;
}

/* ─── Reviews background video ───────────────────── */
.parallax-bg--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-bg--video video { display: none; }
  .parallax-bg--video { background-image: url('/assets/clippers-and-stuff.jpg'); background-size: cover; background-position: center; }
}

/* ─── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blade-rule { animation: none; transform: scaleX(1); }
  .barber-pole { animation: none; }
  * { transition-duration: 0.01ms !important; }
}