/* ============================================================
   THE BUTCHER'S BARBERSHOP — v5.1 "True Blends" replica, B&W
   Palette: pure monochrome — #fff accent · grays · black canvas
   Type: Bebas Neue (display) · Inter (body) · Great Vibes (script)
   Structure/spacing per docs/v5-1-replica-spec.md
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --white:    #ffffff;
  --gray-1:   #9ca3af;   /* secondary text */
  --gray-2:   #8b909a;   /* tertiary text — kept ≥4.5:1 on all bands for AA */
  --band-1:   #0a0a0a;   /* base canvas */
  --band-2:   #121212;   /* alternating band */
  --band-3:   #1a1a1a;   /* cards / about band */
  --band-4:   #222222;   /* visit band */
  --ink:      #0a0a0a;   /* text on white (kept for main.js-agnostic parity) */
  --hair:     rgba(255,255,255,.12);   /* hairlines on dark */
  --hair-soft:rgba(255,255,255,.07);

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-script: "Great Vibes", cursive;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --header-h: 76px;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--white);
  background: var(--band-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"], .chips, .menu, .crew, .craft__list { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input { font: inherit; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--white); color: var(--band-1); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200;
  background: var(--white); color: var(--band-1);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  font-size: .8rem; padding: .7rem 1.2rem;
  border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

.container { width: min(1260px, 92vw); margin-inline: auto; }

/* film grain overlay */
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  /* v6.3 modern editorial scale: larger display size, tighter tracking
     (v5.1 replica measured 60px/6ls — superseded by 2026-08-30 modern pass) */
  font-size: clamp(3.4rem, 7vw, 4.9rem);
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.section-sub { color: var(--gray-1); margin-top: 1.1rem; }
.section-head { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.section-head--center { text-align: center; max-width: 60rem; margin-inline: auto; }

/* script eyebrow (Great Vibes, white/90, used sparingly) */
.script-eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  color: rgba(250,250,250,.9);
  margin-bottom: .8rem;
}
.section-head--center .script-eyebrow { display: block; }
.craft__copy .script-eyebrow { margin-bottom: .6rem; }

/* ---------- buttons: full pills everywhere ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1em 2em;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  position: relative;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out),
              background-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn--sm { font-size: .78rem; padding: .8em 1.6em; min-height: 42px; }
.btn--lg { font-size: .95rem; padding: 1.1em 2.4em; min-height: 56px; }
.btn--solid { background: var(--white); color: var(--band-1); }
.btn--solid:hover { background: rgba(255,255,255,.85); transform: translateY(-2px); }
.btn--ghost {
  border-color: rgba(255,255,255,.6);
  color: var(--white);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn .ic { flex: none; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, backdrop-filter .4s;
}
.site-header:has(.menu.is-open), .site-header.is-scrolled {
  background: rgba(10,10,10,.88);
  /* NOTE: never apply backdrop-filter here — a filter on this fixed ancestor
     turns it into the containing block for position:fixed descendants,
     which crushes the full-screen mobile drawer into the header bar. */
  border-bottom-color: var(--hair);
}
.nav {
  display: flex; align-items: center; gap: 1.4rem;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: .8rem; }
.brand-logo {
  display: block;
  width: 12px; height: 44px;
  object-fit: contain;
}
.brand-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem; letter-spacing: .14em;
  color: var(--white); text-transform: uppercase; line-height: 1.1;
  white-space: nowrap;
}
.brand-text__sub { color: var(--gray-1); }

.menu {
  display: flex; align-items: center; gap: 1.15rem;
  margin-left: auto;
}
.menu > li { display: flex; align-items: center; }
/* desktop inline navbar: hide drawer-only chrome AND the redundant Home link
   (brand lockup already returns home); pill pair stays, right-aligned */
