/* =========================================================================
   QM Barbershop — styles
   Palette from the shop itself: Behr "Hidden Gem" jade walls, logo gold,
   cream walls, black leather. Mobile-first (390px), no framework.
   ========================================================================= */

/* ---------- Fonts (self-hosted, 2 families / 4 files) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-600-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Roman capitals like the logo's "BARBERSHOP"; only used for the hero subline */
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --jade: #596D69;        /* Behr Hidden Gem N430-6A — never put gold text on this */
  --jade-deep: #1E3F3D;   /* main dark sections */
  --jade-ink: #122B2A;    /* header, footer, text on gold */
  --gold: #C9A24D;
  --gold-hi: #E4C47A;
  --gold-lo: #A8822F;
  --cream: #F4EFE6;
  --cream-2: #ECE4D6;
  --ink: #1A1A1A;
  --ink-soft: #3E4A48;

  --on-dark: #F4EFE6;
  --on-dark-soft: rgba(244, 239, 230, .78);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 20px;
  --maxw: 1200px;
  --header-h: 64px;
  --bar-h: 0px;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.08v16.17l-14 8.08-14-8.08V8.08ZM14 32.33V48.5' fill='none' stroke='%23C9A24D' stroke-width='.6'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  :root { --bar-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--jade-ink);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  padding-bottom: var(--bar-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.02; margin: 0; letter-spacing: -.005em; font-variant-numeric: lining-nums; }
