/* ============================================================================
 * TOP CLASS BARBERSHOP — visual identity
 * LocalFront AI · art direction 2026-07-31
 * ----------------------------------------------------------------------------
 * Derived from Vic's approved Gye Nyame logo: deep emerald, white, elegant
 * gold, charcoal neutral. The brief: luxury, trust, craftsmanship,
 * professionalism, community — a premium hotel lobby, not a landing page.
 *
 * PRINCIPLES USED THROUGHOUT
 *  - Whitespace is structural. Sections breathe on an 88/128px rhythm.
 *  - Gold is a hairline and an accent, never a fill for large areas.
 *  - Photography is presented large; the shop's work is the hero, not decor.
 *  - Display type is a high-contrast serif; UI type is a quiet sans.
 *  - Motion is slow and subtle (600-900ms, ease-out), never bouncy.
 *
 * NOTE: this is a CLIENT-SPECIFIC fork of the barbershop template stylesheet.
 * templates/barbershop/ is untouched and remains the generic master.
 * Runtime tokens come from businessConfig.theme via applyTheme() in script.js,
 * which maps surface -> --bg, surfaceAlt -> --bg-alt, surfaceCard ->
 * --bg-card and surfaceBarber -> --bg-barber (names kept for that).
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. TOKENS
 * ------------------------------------------------------------------------ */
:root {
  /* Brand — authored defaults; overridden at runtime from businessConfig */
  --primary: #0b3b2a;
  --primary-dark: #05231a;
  --accent: #c9a44c;
  --accent-dark: #a8873a;
  --accent-ink: #7e641f;
  --ink: #1a1d1b;
  --muted: #5c6660;
  /* Light-surface system, warmest-lit to deepest. Stark white was harsh over
     long content sections, so the page sits on warm stone and RAISED things
     (cards, chat bubbles, the booking dialog) are lighter than the page, while
     alternating and recessed surfaces are a step deeper. Three tones only —
     no one-off background colours anywhere else. */
  --bg-card: #faf8f3;   /* raised: chat bubbles, chat input bar, chooser panel */
  --bg-barber: #dae5dc; /* barber cards only — soft sage. The cards sit on
                           --bg-alt, and a PALER sage (#EEF2EC) was invisible at
                           normal viewing size: it differed from the section the
                           same way white did. This tone is a step DARKER than
                           the section as well as cooler, so it reads as its own
                           panel. Chroma is 11/255 — tinted, never mint. Going
                           deeper costs body-note contrast, so this is the floor
                           for the small muted text on the card. */
  --bg: #f5f2ea;        /* page + default sections */
  --bg-alt: #efebe1;    /* alternating sections, gallery frames, chat panel */
  --on-primary: #f4f1e8;
  --on-accent: #1c1608;

  /* Derived veils and hairlines */
  --emerald-veil: rgba(11, 59, 42, 0.06);
  --emerald-line: rgba(11, 59, 42, 0.14);
  --gold-veil: rgba(201, 164, 76, 0.16);
  --gold-line: rgba(201, 164, 76, 0.42);
  --ivory-line: rgba(244, 241, 232, 0.16);
  --ivory-soft: rgba(244, 241, 232, 0.76);

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", Didot, "Bodoni MT",
    Georgia, ui-serif, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  /* legacy alias kept so any stray template rule still resolves */
  --font-head: var(--font-display);

  /* Spacing rhythm */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 28px;
  --gap-lg: 48px;
  --gap-xl: 80px;
  --section-y: 128px;
  --container: 1240px;
  --container-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 720ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scroll-padding-bottom: 100px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* `hidden` must always win. The rule above — and .hero-badges, .gallery-filters
   and the dialogs below — set `display` on elements that JS also toggles with
   the hidden ATTRIBUTE, and an author `display` outranks the browser's own
   [hidden] { display: none }. An element JS leaves hidden therefore still
   painted: that is what rendered the src-less 92px hero crest as an empty
   shadowed square between the location line and the headline. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.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;
}

/* ---------------------------------------------------------------------------
 * 2. TYPOGRAPHY
 * ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--primary);
}

/* The eyebrow: small, wide-tracked, uppercase — the luxury signature */
.section-eyebrow,
.hero-eyebrow,
.loc-tab-label,
.visit-label,
.footer-col h4,
.barber-role {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.section-title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  color: var(--primary);
  margin-top: var(--gap-sm);
}

.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 56ch;
  margin: var(--gap-sm) auto 0;
}

/* ---------------------------------------------------------------------------
 * 3. LAYOUT PRIMITIVES
 * ------------------------------------------------------------------------ */
.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 48px, var(--container-narrow));
  margin-inline: auto;
}

.container-menu {
  width: min(100% - 48px, 1040px);
  margin-inline: auto;
}

.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section-alt {
  background: var(--bg-alt);
}

.section-dark {
  background: var(--primary);
  color: var(--on-primary);
}

.section-dark .section-title {
  color: var(--on-primary);
}

.section-dark .section-eyebrow {
  color: var(--accent);
}

.section-head {
  text-align: center;
  margin-bottom: var(--gap-xl);
}

/* The gold hairline under every section title */
.section-head::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: var(--gap-md) auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent) 30%,
    var(--accent) 70%,
    transparent
  );
}

