/* =============================================================================
   J'BEZ — COMPONENTS
   Header, buttons, cards, service menu, reveal slider, gallery, reviews,
   FAQ, footer, cookie notice.

   THE BUTTON RULE, from the brand book section 07:
   Book Now is always visible and always the only filled button on screen.
   `.btn--book` is the only filled style in this file. Every other action is
   an outline or a text link. Adding a second filled style would break the
   signal, and the build lint fails if one appears.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;              /* comfortable tap target on mobile */
  padding: var(--space-xs) var(--space-l);
  font-family: var(--font-text);
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* The only filled button on the site. Deep Blue, because Deep Blue means
   something a client can act on. */
.btn--book {
  background: var(--action);
  color: var(--action-text);
  border-color: var(--action);
}
.btn--book:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-text);
}
/* On a Jet Black ground the button keeps its Deep Blue fill, so Deep Blue
   still means action everywhere on the site, and gains an Off White hairline
   so the edge of the control is visible against the black. The Off White label
   sits at roughly 11 to 1 against the Deep Blue, and the hairline clears the
   3 to 1 that a control boundary needs. */
.on-dark .btn--book {
  background: var(--action);
  color: var(--action-text);
  border-color: var(--action-edge-inverse);
}
.on-dark .btn--book:hover {
  background: var(--action-hover);
  border-color: var(--off-white);
  color: var(--action-text);
}

/* Booking is not configured yet. Honest state, not a dead link. */
.btn--book[aria-disabled='true'] {
  background: transparent;
  color: var(--text-faint);
  border-color: var(--rule-hairline);
  cursor: not-allowed;
  pointer-events: none;
}
.on-dark .btn--book[aria-disabled='true'] {
  color: var(--text-inverse-muted);
  border-color: var(--rule-inverse);
}

/* Every secondary action. Outline only, never filled. */
.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-hairline);
}
.btn--outline:hover {
  border-color: var(--jet-black);
  color: var(--text);
}
.on-dark .btn--outline {
  color: var(--text-inverse);
  border-color: var(--rule-inverse);
}
.on-dark .btn--outline:hover { border-color: var(--heritage-cream); }

.btn--sm { min-height: 2.5rem; padding: var(--space-2xs) var(--space-m); }
.btn--block { display: flex; width: 100%; }

/* A text link that behaves as a call to action. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-action svg { transition: transform var(--dur-base) var(--ease); }
.link-action:hover svg { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   HEADER
   Five primary items maximum. Book Now always visible.
   ----------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--off-white) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease);
}
.site-header[data-scrolled='true'] { border-bottom-color: var(--rule-hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* Logo. Brand book section 05.

   MINIMUM SIZE. A full lockup is never shown below 150px wide on screen. The
   horizontal lockup is 1229 by 406, so 150px wide means 50px tall. Below that
   size the book says to switch to the icon rather than shrink the lockup, so
   that is exactly what the header does on small screens.

   CLEAR SPACE. At least half the icon height on all four sides, with no type,
   image, or page edge inside it. That is real reserved padding here, not a
   visual approximation, so the flex gap can never pull the nav into the zone.

   The marks themselves are the supplied master files, used as given. Never
   recoloured, stretched, rotated, or given effects. */
.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: calc(var(--logo-h) * 0.5);
  margin-left: calc(var(--logo-h) * -0.5);   /* only the page gutter absorbs it */
  text-decoration: none;
}
.site-logo img { width: auto; height: var(--logo-h); }

/* Small screens: the icon at 42px tall, which is 43px wide, above the 40px
   screen minimum the book sets for the icon. */
.site-logo { --logo-h: 42px; }
.site-logo__lockup { display: none; }
.site-logo__icon   { display: block; }

/* From the point the header has room for it, the horizontal lockup at 50px
   tall, which is 151px wide. */
@media (min-width: 62em) {
  .site-logo { --logo-h: 50px; }
  .site-logo__lockup { display: block; }
  .site-logo__icon   { display: none; }
}

.site-nav { display: none; }
@media (min-width: 62em) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-m), 2.2vw, var(--space-xl));
  }
}
.site-nav a {
  font-size: var(--step-small);
  color: var(--text);
  text-decoration: none;
  padding-block: var(--space-2xs);
  position: relative;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--jet-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); }
.site-nav a[aria-current='page'] { color: var(--text); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

/* Social icons in the header. Hidden on small screens where space is tight. */
.social-inline { display: none; }
@media (min-width: 75em) {
  .social-inline { display: flex; align-items: center; gap: var(--space-s); }
}
.social-inline a { color: var(--text-muted); display: inline-flex; }
.social-inline a:hover { color: var(--text); }
.social-inline svg { width: 18px; height: 18px; }

/* Mobile menu toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  margin-right: calc(var(--space-2xs) * -1);
  color: var(--text);
}
@media (min-width: 62em) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--gutter) var(--space-2xl);
  background: var(--surface);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}
.mobile-nav[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 62em) { .mobile-nav { display: none; } }

.mobile-nav a.mobile-nav__item {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: var(--weight-light);
  color: var(--text);
  text-decoration: none;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule-hairline);
}
.mobile-nav__foot { margin-top: auto; padding-top: var(--space-xl); }

/* -----------------------------------------------------------------------------
   HERO
   ----------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(86svh, 44rem);
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: hidden;
}
.hero--home { min-height: min(92svh, 50rem); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
}
/* A scrim strong enough to hold full legibility over photography.
   Brand book section 05 requires it wherever the mark or type sits on an image. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.86) 0%,
    rgba(13, 13, 13, 0.62) 38%,
    rgba(13, 13, 13, 0.28) 70%,
    rgba(13, 13, 13, 0.18) 100%
  );
}
.hero__inner { position: relative; z-index: 1; }
.hero__title { max-width: 18ch; }
.hero__lede { max-width: 46ch; margin-top: var(--space-m); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

/* -----------------------------------------------------------------------------
   SECTION HEADINGS
   ----------------------------------------------------------------------------- */

.section-head { max-width: var(--measure); }
.section-head .label { margin-bottom: var(--space-s); }
.section-head p { margin-top: var(--space-m); }
.section-head--center { margin-inline: auto; text-align: center; }

/* -----------------------------------------------------------------------------
   VALUES. Growth, Trust, Community.
   ----------------------------------------------------------------------------- */

.values {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
@media (min-width: 48em) {
  .values { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
}
.value {
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule-inverse);
}
.value__num {
  font-family: var(--font-display);
  font-size: var(--step-small);
  /* Warm Sand as type is fine here. The ban is on Warm Sand type over a light
     ground, and this sits on Jet Black. */
  color: var(--accent-warm);
  letter-spacing: var(--tracking-label);
}
.value h3 { margin-top: var(--space-xs); }
.value p { margin-top: var(--space-xs); }

/* -----------------------------------------------------------------------------
   LOCATION CARDS
   ----------------------------------------------------------------------------- */

.location-grid {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
}
@media (min-width: 52em) {
  .location-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
}

.location-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.location-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-m);
}
.location-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
/* The Riverside chairs photograph is vertical: on phones its card window
   turns portrait and receives the portrait rendition, so the whole room
   shows instead of a landscape sliver out of its middle. */
