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

/* ============ DESIGN TOKENS ============ */
:root {
  --charcoal-950: #14100d;
  --charcoal-900: #1c1713;
  --charcoal-800: #26201b;
  --charcoal-700: #382f27;
  --cream: #f6f0e4;
  --cream-2: #efe6d3;
  --white: #ffffff;
  --gold: #c9a24b;
  --gold-light: #e2c069;
  --gold-dark: #a3803a;
  --text-body: #3b332b;
  --text-muted: #6b6054;
  --text-on-dark: #f3ede0;
  --text-on-dark-muted: #bfb4a2;
  --success: #4a7c59;
  --border-light: #e2d8c3;
  --border-dark: #3a322b;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-card: 0 4px 24px rgba(20, 16, 13, 0.08);
  --shadow-card-dark: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 16px 48px rgba(20, 16, 13, 0.18);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-med: 320ms;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--charcoal-950);
}

/* Headings on any dark surface must not inherit the default near-black color,
   or they render invisible against the charcoal background. */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.profile-hero h1, .profile-hero h2, .profile-hero h3, .profile-hero h4,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
.booking-section h1, .booking-section h2, .booking-section h3, .booking-section h4,
.info-strip h1, .info-strip h2, .info-strip h3, .info-strip h4 { color: var(--text-on-dark); }

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.kicker {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-dark);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.on-dark .kicker { color: var(--gold-light); }

p { margin: 0 0 var(--space-2); max-width: 65ch; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section { padding: var(--space-7) 0; }
@media (max-width: 640px) { .section { padding: var(--space-5) 0; } }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-5);
}
.section-head p { margin-inline: auto; }

.divider-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-2) auto var(--space-3);
  color: var(--gold);
}
.divider-mark::before,
.divider-mark::after {
  content: '';
  height: 1px;
  width: 56px;
  background: var(--gold);
  opacity: 0.6;
}
.divider-mark svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  min-height: 48px;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-gold {
  background: var(--gold);
  color: var(--charcoal-950);
}
.btn-gold:hover { background: var(--gold-light); }
.btn-outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--text-on-dark);
}
.btn-outline:hover { background: rgba(201, 162, 75, 0.14); }
.btn-outline-dark {
  background: transparent;
  border-color: var(--charcoal-950);
  color: var(--charcoal-950);
}
.btn-outline-dark:hover { background: rgba(20, 16, 13, 0.06); }
.btn-block { width: 100%; }

/* ============ NAV ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(20, 16, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 162, 75, 0.18);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  color: var(--text-on-dark);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.nav-brand img { height: 42px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  transition: color var(--duration-fast);
  padding: 8px 2px;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-light); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
}
.nav-cta { font-size: 0.82rem; padding: 11px 22px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-on-dark);
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--charcoal-950);
  padding: 12px 20px;
  z-index: 1000;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.skip-link:focus { left: var(--space-2); top: var(--space-1); }

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: 0 0 0 30%;
    top: 71px;
    flex-direction: column;
    align-items: stretch;
    background: var(--charcoal-950);
    padding: var(--space-3);
    gap: var(--space-1);
    transform: translateX(100%);
    transition: transform var(--duration-med) var(--ease-standard);
    border-left: 1px solid rgba(201, 162, 75, 0.18);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 14px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-toggle { display: block; }
  .nav-cta { margin-top: var(--space-1); text-align: center; }
}

/* ============ HERO (split: copy left, photo right) ============ */
.hero {
  background: var(--charcoal-950);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  min-height: 66vh;
}

/* --- left: copy --- */
.hero-copy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-6) clamp(28px, 4vw, 64px);
}
.hero-copy-body { width: 100%; max-width: 540px; }

.hero-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

/* Messages share one grid cell so crossfading never shifts the buttons below. */
.hero-messages { display: grid; }
.hero-message {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  /* Outgoing copy leaves quickly and with no delay... */
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
  pointer-events: none;
}
.hero-message.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* ...and the incoming copy waits for it to clear before arriving. Without the
     delay, a two-line headline crossfading into a one-line headline leaves its
     orphaned second line floating in empty space mid-transition. */
  transition: opacity 520ms var(--ease-standard) 220ms,
              transform 520ms var(--ease-standard) 220ms;
}
.hero-message h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  margin-bottom: var(--space-2);
}
.hero-sub {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-light);
  font-size: 1.05rem;
  margin: 0;
  max-width: 44ch;
}