/* ---------------------------------------------------------------------------
 * 4. BUTTONS
 * ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* .btn is used on <a> and on <button> (the booking chooser trigger); this
     keeps the two visually identical instead of inheriting the UA button face. */
  background: none;
  padding: 15px 34px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease),
    border-color var(--slow) var(--ease), transform 400ms var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-outline-light {
  background: transparent;
  color: var(--on-primary);
  border-color: rgba(244, 241, 232, 0.4);
}

.btn-outline-light:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-lg {
  padding: 18px 44px;
}

/* ---------------------------------------------------------------------------
 * 5. HEADER
 * ------------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 18px 0;
  background: transparent;
  transition: background var(--slow) var(--ease), padding var(--slow) var(--ease),
    box-shadow var(--slow) var(--ease);
}

/* The hero's right half is a bright photograph. This scrim keeps the nav
   legible over it while preserving the transparent, cinematic feel. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(5, 35, 26, 0.72), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--slow) var(--ease);
}

.site-header.is-stuck::before {
  opacity: 0;
}

.header-inner {
  position: relative;
  z-index: 1; /* above the scrim */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--on-primary);
  font-family: var(--font-display);
  /* Capped at 7.25vw so the wordmark + menu button still fit a 320px phone at
     200% text size. At normal text 1.45rem = 7.25vw at 320px, so every width
     renders exactly as before. */
  font-size: min(1.45rem, 7.25vw);
  letter-spacing: 0.06em;
}

.brand-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: none;
  transition: width var(--slow) var(--ease), height var(--slow) var(--ease);
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-word small {
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}

/* Scrolled: emerald bar */
.site-header.is-stuck {
  background: rgba(5, 35, 26, 0.96);
  backdrop-filter: blur(10px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--gold-veil), 0 18px 40px rgba(0, 0, 0, 0.16);
}

.site-header.is-stuck .brand-img {
  width: 40px;
  height: 40px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.nav a {
  position: relative;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-primary);
  opacity: 0.86;
  padding: 6px 0;
  transition: opacity var(--slow) var(--ease), color var(--slow) var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--slow) var(--ease);
}

.nav a:hover {
  opacity: 1;
  color: var(--accent);
}

.nav a:hover::after {
  width: 100%;
}

.nav .nav-cta {
  border: 1px solid var(--gold-line);
  color: var(--accent);
  padding: 10px 24px;
  opacity: 1;
}

.nav .nav-cta::after {
  display: none;
}

.nav .nav-cta:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none; /* never squeezed below its 44px tap target */
  background: none;
  border: 0;
  cursor: pointer;
}

/* 2px, not a hairline: on mobile these bars sit directly over the hero
   photograph, where a 1px ivory line disappears against bright areas. */
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: var(--on-primary);
  box-shadow: 0 1px 3px rgba(3, 20, 15, 0.55);
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * 6. HERO — cinematic split: emerald type panel + full-bleed portrait plate
 * ------------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--primary-dark);
  color: var(--on-primary);
  overflow: hidden;
  isolation: isolate;
}

.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
  min-height: 100svh;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px clamp(32px, 6vw, 104px) 96px;
  position: relative;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* Faint adinkra-inspired concentric rings, pure CSS */
.hero-panel::before {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid var(--gold-veil);
  box-shadow: inset 0 0 0 34px rgba(201, 164, 76, 0.05),
    inset 0 0 0 35px var(--gold-veil), inset 0 0 0 92px rgba(201, 164, 76, 0.04);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 34ch;
}

.hero-eyebrow {
  color: var(--accent);
  margin-bottom: var(--gap-md);
}

.hero-crest {
  width: 92px;
  height: 92px;
  margin-bottom: var(--gap-md);
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

.hero-title {
  /* The floor is capped at 15.5vw so "Barbershop" still fits a phone when the
     visitor's text size is 200%. At normal text 3.1rem = 15.5vw at 320px, so
     every width renders exactly as before. */
  font-size: clamp(min(3.1rem, 15.5vw), 6.4vw, 5.6rem);
  line-height: 1.02;
  color: var(--on-primary);
}

.hero-rule {
  width: 72px;
  height: 1px;
  background: var(--accent);
  margin: var(--gap-md) 0;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--gap-md);
}

.hero-subtitle {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--ivory-soft);
  margin-bottom: var(--gap-lg);
  max-width: 40ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  list-style: none;
  margin-bottom: var(--gap-md);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 232, 0.82);
  border: 1px solid rgba(244, 241, 232, 0.18);
  border-radius: 2px;
  padding: 7px 14px;
}

.hero-figure {
  position: relative;
  overflow: hidden;
  background: var(--primary-dark);
}

.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tuned 2026-08-29 for the current hero photograph, which sits hard against
     the right edge of frame with the crown near the top: right-aligned and
     top-aligned so the afro, the taper and the hairline survive every viewport.
     Solved against 12 desktop/tablet/mobile frames at both ends of heroDrift.
     NOTE: heroDrift scales about the container centre, so the outer ~5.8% is
     cropped on every side at peak zoom regardless of this value — a new hero
     plate needs this re-checked, not assumed. */
  object-position: 85% 0%;
  animation: heroDrift 26s var(--ease) infinite alternate;
}