.map-address, .about-lead { font-variant-numeric: lining-nums; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

.container { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; overflow: clip; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 200;
  background: var(--gold); color: var(--jade-ink); font-weight: 700;
  padding: .8rem 1.1rem; border-radius: 10px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Focus: gold on dark, jade-deep on light */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.section--cream :focus-visible { outline-color: var(--jade-deep); }

/* Icon sprite defaults: line icons */
svg use { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  --btn-pad-x: 1.35rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .8rem var(--btn-pad-x);
  border-radius: 999px; border: 1px solid transparent;
  font: 700 .82rem/1.1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  cursor: pointer; overflow: hidden; overflow: clip; isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--sm { min-height: 44px; padding: .6rem 1.05rem; font-size: .74rem; }
.btn--lg { min-height: 54px; --btn-pad-x: 1.65rem; font-size: .86rem; }
.btn-icon { width: 1.2em; height: 1.2em; flex: none; }
.btn-icon--end { transition: transform .25s var(--ease); }
.btn:hover .btn-icon--end { transform: translateX(3px); }

.btn--gold {
  color: var(--jade-ink);
  background: linear-gradient(180deg, #DDBC6C 0%, var(--gold) 55%, #BC9442 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 22px -10px rgba(201, 162, 77, .75);
}
/* little gleam across gold buttons on hover — same family as the logo shine */
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 230, .75) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover: hover) {
  .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 28px -12px rgba(201, 162, 77, .9); }
  .btn--gold:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
}

.btn--ghost { color: var(--on-dark); border-color: rgba(244, 239, 230, .45); background: rgba(18, 43, 42, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (hover: hover) {
  .btn--ghost:hover { border-color: var(--gold); background: rgba(244, 239, 230, .08); transform: translateY(-2px); }
}
.btn--dark { color: var(--cream); background: var(--jade-deep); }
.btn--outline { color: var(--jade-deep); border-color: rgba(30, 63, 61, .45); background: transparent; }
@media (hover: hover) {
  .btn--dark:hover { background: var(--jade-ink); transform: translateY(-2px); }
  .btn--outline:hover { border-color: var(--jade-deep); background: rgba(30, 63, 61, .06); transform: translateY(-2px); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 700; text-decoration: none; letter-spacing: .02em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.text-link:hover { background-size: 100% 1px; }
.text-link--gold { color: var(--gold); }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 700 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--jade-deep); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.eyebrow--gold { color: var(--gold); }

h2 { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-intro { margin-top: 1rem; font-size: 1.075rem; color: var(--ink-soft); max-width: 56ch; }
.section--deep .section-intro, .section--ink .section-intro { color: var(--on-dark-soft); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); overflow: hidden; overflow: clip; }
.section--cream { background: var(--cream); color: var(--ink); }
.section--deep { background: var(--jade-deep); color: var(--on-dark); }
.section--ink { background: var(--jade-ink); color: var(--on-dark); }

.section-cta { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.section-cta--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.cta-note { color: var(--on-dark-soft); font-size: .98rem; }

/* Hex-light pattern, a nod to the ceiling */
.hex-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--hex); background-size: 56px 97px;
  opacity: .07;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 70%);
}

/* ---------- Scroll motion (JS sets --py / --hy; all off for reduced motion) ---------- */
/* photos drift a little inside their frames */
/* % of the photo's own height, so it never slides past the 5% the zoom adds on each edge */
.js .drift-inner { scale: 1.1; translate: 0 calc(var(--py, 0) * -4%); }
/* own GPU layer, so moving them doesn't repaint the page */
.js .drift-inner, .js .drift-float, .js .drift-float-rev { will-change: translate; }
.lite .drift-inner, .lite .drift-float, .lite .drift-float-rev { will-change: auto; }
/* keep the rounded clip on iOS Safari while the inner photo moves */
.shop-link, .ph { -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* the experience collage floats at two speeds for a touch of depth */
.js .drift-float { translate: 0 calc(var(--py, 0) * 16px); }
.js .drift-float-rev { translate: 0 calc(var(--py, 0) * -26px); }
/* hero: text eases up and fades, photo lags behind */
.js .hero-content { translate: 0 calc(var(--hy, 0) * -48px); opacity: calc(1 - var(--hy, 0) * .75); }
.js .hero-media { translate: 0 calc(var(--hy, 0) * 70px); }
/* own layers, so moving and fading the text never repaints it */
.js .hero-content, .js .hero-media { will-change: translate, opacity; }
/* Where supported, the scroll itself drives this (no JavaScript, no lag): the
   hero's trip off the top of the screen runs the animation from 0% to 100%. */
@supports (animation-timeline: view()) {
  .js .hero { view-timeline: --hero block; view-timeline-inset: 0px; }
  .js .hero-content, .js .hero-media {
    animation: linear both; animation-timeline: --hero;
    animation-range: exit-crossing 0% exit-crossing 100%;
  }
  .js .hero-content { animation-name: hero-text-away; }
  .js .hero-media { animation-name: hero-media-away; }
}
@keyframes hero-text-away { from { translate: 0 0; opacity: 1; } to { translate: 0 -48px; opacity: .25; } }
@keyframes hero-media-away { from { translate: 0 0; } to { translate: 0 70px; } }

/* ---------- Lighter mode (JS adds .lite when the phone can't keep up) ---------- */
.lite .drift-inner, .lite .drift-float, .lite .drift-float-rev, .lite .hero-media { translate: none !important; scale: none !important; }
.lite .hero-content, .lite .hero-media { animation: none !important; will-change: auto; }
.lite .hero-content { translate: none; opacity: 1; }
.lite .shine-photo, .lite .hex-bg--glow, .lite .twinkle { display: none; }
.lite .hero-zoom { animation: none; }
.lite .site-header, .lite .action-bar, .lite .btn--ghost, .lite .now-open, .lite .video-sound { backdrop-filter: none; -webkit-backdrop-filter: none; }
.lite .site-header:not(.is-top), .lite .action-bar { background: var(--jade-ink); }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* eyebrow rule draws in */
.js .reveal .eyebrow::before { width: 0; transition: width .7s var(--ease) .15s; }
.js .reveal.is-in .eyebrow::before { width: 28px; }
/* service rows and about chips cascade in */
.js .svc-group.reveal .svc-list li,
.js .about-copy.reveal .chips li { opacity: 0; translate: 0 10px; transition: opacity .45s var(--ease), translate .45s var(--ease), padding .35s var(--ease) .14s, color .25s, transform .35s var(--ease) .14s; }
.js .svc-group.reveal.is-in .svc-list li,
.js .about-copy.reveal.is-in .chips li { opacity: 1; translate: 0 0; }
.js .reveal.is-in :is(.svc-list, .chips) li:nth-child(2) { transition-delay: .05s, .05s, .14s, 0s, .14s; }
.js .reveal.is-in :is(.svc-list, .chips) li:nth-child(3) { transition-delay: .1s, .1s, .14s, 0s, .14s; }
.js .reveal.is-in :is(.svc-list, .chips) li:nth-child(4) { transition-delay: .15s, .15s, .14s, 0s, .14s; }
.js .reveal.is-in :is(.svc-list, .chips) li:nth-child(5) { transition-delay: .2s, .2s, .14s, 0s, .14s; }
.js .reveal.is-in :is(.svc-list, .chips) li:nth-child(6) { transition-delay: .25s, .25s, .14s, 0s, .14s; }
.js .reveal.is-in :is(.svc-list, .chips) li:nth-child(7) { transition-delay: .3s, .3s, .14s, 0s, .14s; }

/* =========================================================================
   LOGO SHINE — a gleam that sweeps across the logo as you scroll past it.
   A band of light (.shine-band) slides across a layer masked to the logo's
   own shape, so only the gold lights up. The band only ever MOVES (transform),
   so the phone's graphics chip does the work and nothing is repainted. Where
   the browser supports scroll-linked animations, the scroll position drives it
   directly with no JavaScript at all; elsewhere JS sets --c.
   ========================================================================= */
.shine { position: relative; display: block; isolation: isolate; --c: -1.04; --tw: 0; }
.shine-fx,
.shine-photo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; overflow: clip;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* logo files: color-dodge makes the gold flare like polished metal */
.shine-fx {
  -webkit-mask-image: var(--shine-mask); mask-image: var(--shine-mask);
  -webkit-mask-size: contain; mask-size: contain;
  mix-blend-mode: color-dodge;
}
.shine--crest { --shine-mask: url("/img/qm-crest-mask.png"); }
.shine--mark { --shine-mask: url("/img/qm-mark-96.png"); }
.shine-band {
  position: absolute; inset: 0;
  background: linear-gradient(112deg,
    transparent 0%, transparent 38%,
    rgba(255, 222, 150, .34) 44%,
    rgba(255, 241, 205, .9) 49.2%,
    rgba(255, 241, 205, .9) 50.8%,
    rgba(255, 222, 150, .34) 56%,
    transparent 62%, transparent 100%);
  /* --c: -1 = off the left edge, 0 = centered, 1 = off the right edge */
  transform: translate3d(calc(var(--c, -1.04) * 100%), 0, 0);
  will-change: transform;
}

/* photos with the gold QM sign on the wall: the signs are dimmer than the logo
   file, so add light instead of dodging */
.shine-frame { position: relative; display: block; isolation: isolate; overflow: hidden; overflow: clip; }
.shine-photo { --c: -1.04; -webkit-mask-size: cover; mask-size: cover; mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
.shine-photo .shine-band {
  background: linear-gradient(112deg,
    transparent 0%, transparent 38%,
    rgba(255, 214, 140, .2) 44%,
    rgba(255, 236, 190, .58) 49.2%,
    rgba(255, 236, 190, .58) 50.8%,
    rgba(255, 214, 140, .2) 56%,
    transparent 62%, transparent 100%);
}
.shine-photo--hero { -webkit-mask-image: url("/img/hero-logo-mask.png"); mask-image: url("/img/hero-logo-mask.png"); }
.shine-photo--wash { -webkit-mask-image: url("/img/wash-station-mask.png"); mask-image: url("/img/wash-station-mask.png"); }
.shine-photo--wash-logo { -webkit-mask-image: url("/img/wash-logo-mask.png"); mask-image: url("/img/wash-logo-mask.png"); }

/* a small star that twinkles on the crown when the gleam passes */
.twinkle {
  position: absolute; z-index: 2; left: 60.5%; top: 13.5%;
  width: 10%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, #fff 0 10%, rgba(255, 244, 210, .9) 18%, rgba(255, 230, 160, 0) 60%);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  opacity: var(--tw);
  transform: translate(-50%, -50%) scale(calc(.3 + var(--tw) * .9)) rotate(calc(var(--tw) * 60deg));
}
.no-js .shine-fx, .no-js .shine-photo, .no-js .twinkle { display: none; }

/* Scroll-linked, no JavaScript: each logo's own trip through the screen drives
   the sweep (roughly while its middle goes from 88% down the screen to 30%). */
@supports (animation-timeline: view()) {
  .js [data-shine=""] { view-timeline: --shine block; }
  .js [data-shine=""] .shine-band,
  .js [data-shine=""] > .twinkle,
  .js [data-shine=""] .shine-fx ~ .twinkle { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --shine; animation-range: cover 20% cover 66%; }
  .js [data-shine=""] .shine-band { animation-name: shine-sweep; }
  .js [data-shine=""] .twinkle { animation-name: shine-twinkle; }
}
@keyframes shine-sweep { from { transform: translate3d(-104%, 0, 0); } to { transform: translate3d(104%, 0, 0); } }
@keyframes shine-twinkle {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(60deg); }
  76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  background: rgba(18, 43, 42, .97);
  border-bottom: 1px solid rgba(201, 162, 77, .18);
  transition: background-color .35s, border-color .35s, box-shadow .35s;
  color: var(--on-dark);
}
.site-header.is-top {
  background: linear-gradient(180deg, rgba(18, 43, 42, .7), rgba(18, 43, 42, 0));
  border-bottom-color: transparent;
}
.site-header.is-top.menu-open { background: var(--jade-ink); }
.header-inner {
  height: 100%;
  width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto;
  display: flex; align-items: center; gap: .75rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; min-height: 44px; margin-right: auto; }
.brand .shine { width: 44px; }
.brand img { width: 44px; height: auto; }
.brand-name { font: 600 1.45rem/1 var(--serif); color: var(--gold); letter-spacing: .01em; white-space: nowrap; display: none; }
@media (min-width: 420px) { .brand-name { display: inline; } }

.site-nav { order: 3; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(244, 239, 230, .25);
  background: transparent; cursor: pointer; place-items: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .2rem;
  text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark);
  background: linear-gradient(var(--gold), var(--gold)) 50% calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease), color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--gold-hi); background-size: 100% 1px; }