/* Brand overlay: the logo sits over the first photo rather than in the text
   column. In the text column it had to stay small — every slide shares one grid
   cell sized to the tallest, so a big logo left a dead gap above the buttons on
   the other four slides. Over the photo it can be as large as it likes. */
.hero-brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(20, 16, 13, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease-in-out;
}
.hero-brand.is-active { opacity: 1; }
.hero-brand img {
  width: 62%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}
@media (max-width: 860px) {
  /* the square mobile slot gives the logo far more room than the 150px it had */
  .hero-brand img { width: 66%; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand { transition: none; }
}

.hero-ctas {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* --- right: photo --- */
.hero-media {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
/* Real <img> elements, not CSS background-image. Backgrounds are fetched at
   low priority and mobile data-saver modes are allowed to skip them entirely,
   which is what left the hero blank on phones. */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* grayscale evens out the mixed phone-camera lighting across the set */
  filter: grayscale(1) contrast(1.06) brightness(0.95);
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  will-change: opacity;
}
.hero-slide.is-active {
  opacity: 1;
  animation: heroDrift 9s ease-out forwards;
}
@keyframes heroDrift {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
/* soft blend so the photo melts into the dark copy panel instead of a hard seam */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--charcoal-950) 0%, rgba(20, 16, 13, 0.55) 12%, rgba(20, 16, 13, 0) 34%);
}

/* --- slide controls --- */
.hero-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
}
.hero-dot {
  position: relative;
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background var(--duration-fast);
}
/* invisible padding keeps the tap target finger-sized while the bar stays slim */
.hero-dot::after { content: ''; position: absolute; inset: -16px -4px; }
.hero-dot:hover { background: rgba(255, 255, 255, 0.55); }
.hero-dot.is-active { background: var(--gold); }
.hero-pause {
  margin-left: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.hero-pause:hover { background: rgba(255, 255, 255, 0.32); }
.hero-pause svg { width: 11px; height: 11px; }

/* --- stacked on small screens --- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-media {
    order: -1;
    /* 16:10 gave only ~234px on a 375px screen — too short for the photo to
       register as a photo. 4:3 gives it real presence without pushing the
       headline and buttons below the fold. */
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .hero-media::after {
    background: linear-gradient(0deg, var(--charcoal-950) 0%, rgba(20, 16, 13, 0) 45%);
  }
  .hero-copy {
    justify-content: center;
    padding: var(--space-4) var(--space-3) var(--space-5);
  }
  .hero-copy-body { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active { animation: none; }
  .hero-message { transition: none; }
}


/* ============ INFO STRIP ============ */
.info-strip {
  background: var(--charcoal-900);
  color: var(--text-on-dark);
  padding: var(--space-3) 0;
}
.info-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
}
.info-item svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
.info-item strong { display: block; font-family: var(--font-display); letter-spacing: 0.03em; font-size: 0.8rem; text-transform: uppercase; color: var(--text-on-dark-muted); }

/* ============ SERVICES ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3) var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-med) var(--ease-standard),
              box-shadow var(--duration-med) var(--ease-standard),
              border-color var(--duration-fast);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--gold);
}

.service-icon {
  display: block;
  color: var(--charcoal-950);
  margin-bottom: var(--space-3);
  transition: color var(--duration-med), transform var(--duration-med) var(--ease-standard);
}
.service-icon svg { width: 38px; height: 38px; }
.service-card:hover .service-icon {
  color: var(--gold-dark);
  transform: translateY(-4px);
}

.service-card h3 {
  position: relative;
  display: inline-block;
  font-size: 1.12rem;
  margin-bottom: 10px;
}
/* gold rule sweeps out from the left on hover */
.service-card h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--gold);
  transition: width 420ms var(--ease-standard);
}
.service-card:hover h3::after { width: 100%; }