@media (max-width: 48em) {
  .location-card__media--tall { aspect-ratio: 3 / 4; }
}
.location-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.location-card:hover .location-card__media img { transform: scale(1.03); }
.location-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-l);
  gap: var(--space-xs);
}
.location-card__body .btn { margin-top: var(--space-m); align-self: flex-start; }
.location-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-m);
  margin-top: var(--space-s);
  font-size: var(--step-small);
  color: var(--text-muted);
}
.location-card dt { color: var(--text-faint); }

/* -----------------------------------------------------------------------------
   SERVICE MENU
   Service names uppercase and tracked, aligned in a column, separated by thin
   rules. No prices and no durations anywhere. Brand book section 07.
   ----------------------------------------------------------------------------- */

.service-group + .service-group { margin-top: var(--space-2xl); }
.service-group__name {
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--mood-rule);
}

.service-list { list-style: none; margin-top: 0; }
.service-item {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule-hairline);
}
@media (min-width: 48em) {
  .service-item {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: var(--space-l);
    align-items: baseline;
  }
}
.service-item__name {
  font-family: var(--font-text);
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
}
.service-item__desc { color: var(--text-muted); max-width: var(--measure); }

.service-note {
  margin-top: var(--space-l);
  color: var(--text-muted);
  font-size: var(--step-small);
  max-width: var(--measure);
}
.service-note strong { font-weight: var(--weight-medium); color: var(--text); }

/* -----------------------------------------------------------------------------
   BARBER CARDS
   ----------------------------------------------------------------------------- */

.barber-grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 36em) { .barber-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .barber-grid { grid-template-columns: repeat(4, 1fr); } }

/* SOTA style card, per the owner's reference: a dark card with the clean
   portrait on top, then name, role, the approved specialty rows, and a
   Book with Name arrow link. */
.barber-card {
  display: flex;
  flex-direction: column;
  background: var(--jet-black);
  color: var(--off-white);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

/* Finder states: the chosen chip dims the rest and rings the matches. */
.barber-card.dim { opacity: 0.28; transform: scale(0.985); }
.barber-card.hit {
  box-shadow: 0 0 0 2px var(--deep-blue), 0 14px 34px rgba(28, 53, 85, 0.16);
}
.barber-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-soft);
}
.barber-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  transition: transform var(--dur-slow) var(--ease-out);
}
.barber-card:hover .barber-card__media img { transform: scale(1.03); }
.barber-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.5rem;
  line-height: 1.1;
}
.barber-card__name a { color: var(--off-white); text-decoration: none; }
.barber-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.barber-card__role {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.6);
  margin-top: 0.3rem;
}
.barber-card__note { font-size: var(--step-small); color: rgba(247, 244, 238, 0.6); }
.barber-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3xs);
  padding: var(--space-m);
}

/* Specialty rows, per the owner's approved finder concept: ruled rows that
   light up in deep blue when they answer the chosen chip. */
.barber-card__tags {
  list-style: none;
  margin-top: var(--space-s);
  padding: 0;
  border-top: 1px solid rgba(247, 244, 238, 0.16);
}
.barber-card__tag {
  display: block;
  padding: 0.5rem 2px;
  border-bottom: 1px solid rgba(247, 244, 238, 0.14);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: rgba(247, 244, 238, 0.72);
  transition: all 0.18s var(--ease);
}
.barber-card__tag.lit {
  color: var(--off-white);
  background: var(--deep-blue);
  border-color: var(--deep-blue);
  padding-inline: 0.6rem;
  font-weight: 600;
}
.barber-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-m);
}
/* The Book with Name arrow link, like the reference cards. */
.barber-card__book {
  align-self: flex-start;
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--off-white);
  text-decoration: none;
}
.barber-card__book::after { content: " \2192"; }
.barber-card__book:hover { color: var(--warm-sand); text-decoration: underline; text-underline-offset: 3px; }

/* The finder: chip row above the grid on the barbers page. */
.finder { margin-top: var(--space-xl); }
.finder__label { text-align: center; color: var(--deep-blue); }
.finder__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: var(--space-s);
}
.finder__chip {
  border: 1px solid rgba(13, 13, 13, 0.25);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text);
  transition: all 0.18s var(--ease);
}
.finder__chip:hover { border-color: var(--deep-blue); }
.finder__chip.on {
  background: var(--deep-blue);
  border-color: var(--deep-blue);
  color: var(--off-white);
}
.finder__note {
  text-align: center;
  margin-top: var(--space-l);
  font-size: var(--step-small);
  color: var(--text-muted);
  min-height: 1.5em;
}
.finder__note b { color: var(--deep-blue); font-weight: 600; }

.specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  list-style: none;
  margin-top: var(--space-2xs);
}
.specialties li {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 3px var(--space-2xs);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-xs);
}