#primary-menu .menu__head, #primary-menu .menu__foot, #primary-menu > .menu__home { display: none; }
#primary-menu .menu__nav-cta { display: inline-flex; align-items: center; gap: .55rem; margin-left: .3rem; }
@media (max-width: 1599px) { #primary-menu .menu__nav-cta .btn--ghost { display: none; } }

.menu__link {
  font-family: var(--font-body);
  font-size: .875rem;                     /* 14px per measurements */
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 1.4px;                  /* 1.4px per measurements */
  text-transform: uppercase;
  color: #a6a6a6;                         /* inactive gray per measurements */
  padding: .6rem .2rem;
  transition: color .3s;
}
.menu__link .menu__num { display: none; }  /* reference desktop nav: no numbers */
.menu__link.is-active { color: #fafafa; } /* active white */
/* v6.3: desktop nav underline reveal — grows from center, subtle */
@media (min-width: 1025px) {
  .menu__link { position: relative; }
  .menu__link::after {
    content: "";
    position: absolute; left: 50%; bottom: .18rem;
    width: 0; height: 1px;
    background: var(--white);
    transform: translateX(-50%);
    transition: width .3s var(--ease-out);
  }
  .menu__link:hover::after,
  .menu__link:focus-visible::after,
  .menu__link.is-active::after { width: 100%; }
}
@media (hover: hover) {
  .menu__link:hover { color: var(--white); }
}

.nav-toggle { display: none; }

/* ---------- hero: centered monumental stack ---------- */
.hero {
  position: relative;
  min-height: 92svh;
  max-height: none;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
  filter: grayscale(1);
}
.hero__scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 8%, transparent 40%, rgba(5,5,5,.55) 100%); }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 90% at 50% 42%, rgba(10,10,10,.55), rgba(10,10,10,.92)),
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.25) 30%, rgba(10,10,10,.2) 68%, var(--band-1) 100%);
}
.hero__inner {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  min-height: 92svh;
  padding-block: calc(var(--header-h) + 2rem) 5.8rem;
}
.hero__eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: rgba(250,250,250,.9);
  margin-bottom: .4rem;
}
.hero__wordmark {
  width: min(480px, 52vh, 78vw);
  height: auto;
  margin-inline: auto;
}
.hero__line2 {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.85rem, 1.6vw, 1.1rem);
  letter-spacing: .3em;                    /* tracked-out per ref */
  text-transform: uppercase;
  color: var(--white);
  margin-top: .9rem;
}
.hero__lede {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--gray-1);
  max-width: 38rem;
  margin-top: 1.2rem;
  margin-bottom: 1.4rem;
}
.hero__actions {
  margin-top: 1.6rem;   /* breathing room below wordmark (QC) */
  display: flex; flex-wrap: wrap; gap: .9rem;
  align-items: stretch;
  justify-content: center;
  margin-bottom: .9rem;
}
.hero__social { justify-self: center; }
/* phone CTA: bigger type, tighter tracking, tabular digits — client legibility note */
.hero__actions .btn--ghost .cta-num {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: 0;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--white);
  transition: color .3s;
}
.scroll-cue:hover { color: var(--gray-1); }
.scroll-cue::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--white), transparent);
  display: none;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- sections: tonal bands ---------- */
.section { padding-block: clamp(4.5rem, 8vw, 6rem); }  /* ~py-24 rhythm */