.service-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 var(--space-3);
  min-height: 2.8em;
}
.service-price {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--gold-dark);
  letter-spacing: 0.01em;
  /* tabular figures stop prices jittering as the row animates */
  font-variant-numeric: tabular-nums;
}

/* Staggered entrance: the section itself doesn't fade, its cards arrive in
   sequence, which reads as deliberate rather than one big block appearing. */
.stagger-host.reveal { opacity: 1; transform: none; }
.stagger-host .service-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-standard),
              transform 620ms var(--ease-standard),
              box-shadow var(--duration-med) var(--ease-standard),
              border-color var(--duration-fast);
}
.stagger-host.is-visible .service-card { opacity: 1; transform: translateY(0); }
.stagger-host.is-visible .service-card:nth-child(1) { transition-delay: 0ms; }
.stagger-host.is-visible .service-card:nth-child(2) { transition-delay: 70ms; }
.stagger-host.is-visible .service-card:nth-child(3) { transition-delay: 140ms; }
.stagger-host.is-visible .service-card:nth-child(4) { transition-delay: 210ms; }
.stagger-host.is-visible .service-card:nth-child(5) { transition-delay: 280ms; }
.stagger-host.is-visible .service-card:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .stagger-host .service-card { opacity: 1; transform: none; transition-delay: 0ms !important; }
  .service-card, .service-icon, .service-card h3::after { transition: none; }
}

.service-note {
  text-align: center;
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ============ BARBER GRID (home) ============ */
.barber-grid {
  display: grid;
  /* Explicit counts, not auto-fit: with 5 barbers, auto-fit lands on 4 columns
     at common widths and strands the fifth alone on its own row. These steps
     always divide 5 into balanced rows (5, then 3+2, then 2+2+1). */
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1000px) { .barber-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .barber-grid { grid-template-columns: repeat(2, 1fr); } }

.barber-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--charcoal-900);
  aspect-ratio: 3 / 4;
  display: block;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-med) var(--ease-standard), box-shadow var(--duration-med) var(--ease-standard);
}
.barber-card:hover,
.barber-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-elevated); }
.barber-card img, .barber-card .avatar-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* slow push-in on the photo adds depth without moving the card's edges */
.barber-card img {
  transition: transform 600ms var(--ease-standard);
}
.barber-card:hover img,
.barber-card:focus-within img { transform: scale(1.05); }
.avatar-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, var(--charcoal-700), var(--charcoal-950));
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.barber-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,13,0) 45%, rgba(20,16,13,0.92) 100%);
}
/* Info block sits pushed down by exactly the height of the socials row, so the
   socials are parked below the card's clipped edge. Hover slides it back to 0,
   which lifts the name and brings the icons into view in one transform. */
/* Full-card link. It must be a SIBLING of .barber-card-info, not inside it:
   .barber-card-info carries a transform for the hover lift, and a transformed
   element becomes the containing block for absolutely-positioned descendants —
   so a "stretched link" inside it can only ever cover the info strip. */
.barber-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Info block sits pushed down by exactly the height of the socials row, so the
   socials are parked below the card's clipped edge. Hover slides it back to 0,
   which lifts the name and brings the icons into view in one transform. */
.barber-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-2);
  color: var(--text-on-dark);
  transform: translateY(var(--card-social-h, 0px));
  transition: transform 420ms var(--ease-standard);
  /* let clicks on the padding fall through to the full-card link beneath */
  pointer-events: none;
}
.barber-card-info .name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  transition: color var(--duration-fast);
}
.barber-card:hover .name { color: var(--gold-light); }

.barber-card--social { --card-social-h: 34px; }

.barber-card-socials {
  display: flex;
  gap: 14px;
  height: 34px;
  align-items: center;
  opacity: 0;
  transition: opacity 300ms var(--ease-standard);
}
.barber-card-socials a {
  /* re-enable hit-testing so the icons stay individually clickable */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text-on-dark);
  transition: color var(--duration-fast), transform var(--duration-fast);
}
.barber-card-socials a:hover { color: var(--gold); transform: translateY(-2px); }
.barber-card-socials svg { width: 17px; height: 17px; }

