/* ============================================================
   The Tatted Barber Co. — neon rodeo, v3
   Type: Barlow Semi Condensed (body) + Rye (display). No script.
   Pink is reserved for what glows or what you click.
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --raised: #141414;       /* neutral charcoal band */
  --deep: #060606;
  --neon: #ff2d95;
  --glow: #ff6ec7;
  --bone: #f5f1ea;
  --smoke: #969088;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: "Barlow Semi Condensed", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.1875rem;          /* 19px — readable on big screens */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

::selection { background: var(--neon); color: var(--ink); }

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

/* ---------- bands ---------- */
.band-raised { background: var(--raised); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.8em 1.7em;
  border-radius: 3px;
  transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-neon {
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 0 18px rgba(255, 45, 149, 0.45);
}
.btn-neon:hover {
  box-shadow: 0 0 10px rgba(255, 110, 199, 0.9), 0 0 42px rgba(255, 45, 149, 0.65);
}

.btn-lg { font-size: 1.15rem; padding: 0.95em 2.1em; }

.link-quiet {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--smoke);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.link-quiet:hover { color: var(--glow); border-color: var(--glow); }

/* ---------- type roles ---------- */
.head-west {
  font-family: "Rye", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--bone);
  max-width: 20ch;
}

.eyebrow {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon);
}

/* ---------- social icon links ---------- */
.social-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  text-decoration: none;
  transition: color 0.2s ease;
}
.social-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: none;
}
.social-link:hover { color: var(--glow); }
.social-link .social-handle { font-size: 1rem; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-solid {
  background: rgba(10, 10, 10, 0.92);
  box-shadow: 0 1px 0 rgba(245, 241, 234, 0.08);
  backdrop-filter: blur(6px);
}
.nav-mark {
  font-family: "Rye", serif;
  font-size: 1.05rem;
  color: var(--bone);
  text-decoration: none;
  line-height: 1.2;
}
.nav-book { font-size: 0.95rem; padding: 0.65em 1.3em; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 0%;   /* anchor top so the sign and her head keep maximum headroom */
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0) 18%),
    linear-gradient(to right, rgba(6, 6, 6, 0.75) 0%, rgba(6, 6, 6, 0.35) 36%, rgba(6, 6, 6, 0) 62%),
    linear-gradient(to top, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0) 42%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad) clamp(48px, 9vh, 96px);
  max-width: 760px;
}

.hero-head {
  font-family: "Rye", serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.3;
  color: var(--bone);
}

.hero-loc { display: block; }

.hero-sub {
  margin-top: 14px;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  max-width: 46ch;
  color: var(--bone);
  opacity: 0.92;
}

.hero-actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ---------- about ---------- */
.about-inner {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100svh;
  padding: clamp(72px, 10vw, 128px) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(56px, 9vw, 160px);
  align-items: center;
}
.about-copy p { margin: 20px 0; max-width: 52ch; }
.about-copy .social-link { margin-top: 6px; }

.about-photo img { border-radius: 2px; }
.about-photo figcaption {
  color: var(--smoke);
  font-size: 0.95rem;
  margin-top: 12px;
}

/* ---------- gallery ---------- */
.work {
  background: var(--ink);
  padding: clamp(64px, 9vw, 120px) 0;
}

.work-head {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 24px;
}
.work-rule { flex: 1; height: 1px; background: rgba(245, 241, 234, 0.15); }
.work-label {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 0 6px;
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--deep);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.tile:hover img, .tile:focus-visible img {
  opacity: 1;
  filter: none;
}

/* Reference-exact gallery veil (ballsbarbershop mechanics):
   color tiles at 0.4 opacity over the warm charcoal band, with a soft
   gradient frame on all four edges melting the grid into the background. */
.work { background: var(--raised); }
.work-grid { position: relative; }
.work-grid .tile { position: relative; }
.work-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.8) 18%, rgba(20, 20, 20, 0) 50%),
    linear-gradient(rgb(20, 20, 20), rgba(20, 20, 20, 0) 18%),
    linear-gradient(270deg, rgb(20, 20, 20), rgba(20, 20, 20, 0) 18%),
    linear-gradient(270deg, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0) 36%),
    linear-gradient(90deg, rgb(20, 20, 20), rgba(20, 20, 20, 0) 18%),
    linear-gradient(90deg, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0) 36%),
    linear-gradient(0deg, rgba(20, 20, 20, 0.8) 18%, rgba(20, 20, 20, 0) 50%),
    linear-gradient(0deg, rgb(20, 20, 20), rgba(20, 20, 20, 0) 18%);
}
.work-grid .tile:hover, .work-grid .tile:focus-visible { z-index: 3; }
.tile-ig img { opacity: 0.55; }
.tile-ig-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.tile-ig:hover .tile-ig-label, .tile-ig:focus-visible .tile-ig-label {
  color: var(--glow);
  text-shadow: 0 0 16px rgba(255, 45, 149, 0.8);
}