/* Phones without JS: links sit in a scrollable row under the header */
@media (max-width: 899px) {
  .no-js .site-header { height: auto; }
  .no-js .header-inner { flex-wrap: wrap; padding-block: 10px; height: auto; }
  .no-js .site-nav { order: 4; width: 100%; }
  .no-js .nav-links { display: flex; gap: 1rem; overflow-x: auto; }

  .js .nav-toggle { display: grid; }
  .js .nav-links {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    display: grid; gap: 0; padding: .5rem var(--gutter) 1.5rem;
    background: var(--jade-ink); border-bottom: 1px solid rgba(201, 162, 77, .25);
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .5);
    transform-origin: top; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
  }
  .js .nav-links.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .3s var(--ease); }
  .js .nav-links li + li { border-top: 1px solid rgba(244, 239, 230, .08); }
  .js .nav-links a { font: 600 1.7rem/1 var(--serif); letter-spacing: 0; text-transform: none; min-height: 60px; width: 100%; background: none; }
}
@media (min-width: 900px) {
  .site-nav { order: 0; }
  .nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); margin-right: 1.25rem; }
}

.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transform-origin: left; transform: scaleX(0); will-change: transform;
}
/* Where supported, the browser drives the bar straight from the scroll position
   (no JavaScript, so it can't lag or stutter). Others get a JS fallback. */
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: scroll-progress linear both; animation-timeline: scroll(root block); }
  @keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.no-js .scroll-progress { display: none; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: max(600px, calc(100svh - var(--bar-h)));
  display: flex; align-items: flex-end;
  color: var(--on-dark);
  background: var(--jade-ink);
  overflow: hidden; overflow: clip;
}
@media (min-width: 768px) {
  .hero { min-height: clamp(640px, 100svh, 980px); }
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; }
.hero-zoom { position: absolute; inset: 0; isolation: isolate; }
.hero-zoom picture, .hero-zoom img { width: 100%; height: 100%; }
.hero-zoom img { object-fit: cover; object-position: 30% 50%; }
@media (min-width: 768px) { .hero-zoom img { object-position: 50% 50%; } }
.shine-photo--hero { display: none; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
@media (min-width: 768px) { .shine-photo--hero { display: block; } }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 43, 42, .55) 0%, rgba(18, 43, 42, 0) 22%),
    linear-gradient(0deg, rgba(18, 43, 42, .97) 0%, rgba(18, 43, 42, .9) 38%, rgba(18, 43, 42, .62) 58%, rgba(18, 43, 42, .2) 76%, rgba(18, 43, 42, 0) 88%);
}
@media (min-width: 900px) {
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(18, 43, 42, .55) 0%, rgba(18, 43, 42, 0) 22%),
      linear-gradient(0deg, rgba(18, 43, 42, .95) 0%, rgba(18, 43, 42, .6) 34%, rgba(18, 43, 42, 0) 62%),
      linear-gradient(90deg, rgba(18, 43, 42, .55) 0%, rgba(18, 43, 42, 0) 55%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-zoom { animation: hero-zoom 24s var(--ease) both; transform-origin: 60% 40%; }
  .hero-content > * { animation: rise .9s var(--ease) both; }
  .hero-content > :nth-child(2) { animation-delay: .06s; }
  .hero-content > :nth-child(3) { animation-delay: .12s; }
  .hero-content > :nth-child(4) { animation-delay: .18s; }
  .hero-content > :nth-child(5) { animation-delay: .24s; }
  .hero-content > :nth-child(6) { animation-delay: .3s; }
}
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
/* transform only — text is visible from the first frame */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }

.hero-content { padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(1.75rem, 5vh, 4.5rem); }
.now-open {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem .45rem .75rem; margin-bottom: 1.25rem;
  border: 1px solid rgba(201, 162, 77, .6); border-radius: 999px;
  background: rgba(18, 43, 42, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 700 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi);
}
.now-open[hidden] { display: none; }
.now-open-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 0 rgba(228, 196, 122, .7); }
@media (prefers-reduced-motion: no-preference) {
  .now-open-dot { animation: pulse 2.2s ease-out infinite; }
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(228, 196, 122, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(228, 196, 122, 0); } }

.hero-title { font-size: clamp(3.4rem, 1.6rem + 9vw, 8rem); line-height: .9; letter-spacing: -.015em; color: var(--cream); text-wrap: balance; }
.hero-title-qm { color: var(--gold); font-style: italic; padding-right: .04em; }
.hero-sub {
  margin-top: .9rem;
  font: 600 clamp(.92rem, .85rem + .35vw, 1.1rem)/1.3 "Cinzel", var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi);
}
.hero-lede { margin-top: 1.1rem; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; max-width: 34ch; color: rgba(244, 239, 230, .9); }
.hero .btn-row { margin-top: 1.75rem; }
.hero-note { margin-top: 1.1rem; font-size: .9rem; letter-spacing: .04em; color: var(--on-dark-soft); }
@media (max-width: 400px) {
  .hero .btn { width: 100%; }
  .btn--lg { --btn-pad-x: 1.2rem; letter-spacing: .05em; font-size: .8rem; }
}
/* Phones: the bottom bar already has Book / Call / Directions, so the hero and
   header drop their duplicates and the photo gets more room. */
@media (max-width: 767px) {
  .header-book, .hero .btn-row, .hero-note { display: none; }
  .hero-title { font-size: min(12.6vw, 3.6rem); white-space: nowrap; line-height: 1; }
  .hero-sub { font-size: min(3.5vw, .95rem); letter-spacing: .12em; margin-top: .7rem; }
  .hero-lede { font-size: 1.02rem; margin-top: .8rem; max-width: 30ch; }
  .now-open { margin-bottom: .9rem; font-size: .66rem; padding: .4rem .8rem .4rem .7rem; }
  .hero-content { padding-bottom: 2.25rem; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(18, 43, 42, .55) 0%, rgba(18, 43, 42, 0) 18%),
      linear-gradient(0deg, rgba(18, 43, 42, .96) 0%, rgba(18, 43, 42, .82) 24%, rgba(18, 43, 42, .35) 42%, rgba(18, 43, 42, 0) 58%);
  }
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-grid { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.about-crest { position: relative; justify-self: center; width: min(64vw, 300px); }
@media (min-width: 1024px) { .about-crest { width: 420px; } }
.crest-halo {
  position: absolute; inset: -18%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 77, .28) 0%, rgba(201, 162, 77, .08) 40%, transparent 68%);
}
.about-crest .shine { position: relative; z-index: 1; }
.about-crest img { width: 100%; }
.about-crest::after {
  content: ""; position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -5%; height: 14%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
}
.about-copy h2 { margin-bottom: 1.4rem; }
.about-lead { font: 600 clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem)/1.2 var(--serif); color: var(--cream); margin-bottom: 1.1rem; }
.about-lead strong { color: var(--gold); font-weight: 600; font-style: italic; }
.about-copy p:not(.about-lead):not(.eyebrow) { color: var(--on-dark-soft); max-width: 58ch; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.75rem; }
.chips li {
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid rgba(201, 162, 77, .38); background: rgba(18, 43, 42, .35);
  font-size: .86rem; color: var(--cream);
}