/* ---------- services (black band: 3 image cards + price ledger) ---------- */
.services { background: var(--band-1); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.svc-card {
  background: var(--band-3);
  border-radius: 12px;                      /* rounded-xl per spec */
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.svc-card { border: 1px solid rgba(255,255,255,.06); }
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.svc-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: transform 1.2s var(--ease-out);
}
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__body {
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  flex: 1;
}
.svc-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.svc-card__desc {
  font-size: .9rem;
  color: var(--gray-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-card__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--white);
  padding-top: .4rem;
  transition: color .3s;
}
.svc-card__link .ic { transition: transform .3s var(--ease-out); }
.svc-card__link:hover .ic { transform: translate(2px, -2px); }

/* price ledger under the grid — minimal hairline rows */
.ledger-wrap { margin-top: 3.5rem; max-width: 60rem; margin-inline: auto; }
.ledger-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-1);
  margin-bottom: .6rem;
}
.ledger { counter-reset: svc; }
.service-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0,1.35fr) minmax(0,1fr) auto auto;
  gap: 1.4rem;
  align-items: center;
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--hair-soft);
}
.service-row:first-child { border-top: 1px solid var(--hair-soft); }
.service-num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--gray-2);
}
.service-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service-desc { font-size: .88rem; color: var(--gray-1); max-width: 34ch; }
.service-meta {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-2);
  white-space: nowrap;
}
.price {
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
}
.price s { opacity: .45; margin-right: .3rem; font-size: .9rem; }
.price--premium { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; align-self: center; }
.service-tag {
  font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--band-1); background: var(--white);
  padding: .35em .8em;
  border-radius: 999px;
  justify-self: start;
}
.service-book {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: .7em 1.3em;
  white-space: nowrap;
  transition: all .3s var(--ease-out);
}
.service-book:hover { background: var(--white); color: var(--band-1); border-color: var(--white); }
.service-book .ic { transition: transform .3s var(--ease-out); }
.service-row:hover .service-book .ic { transform: translate(2px, -2px); }
.service-row--feature .service-book { color: var(--white); border-color: rgba(255,255,255,.55); }

.section-cta {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
  justify-content: center;
}
.section-cta p { font-weight: 400; color: var(--gray-1); }

/* ---------- about / the craft (charcoal #1a1a1a band) ---------- */
.craft { background: var(--band-3); }
.craft__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: center;
}
.craft__fig { position: relative; }
.craft__fig img {
  width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover;
  filter: grayscale(1);
  border-radius: 12px;
}
.craft__badge {
  position: absolute; right: -1.2rem; bottom: 2.2rem;
  width: 108px; height: 108px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  background: var(--white); color: var(--band-1);
  border-radius: 50%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  line-height: 1.5;
}
.craft__tag {
  position: absolute; left: 0; bottom: 0;
  background: rgba(10,10,10,.82);
  color: var(--white);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .7em 1.1em;
  border-top-right-radius: 12px;
}
.craft__copy .section-title { margin-bottom: 1.4rem; }
.craft__copy p:not(.script-eyebrow) { color: var(--gray-1); margin-bottom: 1.3rem; max-width: 46ch; }
.craft__list { margin-top: .4rem; margin-bottom: 1.8rem; }
.craft__list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .8rem;
  font-size: .95rem;
  color: var(--gray-1);
}
.craft__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .55rem; height: 1px;
  background: var(--white);
}

/* ---------- ceiling photo band (craft section closer) ---------- */
/* break out of .container padding to true full-bleed */
.ceiling-band {
  margin: 4rem 0 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.ceiling-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 730;
  object-fit: cover;
}

/* ---------- expansion (band-2) ---------- */
.expansion {
  background: var(--band-2);
  border-block: 1px solid var(--hair-soft);
}
.expansion__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: center;
}
.expansion__copy > p:not(.script-eyebrow) { color: var(--gray-1); max-width: 46ch; }
.expansion__addr {
  font-style: normal;
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1.4rem;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--white);
}
.signup { margin-top: 1.8rem; }
.signup label {
  display: block;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--white);
  margin-bottom: .7rem;
}
.signup__row { display: flex; flex-wrap: wrap; gap: .7rem; }
.signup input[type="email"] {
  flex: 1 1 240px;
  min-height: 48px;
  background: rgba(10,10,10,.6);
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--white);
  padding: .8em 1.3em;
  transition: border-color .3s;
}
.signup input[type="email"]:focus { outline: none; border-color: var(--white); }
.signup input[type="email"]::placeholder { color: var(--gray-2); }
.form-note { margin-top: .7rem; font-size: .82rem; color: var(--gray-1); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.chip {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-1);
  border: 1px solid var(--hair);
  padding: .55em 1em;
  border-radius: 999px;
}
.expansion__panel {
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--band-1);
  padding: .9rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.expansion__panel img { width: 100%; filter: grayscale(1); border-radius: 6px; }