/* LOGO PRESENTATION — the brand panel when hero.logo is set. The mark is
   CONTAINED at its own aspect ratio (never cropped, never stretched) and is
   capped below its native 512px so it cannot pixelate. The background is the
   same emerald as the type panel plus one very faint gold bloom for depth —
   no animation, no photography, nothing else. */
.hero-figure.is-logo {
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vw, 96px);
  background: radial-gradient(
      circle at 50% 46%,
      rgba(201, 164, 76, 0.13),
      rgba(201, 164, 76, 0.04) 42%,
      transparent 68%
    ),
    linear-gradient(200deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.hero-figure.is-logo img {
  width: min(58%, 400px); /* native is 512px — never upscaled */
  height: auto;
  object-fit: contain;
  animation: none;
  transform: none;
  filter: drop-shadow(0 26px 60px rgba(3, 20, 15, 0.45));
}

/* The photographic grade would only dim the mark. */
.hero-figure.is-logo::after {
  background: linear-gradient(
    100deg,
    rgba(5, 35, 26, 0.34) 0%,
    transparent 26%,
    transparent 100%
  );
}

@keyframes heroDrift {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.13);
  }
}

/* Emerald grade so photo and panel read as one composition.
   The headline sits on its own emerald panel, NOT over the photograph, so this
   overlay is compositional only — no text depends on it for contrast. It is
   therefore kept heavy at the seam (left) and light across the subject (right)
   so the fade, lineup and beard stay crisp. */
.hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      var(--primary-dark) 0%,
      rgba(5, 35, 26, 0.52) 20%,
      rgba(5, 35, 26, 0.08) 52%,
      rgba(5, 35, 26, 0.16) 100%
    ),
    linear-gradient(to top, rgba(5, 35, 26, 0.42), transparent 38%);
  pointer-events: none;
}

.hero-scroll {
  position: absolute;
  left: clamp(32px, 6vw, 104px);
  bottom: 40px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.6);
}

.hero-scroll::after {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: scrollPulse 2.6s var(--ease) infinite;
}

@keyframes scrollPulse {
  0%,
  100% {
    transform: scaleX(0.4);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 7. HIGHLIGHTS — a quiet gold-ruled band, not chips
 * ------------------------------------------------------------------------ */
.highlights {
  background: var(--primary-dark);
  border-top: 1px solid var(--gold-veil);
  border-bottom: 1px solid var(--gold-veil);
  padding: 26px 0;
}

.highlights-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  list-style: none;
}

.highlights-list li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.9);
  position: relative;
}

/* gold diamond separators */
.highlights-list li + li::before {
  content: "";
  position: absolute;
  left: clamp(-12px, -2.5vw, -36px);
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: rotate(45deg);
}

.highlight-icon {
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * 8. SERVICES — a refined menu, leader dots, gold prices
 * ------------------------------------------------------------------------ */
.services-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap-xl);
  row-gap: 4px;
}

/* Optional category label spanning both menu columns */
.menu-category {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: var(--gap-lg) 0 var(--gap-sm);
}

.menu-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--emerald-veil);
  transition: border-color var(--slow) var(--ease);
}

.menu-row:hover {
  border-bottom-color: var(--gold-line);
}

/* name · leader dots · price, all on one baseline */
.menu-row-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
}

.menu-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--primary);
}

.menu-dots {
  border-bottom: 1px dotted rgba(11, 59, 42, 0.26);
  transform: translateY(-5px);
}

.menu-price {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--accent-ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.menu-desc {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 4px;
}

.pricing-disclaimer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: var(--gap-lg);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
 * 9. BARBERS — monogram cards (no stock faces, ever)
 * ------------------------------------------------------------------------ */
.barbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap-md);
}

.barber-card {
  text-align: center;
  padding: var(--gap-lg) var(--gap-md);
  background: var(--bg-barber);
  border: 1px solid var(--emerald-veil);
  border-radius: 2px;
  transition: transform var(--slow) var(--ease), border-color var(--slow) var(--ease),
    box-shadow var(--slow) var(--ease);
}

.barber-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-line);
  box-shadow: 0 24px 50px rgba(11, 59, 42, 0.09);
}

/* The gold-ringed monogram that stands in for a photo */
.barber-avatar {
  width: 82px;
  height: 82px;
  margin: 0 auto var(--gap-sm);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--primary), var(--primary-dark));
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 1px var(--gold-line), 0 0 0 6px rgba(201, 164, 76, 0.09);
}

.barber-photo {
  width: 82px;
  height: 82px;
  margin: 0 auto var(--gap-sm);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--gold-line), 0 0 0 6px rgba(201, 164, 76, 0.09);
}

.barber-name {
  font-size: 1.7rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.barber-role {
  margin-bottom: var(--gap-sm);
  /* Deep emerald instead of the shared gold eyebrow ink: on the sage card the
     small gold label measured 4.4:1, under AA. Emerald reads at 9.7:1 and keeps
     the card's hierarchy (serif name, then this, then the gold button).
     Every other eyebrow on the site still uses --accent-ink. */
  color: var(--primary);
}

.barber-specialty {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: var(--gap-sm);
}

/* A barber's confirmed weekly pattern (days + shop, never times). Rows wrap
   rather than hold fixed columns: the narrowest card leaves ~154px of content
   (210px auto-fit minimum − 2 × 28px padding). */
.barber-schedule {
  list-style: none;
  margin: 0 0 var(--gap-sm);
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--primary);
}