/* Barber profile */
.barber-profile { display: grid; gap: var(--space-xl); }
@media (min-width: 56em) {
  .barber-profile { grid-template-columns: 0.85fr 1fr; gap: var(--space-3xl); align-items: start; }
}
.barber-profile__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-soft);
}
.barber-profile__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--mood-grade); }

/* -----------------------------------------------------------------------------
   BEFORE AND AFTER, DRAG TO REVEAL
   Pointer and keyboard driven. Real slider semantics for assistive tech.
   ----------------------------------------------------------------------------- */

.reveal {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 40rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-soft);
  touch-action: pan-y;              /* vertical scroll still works on mobile */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
@media (min-width: 48em) { .reveal { max-width: 30rem; } }

.reveal__layer { position: absolute; inset: 0; }
.reveal__layer picture { display: contents; }
.reveal__layer img { width: 100%; height: 100%; object-fit: cover; filter: var(--mood-grade); }
/* The after image is clipped from the left edge to the handle position. */
.reveal__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.reveal__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--off-white);
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.18);
}
.reveal__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--off-white);
  color: var(--jet-black);
  box-shadow: var(--shadow-m);
}
.reveal__grip svg { width: 18px; height: 18px; }

.reveal__tag {
  position: absolute;
  bottom: var(--space-s);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--off-white);
  background: rgba(13, 13, 13, 0.62);
  padding: 4px var(--space-2xs);
  border-radius: var(--radius-xs);
  pointer-events: none;
}
.reveal__tag--before { left: var(--space-s); }
.reveal__tag--after  { right: var(--space-s); }

.reveal:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* -----------------------------------------------------------------------------
   GALLERY, PARALLAX ON HOVER
   Transform driven, one animation frame loop, switched off on touch and under
   reduced motion.
   ----------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48em) {
  .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
}

/* Every tile is the same shape. Eight tiles fill four columns exactly, so
   the grid never leaves a hole and no two tiles differ in height. */
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-soft);
  aspect-ratio: 3 / 4;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  /* Slight overscale so the parallax translate never exposes an edge. */
  transform: scale(1.04) translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
@media (hover: none) {
  .gallery__item img { transform: none; }
}
.gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-m) var(--space-s) var(--space-s);
  background: linear-gradient(to top, rgba(13,13,13,0.72), rgba(13,13,13,0));
  color: var(--off-white);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-within .gallery__caption { opacity: 1; }

/* -----------------------------------------------------------------------------
   REVIEWS
   ----------------------------------------------------------------------------- */

.reviews { margin-top: var(--space-2xl); }

/* Reviews ride in a swipeable strip (owner ask 2026-09-24) so the section
   stays one card tall on a phone instead of stacking every review. */
.reviews-grid {
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2xs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-grid::-webkit-scrollbar { display: none; }
.reviews-grid > .review {
  flex: none;
  width: min(86%, 20rem);
  scroll-snap-align: start;
}
.reviews-hint {
  margin-top: var(--space-xs);
  font-size: 0.69rem;
  color: var(--text-faint);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.reviews-hint::before { content: "← "; }
.reviews-hint::after { content: " →"; }
@media (min-width: 64em) { .reviews-hint { display: none; } }

/* The aggregate line above the cards: big score, stars, and the source link. */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}
.reviews-summary__score {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  line-height: 1;
}
.reviews-summary__detail { display: grid; gap: var(--space-3xs, 0.25rem); }
.reviews-summary__count { font-size: var(--step-small); color: var(--text-muted); }
.reviews-summary__count a { color: inherit; }

/* Reviewer row at the base of each card. */
.review__meta {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
}
.review__who { display: flex; align-items: center; gap: var(--space-2xs); }
.review__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.review__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--deep-blue);
  color: var(--heritage-cream);
  font-weight: var(--weight-medium);
}
.review__maps {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--deep-blue);
  text-align: right;
  max-width: 8.5rem;
}
.review__maps:hover { text-decoration: underline; }
.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  /* Heritage Cream, used as a contained surface rather than a full bleed
     band, which is how the soft neutral stays in the palette without ever
     sitting against Off White as a competing field. */
  background: var(--surface-soft);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-s);
}
.review__stars { display: flex; gap: 2px; color: var(--accent-warm); }
.review__stars svg { width: 14px; height: 14px; }
.review__text { color: var(--text-muted); }
.review__author {
  font-size: var(--step-small);
  line-height: 1.35;
  color: var(--text-muted);
}
/* Sample entries are visibly marked so they never read as real reviews. */
.review--sample { border-style: dashed; }
.review__sample-tag {
  align-self: flex-start;
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-xs);
  padding: 2px var(--space-2xs);
}
.reviews-empty { margin-top: var(--space-l); color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   FAQ. Native details so it works with JavaScript off.
   ----------------------------------------------------------------------------- */

.faq { margin-top: var(--space-2xl); max-width: var(--measure); }
.faq__item { border-bottom: 1px solid var(--rule-hairline); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: var(--weight-normal);
  line-height: var(--leading-heading);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  position: relative;
  margin-top: 0.4em;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--action);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1px; margin-top: -0.5px; }
.faq__icon::after  { left: 50%; top: 0; height: 100%; width: 1px; margin-left: -0.5px; }
.faq__item[open] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { padding-bottom: var(--space-l); color: var(--text-muted); max-width: var(--measure); }

/* -----------------------------------------------------------------------------
   BOOKING BAND
   ----------------------------------------------------------------------------- */

.book-band { text-align: center; }
/* Proportions from the approved band mock: a larger BOOK label, a slightly
   smaller display line, and both actions as cream outline buttons. */
.book-band .label { font-size: 1.0625rem; }
.book-band .display {
  /* Sized to the approved mock: the line breaks after "appointment" into two
     lines, a step smaller than the page display size, tracked a touch tighter
     so the extrawide face does not read as letterspaced. */
  max-width: 21ch;
  margin-inline: auto;
  font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.5rem);
  letter-spacing: -0.03em;
}
.book-band .btn--outline { border-color: rgba(241, 231, 214, 0.5); }
.book-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