/* ---------- full-bleed split bands (Texas T, dad) ----------
   True two-column grid: the copy cell and the media cell are
   adjacent by construction, so no dead gap can open between them
   at any viewport width. */
.texast,
.tt-dad {
  display: grid;
  min-height: 100svh;
  background: var(--deep);
}
.texast { grid-template-columns: 1fr 1.15fr; }
.tt-dad { grid-template-columns: 1.15fr 1fr; }

/* copy on the left for the product band, on the right for dad */
.texast .band-media { order: 2; }
.texast .tt-inner { order: 1; }

.band-media {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
.band-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band-media::after {
  content: "";
  position: absolute;
  inset: 0;
}
.texast .band-media img { object-position: 40% center; }
.tt-dad .band-media img { object-position: 0% center; }
.band-media-right::after {
  background: linear-gradient(to right, var(--deep) 0%, rgba(6, 6, 6, 0) 32%);
}
.band-media-left::after {
  background: linear-gradient(to left, var(--deep) 0%, rgba(6, 6, 6, 0) 32%);
}

.tt-inner,
.tt-dad-inner {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 600px;
  padding: clamp(64px, 8vw, 120px) clamp(28px, 4vw, 64px);
}
.tt-inner > p { max-width: 44ch; margin-top: 20px; }
.tt-head { margin-top: 10px; }
.tt-actions { margin-top: 30px; }
.tt-dad-copy p { margin-top: 16px; max-width: 44ch; }

/* ---------- booking band ---------- */
.booking-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(80px, 11vw, 140px) var(--pad);
  display: grid;
  grid-template-columns: 0.9fr 1.5fr 0.75fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.booking-head {
  font-family: "Rye", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.15;
}
.booking-sub { margin: 18px 0 30px; max-width: 44ch; }

.booking-meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* optical balance: the left column's ragged text edge leaves extra air
     on that side of the map, so the meta column gets a matching inset */
  padding-left: clamp(0px, 2vw, 36px);
}
.booking-addr { font-style: normal; line-height: 1.55; }
.booking-addr a {
  color: var(--bone);
  text-decoration: none;
  transition: color 0.2s ease;
}
.booking-addr a:hover { color: var(--glow); }
.booking-meta .social-row { flex-direction: column; align-items: flex-start; gap: 14px; }
.booking-map { display: block; position: relative; }
.booking-map img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(245, 241, 234, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
/* the shop sits at the exact center of the capture */
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  display: block;
}
.map-pin-dot {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neon);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.map-pin-bubble {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: var(--neon);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(255, 45, 149, 0.45);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-pin-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--neon);
  border-bottom: 0;
}
.booking-map:hover .map-pin-bubble { transform: translateX(-50%) translateY(-6px); }
.map-pin-label {
  position: absolute;
  top: 14px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9rem;
  color: #141414;
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 0 6px #fff;
}
.map-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 0.65rem;
  color: rgba(10, 10, 10, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .map-pin-bubble { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .work-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  /* Mobile stacking order everywhere: headline, image, body copy */
  .about-inner { grid-template-columns: 1fr; gap: 0; }
  .about-copy { display: contents; }
  .about-copy .head-west { order: 1; }
  .about-photo { order: 2; max-width: 420px; margin-top: 26px; }
  .about-copy p { order: 3; }
  .about-copy .social-link { order: 4; }
  .about-copy p:first-of-type { margin-top: 26px; }

  /* dense packing: the spanning featured tile would otherwise strand an
     empty cell before it and orphan the last tile */
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; gap: 5px; padding: 0 5px; }
  .tile-ig { grid-column: span 2; aspect-ratio: 2 / 1; }
  .texast, .tt-dad { min-height: 0; grid-template-columns: 1fr; }

  .texast .tt-inner { display: contents; }
  .texast .eyebrow { order: 1; margin-top: 56px; }
  .texast .tt-head { order: 2; }
  .texast .band-media { order: 3; margin-top: 26px; }
  .texast .tt-inner > p:not(.eyebrow) { order: 4; margin-top: 26px; }
  .texast .tt-actions { order: 5; margin: 24px 0 56px; }
  .texast .eyebrow, .texast .tt-head, .texast .tt-inner > p:not(.eyebrow), .texast .tt-actions { padding-left: 24px; padding-right: 24px; }

  .tt-dad-inner, .tt-dad-copy { display: contents; }
  .tt-dad .tt-dad-copy .head-west { order: 1; margin-top: 56px; }
  .tt-dad .band-media { order: 2; margin-top: 26px; }
  .tt-dad .tt-dad-copy p { order: 3; margin: 26px 0 56px; }
  .tt-dad .tt-dad-copy .head-west, .tt-dad .tt-dad-copy p { padding-left: 24px; padding-right: 24px; }

  .band-media { height: 54svh; min-height: 0; }
  .texast .band-media img { object-position: 45% center; }
  .tt-dad .band-media img { object-position: 30% center; }
  .band-media-right::after, .band-media-left::after {
    background: linear-gradient(to top, var(--deep) 0%, rgba(6, 6, 6, 0) 30%);
  }
  .tt-inner, .tt-dad-inner { padding-top: 32px; max-width: none; }
  /* stacked: the desktop 40px grid gap between every row reads bloated
     on mobile, so spacing is set per element instead */
  .booking-inner { grid-template-columns: 1fr; gap: 0; }
  .booking-head { margin: 0; }
  .booking-map { max-width: 460px; }
  /* phones get their own vertical hero (data-mobile-src: the client's
     B&W reel on the main page, hero-mobile-v12 on index-2), which fills
     the frame natively, so it centers. The old 74% anchor only existed
     to crop the horizontal desktop video for phones. */
  .hero-video { object-position: center; }
  /* vertical-hero variant only (index-2): the desktop scrim's top and
     left gradients would gray out its molding and ceiling, so it keeps
     only the bottom gradient under the copy. */
  .hero-vertical .hero-scrim {
    background: linear-gradient(to top, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0) 45%);
  }
  .nav-book { font-size: 0.85rem; }
  .hero-actions .link-quiet { display: none; }
  .hero-actions .btn-lg { font-size: 1rem; padding: 0.85em 1.7em; }
}

