/* Art of Fades — Cut Path
   The selection path is the cutting line. Device set in BRAND.md §2:
   cut path, highlighter, angular crop, offset edge, floating cut-out, black action. */

:root {
  --paper:     #f7f3ec;
  --card:      #ffffff;
  --ink:       #1a1a1a;
  --acid:      #a8f582;
  --acid-deep: #519431;
  --mute:      #6b6b66;
  --rule:      #ddd8ce;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui: "Roboto Mono", ui-monospace, "Courier New", monospace;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem;  --s10: 2.5rem;
  --s12: 3rem;  --s16: 4rem;
  --s20: 5rem;  --s24: 6rem;  --s32: 8rem;

  --ctl: 2.75rem;
  --wrap: 72rem;
  /* The compact desktop nav renders ~77.5px; mobile renders ~69.5px. Anchor
     jumps keep a small cushion beneath the sticky cut-edge. */
  --nav-h: 5rem;
  --nav-fixed-h: 4.34375rem;
  /* Mobile action bar's own rendered height (padding + control + border),
     used both to size the bar and to pad the body so fixed positioning
     doesn't cover the footer beneath it. */
  --bar-h: 4.375rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Angular crop — no rectangles, no rounded corners. */
  --clip-a: polygon(0 6%, 88% 0, 100% 82%, 12% 100%);
  --clip-b: polygon(6% 0, 100% 10%, 92% 100%, 0 88%);
  --clip-c: polygon(0 0, 100% 6%, 94% 94%, 8% 100%);
  --clip-p: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

*, *::before, *::after { box-sizing: border-box; }

/* Keep the viewport root free of overflow constraints. The only intentional
   overhang is a few pixels past the left edge of the hero scissors, which
   cannot create rightward scrolling in LTR. More importantly, this avoids
   putting WebKit's persistent fixed controls in a root clipping context. */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--mute) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--ui);
}

/* ---- Browser surfaces ------------------------------------------------- */
::selection { background: var(--acid); color: var(--ink); }
:where(input, textarea) { caret-color: var(--acid-deep); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--acid);
}

.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 99;
  padding: var(--s3) var(--s6);
  background: var(--ink); color: var(--paper);
  font-size: .8125rem; text-decoration: none;
  transition: top .16s var(--ease);
}
.skip:focus { top: var(--s4); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Type ------------------------------------------------------------- */

.d1, .d2, .d3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}
.d1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.d2 { font-size: clamp(2rem, 4.4vw, 2.75rem); }
.d3 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); letter-spacing: -.02em; }

/* Highlighter — one per heading, final line only. Painted behind the type so the
   ink keeps its 13.3:1, and inset slightly so it reads as a marker stroke.
   Default state is fully painted — if JS never runs, every heading still
   reads correctly; .is-revealing/.is-revealed (set by the script at the
   bottom of the page) are what make it swipe on instead of just sitting there. */
.hl {
  background: linear-gradient(var(--acid), var(--acid)) no-repeat;
  background-size: 100% .56em;
  background-position: 0 .34em;
  padding-inline: .06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl.is-revealing { background-size: 0% .56em; transition: background-size .6s var(--ease); }
.hl.is-revealed { background-size: 100% .56em; }

.lede { max-width: 34ch; margin: var(--s6) 0 0; font-size: clamp(.9375rem, 1.2vw, 1rem); color: var(--ink); }
.hero__timing {
  max-width: max-content;
  margin: var(--s5) 0 0;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--acid);
  font-size: .8125rem;
}
.body { max-width: 52ch; margin: var(--s6) 0 0; font-size: .9375rem; color: var(--mute); }
.body--support { margin-top: var(--s3); }
.mute { color: var(--mute); }
.n { font-variant-numeric: tabular-nums; }
.c { text-align: center; } .r { text-align: right; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---- Actions ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ctl);
  padding: var(--s3) var(--s6);
  background: var(--ink); color: var(--paper);
  font: 500 .8125rem/1 var(--ui);
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.btn:hover { background: var(--acid); color: var(--ink); }
.btn--lg { min-height: 3rem; padding: var(--s4) var(--s8); font-size: .875rem; }

