/* Revival Room Barbershop
   Palette is taken from the shop itself: warm off-white walls, charcoal
   cabinetry, grey plank floor. Type is a high contrast didone for display and a
   wide tracked grotesque for everything structural. */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-normal.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #edebe7;
  --paper-2: #e3e0db;
  --ink: #121212;
  --ink-2: #3a3a3a;
  --muted: #8b8781;
  --line: rgba(18, 18, 18, 0.14);
  --char: #1a1a1a;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --pad: clamp(20px, 5vw, 76px);
  --maxw: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- shared type ---------- */

.kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.section-note {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

section { padding-block: clamp(64px, 9vw, 132px); }

/* ---------- opening curtain ---------- */

/* Warm paper rather than stark white, so it reads as the same material as the
   rest of the site and the cut to the dark hero feels deliberate.
   Driven entirely by CSS animation: if the script fails the curtain still
   lifts, which a JS-gated overlay would not. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--paper);
  animation: curtain 1.85s var(--ease) forwards;
}
.loader.gone { display: none; }

/* One width drives both the mark and the rule so they stay locked together.
   The 64vw ceiling keeps it off the edges on very narrow phones. */
.loader-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: clamp(210px, 32vw, 320px);
  max-width: 64vw;
}
.loader-mark img {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(9px) scale(0.965);
  animation: mark-in 1.5s var(--ease) forwards;
}
/* hairline that draws outward under the mark while it settles */
.loader-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  opacity: 0.22;
  transform: scaleX(0);
  animation: rule-draw 1.5s var(--ease) 0.16s forwards;
}

@keyframes mark-in {
  0%   { opacity: 0; transform: translateY(9px) scale(0.965); }
  38%  { opacity: 1; transform: none; }
  78%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-5px) scale(1.012); }
}
@keyframes rule-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { transform: scaleX(1); opacity: 0.22; }
  74%  { transform: scaleX(1); opacity: 0.22; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes curtain {
  0%, 62%  { opacity: 1; }
  100%     { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ---------- header ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px var(--pad);
  /* over the hero video the bar is invisible and its contents are white; once
     the page scrolls past the hero it becomes the light bar with dark type */
  --head-fg: var(--paper);
  color: var(--head-fg);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
              color 0.35s var(--ease), padding 0.35s var(--ease);
}
.site-head.is-stuck {
  --head-fg: var(--ink);
  background: rgba(237, 235, 231, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
  padding-block: 13px;
}

.brand { display: flex; align-items: center; gap: 12px; }
/* crest only here, tight-cropped, so the mark reads at header size instead of
   sitting inside its own padding */
.brand-mark { position: relative; display: block; width: 42px; height: 48px; }
.brand-mark img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 0.35s var(--ease);
}
.site-head .brand-mark .on-light { opacity: 0; }
.site-head.is-stuck .brand-mark .on-dark { opacity: 0; }
.site-head.is-stuck .brand-mark .on-light { opacity: 1; }

.brand-word {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav { display: flex; gap: 30px; }
/* the pill in the header covers booking on desktop; this row is for the
   mobile panel only, where that pill is hidden */
.nav .nav-book { display: none; }
.nav a {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.4s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 10px 20px; font-size: 10px; }

/* header pill: white on the video, dark once the bar turns light */
.head-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.head-cta:hover { background: transparent; color: var(--paper); }
.is-stuck .head-cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.is-stuck .head-cta:hover { background: transparent; color: var(--ink); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 8px; cursor: pointer;
  color: var(--head-fg);
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 0;
  min-height: 100svh;
  display: flex;
  isolation: isolate;
  color: var(--paper);
  background: #0d0d0d;
}

.hero-video {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  /* poster frame, swapped at the same breakpoint as the video sources */
  background: #0d0d0d url('/video/hero-poster.jpg') center 42% / cover no-repeat;
}
@media (min-width: 901px) {
  .hero-video { background-image: url('/video/hero-wide-poster.jpg'); }
}
.hero-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Keeps the headline readable over whatever frame is playing: heavy at the
   bottom where the copy sits, lighter across the top for the nav. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.55) 42%, rgba(8, 8, 8, 0.12) 78%, rgba(8, 8, 8, 0.3) 100%),
    linear-gradient(to bottom, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.12) 26%, rgba(8, 8, 8, 0.2) 62%, rgba(8, 8, 8, 0.72) 100%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 140px var(--pad) clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(30px, 5vw, 60px);
}