.expansion__plan-note {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-1);
  padding: .9rem .3rem .3rem;
}
.expansion__panel .btn { margin: .8rem .3rem .3rem; }

/* ---------- team (black band) ---------- */
.team { background: var(--band-1); }
.crew {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}
.card {
  background: var(--band-3);
  border: 1px solid var(--hair-soft);
  border-radius: 12px;
}
.card--barber {
  padding: 2rem 1.6rem 1.8rem;
  text-align: center;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card--barber:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1.5px solid var(--white);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  margin-bottom: 1.1rem;
}
.card--barber h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.role { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-1); margin-top: .35rem; }
.spec-list { font-size: .88rem; color: var(--gray-1); margin: .7rem 0 1.3rem; }
.card-link { width: 100%; }

/* ---------- visit band (#222) ---------- */
.locations { background: var(--band-4); }
.visit-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: stretch;
}
.loc-tag {
  display: inline-block;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: .4em .9em;
  margin-bottom: 1.2rem;
}
.visit-band__city {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
}
.visit-band__addr {
  font-style: normal;
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-1);
}
.visit-band__addr .ic { flex: none; margin-top: .3em; }
.hours {
  width: 100%; max-width: 340px; margin-top: 1.4rem; border-collapse: collapse;
  font-variant-numeric: tabular-nums;   /* v6.3: digits align column-down */
}
.hours th {
  text-align: left; font-weight: 500;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .68rem 0;
  color: var(--gray-1);
}
.hours td {
  text-align: right; font-size: .95rem; padding: .68rem 0;
  color: var(--white);
  font-feature-settings: "tnum";
}
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--hair-soft); }
.hours tbody tr:last-child th, .hours tbody tr:last-child td { border-bottom: 1px solid var(--hair-soft); }
.loc-phone {
  margin-top: 1.2rem;
  font-size: 1.05rem;
  display: flex; align-items: center; gap: .55rem;
}
.loc-phone a { border-bottom: 1px solid rgba(255,255,255,.4); transition: color .3s; }
.loc-phone a:hover { color: var(--gray-1); }
.visit-band__info .btn { margin-top: 1.5rem; }
.visit-band__map { position: relative; min-height: 360px; }
.visit-band__map iframe {
  width: 100%; height: 100%; min-height: 360px;
  border: 0;
  border-radius: 12px;
  filter: grayscale(1);                     /* grayscale LIGHT map per spec */
}
.visit-band__map-note {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--gray-1);
}
.visit-band__map-note a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.4); }