.lnk {
  display: inline-flex; align-items: center;
  min-height: var(--ctl);
  font-size: .8125rem;
  text-decoration: none;
  border-bottom: 2px solid var(--acid);
  transition: border-color .16s var(--ease);
}
.lnk:hover { border-color: var(--ink); }

/* ---- Nav -------------------------------------------------------------- */

/* Persistent on both mobile and desktop. Desktop keeps the direct booking
   action; mobile reserves the top bar for identity and navigation while the
   always-fixed Call/Book bar owns conversion in the thumb zone. */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1.5px solid transparent;
  box-shadow: 0 0 0 0 transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* The same hard ink-outline-plus-acid-offset signature the quote cards use
   (see .q below), reused here as the nav's own "cut edge" — it appears the
   moment the bar actually starts floating over scrolled content, not before. */
.nav.is-stuck {
  border-bottom-color: var(--ink);
  box-shadow: 0 4px 0 0 var(--acid);
}

.nav__in {
  display: flex; align-items: center; gap: var(--s6);
  width: min(100% - var(--s8), var(--wrap));
  margin-inline: auto;
  padding-block: var(--s4);
}
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: var(--ctl); overflow: hidden;
  min-height: var(--ctl);
  text-decoration: none; white-space: nowrap;
}
.mark img {
  display: block; flex: 0 0 auto;
  width: 4.375rem; height: 4.375rem;
  object-fit: contain;
}
/* The auto-margin that pushes links + button to the right belongs on the
   <nav> wrapper itself — the actual flex child of .nav__in. Putting it on
   .nav__list (nested a level deeper, inside <nav>) is a no-op: <nav> just
   shrink-wraps its content and the whole cluster sits flush-left, dumping
   any extra window width as dead space after the button instead of before
   the logo. */
.nav__in > nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.nav__list a {
  display: inline-flex; align-items: center;
  min-width: var(--ctl); min-height: var(--ctl);
  justify-content: center;
  font-size: .8125rem; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { border-bottom-color: var(--acid); }
.nav__book-item { display: none; }

/* Mobile menu toggle. Never shown at desktop, where the links sit inline in
   the bar. Also never shown with JS off — see the fallback note in the
   media block below. */
.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  flex: 0 0 var(--ctl);
  width: var(--ctl); height: var(--ctl);
  padding: 0;
  background: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav__toggle:hover { background: var(--ink); color: var(--paper); }
/* Three bars out of one element: the middle bar is the box itself, the outer
   two are its pseudo-elements. On open the outer two cross into an X and the
   middle one drops out — the same precise, drawn-line register as the cut
   paths rather than a soft icon swap. */
.nav__toggle-bars { position: relative; }
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 1.125rem; height: 1.5px;
  background: currentColor;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -.3125rem; }
.nav__toggle-bars::after  { top:  .3125rem; }
.nav.is-open .nav__toggle-bars { background: transparent; }
.nav.is-open .nav__toggle-bars::before { transform: translateY(.3125rem) rotate(45deg); }
.nav.is-open .nav__toggle-bars::after  { transform: translateY(-.3125rem) rotate(-45deg); }