/* ---------- scroll reveals (classes added by JS; page is whole without it) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
/* the lineup sub sits at 0.9 by design; keep that as its reveal
   end-state (it only gets the class on mobile, where its wrapper is
   display:contents and the children are observed individually) */
.tt-lineup-sub.reveal { opacity: 0; }
.tt-lineup-sub.reveal.in-view { opacity: 0.9; }
/* gentle stagger inside the two story bands. Desktop only: on mobile
   these wrappers are display:contents (no box), so the observer that
   lifts the stagger never fires and the children would stay hidden. */
@media (min-width: 721px) {
  .tt-inner.reveal > *,
  .tt-dad-copy.reveal > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .tt-inner.reveal.in-view > *,
  .tt-dad-copy.reveal.in-view > * {
    opacity: 1;
    transform: none;
  }
  .tt-inner.reveal.in-view > *:nth-child(2),
  .tt-dad-copy.reveal.in-view > *:nth-child(2) { transition-delay: 0.12s; }
  .tt-inner.reveal.in-view > *:nth-child(3),
  .tt-dad-copy.reveal.in-view > *:nth-child(3) { transition-delay: 0.24s; }
  .tt-inner.reveal.in-view > *:nth-child(4) { transition-delay: 0.36s; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile img, .btn { transition: none; }
  .reveal, .tt-inner.reveal > *, .tt-dad-copy.reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================= SERVICES (menu card on real shiplap) ======================= */
.band-shiplap {
  position: relative;
  background: #e9e4da url("../assets/shiplap.jpg") center / cover no-repeat;
}
.band-shiplap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.22) 0%, rgba(235, 229, 219, 0.28) 90px, rgba(235, 229, 219, 0.28) calc(100% - 90px), rgba(10, 10, 10, 0.22) 100%);
  pointer-events: none;
}
.services { padding: clamp(130px, 14vw, 210px) 24px clamp(80px, 9vw, 130px); }
.services-inner { position: relative; max-width: 1180px; margin: 0 auto; }