.barber-card:hover .barber-card-info,
.barber-card:focus-within .barber-card-info { transform: translateY(0); }
.barber-card:hover .barber-card-socials,
.barber-card:focus-within .barber-card-socials { opacity: 1; }

/* No hover on touch screens — show the icons permanently instead of
   hiding them behind an interaction that can never happen. */
@media (hover: none) {
  .barber-card-info { transform: translateY(0); }
  .barber-card-socials { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .barber-card-info, .barber-card-socials, .barber-card img { transition: none; }
}

/* ============ TESTIMONIALS ============ */
/* ---- Reviews carousel ---- */
.testimonial-carousel { position: relative; }

.testimonial-track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* padding leaves room for card shadow + focus ring, which overflow would clip */
  padding: 6px 6px var(--space-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.testimonial-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .testimonial-track { scroll-behavior: auto; }
}

.testimonial-card {
  flex: 0 0 clamp(270px, 30%, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform var(--duration-med) var(--ease-standard),
              box-shadow var(--duration-med) var(--ease-standard),
              border-color var(--duration-fast);
}
a.testimonial-card:hover,
a.testimonial-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--gold);
}
.testimonial-quote { flex: 1; }

.review-link-cue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.review-link-cue svg { width: 12px; height: 12px; }
a.testimonial-card:hover .review-link-cue { color: var(--gold-dark); }

/* Prev / next controls */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--charcoal-950);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.carousel-btn:hover { background: var(--gold); border-color: var(--gold); }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-prev { left: -10px; }
.carousel-next { right: -10px; }
@media (max-width: 900px) {
  .carousel-prev { left: -6px; }
  .carousel-next { right: -6px; }
}

/* Pause/play for the auto-scroll — required so motion is never unstoppable */
.carousel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: var(--space-2) auto 0;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.carousel-toggle:hover { border-color: var(--gold); color: var(--charcoal-950); }
.carousel-toggle svg { width: 13px; height: 13px; }
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto var(--space-2);
}
.rating-score {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--charcoal-950);
  line-height: 1;
}
.rating-summary .stars { margin-bottom: 0; }
.rating-summary .stars svg { width: 19px; height: 19px; }
.rating-count { color: var(--text-muted); font-size: 0.95rem; }

.stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 12px; }
.stars svg { width: 16px; height: 16px; }
.testimonial-quote { font-size: 0.96rem; color: var(--text-body); margin-bottom: var(--space-2); }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
}
.testimonial-author strong { color: var(--charcoal-950); font-weight: 600; }
.google-badge { display: inline-flex; align-items: center; gap: 6px; }
.google-badge svg { width: 16px; height: 16px; }

/* ============ BOOKING ============ */
.booking-section { background: var(--charcoal-950); color: var(--text-on-dark); }
.booking-frame { width: 100%; min-height: 900px; border: 0; display: block; background: var(--white); }
.booking-hint {
  text-align: center;
  color: var(--text-on-dark-muted);
  font-size: 0.9rem;
  margin-top: var(--space-2);
}

/* ============ PER-BARBER BOOKING PANEL ============ */
.booking-panel {
  max-width: 820px;
  margin: 0 auto;
  background: var(--charcoal-900);
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.booking-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px var(--space-2);
  border-bottom: 1px solid rgba(201, 162, 75, 0.22);
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.14), rgba(201, 162, 75, 0));
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--gold-light);
}
.booking-panel-head svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
/* The Bookylue widget does not auto-resize to its iframe. Its content measures
   ~900px tall at this width, so leave headroom or it scrolls inside the frame. */
.booking-panel .booking-frame { min-height: 950px; }
@media (max-width: 560px) {
  .booking-panel .booking-frame { min-height: 1040px; }
}