@media (max-width: 46rem) {
  /* Physical iOS testing proved sticky positioning unreliable here. The
     mobile header is viewport-fixed, with its exact height reserved on body
     so page content never jumps or sits underneath it. */
  .nav {
    position: fixed; left: 0; right: 0; top: 0;
    padding-top: env(safe-area-inset-top);
  }
  body { padding-top: calc(var(--nav-fixed-h) + env(safe-area-inset-top)); }

  /* JS off: the four links stay in the bar and wrap beneath it. Not the
     intended composition, but always reachable — the same fallback-first
     principle as .hl's painted default and the hard-coded hours strings.
     Previously this was a bare `display: none` with no toggle to replace
     it, which stranded Work/Crew/Services/Hours on every mobile viewport. */
  .nav__in { flex-wrap: wrap; gap: var(--s4); padding-block: var(--s3); }
  .nav__list { gap: var(--s6); }
  .nav__in > .btn { display: none; }

  /* JS on: collapse the links into a panel behind the toggle. The hook is on
     <html> and set in the head, not on .nav from the footer script — see the
     comment on that script tag for why. */
  .has-js .nav__in { flex-wrap: nowrap; }
  .has-js .nav__toggle { display: inline-flex; margin-left: auto; }

  /* The <nav> wrapper is pulled out of the flex row entirely, for two
     reasons: as a zero-width flex item it was contributing two 16px gaps
     between the toggle and the Book button, and taking it out of flow lets
     DOM order stay logo → toggle → links so tab order runs through the
     links after the button that reveals them. .nav is already a
     positioned element (sticky), so it is the containing block already. */
  .has-js .nav__in > nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-left: 0;
    pointer-events: none;
  }
  .has-js .nav__list {
    flex-direction: column; gap: 0;
    padding: 0 var(--s4) var(--s4);
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    box-shadow: 0 4px 0 0 var(--acid);
    opacity: 0; visibility: hidden;
    transform: translateY(-.5rem);
    /* visibility (not display) so the closed panel is both untabbable and out
       of the a11y tree, while still being transitionable. It gets 0s with a
       delay rather than a duration: as a discrete property it would otherwise
       flip at 50% progress, popping the panel into view mid-fade and leaving
       the links unfocusable for the first half of the opening. Delayed here
       (hold visible until the fade-out finishes), instant on open below. */
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
  }
  .has-js .nav.is-open .nav__list {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
  }
  .has-js .nav.is-open .nav__in > nav { pointer-events: auto; }
  .has-js .nav__list li + li { border-top: 1px solid var(--rule); }
  /* Consistent 48px rows and explicit line-height avoid mixed button/link
     metrics in mobile WebKit while leaving generous tap areas. */
  .has-js .nav__list a {
    display: flex;
    min-height: 3rem;
    justify-content: flex-start;
    padding-inline: var(--s2);
    font: 500 .875rem/1 var(--ui);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(123, 214, 83, .3);
  }
  .has-js .nav__book-item { display: block; padding-top: var(--s4); }
  .has-js .nav__list .nav__menu-book {
    width: 100%;
    justify-content: center;
    padding-inline: var(--s6);
    border-bottom: 0;
  }
  .has-js .nav__list .nav__menu-book:hover {
    border-bottom-color: transparent;
  }
}

/* ---- Mobile action bar -------------------------------------------------
   Fixed Call/Book bar, mobile only. Deliberately has no scroll-driven
   show/hide state — the previous version of this bar was removed for
   flickering on iOS Safari because its visibility was tied to an
   IntersectionObserver on the hero, and the collapsing toolbar kept
   resizing the visual viewport out from under that threshold (see
   HANDOFF.md). This one is just always-fixed under the breakpoint, so
   there's no ratio or scroll position to desync in the first place. */
.mobile-bar { display: none; }
@media (max-width: 46rem) {
  .mobile-bar {
    display: flex; align-items: stretch; gap: var(--s3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--s3) var(--s4);
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
    padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1.5px solid var(--ink);
    box-shadow: 0 -4px 0 0 var(--acid);
  }
  .mobile-bar__call {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--ctl);
    padding-inline: var(--s4);
    background: var(--card);
    border: 1.5px solid var(--ink);
    font: 500 .8125rem/1 var(--ui);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s var(--ease), color .16s var(--ease);
  }
  .mobile-bar__call:hover { background: var(--ink); color: var(--paper); }
  .mobile-bar__book { flex: 1; }
  /* Clears the fixed bar so it never overlaps the footer beneath it. */
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
}

/* ---- Cut path: the signature device ----------------------------------- */

.cut { position: relative; margin: 0; }
.cut__slot {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(26,26,26,.045) 14px 15px),
    var(--card);
  box-shadow: inset 0 0 0 1px var(--rule);
}
/* Marching ants traced around the subject inside the frame. A plain dashed
   border can't animate its own phase, so the line is built from four
   repeating-gradient strips instead — one per edge — which lets the dash
   pattern actually crawl on interaction rather than just sitting there
   described as "marching" without ever moving. Static at rest; the card
   hover/focus rule below is what sets it walking. */
.cut__slot::after {
  content: "";
  position: absolute;
  inset: 8%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,  var(--acid-deep) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg,  var(--acid-deep) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(180deg, var(--acid-deep) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(180deg, var(--acid-deep) 0 4px, transparent 4px 8px);
  background-size: 8px 1.5px, 8px 1.5px, 1.5px 8px, 1.5px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.cut__slot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.09);
  transition: filter .4s var(--ease);
}
/* Same hint-of-color language as the Work gallery, on the same trigger as
   the marching ants, but scoped tighter: only the Book button itself, not
   the whole card, so the color change reads as the button and the photo
   answering to each other specifically, not as general card attention. */
