/* Rite Cut Barber Shop — global styles
   Ported from the Claude Design source (Rite Cut Barber Shop.dc.html). */

/* The stylesheet had no box-sizing rule at all, so every `width: 100%` control
   with padding on it — the two booking selects, the name and phone fields, the
   Hold my spot button — came out 100% *plus* its padding and border and hung
   ~30px past the edge of the card holding it. Visible on any phone.

   Set globally rather than patched onto those few selectors: the page is styled
   almost entirely with inline `padding`, so the next control added would land
   the same bug. Only five elements in the document set an explicit width or
   height alongside padding, and all five were checked against the rendered page
   after this went in. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #140E09;
  color: #F4EADA;
  -webkit-font-smoothing: antialiased;
}
a { color: #F4EADA; }
a:hover { color: #E8404F; }
::selection { background: #D62839; color: #FFF6EA; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #E8404F;
  outline-offset: 3px;
  border-radius: 8px;
}
[hidden] { display: none !important; }

/* Read by screen readers, invisible on screen. Used for the labels on the
   hold-my-spot fields, which are shown visually by their placeholders — and a
   placeholder is not a label: it is gone the moment someone starts typing, so
   anyone who looks away mid-form loses what the field was for. */
.rc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* ---------- Keyframes ---------- */
@keyframes rcKenBurns { from { transform: scale(1.03); } to { transform: scale(1.14) translate(-2.2%, -1.6%); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.rc-service-mode {
  display: inline-flex;
  align-self: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(244,234,218,0.22);
  border-radius: 999px;
  background: rgba(244,234,218,0.04);
  white-space: nowrap;
}
.rc-service-mode-btn {
  min-height: 42px;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #C7B49B;
  font: 700 13px Barlow, system-ui, sans-serif;
  cursor: pointer;
}
.rc-service-mode-btn.active { background: #D62839; color: #FFF6EA; }
@media (max-width: 700px) {
  .rc-service-mode { display: flex; }
  .rc-service-mode-btn { flex: 1; }
}

/* ---------- Hero backdrop ----------
   The hero takes one of three backings, set by js/hero.js:
     video       — a looping muted clip of the shop
     image       — a still photo
     procedural  — the layered warm-light scene below, no asset needed
   The procedural layers always render underneath, so a slow-loading or
   missing photo reveals something intentional rather than a black box. */

.rc-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #140E09;
}

.rc-hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Deep warm floor — the room behind the light. */
.rc-hero-base {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(62% 52% at 52% 36%, #59371C 0%, #3A2412 38%, #21150C 70%, #140E09 100%);
}

/* Key light: the warm pool a shop window throws late in the day. */
.rc-hero-key {
  position: absolute;
  inset: -25%;
  background: radial-gradient(46% 52% at 72% 28%, rgba(255, 170, 92, 0.6), rgba(255, 128, 46, 0.2) 44%, transparent 74%);
  mix-blend-mode: screen;
  animation: rcDriftA 34s ease-in-out infinite;
}

/* Fill light: a lower, redder bounce off the floor. */
.rc-hero-fill {
  position: absolute;
  inset: -25%;
  background: radial-gradient(48% 46% at 20% 76%, rgba(224, 74, 62, 0.42), rgba(214, 40, 57, 0.1) 44%, transparent 72%);
  mix-blend-mode: screen;
  animation: rcDriftB 46s ease-in-out infinite;
}

/* A cold rim from the street, so the warm side has something to read against. */
.rc-hero-rim {
  position: absolute;
  inset: -15%;
  background: radial-gradient(40% 56% at 4% 14%, rgba(78, 132, 200, 0.34), transparent 64%);
  mix-blend-mode: screen;
  animation: rcDriftB 58s ease-in-out infinite reverse;
}

/* Barber-pole diagonal, dialled almost to nothing — texture, not pattern. */
.rc-hero-stripe {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg,
    rgba(214, 40, 57, 0.05) 0 10px,
    rgba(244, 234, 218, 0.035) 10px 17px,
    rgba(62, 111, 176, 0.04) 17px 27px,
    rgba(244, 234, 218, 0.035) 27px 34px);
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* Film grain. Inline SVG turbulence — no network request. */
.rc-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Pull focus to the centre where the wordmark sits. */
.rc-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(68% 52% at 50% 50%, transparent 0%, rgba(20, 14, 9, 0.22) 64%, rgba(20, 14, 9, 0.66) 100%);
}

/* Merge the hero into the page below it. */
.rc-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 14, 9, 0.42) 0%,
    rgba(20, 14, 9, 0.1) 22%,
    rgba(20, 14, 9, 0.14) 52%,
    rgba(20, 14, 9, 0.56) 78%,
    #140E09 100%);
}

/* Photo/video backing sits above the procedural scene but keeps its warmth
   by letting the light layers show through at the edges. */