.hero-copy { max-width: 700px; }

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(58px, 10.5vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: rgba(237, 235, 231, 0.62);
  display: block;
}

.hero p.lede {
  font-size: clamp(15px, 1.3vw, 17px);
  color: rgba(237, 235, 231, 0.82);
  max-width: 46ch;
  margin: 0 0 34px;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }
.btn--outline { background: transparent; color: var(--paper); border-color: rgba(237, 235, 231, 0.55); }
.btn--outline:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(237, 235, 231, 0.22);
  padding-top: 20px;
}
.hero-meta { display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }
.hero-meta div { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(237, 235, 231, 0.55); }
.hero-meta strong { display: block; color: var(--paper); font-weight: 600; margin-top: 5px; letter-spacing: 0.1em; font-size: 11px; }

.scroll-cue {
  display: flex; align-items: center; gap: 10px;
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(237, 235, 231, 0.55);
  white-space: nowrap;
}
.scroll-cue i {
  display: block; width: 34px; height: 1px;
  background: rgba(237, 235, 231, 0.5);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: left center;
}
@keyframes cue { 0%, 100% { transform: scaleX(0.4); } 50% { transform: scaleX(1); } }

/* ---------- work carousel ---------- */

.carousel { position: relative; }
.rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 14px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 clamp(240px, 27vw, 360px);
  scroll-snap-align: start;
}
.shot figure { margin: 0; }
.shot .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
  cursor: zoom-in;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 12px; padding-top: 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.shot figcaption span:last-child { color: var(--muted); }

.rail-nav { display: flex; gap: 8px; }
.rail-nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rail-nav button:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rail-nav button:disabled { opacity: 0.3; cursor: default; }

/* ---------- barbers ---------- */

.barbers { background: var(--char); color: var(--paper); }
.barbers .section-title { color: var(--paper); }
.barbers .kicker, .barbers .section-note { color: rgba(237, 235, 231, 0.5); }

.barber-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.barber {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; text-align: left; cursor: pointer;
  font: inherit;
}
.barber .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #222;
  position: relative;
}
.barber img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.barber:hover img, .barber:focus-visible img { transform: scale(1.05); }
.barber .plus {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(237, 235, 231, 0.16);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  transition: background 0.3s var(--ease);
}
.barber:hover .plus { background: var(--paper); color: var(--char); }
.barber h3 {
  font-family: var(--display);
  font-size: 22px; font-weight: 600;
  margin: 14px 0 2px;
}
.barber .role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(237,235,231,0.55); }

/* ---------- shop strip ---------- */

.shop-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.shop-rail .frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
  padding: 0;
  border: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.shop-rail img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shop-rail .frame:hover img { transform: scale(1.05); }