.p:has(.p__book:hover) .cut__slot img,
.p:has(.p__book:focus) .cut__slot img {
  filter: grayscale(0.15) contrast(1.09);
}
/* The marching-ants path only marks a slot with nothing extracted into it yet;
   once a real subject is placed the frame edge carries the line instead. */
.cut__slot:has(img) { background: var(--card); }
.cut__slot:has(img)::after { inset: 5%; opacity: .85; }

/* The line only walks while the card is actually being considered — hovered
   or keyboard-focused — never as an ambient loop running unattended. */
@keyframes marchAnts {
  to { background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px; }
}
.p:hover .cut__slot::after,
.p:focus-within .cut__slot::after {
  animation: marchAnts .5s linear infinite;
}

/* ---- Hero ------------------------------------------------------------- */

.hero {
  display: grid; gap: var(--s16);
  width: min(100% - var(--s8), var(--wrap));
  margin-inline: auto;
  padding-block: var(--s12) var(--s20);
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s12); align-items: center; padding-block: var(--s16) var(--s24); }
}
@media (min-width: 46.01rem) and (max-width: 59.99rem) {
  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
    align-items: center;
    gap: var(--s8);
    padding-block: var(--s12) var(--s16);
  }
}

.eyebrow {
  margin: 0 0 var(--s6);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
}

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); margin-top: var(--s8); }

.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: var(--s6) 0 0;
  font-size: .75rem; color: var(--mute);
}
.trust a { display: inline-flex; align-items: center; min-height: var(--ctl); color: var(--ink); border-bottom: 1px solid var(--acid-deep); text-decoration: none; }
.trust__sep { color: var(--rule); }
.trust.is-open { color: var(--ink); }
.trust.is-open::before {
  content: ""; display: inline-block;
  width: .4375rem; height: .4375rem; margin-right: .375rem;
  background: var(--acid-deep); border-radius: 50%;
  vertical-align: middle;
  animation: statusPulse 2s var(--ease) infinite;
}
/* The one continuous loop on the page — reserved for the one element that
   is actually live, real-time data (today's open/closed state), the same
   register as a recording or online-status dot. Everything else on this
   page only moves in response to something the visitor did. */
@keyframes statusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .5; }
}

/* Floating cut-outs: overlapping, angled, never in a grid cell. */
.hero__art { position: relative; min-height: 23rem; }

/* Pre-composed collage art: each source already carries its own torn edge,
   green cut path and paper grain, so these are placed raw — no clip-path,
   no second dashed overlay — just positioned, scaled and lightly lifted. */
.art {
  position: absolute;
  width: auto;
  filter: drop-shadow(0 10px 18px rgba(26,26,26,.14));
  animation-duration: .8s;
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}

/* The one authored moment: the collage settles into place, once, on load.
   Pure CSS — no JS trigger, nothing to fail silently, and the reduced-motion
   query at the foot of this file collapses it to an instant cut for anyone
   who asked for less motion. Base positioning below already gives every
   piece its resting transform, so each keyframe only has to describe the
   overshoot it settles out of. */