/* =========================================================================
   SERVICES
   ========================================================================= */
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; grid-template-areas: "hair kids" "hair beard" "extras extras"; }
  .svc-group:nth-child(1) { grid-area: hair; }
  .svc-group:nth-child(2) { grid-area: kids; }
  .svc-group:nth-child(3) { grid-area: beard; }
  .svc-group:nth-child(4) { grid-area: extras; }
  .svc-group:nth-child(4) .svc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .svc-group:nth-child(4) .svc-list li:nth-child(2) { border-top-color: rgba(201, 162, 77, .55); border-top-style: solid; }
}
@media (min-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "hair kids extras" "hair beard extras"; }
  .svc-group:nth-child(4) .svc-list { display: block; }
  .svc-group:nth-child(4) .svc-list li:nth-child(2) { border-top: 1px dashed rgba(30, 63, 61, .2); }
}
.svc-group {
  position: relative; padding: 1.75rem 1.5rem 1.5rem;
  background: #FBF8F2; border: 1px solid rgba(30, 63, 61, .12); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -32px rgba(18, 43, 42, .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.svc-group::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, rgba(201, 162, 77, 0) 0%, var(--gold) 22%, var(--gold-hi) 50%, var(--gold) 78%, rgba(201, 162, 77, 0) 100%);
  opacity: .45; transition: opacity .45s var(--ease);
}
/* hover on desktop; on touch screens JS adds .is-active to the card in the middle of the screen */
.svc-group.is-active { transform: translateY(-4px); border-color: rgba(201, 162, 77, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 28px 50px -30px rgba(18, 43, 42, .55); }
.svc-group.is-active::before { opacity: 1; }
@media (hover: hover) {
  .svc-group:hover { transform: translateY(-4px); border-color: rgba(201, 162, 77, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 28px 50px -30px rgba(18, 43, 42, .55); }
  .svc-group:hover::before { opacity: 1; }
}
.svc-group h3 { display: flex; align-items: baseline; gap: .8rem; font-size: 1.95rem; color: var(--jade-deep); }
.svc-num { font: 700 .72rem/1 var(--sans); letter-spacing: .18em; color: var(--jade); }
.svc-blurb { margin-top: .5rem; font-size: .95rem; color: var(--ink-soft); }
.svc-list { margin-top: 1.1rem; }
.svc-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
  padding: .8rem 0; border-top: 1px dashed rgba(30, 63, 61, .2);
  font-weight: 700; font-size: 1rem; color: var(--ink);
  position: relative; transform-origin: left center;
  /* leaving: wait for the gold tick to fold away before sliding back */
  transition: padding .35s var(--ease) .14s, color .25s, transform .35s var(--ease) .14s;
}
.svc-list li::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1.15em; border-radius: 2px;
  background: var(--gold); transform: translateY(-50%) scaleY(0); transition: transform .14s ease-in;
}
.svc-list li.is-focus { padding-left: .7rem; padding-right: .8rem; color: var(--jade-deep); transform: scale(1.03); }
.svc-list li.is-focus::after { transform: translateY(-50%) scaleY(1); }
/* arriving: slide out right away, then the tick grows in */
.svc-list li.is-focus { transition-delay: 0s !important; }
.svc-list li.is-focus::after { transition: transform .3s var(--ease) .08s; }
.svc-list li:first-child { border-top-color: rgba(201, 162, 77, .55); border-top-style: solid; }
@media (hover: hover) {
  .svc-list li:hover { padding-left: .7rem; color: var(--jade-deep); }
  .svc-list li:hover::after { transform: translateY(-50%) scaleY(1); transition: transform .3s var(--ease) .08s; }
  .svc-list li:hover { transition-delay: 0s !important; }
}
.svc-note { font-weight: 400; font-size: .88rem; color: var(--ink-soft); }

/* =========================================================================
   BARBERS
   ========================================================================= */
.barber-list {
  width: min(880px, 100% - var(--gutter) * 2); margin-inline: auto; padding-top: 1rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
}
.barber-card { position: relative; text-align: center; }
.barber-name { margin-top: 1.3rem; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.1rem); color: var(--cream); }
.barber-role { margin-top: .4rem; font: 700 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
@media (min-width: 600px) { .barber-role { letter-spacing: .24em; } }
.barber-bio { margin-top: .75rem; color: var(--on-dark-soft); font-size: .98rem; }
.barber-bio:empty { display: none; }
.barber-ig { display: inline-flex; min-height: 44px; align-items: center; margin-top: .25rem; color: var(--gold); font-weight: 700; text-decoration: none; }
.barber-ig[hidden] { display: none; }
.barber-initial { display: none; }

/* Circular portrait, framed like the round lit mirrors at each station */
.avatar {
  margin: 0 auto; width: clamp(92px, 25vw, 148px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; overflow: clip; background: var(--jade-deep);
}
.avatar picture, .avatar img { display: block; width: 100%; height: 100%; }
.avatar img { object-fit: cover; }
.avatar.mirror {
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .55), 0 0 0 6px var(--jade-ink), 0 0 0 7px rgba(201, 162, 77, .2);
  transition: box-shadow 1.2s var(--ease);
}
.avatar.mirror.is-lit, .no-js .avatar.mirror {
  box-shadow:
    0 0 0 2px rgba(255, 214, 150, .9),
    0 0 0 6px var(--jade-ink),
    0 0 0 8px rgba(255, 206, 130, .75),
    0 0 22px 6px rgba(255, 196, 110, .3),
    0 0 50px 8px rgba(255, 196, 110, .12);
}

/* "mirror" frame: echoes the round lit mirrors at each station. It glows on
   ("lights on") as the card scrolls into view. */
.ph.mirror {
  border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .55), 0 0 0 7px rgba(18, 43, 42, 1), 0 0 0 8px rgba(201, 162, 77, .18);
  transition: box-shadow 1.2s var(--ease);
}
.ph.mirror.is-lit, .no-js .ph.mirror {
  box-shadow:
    0 0 0 1px rgba(255, 214, 150, .9),
    0 0 0 7px rgba(18, 43, 42, 1),
    0 0 0 9px rgba(255, 206, 130, .75),
    0 0 26px 8px rgba(255, 196, 110, .32),
    0 0 70px 10px rgba(255, 196, 110, .14);
}

/* =========================================================================
   PHOTO PLACEHOLDERS
   ========================================================================= */
.ph { position: relative; margin: 0; overflow: hidden; overflow: clip; background: var(--jade-deep); border-radius: var(--radius); }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--1x1 { aspect-ratio: 1; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph > picture, .ph > img { display: block; width: 100%; height: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph[data-placeholder] { border: 1px solid rgba(201, 162, 77, .7); }
.ph[data-placeholder]::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hex); background-size: 42px 73px; opacity: .06;
}
.mirror.ph[data-placeholder] { border: 0; }
.ph-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem; text-align: center;
}
.ph-icon { width: 34px; height: 34px; color: var(--gold); }
.ph-label { font: 700 .7rem/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-variant-caps: all-small-caps; font-size: .9rem; letter-spacing: .14em; }

/* One switch: <body class="hide-empty-photos"> hides every unfilled slot. */
.hide-empty-photos [data-placeholder] { display: none !important; }
.hide-empty-photos .cuts-grid:not(:has(> :not([data-placeholder]))) { display: none; }
/* three filled cuts: keep them in one row on phones too, so none sits alone */
.hide-empty-photos .cuts-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 768px) { .hide-empty-photos .cuts-grid { gap: 1rem; } }
.hide-empty-photos .cuts-title { margin-bottom: 1.25rem; }

/* =========================================================================
   EXPERIENCE
   ========================================================================= */