.rc-hero-media[data-hero-mode="image"] .rc-hero-key,
.rc-hero-media[data-hero-mode="video"] .rc-hero-key { opacity: 0.55; }
.rc-hero-media[data-hero-mode="image"] .rc-hero-stripe,
.rc-hero-media[data-hero-mode="video"] .rc-hero-stripe { opacity: 0; }

#heroImage {
  object-position: 60% 42%;
  transform-origin: 58% 45%;
  animation: rcKenBurns 24s ease-in-out infinite alternate;
  filter: brightness(1.02) saturate(1.06) contrast(1.02);
}

@keyframes rcDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5%, 4%, 0) scale(1.14); }
}
@keyframes rcDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(6%, -3%, 0) scale(1); }
}

/* ================= WEB APP 3-VIEW SWITCHER ================= */
/* ---------- Header call button ----------
   Full pill on a wide screen. On a phone the label was eating 36% of the
   viewport and pushing the logo off centre (84px of room one side, 164px the
   other), so it collapses to a round icon button — same single tap to dial,
   a quarter of the width, and the wordmark actually centres. 44px keeps it a
   comfortable tap target; the aria-label carries the meaning the text used to. */
.rc-call-btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}

.rc-call-btn svg { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .rc-call-label { display: none; }
  .rc-call-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .rc-call-btn svg { width: 16px; height: 16px; }
}

/* The nav is a floating pill, not a chrome band. The bar itself is only a
   sticky positioning frame — no background, no border — so the hero runs into
   the content and the tabs ride over the top. pointer-events is off on the
   frame and back on for the pill, or the invisible gutters either side would
   swallow clicks once it sticks. */
.rc-app-nav-bar {
  position: sticky;
  /* Clears the fixed header, whatever height it currently is — js/app-views.js
     measures it into --rc-header-h. The fallback matches the desktop header. */
  top: calc(var(--rc-header-h, 108px) + 8px);
  z-index: 100;
  padding: 14px 16px;
  pointer-events: none;
}

/* Floating means it can sit over anything, so the dock carries its own
   legibility: solid enough to read on the wood, blurred behind. */
.rc-dock {
  pointer-events: auto;
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 13, 7, 0.74);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(244, 234, 218, 0.16);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.rc-app-nav-tabs {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
}

/* The selected-tab pill is one element that slides between tabs, the way a
   segmented control's thumb does, instead of a background that blinks from
   one button to the next. app-views.js positions it; without JS the
   .active background below still marks the tab. */
.rc-dock-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #D62839, #B01E2E);
  box-shadow: 0 4px 16px rgba(214, 40, 57, 0.4);
  pointer-events: none;
  transition: transform 420ms var(--rc-ease-ios), width 420ms var(--rc-ease-ios);
}
.rc-app-nav-tabs.has-thumb .rc-app-nav-tab { position: relative; z-index: 1; }
.rc-app-nav-tabs.has-thumb .rc-app-nav-tab.active { background: transparent; box-shadow: none; }

/* ---------- Phone: the dock goes to the bottom ----------
   The nav sat ~68px from the top, which is the least reachable part of a phone
   screen. Docked at the bottom it's under the thumb and the whole thing reads
   as an app. Fixed rather than sticky so it stays put while the page scrolls.
   The bottom padding folds in env(safe-area-inset-bottom) so it clears the iOS
   home indicator instead of sitting under it. */