@keyframes artSettleStorefront {
  from { opacity: 0; transform: translateY(20px) rotate(-7deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
}
@keyframes artSettleHeroman {
  from { opacity: 0; transform: translateY(-18px) scaleX(-1) rotate(5deg); }
  to   { opacity: 1; transform: translateY(0) scaleX(-1) rotate(-3deg); }
}
@keyframes artSettleScissors {
  from { opacity: 0; transform: translateY(22px) rotate(-22deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-9deg); }
}

.art--storefront {
  height: 15rem; left: 0; bottom: 0; transform: rotate(-1.5deg); z-index: 1;
  animation-name: artSettleStorefront; animation-delay: 0ms;
}
/* Mirrored: the source faces right; flipped so the profile looks back toward
   the headline and CTA instead of out toward the edge of the page. */
.art--heroman {
  height: 21rem; right: 2%; top: -1rem; transform: scaleX(-1) rotate(-3deg); z-index: 2;
  animation-name: artSettleHeroman; animation-delay: 140ms;
}
.art--scissors {
  height: 7rem; left: -3%; bottom: -.5rem; transform: rotate(-9deg); z-index: 3;
  animation-name: artSettleScissors; animation-delay: 300ms;
}

@media (min-width: 46.01rem) and (max-width: 59.99rem) {
  .hero__art { min-height: 20rem; }
  .art--storefront { height: 13rem; left: 0; }
  .art--heroman { height: 18rem; right: 0; top: 0; }
  .art--scissors { height: 6rem; }
}

@media (min-width: 60rem) {
  .hero__art { min-height: 30rem; }
  .art--storefront { height: 19rem; left: 4%; bottom: 0; }
  .art--heroman     { height: 27rem; right: 4%; top: -.5rem; }
  .art--scissors    { height: 9rem; left: 0; bottom: -.5rem; }
}

/* ---- Proof ------------------------------------------------------------ */

.proof { width: min(100% - var(--s8), var(--wrap)); margin-inline: auto; padding-block: var(--s8); border-block: 1.5px solid var(--ink); }
.proof__l { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .proof__l { grid-template-columns: repeat(4, 1fr); } }
.proof__l li { display: flex; align-items: baseline; gap: var(--s3); }
.proof__l b { font-family: var(--display); font-weight: 800; font-size: 2.25rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.proof__l span { font-size: .6875rem; line-height: 1.45; color: var(--mute); }
.proof__l .proof__schedule { flex-direction: column; align-items: stretch; gap: var(--s2); }
.proof__hours { display: grid; grid-template-columns: 1fr; gap: var(--s2); width: 100%; }
.proof__hour { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.proof__hour + .proof__hour { padding-top: var(--s2); border-top: 1px solid var(--rule); }
.proof__l .proof__hour b { font-size: 1.75rem; color: var(--ink); white-space: nowrap; }
.proof__l .proof__hour > span { font-size: .625rem; letter-spacing: .04em; white-space: nowrap; }
.proof__schedule-label { letter-spacing: .03em; }
@media (min-width: 46rem) {
  .proof__hours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .proof__hour + .proof__hour { padding: 0 0 0 var(--s3); border-top: 0; border-left: 1px solid var(--rule); }
}

/* ---- Prices ----------------------------------------------------------- */

.prices { width: min(100% - var(--s8), 46rem); margin-inline: auto; padding-block: var(--s20); scroll-margin-top: var(--nav-h); }
.bill { width: 100%; border-collapse: collapse; margin-top: var(--s12); font-size: .9375rem; }
.bill thead th { padding-bottom: var(--s3); border-bottom: 1.5px solid var(--ink); font-weight: 400; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--mute); }
.bill thead th.c { text-align: center; } .bill thead th.r { text-align: right; }
.bill tbody th { font-weight: 400; text-align: left; padding: var(--s4) var(--s4) var(--s4) 0; }
.bill td { padding: var(--s4) 0; }
.bill td.c { color: var(--mute); font-size: .8125rem; }
.bill tbody tr + tr th, .bill tbody tr + tr td { border-top: 1px solid var(--rule); }
.bill .n { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }

/* Five most-booked services show by default; the rest sit behind a native
   disclosure so the page opens with a scannable list, not fifteen rows. */
.bill__more { margin-top: var(--s2); }
.bill__more summary {
  padding: var(--s4) 0;
  font-size: .8125rem; color: var(--mute);
  cursor: pointer;
  list-style: none;
}
.bill__more summary::-webkit-details-marker { display: none; }
.bill__more summary::before { content: "+ "; color: var(--acid-deep); font-weight: 700; }
.bill__more[open] summary::before { content: "\2212 "; }
.bill__more[open] summary { border-bottom: 1px solid var(--rule); }
.bill__more .bill { margin-top: 0; }
.bill__more .bill thead { display: none; }

.bill__cta {
  margin-top: var(--s12);
  padding-top: var(--s8);
  border-top: 1.5px solid var(--ink);
}
.bill__cta p { margin: 0 0 var(--s6); font-size: .9375rem; }
.bill__cta .acts { margin-top: 0; }

/* ---- Quotes: offset edge ---------------------------------------------- */

.says { width: min(100% - var(--s8), var(--wrap)); margin-inline: auto; padding-block: var(--s20); }
.says__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s8); }
.says__head .body { margin-bottom: 0; }
.quotes__hint { display: none; margin: 0; font-size: .75rem; color: var(--mute); }
.quotes {
  display: flex;
  gap: var(--s6);
  margin: var(--s12) calc(var(--s4) * -1) 0;
  padding: 0 var(--s4) var(--s4);
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s4);
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.quotes::-webkit-scrollbar { height: .375rem; }
.quotes::-webkit-scrollbar-thumb { background: var(--ink); }
.quotes::-webkit-scrollbar-track { background: transparent; }
.quotes__controls { display: none; align-items: center; flex: 0 0 auto; gap: var(--s3); }
@media (min-width: 46rem) { .has-js .quotes__controls { display: flex; } }
.quotes__button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}
.quotes__button svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quotes__button:disabled { opacity: .3; cursor: default; }
.quotes__button:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.quotes__status { min-width: 2.75rem; margin: 0; font: 700 .75rem/1 var(--ui); text-align: center; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .quotes__button:not(:disabled):hover { color: var(--paper); background: var(--ink); } }
@media (max-width: 45.99rem) {
  .says__head { align-items: start; flex-direction: column; gap: var(--s3); }
  .quotes__hint { display: block; }
}
.q {
  flex: 0 0 calc(100% - var(--s8));
  scroll-snap-align: start;
  position: relative;
  padding: var(--s6);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--ink), -5px 5px 0 0 var(--acid);
}
@media (min-width: 40rem) { .q { flex-basis: calc((100% - var(--s6)) / 2); } }
@media (min-width: 64rem) { .q { flex-basis: calc((100% - var(--s6) * 3) / 4); } }
.q__label {
  position: relative;
  margin: 0 0 var(--s4); padding-left: var(--s3);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute);
}
.q__label::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: .5rem; height: .5rem;
  background: var(--acid-deep); border-radius: 50%;
}
.q p { margin: 0 0 var(--s6); font-size: .875rem; line-height: 1.6; }
.q cite { display: block; font-size: .75rem; font-style: normal; color: var(--mute); }
.says__cta { display: flex; justify-content: center; margin-top: var(--s8); }