.barber-schedule li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
}

.barber-schedule-days {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.barber-schedule .is-off .barber-schedule-place {
  color: var(--muted);
}

.barber-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: var(--gap-sm);
}

.barber-book {
  font-size: 10.5px;
  padding: 11px 22px;
}

.barber-ig {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Darker gold than --accent-ink: on the sage card --accent-ink measured
     4.35:1, under AA for 11px text; this reads 5.3:1 in the same hue. */
  color: #6e5718;
}

/* Direct line for a barber who has one. Outline treatment so it reads as a
   secondary action next to the solid gold "Book with …" button — and so it is
   never mistaken for online booking. */
.barber-call {
  font-size: 10.5px;
  padding: 11px 22px;
  background: transparent;
  color: var(--primary);
  border-color: var(--gold-line);
}

.barber-call:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Honest line for barbers with no online booking link */
.barber-note {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--gap-sm);
}

/* "View profile" — only on a barber with an enabled profile. A quiet text
   link under the gold button, so the card's one strong action stays booking. */
.barber-profile-link {
  display: inline-block;
  margin-top: var(--gap-sm);
  padding-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  border-bottom: 1px solid var(--gold-line);
}

.barber-profile-link:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------------------
 * 9b. BARBER PROFILE PAGE (barber-<slug>.html)
 * The opening band reuses the hero's emerald panel, rings and gold rule, so
 * the transparent header sits on emerald exactly as it does on the homepage.
 * ------------------------------------------------------------------------ */
.profile-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 168px 0 var(--gap-xl);
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--on-primary);
}

.profile-hero::before {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid var(--gold-veil);
  box-shadow: inset 0 0 0 34px rgba(201, 164, 76, 0.05),
    inset 0 0 0 35px var(--gold-veil), inset 0 0 0 92px rgba(201, 164, 76, 0.04);
  pointer-events: none;
  z-index: -1;
}

/* Flex, not grid: with no portrait the text simply takes the full width. */
.profile-layout {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  max-width: 1040px;
  margin-inline: auto;
}

/* Never wider than the portrait's native 376px, so it stays sharp. */
.profile-figure {
  position: relative;
  flex: 0 1 376px;
  margin: 0;
}

.profile-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gold-line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

/* Offset gold frame behind the portrait */
.profile-figure::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--gold-line);
  z-index: -1;
}

.profile-text {
  flex: 1 1 0;
  min-width: 0;
}

.profile-back {
  display: inline-flex;
  gap: 8px;
  margin-bottom: var(--gap-md);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-soft);
  transition: color var(--slow) var(--ease);
}

.profile-back:hover {
  color: var(--accent);
}

.profile-name {
  font-size: clamp(3.1rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  color: var(--on-primary);
}

.profile-role {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.profile-specialty,
.profile-bio p {
  max-width: 52ch;
  color: var(--ivory-soft);
}

.profile-bio p + p {
  margin-top: var(--gap-sm);
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

.profile-ig {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.profile-booking-note {
  margin-top: var(--gap-sm);
  font-size: 0.95rem;
  color: var(--ivory-soft);
}

.profile-missing {
  text-align: center;
}

.profile-missing .btn {
  margin-top: var(--gap-md);
}

/* The week: sage cards, like the barber cards, gold-topped like a ticket */
.profile-week {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-md);
}

.profile-stop {
  padding: var(--gap-lg) var(--gap-md);
  text-align: center;
  background: var(--bg-barber);
  border: 1px solid var(--emerald-veil);
  border-top: 2px solid var(--accent);
  border-radius: 2px;
}

.profile-stop-days {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}

.profile-stop-place {
  margin: 10px 0 6px;
  font-size: 2rem;
  color: var(--primary);
}

.profile-stop-address {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}

.profile-stop-call,
.profile-stop-map {
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 2px;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid var(--gold-line);
}

.profile-stop-map {
  margin-left: var(--gap-sm);
}

.profile-stop-call:hover,
.profile-stop-map:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* The day off reads as a quieter card, not a missing one */
.profile-stop.is-off {
  background: transparent;
  border: 1px dashed var(--emerald-line);
  border-top: 2px solid var(--emerald-line);
}

.profile-stop.is-off .profile-stop-place {
  color: var(--muted);
}

.profile-week-note {
  margin-top: var(--gap-md);
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Portfolio: the homepage gallery's tiles, cadence, caption veil and
   lightbox, unchanged — only the width is capped. */
.portfolio-grid {
  max-width: 1040px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .profile-hero {
    padding-top: 132px;
  }

  .profile-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-figure {
    flex: none;
    width: min(100% - 28px, 376px);
    margin-inline: 14px;
  }

  /* Keep the booking button clear of the floating concierge
     (60px launcher, 16px from the edge = the gutter, + 8px gap). */
  .profile-actions {
    padding-right: 68px;
  }
}

/* ---------------------------------------------------------------------------
 * 10. GALLERY — a portfolio, not a thumbnail wall
 * ------------------------------------------------------------------------ */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-xl);
}

.gallery-filter {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 6px 2px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--slow) var(--ease), border-color var(--slow) var(--ease);
}

.gallery-filter:hover {
  color: var(--primary);
}

.gallery-filter.is-active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}