/* Location chooser, shown when Book Now is pressed on a shared page. */
.chooser {
  border: none;
  padding: 0;
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  background: var(--surface);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-l);
  color: var(--text);
}
.chooser::backdrop { background: rgba(13, 13, 13, 0.5); }
.chooser__inner { padding: var(--space-xl); }
.chooser__options { display: grid; gap: var(--space-s); margin-top: var(--space-l); }
.chooser__close {
  position: absolute;
  top: var(--space-s); right: var(--space-s);
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  color: var(--text-muted);
}
.chooser__close:hover { color: var(--text); }

/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */

/* Dark ledger footer (owner's F1 pick): jet black, four aired out columns,
   dotted leader hour rows, and a slim bottom bar with the Book pill. */
.site-footer {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.site-footer__top {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--section-y-tight);
}
@media (min-width: 56em) {
  .site-footer__top {
    grid-template-columns: 1.2fr 0.7fr 1fr 1fr;
    gap: var(--space-2xl) var(--space-xl);
  }
}
/* Stacked lockup at 100px tall, which is 150px wide, the screen minimum. */
.site-footer__brand img { height: 100px; width: auto; }
.site-footer__tagline {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: var(--weight-regular, 400);
  color: var(--text-inverse);
  max-width: 14ch;
}
.site-footer__ig { margin-top: var(--space-l); }
.site-footer h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--weight-medium);
}
.site-footer__shop { color: inherit; text-decoration: none; }
.site-footer__shop:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer address { font-style: normal; color: var(--text-inverse-muted); margin-top: var(--space-s); }
/* The address itself is the directions link. */
.site-footer__addr { display: inline-block; color: inherit; text-decoration: none; }
.site-footer__addr:hover { color: var(--off-white); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__hours {
  list-style: none;
  margin-top: var(--space-m);
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-inverse-muted);
  max-width: 21rem;
}
.site-footer__hours li { display: flex; align-items: baseline; gap: 0.5rem; }
.site-footer__hd {
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__dots {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted currentColor;
  opacity: 0.4;
  transform: translateY(-0.25em);
}
.site-footer__ht { white-space: nowrap; font-variant-numeric: tabular-nums; }
.site-footer__links { list-style: none; margin-top: var(--space-s); display: grid; gap: var(--space-2xs); }
.site-footer__links a { font-size: var(--step-small); text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-top: 1px solid var(--rule-inverse, rgba(247, 244, 238, 0.16));
  font-size: var(--step-small);
  color: var(--text-inverse-muted);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-footer__book { border-radius: var(--radius-pill); }

.social-row { display: flex; gap: var(--space-s); margin-top: var(--space-m); }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-s);
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.social-row a:hover { border-color: var(--jet-black); background: var(--surface-soft); }
.social-row svg { width: 18px; height: 18px; }

/* -----------------------------------------------------------------------------
   COOKIE NOTICE
   ----------------------------------------------------------------------------- */

.cookie-notice {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-notice);
  max-width: 34rem;
  padding: var(--space-l);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-l);
  font-size: var(--step-small);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-m); }

/* -----------------------------------------------------------------------------
   REVEAL ON SCROLL. Restrained. A short fade and a small rise, once.
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  [data-animate].is-visible { opacity: 1; transform: none; }
}


/* -----------------------------------------------------------------------------
   BLOG CARDS, home page. A hairline rule tops each column, then the date as a
   small label, the title, and a clamped excerpt. One Visit the blog action for
   the whole section rather than a link per card.
   ----------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  margin-top: var(--space-xl);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.blog-card {
  border-top: 1px solid var(--rule-hairline);
  padding-top: var(--space-m);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
.blog-card h3 { font-size: var(--step-h3); }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.blog-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   BARBER PROFILE, the owner's approved concept. A centered mobile-first
   column: identity hero, swipeable work gallery, shop switcher, stats,
   chips, menu accordion, review spotlight, and a sticky Book bar.
   ----------------------------------------------------------------------------- */
.profile { padding-block: var(--space-xl) 7.5rem; }
.profile__wrap { max-width: 30rem; margin-inline: auto; padding-inline: var(--space-m); }