/* ---- Crew ------------------------------------------------------------- */

.crew { width: min(100% - var(--s8), var(--wrap)); margin-inline: auto; padding-block: var(--s20); scroll-margin-top: var(--nav-h); }
.people { display: grid; gap: var(--s8); margin: var(--s12) 0 0; padding: 0; list-style: none; }
@media (min-width: 42rem) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .people { grid-template-columns: repeat(3, 1fr); } }
.p { box-shadow: inset 0 0 0 1.5px var(--acid-deep); background: var(--card); }
.cut--p { margin: 0; }
.cut--p .cut__slot { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; clip-path: var(--clip-p); box-shadow: none; }
.p--aron .cut__slot img { transform: scale(1.12); transform-origin: 50% 16%; }
.p__b { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s6); }
.p__r { margin: 0 0 var(--s2); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.p__b h3 { margin-bottom: var(--s3); }
.p__line { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.p__copy { margin: var(--s4) 0 0; font-size: .8125rem; line-height: 1.65; color: var(--mute); }
.p__quote { margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.p__quote p { margin: 0; font-size: .8125rem; line-height: 1.6; }
.p__quote footer { margin-top: var(--s3); }
.p__quote cite { font-size: .75rem; font-style: normal; color: var(--mute); }
.p__themes { margin: var(--s5) 0 0; font-size: .6875rem; line-height: 1.55; letter-spacing: .08em; color: var(--mute); }
.p__book { width: 100%; justify-content: center; margin-top: var(--s6); }
.p__book::after { content: "\2192"; margin-left: var(--s4); }
@media (min-width: 60rem) {
  .p { display: flex; flex-direction: column; }
  .p__b { flex: 1; }
  .p__themes { margin-bottom: var(--s6); }
  .p__book { margin-top: auto; }
}

/* ---- Gallery: real cuts, documentary not collage — plain grid, no clip-path.
   Reserving the cut-path/torn-edge devices for hero-level moments keeps a
   dense proof-grid legible at small tile scale. */

.gallery { width: min(100% - var(--s8), var(--wrap)); margin-inline: auto; padding-block: var(--s20); border-top: 1.5px solid var(--ink); scroll-margin-top: var(--nav-h); }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--s8); margin: var(--s12) 0 0; padding: 0; list-style: none; }
@media (min-width: 34rem) { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 60rem) { .grid { gap: var(--s6); } }

.grid li { position: relative; min-width: 0; }
.grid figure { margin: 0; }
.grid__view {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.grid img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 50% 25%;
  filter: grayscale(1) contrast(1.08);
  transition: transform .5s var(--ease), filter .3s var(--ease);
}
/* Source thumbnails mix square and tall crops with off-center subjects;
   each tile's framing is set by hand rather than one shared default. */
.cut-card--g6 img { object-position: 55% 45%; }
.cut-card--g5 img { object-position: 42% 30%; }
.cut-card--g4 img { object-position: 58% 45%; }
.cut-card--g3 img { object-position: 48% 55%; }
.cut-card--g2 img { object-position: 45% 40%; }
.cut-card--g1 img { object-position: 62% 35%; }
.grid__view:hover img,
.grid__view:focus-visible img,
.grid__view[aria-pressed="true"] img { transform: scale(1.04); filter: grayscale(0.15) contrast(1.08); }
.grid__view:focus-visible { outline: 3px solid var(--acid); outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--ink); }
.grid__view { position: relative; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.grid figcaption { padding-top: var(--s4); }
.grid figcaption .d3 { font-size: 1.25rem; }
.grid figcaption p { max-width: 38ch; margin: var(--s2) 0 0; font-size: .8125rem; line-height: 1.55; color: var(--mute); }
.gallery__more { margin-top: var(--s6); }
.gallery__more > summary {
  display: inline-flex; align-items: center;
  min-height: var(--ctl);
  padding: var(--s3) 0;
  color: var(--mute);
  font-size: .8125rem;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.gallery__more > summary::-webkit-details-marker { display: none; }
.gallery__more > summary::before { content: "+"; margin-right: var(--s3); color: var(--acid-deep); font-weight: 700; }
.gallery__more[open] > summary::before { content: "\2212"; }
.grid--more { margin-top: var(--s6); }
.gallery__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s6); margin-top: var(--s12); padding-top: var(--s8); border-top: 1.5px solid var(--ink); }
.gallery__close p { margin: 0; font-size: .9375rem; }
@media (hover: none) {
  /* A tap is a discrete state change, not a hover preview. Removing the
     desktop easing makes the color response immediate on iOS/Android. */
  .grid img { transition: none; }
}