.shop-rail .zoom,
.shot .zoom {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(6px);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.shop-rail .frame:hover .zoom,
.shop-rail .frame:focus-visible .zoom,
.shot .frame:hover .zoom,
.shot .frame:focus-visible .zoom { opacity: 1; transform: none; }
.shop-rail .frame:hover .zoom,
.shot .frame:hover .zoom { background: rgba(18, 18, 18, 0.8); }

/* ---------- shop photo lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}
.lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.985);
  transition: transform 0.36s var(--ease);
}
.lightbox[aria-hidden="false"] .lightbox-figure { transform: none; }
.lightbox-figure img {
  max-width: 100%;
  max-height: 78svh;
  width: auto; height: auto;
  object-fit: contain;
}
.lightbox-figure figcaption {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 235, 231, 0.65);
  text-align: center;
  max-width: 60ch;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 1px solid rgba(237, 235, 231, 0.3);
  background: rgba(8, 8, 8, 0.4);
  color: var(--paper);
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.lightbox-close { top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); width: 44px; height: 44px; font-size: 20px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 17px; }
.lightbox-prev { left: clamp(10px, 2.4vw, 30px); }
.lightbox-next { right: clamp(10px, 2.4vw, 30px); }

@media (max-width: 640px) {
  .lightbox-nav { top: auto; bottom: clamp(14px, 4vw, 26px); transform: none; width: 44px; height: 44px; }
  .lightbox-figure img { max-height: 66svh; }
}

/* ---------- services ---------- */

.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.svc:hover { padding-left: 10px; }
.svc .num { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.svc h3 { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; margin: 0 0 4px; }
.svc p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 52ch; }

/* ---------- contact ---------- */

.contact { background: var(--char); color: var(--paper); }
.contact .section-title { color: var(--paper); }
.contact .kicker { color: rgba(237,235,231,0.5); }
.contact a { color: var(--paper); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.info-block + .info-block { margin-top: 34px; }
.info-block h4 {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(237,235,231,0.5); font-weight: 500; margin: 0 0 10px;
}
.info-block p, .info-block li { margin: 0; font-size: 16px; color: var(--paper); }
.hours { list-style: none; padding: 0; margin: 0; }
.hours li { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid rgba(237,235,231,0.12); font-size: 14px; }
.hours li.closed { color: rgba(237,235,231,0.42); }
.hours li.today { color: #fff; }
/* the marker rides along with the day name so it cannot push the hours out of
   the right hand column */
.hours li.today span:first-child::after {
  content: 'Today';
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 235, 231, 0.55);
  border: 1px solid rgba(237, 235, 231, 0.3);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 10px;
  vertical-align: 1px;
}

.contact-media .frame { aspect-ratio: 4 / 3; overflow: hidden; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- footer ---------- */

.site-foot {
  background: var(--char);
  color: rgba(237,235,231,0.55);
  border-top: 1px solid rgba(237,235,231,0.14);
  padding: 30px var(--pad);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.site-foot a:hover { color: var(--paper); }

/* ---------- barber modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--pad);
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal[aria-hidden="false"] { opacity: 1; visibility: visible; }

.modal-card {
  background: var(--paper);
  color: var(--ink);
  width: min(940px, 100%);
  max-height: 86svh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  transform: translateY(16px) scale(0.99);
  transition: transform 0.4s var(--ease);
}
.modal[aria-hidden="false"] .modal-card { transform: none; }

/* The image is taken out of flow so it cannot fight the grid for row height.
   With height:100% in flow, the row sized itself to ~119px while the image
   painted at 209px, and the overflow ran straight over the name and role. */
.modal-card .portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}
.modal-card .portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.modal-body {
  padding: clamp(26px, 3.4vw, 46px);
  padding-right: clamp(56px, 6vw, 66px);   /* clear of the close button */
  position: relative;
  min-width: 0;
}
.modal-body .role {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.modal-body h3 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 16px;
}
.modal-body .bio { margin: 0 0 24px; color: var(--ink-2); font-size: 15px; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--ink);
}
.modal-close:hover { background: var(--ink); color: var(--paper); }
.modal-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.modal-shots .frame { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.modal-shots img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- reveal ---------- */

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .barber-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .shop-rail { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-inner { padding-top: 120px; }
  /* Phones put the copy over a much brighter part of the frame than desktop
     does, so the scrim is heavier here: a flat tint over everything plus a
     strong ramp through the lower half where the headline and buttons sit. */
  .hero-scrim {
    background:
      linear-gradient(rgba(8, 8, 8, 0.28), rgba(8, 8, 8, 0.28)),
      linear-gradient(to bottom,
        rgba(8, 8, 8, 0.68) 0%,
        rgba(8, 8, 8, 0.34) 20%,
        rgba(8, 8, 8, 0.44) 42%,
        rgba(8, 8, 8, 0.74) 64%,
        rgba(8, 8, 8, 0.90) 84%,
        rgba(8, 8, 8, 0.95) 100%);
  }
  .hero h1 { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6); }
  .hero p.lede {
    color: rgba(237, 235, 231, 0.92);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75);
  }
  .hero-meta div { color: rgba(237, 235, 231, 0.7); }
  .hero-meta strong, .hero-meta div { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .scroll-cue { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  /* flex column here rather than grid: rows then size from real content, so a
     tall portrait can never overlap the copy underneath it */
  .modal-card { display: flex; flex-direction: column; }
  .modal-card .portrait { flex: 0 0 auto; aspect-ratio: 4 / 3; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: 78px var(--pad) 26px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease);
    z-index: -1;
  }
  .nav.open { transform: none; }
  .nav { color: var(--ink); }
  .nav a { padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
  .head-cta { display: none; }

  /* the pill CTA is hidden on small screens, so booking gets its own row here */
  .nav .nav-book {
    display: block;
    margin-top: 18px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    padding: 15px 0;
    font-weight: 600;
  }
  .nav .nav-book::after { display: none; }
}

@media (max-width: 560px) {
  .barber-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .svc { grid-template-columns: 1fr; gap: 10px; }
  .svc .num { display: none; }
  .modal-shots { grid-template-columns: repeat(3, 1fr); }
}