.profile__eyebrow {
  font-size: var(--step-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rich-walnut);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.profile__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(75, 46, 34, 0.4), transparent);
}
.profile__idrow { display: flex; align-items: flex-end; gap: var(--space-m); margin-top: var(--space-m); }
.profile__avatar {
  width: 5.375rem;
  height: 5.375rem;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 30% 25%, #2C4A73, var(--deep-blue) 70%);
  border: 2px solid var(--warm-sand);
  display: grid;
  place-items: center;
  color: var(--heritage-cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
}
.profile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 10vw, 3.1rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.profile__name span { display: block; }
/* Owner request 2026-10-22: the last name stays plain white, no gold. */
.profile__name-last { color: inherit; }
.profile__role { margin-top: var(--space-xs); font-size: var(--step-small); color: var(--text-muted); }

/* Gallery */
.profile__gallery-sec { margin-top: var(--space-l); }
.profile__gallery-sec--low { margin-top: var(--space-2xl); }
.profile__gallery-sec--low .profile__h2 { margin-bottom: var(--space-s); }
.profile__gallery {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--space-m) var(--space-2xs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.profile__gallery::-webkit-scrollbar { display: none; }
@media (min-width: 32.25em) {
  .profile__gallery { padding-inline: calc((100vw - 30rem) / 2 + var(--space-m)); }
}
.profile__shot {
  flex: none;
  width: 64%;
  max-width: 18rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m, 18px);
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-hairline);
}
.profile__shot--mono { background: radial-gradient(circle at 32% 28%, #2C4A73, var(--deep-blue) 72%); display: grid; place-items: center; }
.profile__shot-mono { color: var(--heritage-cream); font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; }
.profile__shot--p1 { background: linear-gradient(160deg, #2E2E2E, var(--jet-black)); }
.profile__shot--p2 { background: linear-gradient(160deg, var(--rich-walnut), #33200F); }
.profile__shot--p3 { background: linear-gradient(160deg, var(--warm-sand), #8A6C48); }
.profile__shot-label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.92);
  background: rgba(13, 13, 13, 0.45);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.profile__hint {
  text-align: center;
  font-size: 0.69rem;
  color: var(--text-faint);
  margin-top: var(--space-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.profile__hint::before { content: "← "; }
.profile__hint::after { content: " →"; }

/* Shop switcher */
.profile__loc { margin-top: var(--space-l); }
.profile__loc-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--rule-hairline);
}
.profile__loc-btn {
  padding: 0.6rem 0.4rem;
  border-radius: 9px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-medium);
  font-size: var(--step-small);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  color: var(--text-muted);
  white-space: nowrap;
}
.profile__loc-btn.on { background: var(--deep-blue); color: var(--off-white); }
.profile__loc-note { margin-top: var(--space-2xs); font-size: 0.72rem; text-align: center; color: var(--text-faint); }

/* Stats and chips */
.profile__stats { display: grid; gap: var(--space-2xs); margin-top: var(--space-m); }
.profile__stat {
  background: #fff;
  border: 1px solid var(--rule-hairline);
  border-radius: 14px;
  padding: 0.8rem 0.6rem;
  text-align: center;
}
.profile__stat-v { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.profile__stat-l { font-size: 0.63rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--rich-walnut); margin-top: 0.2rem; }
.profile__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-s); }
.profile__chip {
  font-size: 0.76rem;
  font-weight: var(--weight-medium);
  color: var(--rich-walnut);
  background: #fff;
  border: 1px solid rgba(200, 168, 118, 0.55);
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
}

/* Sections */
.profile__sec { margin-top: var(--space-2xl); }
.profile__h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.profile__h2::after { content: ""; flex: 1; height: 1px; background: var(--rule-hairline); align-self: center; }
.profile__h2-tag {
  font-family: var(--font-text);
  font-weight: var(--weight-normal);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
  color: var(--text-faint);
}
.profile__bio { margin-top: var(--space-s); color: var(--text-muted); }
.profile__about-rows { margin-top: var(--space-m); display: grid; gap: var(--space-s); }
.profile__about-rows dt {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rich-walnut);
}
.profile__about-rows dd { margin: 0.2rem 0 0; font-size: var(--step-small); color: var(--text-muted); }

/* Menu accordion */
.profile__menu { margin-top: var(--space-s); display: flex; flex-direction: column; gap: var(--space-2xs); }
.profile__item {
  background: #fff;
  border: 1px solid var(--rule-hairline);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.profile__item.open { border-color: var(--warm-sand); }
.profile__item.na { opacity: 0.45; }
.profile__item-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0.85rem 1rem;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* Service names per the brand type rules: text face, uppercase, tracked,
   with the prices right aligned in their own column. */
.profile__item-nm { flex: 1; font-weight: var(--weight-medium); font-size: 0.8rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.profile__item-nm small { font-weight: var(--weight-normal); color: var(--text-faint); margin-left: 0.4rem; text-transform: none; letter-spacing: 0; font-size: 0.76rem; }
.profile__pop {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heritage-cream);
  background: var(--deep-blue);
  border-radius: 5px;
  padding: 0.13rem 0.4rem;
  vertical-align: 0.14em;
}
.profile__item-pr { font-weight: 700; font-size: 0.94rem; color: var(--rich-walnut); font-variant-numeric: tabular-nums; }
.profile__item-pr .na-tag { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-sand); }
.profile__chev { color: var(--text-faint); transition: transform var(--dur-base) var(--ease); font-size: 0.72rem; }
.profile__item.open .profile__chev { transform: rotate(180deg); }
.profile__item-body { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.profile__item.open .profile__item-body { max-height: 10rem; }
.profile__item-body-in { padding: 0 1rem 0.85rem; border-top: 1px dashed var(--rule-hairline); }
.profile__item-body-in p { padding-top: 0.7rem; font-size: 0.83rem; color: var(--text-muted); }
.profile__dur { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rich-walnut); }
.profile__item-book {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--deep-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.profile__note { margin-top: var(--space-s); font-size: 0.72rem; text-align: center; color: var(--text-faint); }
.pr-anim { transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); display: inline-block; }
.pr-anim.bump { opacity: 0; transform: translateY(-5px); }

/* Review spotlight */
.profile__quote {
  margin-top: var(--space-s);
  background: var(--deep-blue);
  border-radius: 18px;
  padding: 1.3rem 1.25rem 1rem;
  min-height: 10.5rem;
}
.profile__qmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--warm-sand);
  height: 1.9rem;
  display: block;
}
.profile__qslide { transition: opacity 0.4s var(--ease); }
.profile__qslide.fade { opacity: 0; }
.profile__qtext { font-size: 1rem; line-height: 1.55; color: var(--off-white); font-weight: var(--weight-medium); }
.profile__qmeta { margin-top: var(--space-xs); display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: rgba(247, 244, 238, 0.55); }
.profile__qstars { color: var(--heritage-cream); letter-spacing: 2px; font-size: 0.69rem; }
.profile__qdots { display: flex; gap: 0.35rem; justify-content: center; margin-top: var(--space-s); }
.profile__qdots button { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.profile__qdots button i { width: 6px; height: 6px; border-radius: 50%; background: rgba(247, 244, 238, 0.28); transition: all var(--dur-base) var(--ease); }
.profile__qdots button.on i { background: var(--heritage-cream); width: 16px; border-radius: 3px; }
.profile__verified { margin-top: var(--space-xs); text-align: center; font-size: 0.72rem; color: var(--text-faint); }
.profile__verified b { color: var(--rich-walnut); font-weight: 600; }

/* Sticky book bar */
.profile__bookbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 100%;
  max-width: 30rem;
  padding: 0.6rem var(--space-m) 0.8rem;
  background: linear-gradient(to top, rgba(247, 244, 238, 0.96) 55%, rgba(247, 244, 238, 0));
}
.profile__bookbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 14px;
  background: var(--heritage-cream);
  color: var(--jet-black);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  box-shadow: 0 8px 24px rgba(28, 53, 85, 0.22);
  border: 1px solid rgba(28, 53, 85, 0.08);
  transition: transform 0.15s var(--ease);
}
.profile__bookbtn:active { transform: scale(0.98); }
.profile__bookbtn span::before { content: "· "; }
.profile__bookbtn span::after { content: " →"; }