.exp-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 960px) { .exp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.exp-photos { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: .9rem; align-items: start; }
.exp-photo { margin: 0; position: relative; isolation: isolate; }
.exp-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.exp-photo--wash .shine-frame { border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); box-shadow: 0 30px 50px -30px rgba(18, 43, 42, .7); }
.exp-photo--coffee { margin-top: 28%; }
.exp-photo--coffee img { border-radius: var(--radius); box-shadow: 0 30px 50px -30px rgba(18, 43, 42, .7); }
.exp-photo--wash::after {
  content: ""; position: absolute; inset: -10px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(201, 162, 77, .7);
  border-radius: 50% 50% calc(var(--radius) + 8px) calc(var(--radius) + 8px) / 40% 40% calc(var(--radius) + 8px) calc(var(--radius) + 8px);
}
.shine-photo--wash-logo { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

.amenities { display: grid; gap: .5rem; }
@media (min-width: 560px) { .amenities { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } }
.amenity { display: flex; gap: 1rem; align-items: center; padding: .75rem 0; }
.amenity h3 { font-size: 1.5rem; color: var(--jade-deep); }
.amenity p { margin-top: .15rem; color: var(--ink-soft); font-size: .96rem; }
.amenity-icon {
  flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jade-deep); box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px rgba(201, 162, 77, .55);
  color: var(--gold);
}
.amenity-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* icons draw themselves in */
.js .amenity-icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .15s; }
.js .amenity.is-in .amenity-icon svg > * { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .amenity.is-in .steam { animation: steam 2.8s ease-in-out 1.4s infinite; }
}
@keyframes steam { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-1.2px); opacity: .45; } }

/* =========================================================================
   THE SHOP (gallery)
   ========================================================================= */
.shop-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shop-item--wide { grid-column: 1 / -1; }
.shop-link {
  position: relative; display: block; height: 100%; border-radius: var(--radius); overflow: hidden; overflow: clip;
  background: var(--jade-deep); cursor: zoom-in;
}
.shop-link .shine-frame { height: 100%; transition: transform .8s var(--ease); }
.shop-link picture, .shop-link img { width: 100%; height: 100%; }
.shop-link img { object-fit: cover; }
.shop-item--wide .shop-link { aspect-ratio: 4 / 3; }
.shop-item--wash .shop-link, .shop-item--coffee .shop-link { aspect-ratio: 4 / 5; }
.shop-item--coffee img { object-position: 50% 70%; }
.shop-item--extra { grid-column: 1 / -1; }
.shop-item--extra .shop-link { aspect-ratio: 4 / 3; }
.shop-zoom {
  position: absolute; right: .75rem; bottom: .75rem; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--jade-ink); background: rgba(244, 239, 230, .9);
  transform: scale(.9); opacity: .85; transition: transform .3s var(--ease), opacity .3s, background .3s;
}
.shop-zoom svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .shop-link:hover .shine-frame { transform: scale(1.04); }
  .shop-link:hover .shop-zoom { transform: scale(1); opacity: 1; background: var(--gold); }
}
@media (min-width: 900px) {
  /* left column sets the row heights; the right column fills them */
  .shop-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: clamp(340px, 36vw, 500px) clamp(280px, 27vw, 380px);
    grid-template-areas: "wide extra" "wash coffee"; gap: 1rem;
  }
  .shop-grid .shop-link { aspect-ratio: auto; height: 100%; }
  .shop-item--wide { grid-area: wide; }
  .shop-item--extra { grid-area: extra; }
  .shop-item--wash { grid-area: wash; }
  .shop-item--coffee { grid-area: coffee; }
  .shop-item--extra img { object-position: 35% 45%; }
  .shop-item--coffee img { object-position: 50% 62%; }
}
.shine-photo--extra { -webkit-mask-image: url("/img/shop-extra-mask.png"); mask-image: url("/img/shop-extra-mask.png"); }