/* ---- First cut: compact guidance + progressive FAQ ------------------- */

.first-cut {
  width: min(100% - var(--s8), var(--wrap));
  margin-inline: auto;
  padding-block: var(--s20);
  border-top: 1.5px solid var(--ink);
  scroll-margin-top: var(--nav-h);
}
.first-cut__steps {
  display: grid;
  max-width: 60rem;
  margin: var(--s12) auto 0;
  padding: 0;
  list-style: none;
  border-block: 1.5px solid var(--ink);
}
.first-cut__steps li { padding: var(--s6) 0; }
.first-cut__steps li + li { border-top: 1px solid var(--rule); }
.first-cut__steps p { max-width: 46ch; margin: 0; font-size: .9375rem; line-height: 1.7; }
.first-cut__steps .step__label {
  display: flex; align-items: baseline; gap: var(--s4);
  margin-bottom: var(--s4);
  font: 700 .8125rem/1.35 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.step__label span { color: var(--acid-deep); font-size: 1.75rem; letter-spacing: -.03em; }
@media (min-width: 46rem) {
  .first-cut__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-cut__steps li { min-height: 13rem; padding: var(--s8); }
  .first-cut__steps li + li { border-top: 0; }
  .first-cut__steps li:nth-child(even) { border-left: 1px solid var(--rule); }
  .first-cut__steps li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
.first-cut__questions {
  max-width: 60rem;
  margin: var(--s16) auto 0;
  font: 800 clamp(1.375rem, 2.2vw, 1.625rem)/1.1 var(--display);
  letter-spacing: -.02em;
}
.faq { max-width: 60rem; margin: var(--s6) auto 0; border-top: 1.5px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; min-height: 3.5rem; padding: var(--s4) 0;
  color: var(--ink);
  font: 700 1rem/1.35 var(--display); text-align: left;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(123, 214, 83, .3);
  -webkit-user-select: none;
  user-select: none;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { content: ""; }
.faq__summary > span:first-child { flex: 1 1 auto; min-width: 0; }
.faq__mark { position: relative; flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.faq__mark::after { transform: translateY(-50%) rotate(90deg); transition: transform .16s var(--ease); }
.faq__item[open] .faq__mark::after { transform: translateY(-50%) rotate(0); }
.faq__answer { padding: 0 2.5rem var(--s5) 0; }
.faq__answer p { max-width: 62ch; margin: 0; font-size: .8125rem; line-height: 1.65; color: var(--mute); }
.faq__answer--more { display: grid; gap: var(--s6); padding-top: var(--s2); padding-bottom: var(--s6); }
.faq__answer--more h4 { margin: 0 0 var(--s2); font: 700 .875rem/1.4 var(--display); }
@media (min-width: 46rem) { .faq__answer--more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); } }
.first-cut__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s6); max-width: 60rem; margin: var(--s10) auto 0; }
.first-cut__cta p { margin: 0; font-size: .875rem; }