/* Editorial grid: a deliberate rhythm of large and standard plates.
   The cadence must TILE the 6 columns exactly, or auto-placement leaves holes:
   a wide plate that cannot fit the columns left in a row wraps, and the tail of
   that row stays empty. One cycle here is 3 + 3 + 2 + 2 + 2 = 12 = exactly two
   full rows. grid-auto-flow: dense is the safety net — if the roster of photos
   ever changes so a plate wraps anyway, a later standard plate backfills the
   gap instead of leaving a reserved empty cell. Row heights come from the
   images' own aspect-ratio, so the grid is content-sized; there is no fixed or
   minimum height anywhere in this section. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: var(--gap-md);
}

.gallery-item {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  background: var(--bg-alt);
  cursor: zoom-in;
}

/* Every cycle of five opens with two large plates — the portfolio cadence */
.gallery-item:nth-child(5n + 1),
.gallery-item:nth-child(5n + 2) {
  grid-column: span 3;
}

.gallery-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.gallery-item:nth-child(5n + 1) .gallery-media,
.gallery-item:nth-child(5n + 2) .gallery-media {
  aspect-ratio: 4 / 5;
}

.gallery-item:hover .gallery-media {
  transform: scale(1.05);
}

/* Caption rises out of an emerald veil */
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 24px 22px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--on-primary);
  background: linear-gradient(to top, rgba(5, 35, 26, 0.92), transparent);
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease);
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption {
  transform: translateY(0);
  opacity: 1;
}

/* Placeholder card — kept for categories with no photo yet */
.gallery-placeholder {
  aspect-ratio: 3 / 4;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--emerald-veil);
}

.gallery-placeholder span {
  font-size: 1.6rem;
  opacity: 0.5;
}

.gallery-placeholder small {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gallery-pair-half {
  position: relative;
}

.gallery-pair-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-primary);
  background: rgba(5, 35, 26, 0.78);
  padding: 5px 10px;
}

/* Lightbox */
/* ---------------------------------------------------------------------------
 * 10b. BOOKING CHOOSER — the small dialog behind every global booking CTA.
 * Same emerald-over-ivory language as the rest of the site; no new colours.
 * ------------------------------------------------------------------------ */
.booking-chooser {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 20, 15, 0.86);
  backdrop-filter: blur(6px);
}

.booking-chooser[hidden] {
  display: none;
}

.booking-chooser-panel {
  position: relative;
  width: min(100%, 420px);
  padding: clamp(28px, 5vw, 40px);
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  box-shadow: 0 40px 90px rgba(3, 20, 15, 0.45);
}

.booking-chooser-title {
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  color: var(--primary);
  margin-bottom: 10px;
}

.booking-chooser-note {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: var(--gap-md);
}

.booking-chooser-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-chooser-option {
  width: 100%;
  font-size: 11px;
}

.booking-chooser-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.booking-chooser-close:hover {
  color: var(--primary);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 6vh 6vw;
  background: rgba(3, 20, 15, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 88vh;
}

.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  margin-top: var(--gap-md);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--on-primary);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 48px;
  height: 48px;
  font-size: 26px;
  line-height: 1;
  color: var(--on-primary);
  background: none;
  border: 1px solid rgba(244, 241, 232, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--slow) var(--ease), color var(--slow) var(--ease);
}

.lightbox-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
 * 11. ABOUT / WHY CHOOSE — editorial split with a photographic plate
 * ------------------------------------------------------------------------ */
.about-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.about-figure {
  position: relative;
  isolation: isolate;
}

.about-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Offset gold frame — a couture detail */
.about-figure::after {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--gold-line);
  z-index: -1;
}

.about-par {
  font-size: 1.12rem;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: var(--gap-md);
}

/* Opening line gets editorial treatment */
.about-par:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  line-height: 1.5;
  color: var(--primary);
}

.about-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap-lg) var(--gap-lg);
  margin-top: var(--gap-xl);
  counter-reset: point;
}

/* A gold numeral replaces the icon — typographic, not clip-art. */
.about-point {
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--gold-line);
  counter-increment: point;
}

.about-point::before {
  content: counter(point, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}

.about-point-icon {
  font-size: 1.15rem;
  display: block;
  margin-bottom: 10px;
}

.about-point h3 {
  font-size: 1.28rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.about-point p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * 12. VISIT — the location selector, treated as a decision that matters
 * ------------------------------------------------------------------------ */
.loc-selector {
  display: flex;
  margin: 0 auto var(--gap-xl);
  border: 1px solid var(--ivory-line);
  border-radius: 2px;
  width: fit-content;
  overflow: hidden;
}

.loc-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 20px clamp(24px, 4vw, 52px);
  cursor: pointer;
  text-align: center;
  color: rgba(244, 241, 232, 0.62);
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}

.loc-tab + .loc-tab {
  border-left: 1px solid var(--ivory-line);
}

.loc-tab-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
}

.loc-tab-label {
  display: block;
  margin-top: 6px;
  color: inherit;
  opacity: 0.7;
}

.loc-tab:hover {
  color: var(--on-primary);
  background: rgba(244, 241, 232, 0.04);
}

.loc-tab.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

.loc-tab.is-active .loc-tab-label {
  color: var(--on-accent);
  opacity: 0.8;
}

.visit-grid {
  display: grid;
  gap: var(--gap-lg);
}