@media (max-width: 899px) {
  .rc-app-nav-bar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .rc-dock {
    border-radius: 999px;
    padding: 5px;
  }

  /* Clear the dock so it never covers the last of the content. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

.rc-flink {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 4px;
}

.rc-app-nav-tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #C7B49B;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
  overflow: hidden;
}

/* Narrow screens: tighten so all four tabs stay on one row and reachable.
   (An earlier version needed 505px of tabs inside a 375px viewport, which
   pushed the last tab off-screen with no way to get to it.) */
@media (max-width: 520px) {
  .rc-app-nav-bar { padding: 10px 8px; }
  .rc-app-nav-tabs { gap: 2px; }
  .rc-app-nav-tab {
    padding: 10px 4px;
    font-size: 12px;
    letter-spacing: 0.01em;
  }
}

.rc-app-nav-tab:hover {
  color: #F4EADA;
  background: rgba(244, 234, 218, 0.08);
}

.rc-app-nav-tab.active {
  background: linear-gradient(135deg, #D62839, #B01E2E);
  color: #FFF6EA;
  box-shadow: 0 4px 16px rgba(214, 40, 57, 0.4);
}

/* App View Containers */
[data-app-view] {
  transition: opacity 250ms ease, transform 250ms ease;
}

[data-app-view][hidden] {
  display: none !important;
}

.rc-view-active {
  animation: rcViewFadeIn 420ms var(--rc-ease-ios) backwards;
}

@keyframes rcViewFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gallery hands off to the shop's actual work instead of displaying invented
   portfolio photos or loading a third-party embed into this page. */
/* ================= GALLERY — the work =================
   Built to feel like the Photos app rather than a web grid: a snapping shelf
   of big cards up top, square tiles below, and a viewer that grows out of the
   card you tapped. One easing curve everywhere — the iOS sheet curve — so the
   motion reads as one system. */
:root { --rc-ease-ios: cubic-bezier(0.32, 0.72, 0, 1); }

.rc-gallery-section { scroll-margin-top: 110px; padding: 24px 0 12px; }
.rc-gallery-head { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.rc-gallery-title {
  margin: 10px 0 0;
  color: #FFF6EA;
  font: 400 clamp(44px, 6vw, 74px)/0.95 'Bebas Neue', 'Arial Narrow', sans-serif;
  letter-spacing: 0.02em;
}
.rc-gallery-sub { max-width: 40ch; margin: 10px 0 0; color: #D9CCB9; font-size: 16px; line-height: 1.5; }

/* The shelf. scroll-padding lets the first and last card centre instead of
   pinning to the edge; the scrollbar is hidden because the cards themselves
   are the affordance, same as the App Store's Today feed. */
.rc-shelf {
  display: flex;
  gap: 14px;
  margin: 22px 0 0;
  padding: 14px 20px 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rc-shelf::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) {
  .rc-shelf { max-width: 1000px; margin-inline: auto; }
}

.rc-shot {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 300px);
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #1C130D;
  scroll-snap-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* --rc-k is written by gallery.js: 1 for the centred card, down to ~0.92
     at the edges, so the shelf has depth as it scrolls. */
  transform: scale(var(--rc-k, 1));
  transition: transform 280ms var(--rc-ease-ios), box-shadow 280ms ease;
}
.rc-shot::after {
  /* The 1px inner highlight has to sit above the photo, so it's an overlay
     rather than an inset shadow on the button. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.14), inset 0 0 0 1px rgba(255, 246, 234, 0.06);
  pointer-events: none;
}
.rc-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent; /* no alt-text flash on the dark tile before a lazy load */
  transition: transform 700ms var(--rc-ease-ios);
}
.rc-shot:hover img { transform: scale(1.04); }
.rc-shot:active {
  transform: scale(calc(var(--rc-k, 1) * 0.965));
  transition-duration: 90ms;
}
.rc-shot:focus-visible {
  outline: 3px solid #F4EADA;
  outline-offset: 3px;
}
.rc-shot-label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(20, 14, 9, 0.5);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.12);
  color: #FFF6EA;
  font: 600 13px/1.2 Barlow, system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-align: left;
}

/* Cards rise in one after another when the view opens. `backwards`, not
   `both`: a forwards fill would pin transform to the last keyframe and
   silently override the --rc-k scale from then on. */
.rc-view-active .rc-shot {
  animation: rcShotIn 560ms var(--rc-ease-ios) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes rcShotIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(var(--rc-k, 1)); }
}

/* The rest, as square tiles. */
.rc-shots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 960px;
  margin: 6px auto 0;
  padding: 0 20px;
}
.rc-shots-grid .rc-shot {
  width: auto;
  aspect-ratio: 1;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.rc-shots-grid .rc-shot-label {
  left: 8px; right: 8px; bottom: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .rc-shots-grid { gap: 8px; }
  .rc-shots-grid .rc-shot { border-radius: 14px; }
  .rc-shots-grid .rc-shot-label { display: none; }
}

.rc-gallery-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 40px);
  min-height: 46px;
  margin: 26px auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(244, 234, 218, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.1), 0 1px 0 rgba(0, 0, 0, 0.3);
  color: #F4EADA;
  font: 600 14px Barlow, system-ui, sans-serif;
  text-decoration: none;
  transition: background 160ms ease, transform 200ms var(--rc-ease-ios);
}
.rc-gallery-more:hover { background: rgba(244, 234, 218, 0.12); color: #FFF6EA; }
.rc-gallery-more:active { transform: scale(0.97); }
.rc-gallery-more span { font-size: 18px; line-height: 1; }

/* ---------- The viewer ----------
   Fixed over everything, including the dock. The stage is what animates:
   gallery.js sets its transform to the tapped card's rectangle, then lets
   the transition carry it to centre. */
.rc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overscroll-behavior: contain;
  /* Explicit layers. The blurred backdrop, the stage and the buttons are
     siblings, and leaving them at z-index auto let the backdrop-filter
     composite over the stage in some engines. */
  isolation: isolate;
}
.rc-lightbox[hidden] { display: none; }
.rc-lightbox-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10, 6, 3, 0.84);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  opacity: var(--rc-lb-fade, 0);
  transition: opacity 320ms ease;
}
.rc-lightbox.is-open .rc-lightbox-backdrop { --rc-lb-fade: 1; }
.rc-lightbox.is-dragging .rc-lightbox-backdrop { transition: none; }