/* ============ HOURS BLOCK ============ */
.hours-grid {
  display: grid;
  /* 7 days — auto-fit so it reflows to 4/3/2 columns on smaller screens
     without needing a breakpoint for each step. */
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.hours-card {
  background: var(--charcoal-800);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 8px;
  text-align: center;
}
.hours-card .day { font-family: var(--font-display); letter-spacing: 0.06em; font-size: 0.82rem; color: var(--gold-light); text-transform: uppercase; }
.hours-card .time { font-size: 0.86rem; color: var(--text-on-dark-muted); margin-top: 6px; }

/* ============ MAP ============ */
.map-panel {
  max-width: 900px;
  margin: var(--space-5) auto 0;
  background: var(--charcoal-900);
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.map-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px var(--space-2);
  border-bottom: 1px solid rgba(201, 162, 75, 0.22);
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.14), rgba(201, 162, 75, 0));
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--gold-light);
}
.map-panel-head svg { width: 16px; height: 16px; flex-shrink: 0; }
.map-frame {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  /* the satellite tiles read warm/bright against the dark section, so knock
     them back slightly to sit with the rest of the page */
  filter: grayscale(0.25) contrast(1.05);
}
@media (max-width: 640px) { .map-frame { height: 320px; } }

.hours-ctas {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--charcoal-950);
  color: var(--text-on-dark-muted);
  padding: var(--space-6) 0 var(--space-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); } }
.footer-brand img { height: 56px; margin-bottom: var(--space-2); }
.footer-col h4 { color: var(--text-on-dark); font-size: 0.95rem; margin-bottom: var(--space-2); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { transition: color var(--duration-fast); font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-socials { display: flex; gap: 12px; margin-top: var(--space-2); }
.footer-socials a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.footer-socials a:hover { border-color: var(--gold); color: var(--gold-light); }
.footer-socials svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: var(--space-3);
  font-size: 0.82rem;
}

/* ============ MOBILE CTA BAR ============ */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--charcoal-950);
  border-top: 1px solid rgba(201, 162, 75, 0.3);
  padding: 10px var(--space-2);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  gap: 10px;
}
.mobile-cta-bar a {
  flex: 1;
  text-align: center;
}
@media (max-width: 720px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 70px; }
  body.no-mobile-bar { padding-bottom: 0; }
  body.no-mobile-bar .mobile-cta-bar { display: none; }
}

/* ============ BARBER PROFILE PAGE ============ */
.profile-hero {
  background: var(--charcoal-950);
  color: var(--text-on-dark);
  padding: var(--space-6) 0 var(--space-5);
}
.profile-hero .container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 780px) {
  .profile-hero .container { grid-template-columns: 1fr; text-align: center; }
}
.profile-photo-wrap {
  width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow-card-dark);
  margin: 0 auto;
}
.profile-photo-wrap img, .profile-photo-wrap .avatar-fill { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-wrap .avatar-fill { font-size: 4rem; }
.profile-role { font-family: var(--font-accent); font-style: italic; color: var(--gold-light); font-size: 1.15rem; margin-bottom: 8px; }
.profile-bio { color: var(--text-on-dark-muted); font-size: 1.05rem; max-width: 55ch; }
.profile-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.social-row { display: flex; gap: 10px; margin-top: var(--space-3); justify-content: flex-start; }
@media (max-width: 780px) { .social-row { justify-content: center; } }
.social-row a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: var(--text-on-dark);
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.social-row a:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(201,162,75,0.1); }
.social-row svg { width: 19px; height: 19px; }

.specialty-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.tag {
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
@media (max-width: 780px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: transform var(--duration-med) var(--ease-standard);
}
.work-grid a { border-radius: var(--radius-sm); overflow: hidden; display: block; }
.work-grid a:hover img { transform: scale(1.06); }

.notice-banner {
  background: var(--cream-2);
  border: 1px dashed var(--gold-dark);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ============ OTHER BARBERS STRIP ============ */
/* 4 cards on a profile page: 4 across, then 2+2 — never an orphan. */
.other-barbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .other-barbers { grid-template-columns: repeat(2, 1fr); } }

/* ============ REVEAL ANIMATION ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ FOCUS ============ */
a:focus-visible, button:focus-visible, iframe:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.bg-cream-2 { background: var(--cream-2); }
.bg-dark { background: var(--charcoal-950); color: var(--text-on-dark); }
.text-center { text-align: center; }