.visit-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--ivory-line);
  border-radius: 2px;
  background: rgba(244, 241, 232, 0.03);
}

.visit-card[hidden] {
  display: none;
}

.visit-card h3 {
  font-size: clamp(2rem, 3vw, 2.7rem);
  color: var(--on-primary);
  margin-bottom: var(--gap-sm);
}

.visit-label {
  color: var(--accent);
  margin-bottom: var(--gap-xs);
}

.visit-detail + .visit-detail {
  margin-top: var(--gap-md);
}

.visit-address,
.visit-phone {
  font-size: 1.08rem;
  line-height: 1.8;
  color: rgba(244, 241, 232, 0.86);
  font-style: normal;
}

.visit-phone a {
  color: var(--accent);
  transition: opacity var(--slow) var(--ease);
}

.visit-phone a:hover {
  opacity: 0.75;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.hours-table th,
.hours-table td {
  padding: 13px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid rgba(244, 241, 232, 0.1);
  color: rgba(244, 241, 232, 0.86);
}

.hours-table th {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0.72 (was 0.55, 4.27:1): 6.1:1 on the emerald card, AA for 11px text */
  color: rgba(244, 241, 232, 0.72);
}

.hours-table td {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}

.visit-note {
  font-size: 0.92rem;
  color: rgba(244, 241, 232, 0.6);
  margin-top: var(--gap-sm);
}

/* ---------------------------------------------------------------------------
 * 13. FAQ
 * ------------------------------------------------------------------------ */
.faq-item {
  border-bottom: 1px solid var(--emerald-veil);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--primary);
  transition: color var(--slow) var(--ease);
}

.faq-question:hover {
  color: var(--accent-ink);
}

/* 200% text on a 320px phone. The question text may shrink and wrap inside
   its row (it never needs to at normal text). The FAQ heading's floor is
   capped at 21vw so "Frequently" still fits whole (67px at 320px, full size
   from 390px); break-word is only a safety net. At normal text both render
   exactly as before: 2.4rem = 12vw at 320px, far under 21vw. */
.faq-question > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}

#faq .section-title {
  font-size: clamp(min(2.4rem, 21vw), 4.6vw, 3.9rem);
  overflow-wrap: break-word;
}

.faq-toggle {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform var(--slow) var(--ease), background var(--slow) var(--ease);
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
  background: var(--gold-veil);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--slow) var(--ease);
}

.faq-answer-inner {
  padding-bottom: var(--gap-md);
  color: var(--muted);
  line-height: 1.85;
  max-width: 68ch;
}

/* ---------------------------------------------------------------------------
 * 14. BOOKING BAND
 * ------------------------------------------------------------------------ */
.section-book {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.section-book::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--gold-veil);
  box-shadow: inset 0 0 0 60px rgba(201, 164, 76, 0.03);
  pointer-events: none;
}

.book-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

.book-heading {
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  line-height: 1.08;
  color: var(--on-primary);
  /* keeps a longer closing line from crowding the emerald band's edges */
  max-width: 20ch;
  margin-inline: auto;
}

.book-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: var(--gap-md) auto;
  background: var(--accent);
}

.book-sub {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--ivory-soft);
  max-width: 48ch;
  margin: 0 auto var(--gap-lg);
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}

.book-note {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--gap-sm);
}

.book-instructions {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(244, 241, 232, 0.62);
}

/* ---------------------------------------------------------------------------
 * 15. FOOTER
 * ------------------------------------------------------------------------ */
.site-footer {
  background: var(--primary-dark);
  color: rgba(244, 241, 232, 0.74);
  padding-top: var(--gap-xl);
  border-top: 1px solid var(--gold-veil);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--gap-xl);
  padding-bottom: var(--gap-xl);
}

.footer-crest {
  width: 76px;
  height: 76px;
  margin-bottom: var(--gap-md);
  object-fit: contain;
}

.footer-brand h3 {
  font-size: 1.9rem;
  color: var(--on-primary);
  margin-bottom: var(--gap-sm);
}

.footer-brand p {
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 42ch;
}

.footer-col h4 {
  color: var(--accent);
  margin-bottom: var(--gap-md);
}

.footer-col ul {
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.9;
}

.footer-col a {
  transition: color var(--slow) var(--ease);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-hours-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--gap-sm);
}

.footer-hours-note {
  font-size: 0.85rem;
  opacity: 0.7;
}

.footer-social {
  display: flex;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 241, 232, 0.18);
  border-radius: 50%;
  transition: border-color var(--slow) var(--ease);
}

.footer-social a:hover {
  border-color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid rgba(244, 241, 232, 0.09);
  padding: var(--gap-md) 0;
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.footer-bottom p {
  font-size: 0.85rem;
  opacity: 0.6;
}

.footer-credit {
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
 * 16. CONCIERGE — the AI Front Desk, presented as a maitre d', not a bot
 * ------------------------------------------------------------------------ */
.chat {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
  font-family: var(--font-body);
}

.chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 12px;
  background: linear-gradient(150deg, var(--primary), var(--primary-dark));
  border: 1px solid var(--gold-line);
  border-radius: 40px;
  cursor: pointer;
  color: var(--on-primary);
  box-shadow: 0 18px 44px rgba(3, 20, 15, 0.34);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease),
    opacity 300ms var(--ease);
}