.rc-lightbox-stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 640px, 78vh);
  aspect-ratio: 1;
  touch-action: none;
  will-change: transform;
  transform-origin: top left;
  transition: transform 440ms var(--rc-ease-ios), opacity 200ms ease;
}
.rc-lightbox.is-dragging .rc-lightbox-stage { transition: none; }
.rc-lightbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  background: #1C130D;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  user-select: none;
  -webkit-user-drag: none;
}
/* Swapping photos: the outgoing one slides off, the incoming one slides in
   from the other side. Short, so it never feels like a page transition. */
.rc-lightbox-img.is-leaving-left  { animation: rcLbLeave 180ms ease-in forwards; }
.rc-lightbox-img.is-leaving-right { animation: rcLbLeave 180ms ease-in forwards; --rc-dir: 1; }
.rc-lightbox-img.is-entering-left  { animation: rcLbEnter 300ms var(--rc-ease-ios) backwards; }
.rc-lightbox-img.is-entering-right { animation: rcLbEnter 300ms var(--rc-ease-ios) backwards; --rc-dir: 1; }
@keyframes rcLbLeave {
  to { opacity: 0; transform: translateX(calc(var(--rc-dir, -1) * -40px)) scale(0.96); }
}
@keyframes rcLbEnter {
  from { opacity: 0; transform: translateX(calc(var(--rc-dir, -1) * 40px)) scale(0.96); }
}

.rc-lightbox-caption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: #F4EADA;
  font: 600 14px Barlow, system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: var(--rc-lb-fade, 0);
  transition: opacity 320ms ease 80ms;
}
.rc-lightbox.is-open .rc-lightbox-caption { --rc-lb-fade: 1; }
.rc-lightbox-count { color: #97846C; }

.rc-lightbox-btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 234, 218, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.14);
  color: #FFF6EA;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: var(--rc-lb-fade, 0);
  transition: opacity 320ms ease 80ms, background 150ms ease, transform 200ms var(--rc-ease-ios);
}
.rc-lightbox.is-open .rc-lightbox-btn { --rc-lb-fade: 1; }
.rc-lightbox-btn svg { width: 20px; height: 20px; }
.rc-lightbox-btn:hover { background: rgba(244, 234, 218, 0.18); }
.rc-lightbox-btn:active { transform: scale(0.92); }
.rc-lightbox-btn:focus-visible { outline: 3px solid #F4EADA; outline-offset: 2px; }
.rc-lightbox-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.rc-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.rc-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.rc-lightbox-prev:active { transform: translateY(-50%) scale(0.92); }
.rc-lightbox-next:active { transform: translateY(-50%) scale(0.92); }
/* On a phone the photo is the control: swipe to move, drag down to close. */
@media (max-width: 700px), (pointer: coarse) {
  .rc-lightbox-prev, .rc-lightbox-next { display: none; }
}
html.rc-lb-lock, html.rc-lb-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rc-shot, .rc-shot img, .rc-lightbox-stage, .rc-lightbox-btn, .rc-gallery-more { transition: none; }
  .rc-view-active .rc-shot { animation: none; }
  .rc-lightbox-img[class*="is-"] { animation: none; }
}
}

/* ================= PRESS FEEL =================
   Every control squeezes the same way on press and springs back on release.
   Fast in (80ms), slow out on the iOS curve, so a tap feels acknowledged
   before the finger lifts. transition-property is set explicitly here because
   several of these rules used `all`, which would also animate layout. */
.rc-app-nav-tab,
.rc-service-mode-btn,
.rc-call-btn,
.rc-hero-call,
.rc-hero-directions,
.rc-follow-card,
.rc-gallery-more {
  transition-property: transform, background-color, background, border-color, color, box-shadow, opacity;
  transition-duration: 280ms, 180ms, 180ms, 180ms, 160ms, 280ms, 180ms;
  transition-timing-function: var(--rc-ease-ios), ease, ease, ease, ease, ease, ease;
  -webkit-tap-highlight-color: transparent;
}
.rc-app-nav-tab:active:not(:disabled),
.rc-service-mode-btn:active:not(:disabled),
.rc-call-btn:active,
.rc-hero-call:active,
.rc-hero-directions:active,
.rc-follow-card:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

/* ================= THE GROUND =================
   Flat warm dark with a whisper of grain — a material, not a colour. The
   flat-lay photo that used to sit behind everything is gone; the content
   carries the page now. */