/* ---------- reviews (black band — 3 cards, white stars, quote icon) ---------- */
.reviews { background: var(--band-1); }
.reviews__rated {
  display: block;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: .5rem;
}
.stars { color: var(--white); display: inline-flex; gap: .22em; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.t-card {
  position: relative;
  background: var(--band-3);
  border: 1px solid var(--hair-soft);
  border-radius: 12px;
  padding: 2.1rem 1.8rem 1.8rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.t-card:hover {
  transform: translateY(-4px);
  border-color: var(--hair);
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
}
.t-card__quote {
  position: absolute; top: 1.3rem; right: 1.4rem;
  color: rgba(255,255,255,.22);
  transition: color .4s var(--ease-out);
}
.t-card:hover .t-card__quote { color: rgba(255,255,255,.4); }
.t-card .stars { gap: .28em; }   /* v6.3: airier star row above quote */
.t-card blockquote {
  font-size: 1.02rem; line-height: 1.75; color: var(--white); flex: 1;
  hanging-punctuation: first last;   /* typographic quote hierarchy */
}
.t-card figcaption {
  display: flex; align-items: center; gap: .6em;
  padding-top: 1rem;
  border-top: 1px solid var(--hair-soft);   /* v6.3: hairline separates quote from attribution */
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-1);
}
.t-card figcaption::before {           /* small monochrome rule glyph — avatar stand-in, no fake photos */
  content: "";
  width: 22px; height: 1px;
  background: rgba(255,255,255,.4);
  flex: none;
}

/* ---------- final CTA strip (band-2) ---------- */
.final-cta {
  background: var(--band-2);
  border-block: 1px solid var(--hair-soft);
  padding-block: clamp(4.5rem, 9vw, 7rem);
  text-align: center;
}
.final-cta__inner { max-width: 46rem; }
.final-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: .95;
  letter-spacing: 3px;   /* v6.3: tighter tracking matches section-title scale */
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.final-cta p:not(.credit) { color: var(--gray-1); margin-bottom: 2rem; }

/* ---------- app download badges (final CTA sub-row, v2 stacked) ---------- */
.app-badges { margin-top: 2.5rem; text-align: center; }
.app-badges__headline {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  color: var(--white, #fff);
  margin: 0 0 1.75rem;
}
.app-badges__hl { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
.app-badges__col { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.app-badges__col .app-badge { display: inline-block; line-height: 0; }
.app-badges__col img { display: block; width: 270px; max-width: 100%; height: auto; border-radius: 10px; }
.app-badge:focus-visible { outline: 2px solid var(--white, #fff); outline-offset: 4px; border-radius: 12px; }


/* ---------- footer (black, hairline top) ---------- */
.site-footer { background: var(--band-1); border-top: 1px solid var(--hair); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.6rem;
  padding-block: 4rem 3rem;
}
.brand-wordmark {
  display: block;
  width: clamp(180px, 22vw, 280px);
  height: auto;
}
.f-brand { display: flex; flex-direction: column; }   /* v6.3: lockup column rhythm */
.f-addr {
  font-style: normal;
  margin-top: 1.8rem;              /* v6.3: more air below the wordmark lockup */
  font-size: .9rem;
  line-height: 1.7;
  color: var(--gray-1);
}
.f-addr a { color: var(--white); }
.f-blurb { margin-top: 1rem; font-size: .88rem; color: var(--gray-1); max-width: 30ch; }
.f-col-title {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
  padding-bottom: .8rem;                 /* v6.3: hairline header rule per column */
  border-bottom: 1px solid var(--hair-soft);
}
.f-col ul li { margin-bottom: .55rem; }
.f-col a {
  color: var(--gray-1); font-size: .9rem;
  transition: color .3s;
}
.f-col a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--hair-soft); }
.footer-bottom__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
  padding-block: 1.3rem;
  font-size: .78rem;
  color: var(--gray-2);
}
.credit a { border-bottom: 1px solid rgba(255,255,255,.35); }
.credit a:hover { color: var(--white); }

/* ---------- SVG icon system ---------- */
.ic { display: inline-block; vertical-align: middle; flex: none; }

/* ---------- editorial photo grading (modern monochrome cohesion) ---------- */
.svc-card__media img, .craft__fig img, .card--barber__media img, .expansion__panel img {
  filter: grayscale(1) contrast(1.06) brightness(.94);
  transition: filter .5s var(--ease-out), transform .5s var(--ease-out);
}
.svc-card:hover .svc-card__media img, .card--barber:hover .card--barber__media img {
  filter: grayscale(1) contrast(1.12) brightness(1);
}

/* ---------- reveal motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* staggered cascade: siblings inside a grid reveal 90ms apart */
.svc-grid .svc-card:nth-child(2), .team-grid .card--barber:nth-child(2) { transition-delay: .09s; }
.svc-grid .svc-card:nth-child(3), .team-grid .card--barber:nth-child(3) { transition-delay: .18s; }
.svc-grid .svc-card:nth-child(4), .team-grid .card--barber:nth-child(4) { transition-delay: .27s; }
.svc-grid .svc-card:nth-child(5), .team-grid .card--barber:nth-child(5) { transition-delay: .36s; }
.svc-grid .svc-card:nth-child(6), .team-grid .card--barber:nth-child(6) { transition-delay: .45s; }
/* Hero stack reveals fade-only: sliding offsets made pills collide
   mid-animation on slower devices (client-reported). */
.hero .reveal { transform: none; transition: opacity .9s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity .5s ease; }  /* fade stays: opacity ≠ motion (WCAG 2.3.3) */
  .marquee__track { animation: none; }
  .scroll-cue::after { animation: none; }
  .cue-chev { animation: none; }
  .svc-card, .svc-card__media img, .card--barber { transition: none; }
  .t-card, .t-card__quote { transition: none; }   /* v6.3 additions */
  .menu__link::after { transition: none; }         /* underline appears instantly, no width animation */
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  /* hard mobile width lock: any runaway element clips inside its section
     instead of side-scrolling the page */
  body { max-width: 100vw; }
  main, .section, footer, .final-cta { max-width: 100%; overflow-x: clip; }
  .nav {
    gap: 1rem;
    justify-content: space-between;
  }
  .brand { margin-right: auto; position: relative; z-index: 200; }  /* far above drawer (z90): stays visible/clickable when menu open */

  /* --- mobile nav drawer: true full-screen overlay ---
     position:fixed + inset:0 + dvh covers every phone viewport incl.
     iOS Safari URL-bar states; overflow-y:auto guarantees all items
     stay reachable on short/landscape screens. */
  .menu {
    position: fixed;
    inset: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.1rem;
    padding: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 1.6rem) 8vw calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
    background: var(--band-1);
    overflow-y: auto;                 /* safety valve: if a future tier misses, scroll instead of underlap */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .5s var(--ease-out), visibility 0s .5s;
    z-index: 90;                      /* UNDER the fixed header: brand + morphing burger stay on top */
  }
  .menu.is-open { transform: none; visibility: visible; transition-delay: 0s; }

  /* drawer head: monogram only, centered — the header's own burger
     (visible above the drawer) morphs into the X. No duplicate close. */
  #primary-menu .menu__head {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(var(--header-h) + 1.2rem);
  }
  #primary-menu .menu__close { display: none; }
  .menu__logo {
    display: block;
    height: 48px; width: auto;
    object-fit: contain;
  }
  .menu__close {
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--white);
    margin-right: -.7em;
    border: 1px solid var(--hair);
    border-radius: 999px;
  }
  /* drawer link style — reference pattern: centered 30px display links
     with tiny gray index numbers, generous rhythm */
  .menu__link {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 6vw, 1.9rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-1);
    display: flex; align-items: baseline; justify-content: center;
    gap: 12px;
    width: 100%;
    /* a11y (t_0366272e / DEFECT-4): 44px minimum touch target —
       min-height floor + padding ensures >=44px at every clamp size */
    min-height: 44px;
    padding-block: .6rem;
    transition: color .3s;
  }
  .menu__link .menu__num {
    font-family: var(--font-body);
    font-size: 11px; font-weight: 700;
    letter-spacing: .2em;
    color: var(--gray-2);
  }
  .menu__link.is-active { color: var(--white); }
  .menu__link:active { color: var(--white); }
  @media (hover: hover) {
    .menu__link:hover { color: var(--white); padding-left: .5rem; }
  }

  /* replica-style pill pair inside the drawer */
  #primary-menu .menu__nav-cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
    padding-top: .9rem;
  }
  #primary-menu > .menu__home { display: flex; }
  #primary-menu .menu__link .menu__num { display: inline-block; }

  #primary-menu .menu__foot {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem;
    padding-top: .9rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }
  #primary-menu .menu__tel { font-size: 1.25rem; }
  .menu__addr, .menu__meta, .menu__social { font-size: .68rem; }
  #primary-menu .menu__foot { gap: .35rem; padding-top: .7rem; }
  #primary-menu .menu__foot .btn--solid { display: none; }  /* pill pair above already carries Book */
  .menu__foot .btn { min-width: min(320px, 100%); }
  /* a11y (DEFECT-4 re-check 2026-08-30, t_badb27e4): drawer CTAs and the
     phone link must also clear the 44px touch-target floor */
  #primary-menu .menu__nav-cta .btn { min-height: 44px; }
  #primary-menu .menu__tel { display: inline-flex; align-items: center; min-height: 44px; }
  .menu__tel {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: .06em;
    color: var(--white);
  }
  .menu__addr { font-size: .95rem; color: var(--gray-1); }
  .menu__meta {
    font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gray-2);
  }
  .menu__social {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .82rem; letter-spacing: .06em;
    color: var(--gray-1);
    /* a11y (t_0366272e / DEFECT-4): >=44px touch target */
    min-height: 44px;
    padding: .6rem 0;
  }
  .menu__social:hover { color: var(--white); }

  /* --- burger toggle: the ONLY control shown when closed; it hides
     entirely (visibility) while the drawer is open so exactly ONE
     close control (menu__close) is ever visible/focusable. --- */
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 52px; height: 52px;
    flex-shrink: 0;   /* t_0366272e: header row was squashing burger to 38px @320vw */
    margin-left: auto;
    align-items: center;
    z-index: 210;
    transition: visibility 0s 0s;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .nav-toggle__bar {
    display: block; width: 26px; height: 2px;
    background: var(--white);
  }
  /* A11y fix (DEFECT-3, 2026-08-30): JS toggles aria-label
     "Close menu"/"Open menu" on the burger itself — make sure nothing
     (inner visually-hidden span) outranks it, and that the label swap
     never exposes an unfocusable/hidden button when drawer is open. */
  .nav-toggle[aria-expanded="true"] { visibility: visible; }
  .nav-toggle[aria-expanded="true"] .visually-hidden { display: none; }

  /* --- hero mobile (reference pattern: full-viewport centered stack,
     compact primary pill + stacked outline pill, scroll cue w/ chevron) --- */
  .hero { min-height: 100svh; }
  .hero__inner {
    min-height: 100svh;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center;
    padding-block: calc(var(--header-h) + 2rem) 5.5rem;
  }
  .hero__wordmark { width: min(440px, 88vw); }
  .hero__actions { flex-direction: column; align-items: center; gap: .8rem; width: 100%; }
  .hero__actions .btn--solid { width: auto; min-width: 180px; padding-inline: 2.2em; }