.menu-card {
  background: #f8f4ed;
  border: 2px solid #141414;
  box-shadow: 0 34px 70px rgba(6, 6, 6, 0.35), 0 8px 22px rgba(6, 6, 6, 0.22);
  padding: clamp(36px, 5vw, 72px) clamp(26px, 5vw, 80px) clamp(40px, 5vw, 64px);
  position: relative;
  color: var(--ink);
}
.menu-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(20, 20, 20, 0.35);
  pointer-events: none;
}
.services-head { text-align: center; }
.services .head-west {
  color: var(--ink);
  font-size: clamp(2rem, 3.8vw, 3rem);
  margin: 0 auto;
  max-width: none;
}
.services-note {
  color: #5c564e;
  margin: 14px auto 0;
  max-width: 54ch;
}
.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 60px);
  margin-top: clamp(36px, 4vw, 54px);
}
.menu-cat {
  font-family: Rye, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 14px;
}
.menu-cat::before, .menu-cat::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(20, 20, 20, 0.3);
}
.menu-list { list-style: none; margin: 18px 0 0; padding: 0; }
.menu-list li { padding: 12px 2px; }
.menu-list li + li { border-top: 1px dashed rgba(20, 20, 20, 0.22); }
/* prices sit on the name line; the name wraps if needed, the price
   never does and stays aligned with the name's first line */
.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.menu-price {
  flex: none;
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.menu-list strong {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu-list span {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  color: #645d50;
}
.services-cta { margin-top: clamp(36px, 4vw, 52px); text-align: center; }

/* ======================= REVIEWS ======================= */
/* Reviews: the original boxed layout, with the shop's bronco-and-aces
   wallpaper sitting faint behind it instead of flat ink. */
.reviews {
  background: var(--ink);
  padding: clamp(80px, 10vw, 140px) 24px;
  overflow: hidden;
}
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/reviews-wall.jpg") center / cover no-repeat;
  opacity: 0.16;
}
.reviews::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(10, 10, 10, 0) 16%),
    linear-gradient(to top, var(--ink) 0%, rgba(10, 10, 10, 0) 16%);
  pointer-events: none;
}
.reviews-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.reviews-head { display: block; }
.rating-line {
  margin: 16px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.rating-star { color: var(--neon); }
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(40px, 5vw, 60px);
}
.review-card {
  margin: 0;
  padding: clamp(26px, 3vw, 38px);
  background: linear-gradient(165deg, #1d1d1d 0%, #151515 55%, #101010 100%);
  border: 1px solid #292929;
  border-radius: 5px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(245, 241, 234, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: Rye, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(255, 45, 149, 0.16);
  pointer-events: none;
}
.review-card:hover {
  transform: translateY(-2px);
  border-color: var(--neon);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 45, 149, 0.25), inset 0 1px 0 rgba(245, 241, 234, 0.05);
}
.review-card p { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.review-card cite { font-style: normal; color: var(--smoke); font-size: 0.9rem; }

@media (max-width: 960px) {
  .menu { grid-template-columns: 1fr; gap: 34px; }
  .review-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .review-card { transition: none; }
  .review-card:hover { transform: none; }
}

/* Ink CTA for light sections */
.btn-ink {
  background: var(--ink);
  color: var(--bone);
  box-shadow: 0 10px 26px rgba(6, 6, 6, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-ink:hover {
  background: #232323;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(6, 6, 6, 0.4);
}

/* ---------- curtain scroll ----------
   Applied to the Texas T run only: texast and tt-dad pin in place
   while the next section is pulled up over them, ending with the
   lineup band, after which the page scrolls normally again. Every
   section from texast on gets an explicit stacking position, and
   their backgrounds are opaque so nothing bleeds through. A soft
   top shadow on each covering section sells the lift. */
/* dwell: like the lineup band below, texast holds fully visible for
   about half a viewport of scrolling before the lineup covers it */
.texast { position: sticky; top: 0; z-index: 5; margin-bottom: 55svh; }
.tt-lineup { position: sticky; top: 0; z-index: 6; }
/* dwell then release: dad pins and holds for about half a viewport of
   scrolling, then scrolls away normally with reviews following in flow.
   The holder provides the extra runway; the sticky releases at its end,
   so nothing rides over this section. */
.tt-dad-hold { height: calc(100svh + 55svh); }
.tt-dad { position: sticky; top: 0; z-index: 7; }
.reviews { position: relative; z-index: 8; }
.booking { position: relative; z-index: 9; }
.tt-lineup, .tt-dad { box-shadow: 0 -28px 64px rgba(0, 0, 0, 0.55); }

/* ---------- texas t lineup: full-bleed three-bottle shot ---------- */
.tt-lineup {
  position: sticky;
  top: 0;
  /* dwell: extra runway so the section holds fully visible for about
     half a viewport of scrolling before the next section covers it */
  margin-bottom: 55svh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--deep);
}
.tt-lineup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tt-lineup-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.45) 0%, rgba(6, 6, 6, 0) 30%, rgba(6, 6, 6, 0) 50%, rgba(6, 6, 6, 0.55) 78%, rgba(6, 6, 6, 0.88) 100%);
}
.tt-lineup-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 24px clamp(36px, 4.5vw, 60px);
}
.tt-lineup-copy .head-west { margin: 0 auto; max-width: none; }
.tt-lineup-cta { display: none; }