.rc-page { position: relative; z-index: 1; min-height: 100vh; color: #F4EADA; font-family: Barlow, system-ui, sans-serif; overflow-x: clip; }
body {
  background: radial-gradient(120% 70% at 50% -10%, #221610 0%, #140E09 50%, #0F0A06 100%) fixed;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
.rc-wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.rc-display { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.02em; line-height: 0.95; margin: 0; }
.rc-textlink {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #C7B49B; font: 600 14px Barlow, system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  transition: color 150ms ease;
}
.rc-textlink:hover { color: #F4EADA; }

/* ================= GLASS =================
   One material for every floating layer: blur and saturate the backdrop, a
   soft specular top-left that dims on press, a bright rim on the top edge, a
   dark rim on the bottom, and the pole's red and blue in the shadow. */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(244,234,218,0.11), rgba(244,234,218,0.05));
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(244,234,218,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,246,234,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 12px 32px rgba(0,0,0,0.45),
    -8px 12px 32px rgba(62,111,176,0.12),
    8px 12px 32px rgba(214,40,57,0.12);
  transition: transform 280ms var(--rc-ease-ios), box-shadow 280ms var(--rc-ease-ios), background 200ms ease;
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140% 70% at 22% -20%, rgba(255,255,255,0.26), rgba(255,255,255,0) 58%);
  transition: opacity 300ms ease;
}
.glass:hover { background: linear-gradient(180deg, rgba(244,234,218,0.15), rgba(244,234,218,0.07)); }
.glass:active {
  transform: scale(0.965);
  transition-duration: 80ms;
  box-shadow:
    inset 0 1px 0 rgba(255,246,234,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 6px 16px rgba(0,0,0,0.45),
    -4px 6px 16px rgba(62,111,176,0.16),
    4px 6px 16px rgba(214,40,57,0.16);
}
.glass:active::before { opacity: 0.55; }

/* Buttons. Red is the one accent and it is spent on Call. */
.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border-radius: 999px; border: 0;
  font: 600 15px Barlow, system-ui, sans-serif; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 280ms var(--rc-ease-ios), background 160ms ease, box-shadow 280ms var(--rc-ease-ios);
}
.rc-btn:active { transform: scale(0.96); transition-duration: 80ms; }
.rc-btn svg { width: 16px; height: 16px; flex: none; }
.rc-btn-red {
  background: linear-gradient(180deg, #E23345, #C4202F); color: #FFF6EA;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.25),
              0 10px 28px rgba(214,40,57,0.35), -6px 10px 24px rgba(62,111,176,0.10);
}
.rc-btn-red:hover { background: linear-gradient(180deg, #EA4356, #D0273A); color: #FFF6EA; }
.rc-btn-glass { color: #F4EADA; }
.rc-btn-glass:hover { color: #FFF6EA; }

/* ================= THE WORDMARK =================
   RITE CUT in Bebas, and the I in RITE is the barber pole: a striped
   cylinder with caps that turns while the shop is open (js/status.js pauses
   anything with data-rc-pole when it's closed) and spins up on hover. */
:root {
  --rc-stripe: 5px;
  --rc-pole-period: calc(var(--rc-stripe) * 8); /* 4 stripes at -60deg */
}
.rc-wm {
  display: inline-flex; align-items: center; gap: 0.06em;
  font: 400 26px/1 'Bebas Neue', 'Arial Narrow', sans-serif; letter-spacing: 0.10em;
  color: #F4EADA; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.rc-wm:hover { color: #FFF6EA; }
.rc-wm-sp { width: 0.32em; }
.rc-pole {
  position: relative; display: inline-block;
  width: 0.36em; height: 0.96em; margin: 0 0.03em 0 0.01em; border-radius: 0.18em;
  background: repeating-linear-gradient(-60deg,
    #D62839 0 var(--rc-stripe), #F4EADA var(--rc-stripe) calc(var(--rc-stripe) * 2),
    #3E6FB0 calc(var(--rc-stripe) * 2) calc(var(--rc-stripe) * 3), #F4EADA calc(var(--rc-stripe) * 3) calc(var(--rc-stripe) * 4));
  background-size: 100% var(--rc-pole-period);
  box-shadow:
    inset 0.10em 0 0.10em rgba(255,255,255,0.35),
    inset -0.10em 0 0.12em rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.35);
  animation: rcPoleTurn 2.4s linear infinite;
}
.rc-pole::before, .rc-pole::after {
  content: ''; position: absolute; left: -0.07em; right: -0.07em; height: 0.11em;
  border-radius: 0.06em; background: linear-gradient(180deg, #E9DCC6, #9C8A6E);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.rc-pole::before { top: -0.06em; }
.rc-pole::after { bottom: -0.06em; }
.rc-wm:hover .rc-pole { animation-duration: 0.9s; animation-play-state: running !important; }
@keyframes rcPoleTurn { to { background-position: 0 var(--rc-pole-period); } }

/* ================= HEADER =================
   Fixed, glass, the wordmark and the call button. Nothing else. */
.rc-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; padding-inline: clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(20,14,9,0.62), rgba(20,14,9,0.48));
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-bottom: 1px solid rgba(244,234,218,0.12);
  box-shadow: inset 0 1px 0 rgba(255,246,234,0.10), inset 0 -1px 0 rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.25);
}

/* ================= HERO =================
   The video (or photo, or the procedural scene) full-bleed; one line of copy
   bottom-left; the two actions. The name isn't repeated — it's in the header. */
.rc-hero {
  position: relative;
  height: min(78vh, 720px);
  min-height: 520px;
  overflow: hidden;
  background: #0E0906;
}
.rc-hero-content {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding-bottom: clamp(28px, 5vh, 56px);
}
.rc-hero-title {
  color: #F4EADA;
  font-size: clamp(44px, 9vw, 96px);
  max-width: 12ch;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.rc-hero-title em { font-style: normal; color: #C7B49B; }
.rc-hero-subtitle {
  margin: 12px 0 0; max-width: 44ch;
  color: #D9CCB9; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.rc-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rc-hero-cta .rc-btn { min-width: 160px; }
.rc-video-toggle {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  min-height: 30px; padding: 6px 11px;
  border: 1px solid rgba(244,234,218,0.18); border-radius: 999px;
  background: rgba(20,14,9,0.45); color: #C7B49B;
  font: 600 11px Barlow, system-ui, sans-serif; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rc-video-toggle:hover { color: #F4EADA; }
/* The fade below the hero lands on the page ground now, not on a photo. */
.rc-hero-fade {
  background: linear-gradient(180deg,
    rgba(20, 14, 9, 0.10) 0%, rgba(20, 14, 9, 0) 35%,
    rgba(20, 14, 9, 0.55) 70%, rgba(20, 14, 9, 0.96) 100%);
}

/* The pole, laid flat, rules the hero off. It crawls — slowly. */
.rc-pole-rule {
  height: 4px;
  background: repeating-linear-gradient(-60deg,
    #D62839 0 12px, #F4EADA 12px 24px, #3E6FB0 24px 36px, #F4EADA 36px 48px);
  background-size: 96px 4px;
  animation: rcRuleCrawl 4s linear infinite;
  box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 -6px 18px rgba(214,40,57,0.15), 0 6px 18px rgba(62,111,176,0.15);
}
@keyframes rcRuleCrawl { to { background-position: 96px 0; } }

/* ================= HOME =================
   Sections are separated by space and a hairline, not by cards. */
.rc-sec { padding-block: clamp(48px, 8vw, 88px); }
.rc-sec + .rc-sec { border-top: 1px solid rgba(244,234,218,0.12); }
.rc-sec h2.rc-display { font-size: clamp(32px, 4.5vw, 46px); color: #FFF6EA; }

/* Status: one line. */
.rc-status { border-bottom: 1px solid rgba(244,234,218,0.12); }
.rc-status .rc-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; min-height: 60px; padding-block: 12px; font-size: 15px;
}
.rc-status-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; }
.rc-status-now > span { white-space: nowrap; }
.rc-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #97846C; box-shadow: 0 0 0 3px rgba(244,234,218,0.06); }
.rc-status-dot.is-open { background: #4CC27A; box-shadow: 0 0 0 3px rgba(76,194,122,0.18), 0 0 12px rgba(76,194,122,0.5); }
.rc-status-hours { color: #C7B49B; font-weight: 400; }
@media (min-width: 600px) { .rc-status-hours::before { content: '· '; } }
.rc-status-where { color: #C7B49B; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rc-status-where:hover { color: #F4EADA; }

/* The work: a stack of prints. */
.rc-album { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .rc-album { grid-template-columns: 1fr 1fr; gap: 64px; } }
.rc-album-copy p { margin: 10px 0 0; color: #C7B49B; max-width: 36ch; }
.rc-album-ui { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.rc-album-btn { min-height: 44px; width: 44px; padding: 0; }
.rc-album-count { min-width: 5ch; color: #97846C; font: 600 14px Barlow, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.rc-album-more { margin-left: auto; }
.rc-deck {
  position: relative; width: min(78vw, 380px); aspect-ratio: 4 / 5; margin-inline: auto;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
@media (max-width: 899px) { .rc-deck { margin-bottom: 48px; } }
.rc-print {
  position: absolute; inset: 0; padding: 0; border: 0;
  border-radius: 22px; overflow: hidden; background: #1C130D;
  transform-origin: 50% 100%;
  transition: transform 520ms var(--rc-ease-ios), opacity 400ms ease, box-shadow 400ms ease;
  will-change: transform;
  box-shadow: 0 24px 50px rgba(0,0,0,0.6);
  cursor: grab; -webkit-tap-highlight-color: transparent;
}
.rc-print img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; color: transparent; }
.rc-print::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,246,234,0.16), inset 0 0 0 1px rgba(255,246,234,0.06);
}
.rc-print-cap {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px; border-radius: 13px;
  font: 600 14px Barlow, system-ui, sans-serif; color: #FFF6EA; text-align: left;
  transition: opacity 300ms ease;
}
.rc-print-cap small { color: #C7B49B; font-weight: 500; }
.rc-print:not(.is-top) .rc-print-cap { opacity: 0; }
.rc-print.is-top { box-shadow: 0 30px 60px rgba(0,0,0,0.65), -12px 18px 40px rgba(62,111,176,0.20), 12px 18px 40px rgba(214,40,57,0.20); }
.rc-print.is-dragging { cursor: grabbing; transition: none; }
.rc-print.is-gone { transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 300ms ease; }
.rc-print:focus-visible { outline: 3px solid #F4EADA; outline-offset: 4px; }
.rc-deck-hint {
  position: absolute; left: 50%; bottom: -66px; transform: translateX(-50%);
  font: 500 13px Barlow, system-ui, sans-serif; color: #97846C; white-space: nowrap; pointer-events: none;
  transition: opacity 300ms ease;
}
.rc-deck.touched .rc-deck-hint { opacity: 0; }

/* Menu preview. */
.rc-menu-preview { display: grid; gap: 28px; }
@media (min-width: 900px) { .rc-menu-preview { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } }
.rc-menu-preview-intro p { margin: 10px 0 0; color: #C7B49B; max-width: 36ch; }
.rc-menu-preview-intro .rc-service-mode { margin-top: 18px; }
.rc-menu-preview-intro p.rc-menu-note { margin-top: 14px; font-size: 13px; color: #97846C; }
.rc-menu-list { list-style: none; margin: 0; padding: 0; }
.rc-menu-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 16px 0; border-top: 1px solid rgba(244,234,218,0.12); }
.rc-menu-list li:first-child { border-top: 0; padding-top: 0; }
.rc-menu-name { grid-column: 1; grid-row: 1; font: 600 17px Barlow, system-ui, sans-serif; color: #F4EADA; }
.rc-menu-desc { grid-column: 1; grid-row: 2; color: #97846C; font-size: 14px; }
.rc-menu-price { grid-column: 2; grid-row: 1 / span 2; align-self: start; font: 600 18px Barlow, system-ui, sans-serif; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #F4EADA; }
.rc-menu-price.rc-price-ask { color: #C7B49B; letter-spacing: 0.08em; font-size: 14px; }
.rc-menu-more { margin-top: 22px; }
:root[data-shop-mode="barber"] [data-menu="salon"], :root[data-shop-mode="salon"] [data-menu="barber"] { display: none; }
/* The segmented control (Home preview and Services), now glass. */
.rc-service-mode { border: 0; background: none; }
.rc-service-mode:active { transform: none; }
.rc-service-mode-btn { transition: transform 280ms var(--rc-ease-ios), background 160ms ease, color 160ms ease; }
.rc-service-mode-btn.active { background: #F4EADA; color: #140E09; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* Walk in. */
.rc-walk { text-align: center; }
.rc-walk h2.rc-display { font-size: clamp(40px, 7vw, 80px); }
.rc-walk-tel { display: inline-block; margin-top: 14px; color: #F4EADA; font: 600 clamp(26px, 5vw, 44px)/1 Barlow, system-ui, sans-serif; letter-spacing: 0.04em; text-decoration: none; }
.rc-walk-tel:hover { color: #E8404F; }
.rc-walk p { margin: 16px auto 0; max-width: 46ch; color: #C7B49B; }

/* The shop. */
.rc-story { display: grid; gap: 24px; }
@media (min-width: 900px) { .rc-story { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
.rc-story img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; display: block; color: transparent;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), -12px 18px 40px rgba(62,111,176,0.12), 12px 18px 40px rgba(214,40,57,0.12);
}
.rc-story p { margin: 14px 0 0; max-width: 46ch; color: #C7B49B; font-size: 17px; line-height: 1.5; }
.rc-hours { margin-top: 26px; width: 100%; max-width: 380px; border-collapse: collapse; font-size: 15px; }
.rc-hours td { padding: 8px 0; border-top: 1px solid rgba(244,234,218,0.12); }
.rc-hours td + td { text-align: right; color: #C7B49B; font-variant-numeric: tabular-nums; }
.rc-hours tr.is-today td { color: #F4EADA; font-weight: 600; }
.rc-story .rc-textlink { margin-top: 22px; }

/* ================= FOOTER ================= */
.rc-footer { padding: 40px 0 24px; border-top: 1px solid rgba(244,234,218,0.12); color: #97846C; font-size: 14px; }
.rc-footer .rc-wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
.rc-footer a { text-decoration: none; color: #C7B49B; }
.rc-footer a:hover { color: #F4EADA; }
.rc-footer .rc-wm { font-size: 22px; }
.rc-footer-by { flex-basis: 100%; font-size: 12px; color: #6E5F4D; }

/* ================= DOCK, IN GLASS ================= */
.rc-dock {
  background: linear-gradient(180deg, rgba(244,234,218,0.11), rgba(244,234,218,0.05)), rgba(20,13,7,0.70);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(244,234,218,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,246,234,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 12px 32px rgba(0,0,0,0.45),
    -8px 12px 32px rgba(62,111,176,0.12),
    8px 12px 32px rgba(214,40,57,0.12);
}
.rc-dock-thumb { background: linear-gradient(180deg, #E23345, #B01E2E); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 16px rgba(214,40,57,0.45); }

/* Home on a phone: the hero is shorter and the two actions share the row. */
@media (max-width: 720px) {
  .rc-hero { height: min(72vh, 640px); min-height: 500px; }
  .rc-hero-cta .rc-btn { flex: 1 1 140px; }
  /* Out of the way of the two buttons: top-right, under the header. */
  .rc-video-toggle { bottom: auto; top: calc(var(--rc-header-h, 62px) + 12px); }
}

/* ================= WIDE: THE TABS LIVE IN THE HEADER =================
   Same four buttons, same tablist, same sliding thumb — but on a wide screen
   they sit in the header's empty middle instead of floating as a second bar
   that content scrolls under. The bar is fixed at the header's height and
   lets pointer events through everywhere but the tabs. */
@media (min-width: 900px) {
  .rc-app-nav-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 61;
    display: flex; align-items: center; justify-content: center;
    height: 62px; padding: 0;
    pointer-events: none;
  }
  .rc-dock {
    max-width: none;
    padding: 4px;
    background: rgba(244,234,218,0.05);
    border: 1px solid rgba(244,234,218,0.08);
    box-shadow: inset 0 1px 0 rgba(255,246,234,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .rc-app-nav-tabs { gap: 2px; }
  .rc-app-nav-tab { min-width: 104px; padding: 8px 18px; font-size: 14px; }
  .rc-app-nav-tabs.has-thumb .rc-app-nav-tab.active { color: #140E09; }
  .rc-dock-thumb {
    background: #F4EADA;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  }
}

/* ================= SERVICES =================
   The same two-column shape as Home's preview; the intro column stays put
   while the list scrolls. Categories are headings, not filters. */
.rc-menu-page-intro { align-self: start; }
@media (min-width: 900px) { .rc-menu-page-intro { position: sticky; top: 90px; } }
.rc-menu-call { margin-top: 22px; }
.rc-menu-group {
  margin: 34px 0 10px;
  color: #97846C;
  font: 700 12px Barlow, system-ui, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.rc-menu-group:first-child { margin-top: 0; }

/* ================= ABOUT ================= */
/* Hours: seven rows, today lit. js/status.js toggles .is-today and the
   badge; the times are static so they read with JS off. */
.rc-hours-page { display: grid; gap: 24px; }
@media (min-width: 900px) { .rc-hours-page { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } }
.rc-open-line { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; color: #C7B49B; font-weight: 600; }
.rc-hours-full { max-width: 520px; }
.rc-hours-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-top: 1px solid rgba(244,234,218,0.12);
  color: #C7B49B; font-size: 16px;
}
.rc-hours-row:first-child { border-top: 0; padding-top: 0; }
.rc-hours-row [data-rc-time] { margin-left: auto; color: #97846C; font-variant-numeric: tabular-nums; }
.rc-hours-row.is-today, .rc-hours-row.is-today [data-rc-time] { color: #F4EADA; font-weight: 600; }
.rc-hours-today {
  padding: 3px 9px; border-radius: 999px;
  background: #F4EADA; color: #140E09;
  font: 700 11px Barlow, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Find us: the address large, two ways to get there, the map on request. */
.rc-find { display: grid; gap: 24px; }
@media (min-width: 900px) { .rc-find { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; } }
.rc-find-address { margin: 14px 0 0; color: #F4EADA; font: 600 clamp(22px, 3vw, 30px)/1.25 Barlow, system-ui, sans-serif; }
.rc-find-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rc-map {
  position: relative; aspect-ratio: 4 / 3; min-height: 260px;
  border-radius: 22px; overflow: hidden; background: #1C130D;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), -12px 18px 40px rgba(62,111,176,0.12), 12px 18px 40px rgba(214,40,57,0.12);
}
.rc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.85) contrast(1.05); }
.rc-map-load {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: inherit; cursor: pointer; color: #F4EADA;
  font: 600 16px Barlow, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 50% 45%, rgba(214,40,57,0.16), transparent 38%),
    repeating-linear-gradient(32deg, transparent 0 42px, rgba(244,234,218,0.04) 42px 44px),
    linear-gradient(180deg, rgba(244,234,218,0.06), rgba(244,234,218,0.02));
}
.rc-map-load:active { transform: none; }
.rc-map-pin { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: rgba(214,40,57,0.14); color: #E8404F; }
.rc-map-pin svg { width: 26px; height: 26px; }
.rc-map-load small { color: #97846C; font-size: 13px; font-weight: 500; }

/* Follow: two glass tiles. */
.rc-follow { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 600px) { .rc-follow { grid-template-columns: 1fr 1fr; max-width: 720px; } }
.rc-follow-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 18px;
  color: #F4EADA; text-decoration: none;
}
.rc-follow-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(244,234,218,0.08); color: #F4EADA; }
.rc-follow-icon svg { width: 20px; height: 20px; }
.rc-follow-name { display: block; font: 600 15.5px Barlow, system-ui, sans-serif; }
.rc-follow-sub { display: block; margin-top: 2px; color: #97846C; font-size: 13px; }

/* No backdrop blur (old engines, some embedded views): go solid rather than
   letting the page show through the glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rc-header, .rc-dock, .glass { background: rgba(20, 14, 9, 0.94); }
}