.hero__actions .btn--ghost { width: min(294px, 100%); }
  .hero__social {
    margin-top: .35rem;
    width: min(294px, 100%);
    font-size: .78rem;
  }
/* cue pinned to hero bottom on mobile too (reference pattern);
     hero bottom padding (6.2rem) reserves its lane so it never
     collides with the pill stack */
  .scroll-cue { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); padding-bottom: 0; }
  .hero__inner { padding-block: calc(var(--header-h) + 2rem) 6.2rem; }
  .scroll-cue::after { display: none; }
  .scroll-cue .cue-chev { animation: chev-bob 2.2s ease-in-out infinite; }
  @keyframes chev-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  /* --- grids stack --- */
  .svc-grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .craft__grid { grid-template-columns: 1fr; }
  .craft__fig img { aspect-ratio: 16 / 10; }
  .craft__badge { right: auto; left: 1.2rem; bottom: auto; top: -1.2rem; }
  .expansion__grid { grid-template-columns: 1fr; }
  /* long-label pills (Follow the build-out @handle) must wrap on mobile —
     nowrap set their min-content ~549px and side-scrolled the whole page */
  .expansion__copy, .expansion__panel { min-width: 0; }
  .expansion__panel .btn, .btn--ghost-light { white-space: normal; }

  /* --- service ledger rows stack --- */
  .service-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num name price"
      "num desc desc"
      "meta meta book";
    row-gap: .45rem;
    column-gap: 1rem;
  }
  .service-num { grid-area: num; align-self: start; }
  .service-name { grid-area: name; }
  .price { grid-area: price; justify-self: end; }
  .service-desc { grid-area: desc; }
  .service-meta { grid-area: meta; }
  .service-tag { grid-area: name; justify-self: end; align-self: center; }
  .service-row--feature .service-tag { grid-area: meta; justify-self: start; margin-top: 0; order: 3; }
  .service-book { grid-area: book; justify-self: end; align-self: end; }
  .service-row--feature { margin-inline: -.6rem; padding-inline: .6rem; }

  /* --- visit band stacks: info then map --- */
  .visit-band { grid-template-columns: 1fr; }
  .visit-band__map { min-height: 300px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .final-cta .hero__actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .container { width: 90vw; }
  .brand-text { font-size: .9rem; letter-spacing: .1em; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .signup__row .btn { width: 100%; }
  .svc-card__body { padding: 1.2rem 1.1rem 1.3rem; }
  .t-card { padding: 1.9rem 1.4rem 1.6rem; }
}


/* ---------- short-viewport mode (real phones: Safari chrome eats 120-170px) ----------
   Prevents (a) drawer list sliding under the fixed header when the stack exceeds
   the usable height, (b) hero CTAs landing beneath the floating URL bar. */
@media (max-height: 810px) {
  .menu__link { font-size: clamp(1.15rem, 4.6vw, 1.45rem) !important; padding-block: .45rem !important; min-height: 44px !important; }
  #primary-menu .menu__head { min-height: 0 !important; margin-block: -2.2rem 0 !important; }
  #primary-menu .menu__logo { height: 34px !important; }
  #primary-menu .menu__nav-cta { padding-top: .5rem !important; gap: .45rem !important; }
  #primary-menu .menu__nav-cta .btn { min-height: 44px !important; font-size: .72rem !important; }
  #primary-menu .menu__tel { font-size: 1.15rem !important; }
  .menu { gap: .7rem !important; }
  .menu__addr, .menu__meta, .menu__social { font-size: .72rem !important; }

  .hero__wordmark { width: min(400px, 78vw) !important; }
  .hero__title { margin-block: .1rem !important; }
  .hero__lede { margin-top: .9rem !important; margin-bottom: 1.1rem !important; line-height: 1.5 !important; }
  .hero__actions { gap: .55rem !important; }
  .hero__actions .btn, .hero__social { min-height: 42px !important; font-size: .76rem !important; }
  .hero__lede { display: none !important; }
  .scroll-cue { display: none !important; }
  .hero__social { margin-top: .15rem !important; }
}


/* ---------- emergency tier: critically short viewports (<=580px usable) ----------
   Small phones w/ heavy browser chrome. Trim decorative/nice-to-have elements so
   the drawer clears the header and every hero CTA stays above the URL bar. */
@media (max-height: 580px) {
  .menu { gap: .5rem !important; padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 1.1rem) !important; }
  .menu__link { font-size: 1.05rem !important; padding-block: .4rem !important; min-height: 44px !important; }
  #primary-menu .menu__logo { height: 26px !important; }
  #primary-menu .menu__head { margin-block: -2.6rem 0 !important; }
  #primary-menu .menu__nav-cta { padding-top: .3rem !important; }
  #primary-menu .menu__nav-cta .btn { min-height: 36px !important; }
  #primary-menu .menu__foot { padding-top: .5rem !important; gap: .3rem !important; }
  .menu__addr, .menu__meta { display: none !important; }

  .hero__wordmark { width: min(300px, 64vw) !important; }
  .hero__eyebrow { font-size: 1.15rem !important; margin-bottom: .2rem !important; }
  .hero__lede { display: none !important; }
  .hero__actions, .hero__social { min-height: 40px !important; }
  .scroll-cue { display: none !important; }
}