.tt-lineup-sub {
  margin: 14px auto 0;
  max-width: 66ch;
  color: var(--bone);
  opacity: 0.85;
}

@media (max-width: 720px) {
  /* The curtain is a desktop effect. On mobile these sections are taller
     than the viewport, and pinning a section taller than the screen locks
     its lower content off-screen while the next section rides over it. */
  .texast, .tt-lineup, .tt-dad { position: relative; top: auto; margin-bottom: 0; }
  .tt-dad-hold { height: auto; }
  .tt-lineup, .tt-dad { box-shadow: none; }

  /* the menu card needs clean shiplap above it: the top 90px of the
     section is the dark blend from the hero, so mobile gets more room */
  .services { padding-top: 185px; padding-bottom: 115px; }

  .texast .tt-actions { display: none; }
  /* the hidden CTA used to carry the section's bottom spacing */
  .texast .tt-inner > p:not(.eyebrow) { margin-bottom: 56px; }

  /* lineup stacking order: headline, image, copy, CTA */
  .tt-lineup { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin-bottom: 0; }
  .tt-lineup-copy { display: contents; text-align: left; }
  .tt-lineup-copy .head-west { order: 1; margin: 0; padding: 48px 24px 24px; max-width: none; }
  .tt-lineup-img {
    order: 2;
    position: static;
    display: block;
    width: 100%;
    height: 52svh;
    object-fit: cover;
    object-position: center 42%;
  }
  .tt-lineup-scrim { display: none; }
  .tt-lineup-sub { order: 3; margin: 0; padding: 26px 24px 0; opacity: 0.9; }
  .tt-lineup-cta { order: 4; display: block; margin: 26px 24px 60px; }

  /* reviews: swipeable cards with edge bleed and a peek of the next one */
  .review-grid {
    display: flex;
    gap: 14px;
    margin: 40px -24px 0;
    padding: 4px 24px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 82%; scroll-snap-align: start; }

  /* Gallery veil: no hover on mobile, so the heavy dim + edge melt just
     blacks out the tiles. Lift the images and keep only a light fade. */
  .tile img { opacity: 0.85; }
  .work-grid::after {
    background:
      linear-gradient(rgb(20, 20, 20), rgba(20, 20, 20, 0) 8%),
      linear-gradient(0deg, rgb(20, 20, 20), rgba(20, 20, 20, 0) 8%);
  }

  /* Footer order: name, copy, map, CTA, then address and socials */
  .booking-inner > div:first-child { display: contents; }
  .booking-head { order: 1; }
  .booking-sub { order: 2; margin: 14px 0 26px; }
  .booking-map { order: 3; margin: 0; }
  .booking-inner > div:first-child .btn { order: 4; justify-self: start; margin-top: 26px; }
  .booking-meta { order: 5; margin-top: 40px; padding-left: 0; }
}

/* ---------- mobile menu ----------
   Desktop keeps the Book on Vagaro button in the nav. On mobile that
   button duplicates the hero CTA, so it swaps for a hamburger that
   opens a full-screen section menu. */
.nav-burger { display: none; }
.mobile-menu { display: none; }

@media (max-width: 720px) {
  .nav-book { display: none; }
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--bone);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 49; /* under the nav bar so the burger stays tappable */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 90px 32px 60px;
    background: rgba(10, 10, 10, 0.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-menu.open { opacity: 1; pointer-events: auto; }
  .mobile-menu a {
    font-family: "Rye", serif;
    font-size: 1.7rem;
    color: var(--bone);
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.2s ease;
  }
  .mobile-menu a:active, .mobile-menu a:hover { color: var(--neon); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-burger span, .mobile-menu, .mobile-menu a { transition: none; }
}