/* Chair days under the shop switcher */
.profile__loc-hours { margin-top: var(--space-xs); font-size: 0.76rem; text-align: center; color: var(--text-muted); }
.profile__loc-hours-label {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rich-walnut);
  font-weight: 600;
}

/* Google rating stat card */
.profile__stat-star { color: var(--warm-sand); font-size: 0.85em; margin-left: 0.2rem; }

/* ---------------------------------------------------------------------------
   Tablet and desktop. The phone layout is a single 30rem column; from 48em
   the column widens and scales, and from 64em the page becomes two columns,
   identity and story on the left, the menu on the right, with the gallery
   and the review spotlight running full width beneath.
   --------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .profile__wrap { max-width: 46rem; }
  .profile__gallery { padding-inline: calc((100vw - 46rem) / 2 + var(--space-m)); }
  .profile__shot { width: 44%; max-width: 20rem; }
  .profile__avatar { width: 6.5rem; height: 6.5rem; font-size: 2.1rem; }
  .profile__name { font-size: clamp(3rem, 6.5vw, 4rem); }
  .profile__stat-v { font-size: 1.45rem; }
}

@media (min-width: 64em) {
  .profile { padding-block: var(--space-2xl) 8.5rem; }
  .profile__wrap { max-width: 68rem; }
  .profile__name { font-size: clamp(3.4rem, 4.5vw, 4.75rem); }
  .profile__cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: start;
    margin-top: var(--space-l);
  }
  .profile__loc { margin-top: 0; }
  .profile__loc-hours, .profile__loc-note { text-align: left; }
  .profile__sec--menu { margin-top: 0; }
  .profile__sec--menu .profile__note { text-align: left; }
  .profile__gallery { padding-inline: calc((100vw - 68rem) / 2 + var(--space-m)); }
  .profile__shot { width: 21rem; max-width: 21rem; }
  .profile__hint { display: none; }
  [data-quote-section] { max-width: 46rem; margin-inline: auto; }
}

/* -----------------------------------------------------------------------------
   HOME HERO, SPLIT (owner approved option H1, 2026-10-01)
   Text on the left on Off White, the team photograph filling the right
   panel, and the count up stats beneath the actions. Media is contained,
   never a full screen takeover.
   ----------------------------------------------------------------------------- */
.hsplit { display: grid; background: var(--off-white); }
.hsplit__txt {
  padding: var(--space-2xl) var(--gutter);
  max-width: 38rem;
}
/* The split hero's headline gets its own scale: the shared display step is
   sized for full width heroes, and Roc Grotesk runs wide, so at half width
   it clips. This stays inside the column at every width. */
.hsplit__title {
  margin-top: var(--space-m);
  font-size: clamp(2.3rem, 1.2rem + 1.9vw, 3.4rem);
  text-wrap: balance;
}
/* On phones the extrawide display face needs more slack: the 2.3rem floor
   measures within pixels of the column, and iOS Safari's balance and
   pretty wrapping can lay lines slightly wider than the column, which
   clipped the headline and lede at the screen edge (owner's report). The
   size scales with the screen and the wrap goes back to plain. */
@media (max-width: 48em) {
  .hsplit__title {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
    text-wrap: wrap;
  }
  .hsplit__txt p { text-wrap: wrap; }
}
.hsplit__lede { margin-top: var(--space-m); }
.hsplit__txt .hero__actions { margin-top: var(--space-l); }
/* On small screens the media sits framed below the text at 4 by 5, so a
   vertical photograph or clip reads vertically instead of being cover
   cropped into a short wide band (owner's mobile report). */
.hsplit__media {
  position: relative;
  margin: var(--space-s) var(--gutter) var(--space-xl);
  aspect-ratio: 4 / 5;
}
.hsplit__media picture { display: contents; }
.hsplit__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  border-radius: var(--radius-s);
}
.hsplit__stats { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-top: var(--space-xl); }
.hsplit__v {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hsplit__star { color: var(--warm-sand); font-size: 0.7em; margin-left: 0.15em; }
.hsplit__l {
  font-size: 0.6rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--rich-walnut);
  margin-top: 0.4rem;
}
@media (min-width: 60em) {
  .hsplit {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
  .hsplit__txt {
    padding: calc(var(--space-3xl) + var(--space-l)) var(--space-2xl) var(--space-3xl)
             max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    max-width: none;
  }
  /* The photo floats in a framed panel instead of bleeding to the screen
     edge, per the SOTA reference where the media never takes the whole
     screen. It keeps the hero's height through the aspect ratio. */
  .hsplit__media {
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
    align-self: stretch;
    display: flex;
    padding: var(--space-xl)
             max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)))
             var(--space-xl) 0;
  }
  .hsplit__media img {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 26rem;
    object-fit: cover;
    border-radius: var(--radius-s);
  }
}

/* -----------------------------------------------------------------------------
   PRICE LEDGER (owner approved option M1): numbered rows on Jet Black with
   the owner's hand set starting prices. Exact prices stay on the profile
   pages and in the booking flow.
   ----------------------------------------------------------------------------- */
.pm { margin-top: var(--space-2xl); }
.pm__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: var(--space-m);
  align-items: baseline;
  padding-block: var(--space-m);
  border-bottom: 1px solid rgba(247, 244, 238, 0.14);
}
.pm__row:last-child { border-bottom: 0; }
.pm__num {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 0.8rem;
  color: rgba(247, 244, 238, 0.45);
}
.pm__nm { font-size: 1rem; font-weight: 600; font-family: var(--font-text); color: var(--text-inverse); }
.pm__ds { margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.55; color: var(--text-inverse-muted); max-width: 34rem; }
.pm__pr {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--warm-sand);
  font-variant-numeric: tabular-nums;
}
.pm__note { margin-top: var(--space-l); font-size: var(--step-small); color: var(--text-inverse-muted); }
@media (max-width: 36em) {
  .pm__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pm__num { display: none; }
}