.chat-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(3, 20, 15, 0.42);
}

/* The launcher floats over both light and dark sections, so one ring colour
   cannot reach 3:1 on both. Two rings: a light band in the 3px offset gap
   (clear on dark sections) and the dark primary outline (clear on light). */
.chat-launcher:focus-visible {
  outline-color: var(--primary-dark);
  box-shadow: 0 0 0 3px var(--on-primary), 0 18px 44px rgba(3, 20, 15, 0.34);
}

.chat-launcher-crest {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
}

.chat-launcher-text {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* script.js adds .hidden to the badge once the concierge has been opened —
   the notification dot should not return after the visitor has read it. */
.chat-launcher-badge.hidden {
  display: none;
}

.chat-launcher-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 10px;
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(94vw, 400px);
  height: min(76vh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  box-shadow: 0 40px 90px rgba(3, 20, 15, 0.4);
  overflow: hidden;
  transform-origin: bottom right;
  transition: opacity 460ms var(--ease), transform 460ms var(--ease),
    visibility 460ms var(--ease);
}

.chat.is-closed .chat-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
}

.chat.is-open .chat-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* Visible at once on open so script.js can move focus into the message box;
     the fade and lift still play. Closing keeps the 460ms visibility fade. */
  transition: opacity 460ms var(--ease), transform 460ms var(--ease),
    visibility 0s;
}

.chat.is-open .chat-launcher {
  opacity: 0;
  pointer-events: none;
  /* Out of the tab order and hidden from assistive technology while the chat
     is open, once its fade-out ends. On close the base transition (no
     visibility) brings it back at once, so focus can return to it. */
  visibility: hidden;
  transition: opacity 300ms var(--ease), visibility 0s 300ms;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(150deg, var(--primary), var(--primary-dark));
  border-bottom: 1px solid var(--gold-line);
}

.chat-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  flex: 1;
}

.chat-header-text strong {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--on-primary);
}

.chat-header-text span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.chat-close {
  width: 34px;
  height: 34px;
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: rgba(244, 241, 232, 0.7);
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--slow) var(--ease), background var(--slow) var(--ease);
}

.chat-close:hover {
  color: var(--accent);
  background: rgba(244, 241, 232, 0.08);
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md) 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-msg {
  max-width: 84%;
  padding: 13px 17px;
  font-size: 0.93rem;
  line-height: 1.7;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
  animation: msgIn 460ms var(--ease) both;
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Confirmed booking/Instagram destinations inside a concierge reply. Only
   allowlisted links are ever rendered (see trustedLinks() in script.js). */
.chat-link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  word-break: break-word;
  /* When Tab scrolls a link into view inside the message area, stop 6px
     short of the edge so its focus ring (3px gap + 2px line) is not cut off. */
  scroll-margin: 6px 0;
}

.chat-link:hover {
  color: var(--primary);
}

.chat-msg.bot {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--emerald-veil);
  border-left: 2px solid var(--accent);
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-primary);
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 15px 17px;
  background: var(--bg-card);
  border: 1px solid var(--emerald-veil);
  border-radius: 3px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: typing 1.3s var(--ease) infinite;
}

.chat-typing span:nth-child(2) {
  animation-delay: 0.16s;
}
.chat-typing span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px var(--gap-sm);
}

.chat-quick button {
  padding: 8px 15px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--emerald-line);
  border-radius: 40px;
  cursor: pointer;
  transition: border-color var(--slow) var(--ease), color var(--slow) var(--ease),
    background var(--slow) var(--ease);
}

.chat-quick button:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: rgba(201, 164, 76, 0.07);
}

.chat-input {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--emerald-veil);
  background: var(--bg-card);
}

.chat-input input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--emerald-veil);
  border-radius: 3px;
  transition: border-color var(--slow) var(--ease);
}

.chat-input input:focus {
  border-color: var(--gold-line);
}

/* iOS Safari zooms the whole page when a focused text field is under 16px.
   Phones and tablets only; the desktop message box keeps its size. */
@media (max-width: 900px) {
  .chat-input input {
    font-size: 1rem;
  }
}

/* No-JavaScript fallback (index.html <noscript>): both shops, plain list. */
.noscript-shop-list {
  list-style: none;
  display: grid;
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

.noscript-shop-list h3 {
  font-size: 1.6rem;
}

.noscript-shop-list a {
  color: var(--primary);
  text-decoration: underline;
}

/* Focus rings on the light chat surfaces (--bg-alt panel, --bg-card bubbles
   and input bar): the site's gold ring is under 3:1 there, so these use the
   dark primary. The close button sits on the dark header and keeps gold. */
.chat-body :focus-visible,
.chat-quick :focus-visible,
.chat-input :focus-visible {
  outline-color: var(--primary);
}

.chat-input button {
  flex: none;
  width: 46px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--slow) var(--ease);
}

.chat-input button:hover {
  background: var(--accent-dark);
}

/* ---------------------------------------------------------------------------
 * 17. QUICK ACTIONS (mobile)
 * ------------------------------------------------------------------------ */
.quick-actions {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  background: rgba(5, 35, 26, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--gold-veil);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}

.quick-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: rgba(244, 241, 232, 0.82);
  cursor: pointer;
}