/* ---- See it in motion: shop video + Instagram reel ---- */
.motion { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .motion { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; } }
.motion-title { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); color: var(--cream); margin-bottom: .6rem; }
.motion-copy p { color: var(--on-dark-soft); max-width: 38ch; margin-bottom: .25rem; }
.motion-media { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (min-width: 900px) { .motion-media { grid-template-columns: 250px 250px; gap: 1.25rem; } }
.motion-frame { position: relative; margin: 0; }
.shop-video, .reel-card {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius);
  background: var(--jade-deep); object-fit: cover;
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .45), 0 30px 50px -30px rgba(0, 0, 0, .7);
}
.motion-cap { margin-top: .7rem; text-align: center; font: 700 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-soft); }
.video-sound {
  position: absolute; right: .6rem; top: .6rem; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--cream); background: rgba(18, 43, 42, .7); border: 1px solid rgba(244, 239, 230, .3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.video-sound[hidden] { display: none; }
.video-sound:hover { border-color: var(--gold); }
.video-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.video-sound .icon-sound, .video-sound[aria-pressed="true"] .icon-muted { display: none; }
.video-sound[aria-pressed="true"] .icon-sound { display: block; }

.reel-card {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  padding: 1rem; text-align: center; text-decoration: none; color: var(--cream);
  background: radial-gradient(circle at 50% 38%, rgba(201, 162, 77, .2), transparent 62%), var(--jade-deep);
}
.reel-card > :not(.hex-bg) { position: relative; }
.reel-mark { width: clamp(52px, 14vw, 72px); }
.reel-mark img { width: 100%; height: auto; }
.reel-play {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: var(--jade-ink); background: linear-gradient(180deg, #DDBC6C, var(--gold) 60%, #BC9442);
  box-shadow: 0 0 0 6px rgba(201, 162, 77, .18), 0 10px 24px -10px rgba(201, 162, 77, .9);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.reel-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
@media (hover: hover) { .reel-card:hover .reel-play { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(201, 162, 77, .2), 0 10px 24px -10px rgba(201, 162, 77, .9); } }
.reel-label { font: 600 clamp(1.2rem, 1rem + 1vw, 1.55rem)/1.1 var(--serif); }
.reel-handle { font-size: .8rem; color: var(--on-dark-soft); }

/* Instagram embed, opened in a dialog on demand (built by JS) */
.reel-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 24, 23, .96); color: var(--cream);
}
.reel-dialog::backdrop { background: rgba(10, 24, 23, .7); }
.reel-dialog[open] { display: grid; place-items: start center; overflow-y: auto; }
.reel-dialog-inner { width: min(440px, 100% - 24px); padding: 72px 0 32px; }
.reel-dialog .instagram-media { margin: 0 auto !important; }
.reel-dialog .lb-close { position: fixed; }
.reel-dialog-fallback { margin-top: 1rem; text-align: center; }

.cuts { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.cuts-title { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); color: var(--cream); margin-bottom: 1.25rem; }
.cuts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .cuts-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.cuts-link { margin-top: 1.25rem; }
.cuts-link .text-link { color: var(--gold); font-size: 1.02rem; }

/* Lightbox (built by JS) */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 24, 23, .96); color: var(--cream);
}
.lightbox::backdrop { background: rgba(10, 24, 23, .7); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-in .3s var(--ease); }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-stage { position: relative; display: grid; place-items: center; padding: 64px 12px 8px; min-height: 0; }
.lb-stage picture { display: contents; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.lb-caption { padding: .75rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: .92rem; color: var(--on-dark-soft); }
.lb-btn {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(244, 239, 230, .3); background: rgba(18, 43, 42, .7); color: var(--cream); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lb-btn:hover { background: var(--jade-deep); border-color: var(--gold); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%) scaleX(-1); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font: 700 .72rem/1 var(--sans); letter-spacing: .2em; color: var(--on-dark-soft); }

/* =========================================================================
   VISIT
   ========================================================================= */
.visit-grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .visit-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.visit-location { display: grid; gap: 1.5rem; }
.visit-location .ph--16x9 { border-radius: var(--radius); }
.storefront .shine-frame { height: 100%; }
.storefront picture, .storefront img { width: 100%; height: 100%; }
.storefront img { object-fit: cover; }
.shine-photo--storefront { -webkit-mask-image: url("/img/storefront-mask.png"); mask-image: url("/img/storefront-mask.png"); }
.address-block { display: flex; gap: 1rem; align-items: flex-start; }
.address-pin { flex: none; width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--jade-deep); color: var(--gold); }
.address-name { font-size: 2rem; color: var(--jade-deep); margin-bottom: .35rem; }
.address-block address { font-size: 1.1rem; line-height: 1.5; }
.address-phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--jade-deep); text-underline-offset: 4px; }
.address-notes { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .94rem; color: var(--ink-soft); }
.address-notes li { display: inline-flex; align-items: center; gap: .5rem; }
.address-notes li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }

.map-card { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; overflow: clip; background: var(--jade-deep); }
@media (max-width: 559px) { .map-card { aspect-ratio: 4 / 3; } }
.map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-facade { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.25rem; text-align: center; color: var(--cream); }
.hex-bg--strong { opacity: .13; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 75%); }
.map-pin { position: relative; width: 44px; height: 44px; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .map-card:hover .map-pin { animation: bob 1s var(--ease) infinite alternate; }
}
@keyframes bob { to { transform: translateY(-5px); } }
.map-address { position: relative; font: 600 1.35rem/1.25 var(--serif); }
.map-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.map-actions [hidden] { display: none; }

@media (min-width: 960px) {
  .visit-location {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    grid-template-areas: "photo photo" "addr map" "btns map";
    gap: 1.25rem 1.75rem; align-content: start;
  }
  .visit-location .storefront { grid-area: photo; }
  .visit-location .address-block { grid-area: addr; align-self: end; }
  .visit-location > .btn-row { grid-area: btns; align-self: start; }
  .visit-location .map-card { grid-area: map; aspect-ratio: auto; min-height: 230px; }
  .visit-location .map-address { display: none; }
  .visit-location .map-actions { flex-direction: column; align-items: stretch; width: min(100%, 240px); }
  .hours-table th, .hours-table td { padding-block: .62rem; }
}

.hours-card {
  position: relative; overflow: hidden; overflow: clip;
  padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radius);
  background: var(--jade-deep); color: var(--on-dark);
  box-shadow: 0 30px 60px -36px rgba(18, 43, 42, .9);
}
.hours-card::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201, 162, 77, .45); border-radius: calc(var(--radius) - 6px); pointer-events: none;
}
.hours-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.hours-head h3 { font-size: 2rem; color: var(--gold); }
.open-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 .78rem/1.2 var(--sans); letter-spacing: .06em; color: var(--cream);
}
.open-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E07A5F; flex: none; }
.open-status.is-open::before { background: #7FD1A8; box-shadow: 0 0 0 4px rgba(127, 209, 168, .18); }
.open-status[hidden] { display: none; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours-table th, .hours-table td { padding: .7rem .6rem; text-align: left; border-top: 1px solid rgba(244, 239, 230, .1); }
.hours-table th { font-weight: 400; color: var(--on-dark-soft); white-space: nowrap; }
.hours-table td { text-align: right; font-weight: 700; color: var(--cream); white-space: nowrap; }
.hours-table tr:first-child th, .hours-table tr:first-child td { border-top: 0; }
.hours-table tr.is-today { background: rgba(201, 162, 77, .16); }
.hours-table tr.is-today th { color: var(--gold-hi); font-weight: 700; }
.hours-table tr.is-today th::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .55rem; border-radius: 50%; background: var(--gold-hi); vertical-align: .12em; }
.hours-table tr.is-today td { color: var(--gold-hi); }
.hours-table tr.is-today > :first-child { border-radius: 8px 0 0 8px; }
.hours-table tr.is-today > :last-child { border-radius: 0 8px 8px 0; }
.hours-holiday { margin-top: 1rem; font-size: .9rem; color: var(--on-dark-soft); }

.fine-print { margin: 1.5rem 0 0; display: grid; gap: .9rem; }
.fine-print div { display: grid; gap: .1rem; padding-left: 1rem; border-left: 2px solid var(--gold); }
.fine-print dt { font: 700 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--jade-deep); }
.fine-print dd { margin: 0; font-size: .96rem; color: var(--ink-soft); }