/* -----------------------------------------------------------------------------
   SECTION HEAD ROW
   A section head with something on its right edge: a link or slider arrows.
   ----------------------------------------------------------------------------- */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   SLIDER ARROWS
   Round prev and next buttons for the sideways strips. Touch screens swipe,
   so the arrows only appear once a pointer is likely.
   ----------------------------------------------------------------------------- */
.slider-nav { display: none; gap: var(--space-2xs); }
@media (min-width: 48em) { .slider-nav { display: flex; } }
.slider-nav__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong, rgba(13, 13, 13, 0.3));
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.slider-nav__btn svg { width: 1.1rem; height: 1.1rem; }
.slider-nav__btn--prev svg { transform: rotate(180deg); }
.slider-nav__btn:hover { background: var(--jet-black); color: var(--off-white); }
.on-dark .slider-nav__btn { border-color: rgba(247, 244, 238, 0.35); color: var(--off-white); }
.on-dark .slider-nav__btn:hover { background: var(--off-white); color: var(--jet-black); }

/* -----------------------------------------------------------------------------
   TEAM SLIDER
   The home page strip of tall portrait cards, one per barber, running
   sideways. The track bleeds to the viewport edge while its first card
   lines up with the container, matching the hero's alignment.
   ----------------------------------------------------------------------------- */
.team-band { overflow: hidden; }
.tslide__track {
  display: flex;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-bottom: var(--space-2xs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tslide__track::-webkit-scrollbar { display: none; }
.tslide__card {
  position: relative;
  flex: none;
  width: min(68vw, 17.5rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-s);
  scroll-snap-align: start;
  background: rgba(247, 244, 238, 0.06);
}
.tslide__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  transition: transform var(--dur-slow) var(--ease-out);
}
.tslide__card:hover img { transform: scale(1.03); }
.tslide__veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.82), rgba(13, 13, 13, 0));
  pointer-events: none;
}
.tslide__who {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.15rem;
  padding: var(--space-m) var(--space-s) var(--space-s);
  color: var(--off-white);
}
.tslide__nm {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.45rem;
  line-height: 1.1;
}
.tslide__rl {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.72);
}
.tslide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-top: var(--space-s);
}
.tslide__foot .reviews-hint { margin-top: 0; }
.team-band .reviews-hint { color: rgba(247, 244, 238, 0.5); }
@media (min-width: 64em) { .tslide__foot { justify-content: flex-end; } }

/* -----------------------------------------------------------------------------
   REVIEW DECK
   The home page testimonials restyled as a compact strip of small dark
   cards that move sideways on every screen size, with the warm sand stars
   on top. Shop pages keep the lighter cards and the aggregate score block.
   ----------------------------------------------------------------------------- */
.reviews--deck { margin-top: var(--space-xl); }
.reviews--deck .reviews-grid > .review { width: min(78%, 17.5rem); }
.reviews--deck .review {
  padding: var(--space-m);
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--off-white);
}
.reviews--deck .review__stars { color: var(--warm-sand); }
.reviews--deck .review__text { color: rgba(247, 244, 238, 0.82); font-size: var(--step-small); }
.reviews--deck .review__author { color: var(--off-white); }
.reviews--deck .review__maps { color: rgba(247, 244, 238, 0.6); }
.reviews--deck .review--sample { background: transparent; color: var(--text); border-color: var(--rule-hairline); }
@media (min-width: 64em) { .reviews--deck + .reviews-hint { display: none; } }
.reviews--deck .review__meta {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}
.reviews--deck .review__author { font-size: var(--step-small); }
.reviews--deck .review__author br { display: none; }
.reviews--deck .review__maps { font-size: 0.69rem; }
.reviews--deck .review__maps { text-align: left; }

/* -----------------------------------------------------------------------------
   SHOP PAGE TEAM STRIP
   The shop page's barbers ride the same sideways track as the home team
   slider, as full cards with their specialty rows and Book buttons.
   ----------------------------------------------------------------------------- */
.team-band--light { overflow: hidden; }
.tslide__track--cards { align-items: stretch; }
.tslide__track--cards .barber-card {
  flex: none;
  width: min(72vw, 17.5rem);
  scroll-snap-align: start;
}
.section-head--row { max-width: none; }
.section-head--row > div:first-child { max-width: var(--measure); }

/* -----------------------------------------------------------------------------
   HERO VIDEO
   The owner's hero clips: the home split panel and the Newport page hero.
   Autoplay is muted, looped, and inline, per the SOTA reference; the poster
   frame shows until the clip is ready or wherever autoplay is refused.
   ----------------------------------------------------------------------------- */
.hsplit__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  border-radius: var(--radius-s);
}
@media (min-width: 60em) {
  .hsplit__vid {
    position: static;
    min-height: 26rem;
    border-radius: var(--radius-s);
  }
}
.hero__vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
}

/* -----------------------------------------------------------------------------
   GALLERY PAGE
   Four work photographs per barber, in ruled rows down the page.
   ----------------------------------------------------------------------------- */
.wgal { margin-top: var(--space-2xl); }
.wgal:first-of-type { margin-top: var(--space-l); }
.wgal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule-hairline);
}
.wgal__name { font-size: 1.9rem; }
.wgal__role { display: block; margin-top: 0.3rem; }
.wgal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
  margin-top: var(--space-m);
}
@media (min-width: 48em) {
  .wgal__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-s); }
}
.wgal__item {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-soft);
}
.wgal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
}

/* -----------------------------------------------------------------------------
   GALLERY DUMP
   The brand wide wall of work on the gallery page: photos and clips mixed
   across the team, each tile quietly linking to its barber.
   ----------------------------------------------------------------------------- */