/* 10.5px matches the smallest type used elsewhere (.barber-call). 9px was
   below comfortable reading size on a phone; the tracking is unchanged. */
.quick-action-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
}

/* Shop chooser above the bar — one tel: link per location, so a two-shop
   business never dials a shop the visitor did not choose. */
.quick-call-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  box-shadow: 0 24px 50px rgba(3, 20, 15, 0.45);
}

.quick-call-menu[hidden] {
  display: none;
}

.quick-call-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  color: var(--on-primary);
}

.quick-call-option + .quick-call-option {
  border-top: 1px solid var(--gold-veil);
}

.quick-call-shop {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quick-call-number {
  font-size: 13px;
  color: var(--accent);
}

.quick-action.is-active {
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
 * 18. SCROLL REVEAL
 * ------------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
 * 19. RESPONSIVE
 * ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .about-layout {
    grid-template-columns: 1fr;
  }
  .about-figure {
    max-width: 460px;
  }
  .visit-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  :root {
    --section-y: 88px;
    --gap-xl: 56px;
  }

  .hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-panel {
    order: 2;
    padding: 64px 28px 80px;
  }

  .hero-figure {
    order: 1;
    height: 62vh;
    min-height: 380px;
  }

  /* A logo needs a band only as tall as itself plus breathing room — the 62vh
     photo band would read as a big empty emerald block on a phone. */
  .hero-figure.is-logo {
    height: auto;
    min-height: 0;
    padding: clamp(48px, 11vw, 72px) 24px;
  }

  .hero-figure.is-logo img {
    width: min(46vw, 260px);
  }

  .hero-content {
    max-width: none;
  }

  .hero-scroll {
    display: none;
  }

  .services-menu {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-sm);
  }

  .gallery-item,
  .gallery-item:nth-child(5n + 1),
  .gallery-item:nth-child(5n + 2) {
    grid-column: span 2;
  }

  .gallery-item:nth-child(5n + 1) .gallery-media,
  .gallery-item:nth-child(5n + 2) .gallery-media {
    aspect-ratio: 3 / 4;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }

  /* Nav becomes a full emerald sheet */
  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 2;
    /* a soft emerald pill keeps the bars readable over any photo behind them */
    background: rgba(5, 35, 26, 0.55);
    border-radius: 50%;
    backdrop-filter: blur(4px);
  }

  /* the brand wordmark sits over photography here too */
  .brand {
    text-shadow: 0 1px 10px rgba(3, 20, 15, 0.55);
  }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-lg);
    background: linear-gradient(150deg, var(--primary), var(--primary-dark));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 460ms var(--ease), transform 460ms var(--ease),
      visibility 460ms var(--ease);
  }

  /* script.js toggles .mobile-open on the nav */
  .nav.mobile-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav a {
    font-size: 14px;
    letter-spacing: 0.24em;
  }

  .quick-actions:not([hidden]) {
    display: flex;
  }

  /* Keep the last footer line clear of the fixed quick-action bar. On the
     footer, not <body> (as the template does), so the emerald runs to the
     bottom instead of leaving an ivory strip. 64px = the template's value,
     above the bar's ~47px; plus the home-indicator inset where there is one. */
  .has-quick-actions .site-footer {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep browser-scrolled and keyboard-focused elements clear of
     the floating Concierge launcher and the fixed mobile quick-action
     bar beneath it. */
  html {
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  }

  /* keep the concierge clear of the quick-action bar */
  .chat {
    right: 16px;
    bottom: 78px;
  }

  .chat-launcher-text {
    display: none;
  }

  .chat-launcher {
    padding: 12px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .container,
  .container-narrow,
  .container-menu {
    width: min(100% - 32px, var(--container));
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .loc-selector {
    width: 100%;
    flex-direction: column;
  }

  .loc-tab + .loc-tab {
    border-left: 0;
    border-top: 1px solid var(--ivory-line);
  }

  /* One card per row on phones. In two columns a card is only ~165px wide at
     390px (container 358 − 28px gap, halved, − 56px card padding = ~109px of
     content), which left about 65px for the button label: "Call Tirron ·
     (202) 446-3969" broke into four or five lines and long names crowded the
     padding. Full-width cards keep the type at its designed size.
     Above 560px the base auto-fit grid restores two or more columns. */
  .barbers-grid {
    grid-template-columns: 1fr;
  }

  .menu-name,
  .menu-price {
    font-size: 1.32rem;
  }

  .hero-figure.is-logo img {
    width: min(56vw, 210px);
  }

  /* The About frame's -20px offset is wider than the 16px phone gutter and
     widened the layout viewport by 4px. 14px matches the profile frame. */
  .about-figure::after {
    inset: 14px -14px -14px 14px;
  }

  /* With the concierge lane above, this keeps the profile button on one
     line where it fits. */
  .profile-actions .btn-lg {
    padding-inline: 28px;
  }
}

/* ---------------------------------------------------------------------------
 * 20. MOTION PREFERENCES & PRINT
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-figure img {
    animation: none;
    transform: scale(1.04);
  }

  .hero-figure.is-logo img {
    transform: none;
  }
}

@media print {
  .site-header,
  .chat,
  .quick-actions,
  .hero-figure,
  .gallery-filters,
  .lightbox {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    padding: 24px 0;
    page-break-inside: avoid;
  }
}