/* ---- Visit ------------------------------------------------------------ */

.visit {
  display: grid; gap: var(--s12);
  width: min(100% - var(--s8), var(--wrap));
  margin-inline: auto;
  padding-block: var(--s20);
  border-top: 1.5px solid var(--ink);
  scroll-margin-top: var(--nav-h);
}
@media (min-width: 60rem) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); } }
.visit .btn { margin-top: var(--s8); }

/* Single resting collage piece, same authored family as the hero cut-outs
   (pre-composed torn edge, cut path and grain already baked in) — placed
   raw with a drop-shadow, but static and in normal flow: unlike `.art`,
   deliberately not absolutely positioned, since there's only one piece
   here and no floating composition to build. The settle-on-load animation
   is the hero's one authored moment and stays scoped there. */
.visit__art { margin-top: var(--s8); }
.art--chair {
  display: block;
  height: 14rem; width: auto;
  transform: rotate(-2deg);
  filter: drop-shadow(0 10px 18px rgba(26,26,26,.14));
}
@media (min-width: 60rem) { .art--chair { height: 18rem; } }

.facts { display: grid; gap: var(--s8); margin: 0; }
@media (min-width: 34rem) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div:first-child { grid-column: 1 / -1; }
}
.facts dt { margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.facts dd { margin: 0; font-size: .875rem; line-height: 1.7; }
.facts a { display: inline-flex; align-items: center; min-height: var(--ctl); }
/* Hours use fixed reading columns rather than a right-aligned paragraph,
   keeping day names, labels and times visually connected at every width. */
.hours { display: block; list-style: none; margin: var(--s2) 0 0; padding: 0; }
.hours > li {
  display: grid;
  grid-template-columns: minmax(4.5rem, .65fr) minmax(0, 1.35fr);
  gap: var(--s4);
  align-items: start;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.hours > li:last-child { border-bottom: 0; }
.hours__day { font-weight: 700; }
.hours__detail { display: grid; gap: var(--s1); min-width: 0; }
.hours__detail > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; }
.hours__detail > span > span { white-space: nowrap; }
.hours__detail strong,
.hours__closed { font: inherit; font-weight: 700; white-space: nowrap; text-align: right; }

.facts__status {
  display: inline-flex; align-items: center;
  margin: 0 0 var(--s2); padding: .2em .6em;
  background: var(--acid); color: var(--ink);
  font-size: .6875rem; letter-spacing: .04em;
}

/* ---- Footer ----------------------------------------------------------- */

.foot { border-top: 1.5px solid var(--ink); }
.foot__in { width: min(100% - var(--s8), var(--wrap)); margin-inline: auto; padding-block: var(--s12); display: grid; gap: var(--s4); }
.foot__in p { margin: 0; font-size: .8125rem; line-height: 1.7; }
.foot__in a { display: inline-flex; align-items: center; min-height: var(--ctl); }
@media (prefers-reduced-motion: reduce) {
  /* transition-delay is zeroed alongside duration: the mobile menu holds its
     panel `visible` on a delay so the fade-out can finish, and with only the
     duration collapsed that delay would leave the closed panel invisible but
     still focusable for 180ms. */
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}