/* =========================================================================
   REVIEW BAND
   ========================================================================= */
.review-band {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
  background:
    radial-gradient(80% 120% at 50% 120%, rgba(201, 162, 77, .2), transparent 60%),
    var(--jade-deep);
  color: var(--on-dark); text-align: center;
  border-block: 1px solid rgba(201, 162, 77, .3);
}
.review-band .hex-bg { opacity: .06; -webkit-mask-image: none; mask-image: none; }
.hex-bg--glow {
  opacity: .5 !important;
  -webkit-mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 115%), #000 0%, transparent 100%) !important;
          mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 115%), #000 0%, transparent 100%) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.08v16.17l-14 8.08-14-8.08V8.08ZM14 32.33V48.5' fill='none' stroke='%23FFF6DE' stroke-width='.7'/%3E%3C/svg%3E");
}
.no-js .hex-bg--glow { display: none; }
.review-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.review-title { font-size: clamp(2.4rem, 1.7rem + 3vw, 4rem); color: var(--cream); }
.review-text { max-width: 36ch; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--on-dark-soft); margin-bottom: .75rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--jade-ink); color: var(--on-dark-soft); padding-top: clamp(3.5rem, 3rem + 3vw, 5.5rem); }
.footer-grid { display: grid; gap: 2.25rem; justify-items: center; text-align: center; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: auto 1fr 1fr; justify-items: start; text-align: left; align-items: center; gap: 3rem 4rem; }
}
.footer-crest { width: 220px; }
.footer-crest img { width: 220px; }
.footer-name { font-size: 2.2rem; color: var(--gold); margin-bottom: .75rem; }
.footer-head { font: 700 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.footer-col { display: grid; gap: .35rem; justify-items: inherit; }
.footer-col a { color: var(--cream); text-underline-offset: 4px; display: inline-flex; min-height: 44px; align-items: center; }
.footer-address { color: var(--cream); line-height: 1.55; }
.footer-hours { line-height: 1.7; }
.socials { display: flex; gap: .5rem; margin: .75rem 0 .25rem; }
.socials a {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(201, 162, 77, .45); color: var(--gold);
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.socials svg { width: 21px; height: 21px; }
@media (hover: hover) { .socials a:hover { background: var(--gold); color: var(--jade-ink); transform: translateY(-2px); } }
.footer-base { margin-top: 3rem; padding: 1.5rem 0 2rem; border-top: 1px solid rgba(244, 239, 230, .1); text-align: center; font-size: .86rem; }

/* =========================================================================
   PHONE ACTION BAR
   ========================================================================= */
.action-bar { display: none; }
@media (max-width: 767px) {
  .action-bar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 43, 42, .98);
    border-top: 1px solid rgba(201, 162, 77, .3);
  }
  .action-bar a {
    min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .45rem;
    border-radius: 12px; text-decoration: none;
    font: 700 .78rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
    color: var(--cream); border: 1px solid rgba(244, 239, 230, .2);
  }
  .action-bar a:active { transform: scale(.97); }
  .action-bar svg { width: 18px; height: 18px; flex: none; }
  .action-bar .action-book { color: var(--jade-ink); border: 0; background: linear-gradient(180deg, #DDBC6C, var(--gold) 60%, #BC9442); }
}

/* =========================================================================
   404
   ========================================================================= */
body:has(.page-404) { padding-bottom: 0; }
.page-404 { min-height: 100svh; display: grid; place-items: center; background: var(--jade-deep); color: var(--on-dark); text-align: center; position: relative; overflow: hidden; overflow: clip; padding: 3rem var(--gutter); }
.page-404 .hex-bg { opacity: .1; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); }
.page-404-inner { position: relative; display: grid; justify-items: center; gap: 1rem; max-width: 520px; }
.page-404-inner > a { display: block; border-radius: 50%; }
.page-404 .shine { width: min(60vw, 240px); margin-bottom: .5rem; }
.page-404 .shine img { width: 100%; }
.page-404 h1 { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); color: var(--cream); }
.page-404 p { color: var(--on-dark-soft); }
.page-404 .btn-row { justify-content: center; margin-top: .75rem; }

/* =========================================================================
   Reduced motion: switch everything off
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .drift-inner, .js .drift-float, .js .drift-float-rev, .js .hero-media { scale: none; translate: none; }
  .js .hero-content { translate: none; opacity: 1; }
  .js .reveal .eyebrow::before { width: 28px; }
  .js .svc-group.reveal .svc-list li, .js .about-copy.reveal .chips li { opacity: 1; translate: none; }
  .svc-list li.is-focus { transform: none; }
  .js .amenity-icon svg > * { stroke-dashoffset: 0; }
  .shine-fx, .shine-photo, .twinkle, .hex-bg--glow { display: none; }
  .avatar.mirror { box-shadow: 0 0 0 2px rgba(255, 214, 150, .9), 0 0 0 6px var(--jade-ink), 0 0 0 8px rgba(255, 206, 130, .75), 0 0 22px 6px rgba(255, 196, 110, .3); }
  .ph.mirror { box-shadow: 0 0 0 1px rgba(255, 214, 150, .9), 0 0 0 7px rgba(18, 43, 42, 1), 0 0 0 9px rgba(255, 206, 130, .75), 0 0 26px 8px rgba(255, 196, 110, .32); }
}