.dump {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}
@media (min-width: 36em) { .dump { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .dump { grid-template-columns: repeat(4, 1fr); gap: var(--space-s); } }
.dump__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-soft);
}
.dump__item picture { display: contents; }
.dump__item img,
.dump__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  transition: transform var(--dur-slow) var(--ease-out);
}
.dump__item:hover img,
.dump__item:hover video { transform: scale(1.03); }
.dump__tag {
  position: absolute;
  left: 0.65rem;
  bottom: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--off-white);
  text-shadow: 0 1px 8px rgba(13, 13, 13, 0.6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.dump__item:hover .dump__tag,
.dump__item:focus-visible .dump__tag { opacity: 1; }

/* Real media in the profile work strip. */
.profile__shot--media { background: var(--surface-soft); }
.profile__shot--media picture { display: contents; }
.profile__shot--media img,
.profile__shot--media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--mood-grade);
}

/* -----------------------------------------------------------------------------
   CLICKABLE LOCATION CARDS
   The whole card opens the shop page (owner's ask): the See the shop link
   stretches over the card, while the Book button stays its own target.
   ----------------------------------------------------------------------------- */
.location-card { position: relative; }
.location-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.location-card .btn { position: relative; z-index: 2; }
.location-card:hover .location-card__media img { transform: scale(1.03); }
.location-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

/* The review deck drifts sideways on its own (owner's reference), so snap
   points come off and any long text clamps rather than stretching the row. */
.reviews--deck .reviews-grid { scroll-snap-type: none; }
.reviews--deck .review__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog card photographs, chosen per post from the owner's Drive library.
   The window is portrait like the sources, so the photograph shows nearly
   whole instead of a zoomed landscape strip out of its middle. */
.blog-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-s);
  margin-bottom: var(--space-s);
  background: var(--surface-soft);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mood-grade);
  transition: transform var(--dur-slow) var(--ease-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__media picture { display: contents; }

/* -----------------------------------------------------------------------------
   TOUCH TARGETS
   Text styled links measure well under the 44px thumb target on phones.
   On coarse pointers their tap area grows with padding that a matching
   negative margin cancels out of the layout, so nothing moves visually
   and every link is comfortably pressable.
   ----------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .link-action,
  .barber-card__book,
  .barber-card__name a,
  .site-footer__links a,
  .site-footer__shop,
  a[href^="tel:"],
  .review__maps {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    margin-top: -0.6rem;
    margin-bottom: -0.6rem;
  }
  .barber-card__name a,
  .site-footer__links a,
  .site-footer__shop,
  a[href^="tel:"],
  .review__maps {
    display: inline-block;
  }
}

/* -----------------------------------------------------------------------------
   FINDER, SHOP STEP
   The owner's two step finder: the customer picks their shop first, the
   other shop's barbers leave the grid, then the specialty chips choose
   among who is left. Tapping the active shop again brings both back.
   ----------------------------------------------------------------------------- */
.finder__label--second { margin-top: var(--space-l); }
.finder__chip--shop { font-weight: var(--weight-medium); }
.barber-card.off { display: none; }

/* -----------------------------------------------------------------------------
   WEBKIT HERO WIDTH
   WebKit, unlike Chromium, computes the min-content of a wrapping flex
   row as the SUM of its items, so the hero's stats row inflated the
   mobile grid column to ~441px, iOS Safari grew the layout viewport to
   match, and the whole hero, headline, lede, and video, hung off the
   right edge of iPhones (the owner's recordings). Letting the grid items
   shrink below min-content fixes it at the root; desktop was already
   safe through its minmax(0, …) columns.
   ----------------------------------------------------------------------------- */
.hsplit__txt, .hsplit__media { min-width: 0; }

/* -----------------------------------------------------------------------------
   PROFILE HERO
   The owner's pick from the profile design round, option B: a jet black
   identity band carrying the barber's portrait beside their stacked name,
   the same ground the barber cards stand on, so tapping a card feels like
   the card expanding. The name sits on solid black beside the photo,
   never over it, for full legibility, and the id column may shrink below
   min-content (WebKit sums wrapping rows otherwise and iPhones grow the
   page past the screen).
   ----------------------------------------------------------------------------- */
.profile__hero {
  background: var(--jet-black);
  color: var(--off-white);
  padding: var(--space-l) 0 var(--space-xl);
  margin-bottom: var(--space-xl);
}
.profile__hero .link-action { color: var(--off-white); }
.profile__back { margin-bottom: var(--space-l); }
.profile__hero .profile__eyebrow { color: rgba(247, 244, 238, 0.64); }
.profile__hero .profile__eyebrow::after {
  background: linear-gradient(90deg, rgba(247, 244, 238, 0.3), transparent);
}
.profile__hero .profile__role { color: rgba(247, 244, 238, 0.72); }
.profile__id { min-width: 0; }
/* The picture itself is the sized flex item: display contents on a
   picture inside flex makes WebKit mint phantom items from its
   whitespace, which shoved the photo off the gutter. */
.profile__photo {
  display: block;
  flex: none;
  width: clamp(6.25rem, 30vw, 8.5rem);
}
.profile__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-s);
}
.profile__hero .profile__name {
  color: var(--off-white);
  /* Sized to the room beside the portrait: the width left after the
     gutters, the photo and the gap, divided by the name's longest word
     (--name-ch, from the build), at roughly 1.3em per extrawide capital.
     Short names run big, SHELDON and COLLINS still fit at 360px. */
  font-size: min(2.9rem,
    calc((100vw - 2 * var(--gutter) - clamp(6.25rem, 30vw, 8.5rem) - var(--space-m))
         / var(--name-ch, 8) * 0.68));
  margin-top: var(--space-xs);
}
@media (min-width: 60em) {
  .profile__hero { padding: var(--space-xl) 0 var(--space-2xl); }
  .profile__photo img { width: 13rem; }
  .profile__idrow { gap: var(--space-l); }
  .profile__hero .profile__name { font-size: clamp(3rem, 4.5vw, 4.2rem); }
}