/* The Mix Fix: site styles
   An editorial page on cream paper. Bodoni Moda at its high contrast optical size for every
   headline, Manrope for everything read, one espresso band for the process and one for what we
   believe, and the packages laid out like a printed cocktail menu. Everything is built from the
   tokens below. */

:root {
  --paper: #FDF9F3;
  --paper-2: #F7F1E8;
  --champagne: #EDDCC3;
  --champagne-2: #F3E7D6;
  --ink: #2A211B;
  --ink-2: #221B16;
  --body: #5E5146;
  --muted: #8A7B6C;
  --brown: #874714;
  --bronze: #AC7538;
  --gold: #DEAF5D;
  --gold-2: #E8C27A;
  --line: #D8C9B8;
  --line-soft: #E8DCCB;
  --blue: #71859A;
  --on-dark: rgba(253, 249, 243, 0.8);
  --on-dark-strong: #FDF9F3;
  --line-dark: rgba(253, 249, 243, 0.18);
  --serif: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5.5vw, 88px);
  --max: 1320px;
  --header-h: 80px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-h1: clamp(2.5rem, 5.2vw, 4.5rem);
  --t-h2: clamp(2.1rem, 3.9vw, 3.5rem);
  --t-h3: clamp(1.5rem, 2.3vw, 2.05rem);
  --t-lede: clamp(1.0625rem, 1.25vw, 1.2rem);
  --btn-color: var(--brown);
  --btn-on: var(--paper);
  --btn-hover: var(--ink);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 1.0625rem/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }

a { color: var(--brown); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s var(--ease); }
a:hover { color: var(--bronze); }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.012em;
}

h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.25; }

p { margin: 0; }
p + p { margin-top: 1em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(80px, 10vw, 150px); }
.section-tight { padding-block: clamp(56px, 7vw, 104px); }
.band-2 { background: var(--paper-2); }
.band-dark { background: var(--ink); color: var(--on-dark); --btn-color: var(--gold); --btn-on: var(--ink); --btn-hover: var(--gold-2); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--on-dark-strong); }
.band-dark .muted { color: rgba(253, 249, 243, 0.55); }

.h-display, .h-section, .h-sub { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; color: var(--ink); letter-spacing: -0.012em; text-wrap: balance; }
.h-display { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.02em; }
.h-section { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.018em; }
.h-sub { font-size: var(--t-h3); line-height: 1.18; }
.h-display em, .h-section em, .h-sub em { font-style: italic; color: var(--brown); }
.band-dark .h-display, .band-dark .h-section, .band-dark .h-sub { color: var(--on-dark-strong); }
.band-dark .h-display em, .band-dark .h-section em, .band-dark .h-sub em { color: var(--gold); }

.lede { font-size: var(--t-lede); line-height: 1.66; max-width: 56ch; }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.15em; }
.small { font-size: 0.875rem; line-height: 1.6; }
.muted { color: var(--muted); }
.measure { max-width: 62ch; }
.serif-note { font: italic 400 1.15rem/1.5 var(--serif); color: var(--brown); }
.band-dark .serif-note { color: var(--gold); }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 62ch; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* Buttons and text links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 54px;
  padding: 0 1.9em;
  font: 500 0.78rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.btn:hover { color: var(--btn-on); }
.btn:hover::before { transform: scaleX(1); }
.btn-primary { background: var(--btn-color); color: var(--btn-on); }
.btn-primary::before { background: var(--btn-hover); }
.btn-primary:hover { color: var(--btn-on); border-color: var(--btn-hover); }
.band-dark .btn-primary:hover, .hero .btn-primary:hover { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.text-link {
  display: inline-block;
  font: 500 0.78rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brown);
  padding-bottom: 7px;
  background: linear-gradient(var(--brown), var(--brown)) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.4s var(--ease-out), color 0.2s var(--ease);
}
.text-link:hover { background-size: 40% 1px; color: var(--brown); }
.band-dark .text-link { color: var(--gold); background-image: linear-gradient(var(--gold), var(--gold)); }

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.4s var(--ease);
}
.site-header .brand img.logo-cream { display: none; }
.site-header.is-overlay:not(.is-scrolled) { background: transparent; }
.site-header.is-overlay:not(.is-scrolled) .brand img.logo-brown { display: none; }
.site-header.is-overlay:not(.is-scrolled) .brand img.logo-cream { display: block; }
.site-header.is-overlay:not(.is-scrolled) .nav a { color: var(--on-dark-strong); }
.site-header.is-overlay:not(.is-scrolled) .nav a::after { background: var(--gold); }
.site-header.is-overlay:not(.is-scrolled) .nav a:hover { color: var(--gold); }
.site-header.is-overlay:not(.is-scrolled) .header-phone { color: var(--on-dark-strong); }
.site-header.is-overlay:not(.is-scrolled) .header-phone:hover { color: var(--gold); }
.site-header.is-overlay:not(.is-scrolled) .header-cta { --btn-color: var(--gold); --btn-on: var(--ink); --btn-hover: var(--gold-2); }
.site-header.is-overlay:not(.is-scrolled) .header-cta .btn-primary { background: transparent; color: var(--gold); }
.site-header.is-overlay:not(.is-scrolled) .header-cta .btn-primary::before { background: var(--gold); }
.site-header.is-overlay:not(.is-scrolled) .header-cta .btn-primary:hover { color: var(--ink); border-color: var(--gold); }
.site-header.is-overlay:not(.is-scrolled) .nav-toggle { border-color: rgba(253, 249, 243, 0.4); color: var(--on-dark-strong); }
.site-header.is-scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 12px 32px -26px rgba(42, 33, 27, 0.4); }
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 50px; width: auto; }
.nav { display: flex; justify-content: center; gap: clamp(20px, 2.6vw, 40px); }
.nav a {
  position: relative;
  font: 500 0.74rem/1 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: 10px;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.nav a:hover { color: var(--brown); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brown); }
.header-cta { display: flex; align-items: center; gap: 22px; justify-content: flex-end; }
.header-cta .btn { min-height: 46px; padding: 0 1.5em; }
.header-phone {
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header-phone:hover { color: var(--brown); }
.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 16px;
  cursor: pointer;
}
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 36px;
  overflow-y: auto;
}
.menu-panel-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.menu-panel-top img { height: 42px; width: auto; }
.menu-links { display: grid; list-style: none; margin: 0; padding: 0; }
.menu-links a {
  font: 400 clamp(2.1rem, 8.5vw, 3rem)/1.15 var(--serif);
  color: var(--ink);
  text-decoration: none;
  display: block;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.menu-links a:hover { color: var(--brown); }
.menu-panel-foot { display: grid; gap: 14px; margin-top: auto; }
.menu-panel-foot .btn { width: 100%; }
.menu-panel-foot .cities { font: italic 400 1.05rem/1.5 var(--serif); color: var(--muted); }

/* Hero: full bleed video under a dark wash, copy set low and left */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-dark-strong);
  display: grid;
  align-items: end;
  min-height: clamp(600px, 92vh, 960px);
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(clamp(72px, 12vw, 140px) + var(--header-h)) clamp(64px, 9vw, 112px);
  --btn-color: var(--gold);
  --btn-on: var(--ink);
  --btn-hover: var(--gold-2);
}
.hero > .wrap { width: 100%; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.hero-bg img, .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 33, 27, 0.58) 0%, rgba(42, 33, 27, 0.22) 26%, rgba(42, 33, 27, 0.42) 56%, rgba(42, 33, 27, 0.88) 100%);
}
.hero-copy { container-type: inline-size; display: grid; gap: 28px; max-width: 820px; }
.hero-kicker { font-size: 0.9375rem; letter-spacing: 0.02em; color: rgba(253, 249, 243, 0.72); max-width: 44ch; }
.hero h1 {
  font-size: clamp(2.6rem, 9.4cqw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: var(--on-dark-strong);
}
.hero h1 .line { display: block; }
.hero h1 .line.accent { font-style: italic; color: var(--gold); }
.hero .lede { max-width: 44ch; color: rgba(253, 249, 243, 0.86); }
.hero .btn-primary:hover { color: var(--ink); }
.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(28px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 0.68rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253, 249, 243, 0.6);
}
.hero-scroll::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); }
@media (prefers-reduced-motion: reduce) { .hero-bg video { display: none; } }

/* Photo and video slots. A warm gradient sits behind every slot so the page is complete
   before the photos arrive; once a real image loads it covers the gradient. */
.frame { position: relative; }
.frame::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--gold);
  pointer-events: none;
  opacity: 0.9;
}
.band-dark .frame::before, .how .frame::before { border-color: rgba(222, 175, 93, 0.7); }
.shot {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #F1E4D2 0%, #E6CFAE 48%, #D9C3A6 100%);
  display: block;
  width: 100%;
  max-width: 100%;
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 20% 10%, rgba(253, 249, 243, 0.55), transparent 60%);
  pointer-events: none;
}
.shot img, .shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.shot .shot-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  display: none;
  font: 400 0.75rem/1.5 var(--sans);
  letter-spacing: 0.06em;
  color: var(--brown);
  max-width: 80%;
}
.shot.is-empty .shot-label { display: block; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-9-16 { aspect-ratio: 9 / 16; }
.ratio-5-4 { aspect-ratio: 5 / 4; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.reel { width: 100%; max-width: 400px; margin-inline: auto; }

/* Motion: the hero entrance is the one orchestrated moment. Headlines and photos further down
   arrive with a quiet reveal. Both are skipped for anyone who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line, .hero .hero-kicker, .hero .lede, .hero .btn-row, .hero-scroll { animation: rise 1s var(--ease-out) both; }
  .hero .hero-kicker { animation-delay: 0.1s; }
  .hero h1 .line:nth-child(1) { animation-delay: 0.22s; }
  .hero h1 .line:nth-child(2) { animation-delay: 0.36s; }
  .hero h1 .line:nth-child(3) { animation-delay: 0.5s; }
  .hero .lede { animation-delay: 0.66s; }
  .hero .btn-row { animation-delay: 0.78s; }
  .hero-scroll { animation-delay: 1.1s; }
  .hero-bg { animation: fade 1.8s var(--ease) both; }
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-group > * { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .js .reveal-group.is-in > * { opacity: 1; transform: none; }
  .js .reveal-group.is-in > :nth-child(2) { transition-delay: 0.12s; }
  .js .reveal-group.is-in > :nth-child(3) { transition-delay: 0.24s; }
  .js .reveal-group.is-in > :nth-child(4) { transition-delay: 0.36s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Proof ledger: four numbers set in Bodoni, with the sentence that earns each one */
.ledger-strip { border-bottom: 1px solid var(--line-soft); }
.ledger-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ledger-item {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(28px, 3.6vw, 48px) clamp(20px, 2.6vw, 40px) clamp(28px, 3.6vw, 48px) 0;
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(20px, 2.6vw, 40px);
}
.ledger-item:first-child { border-left: 0; padding-left: 0; }
.ledger-value { font: 400 clamp(2.3rem, 3.3vw, 3.2rem)/1 var(--serif); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.ledger-value small { font-size: 0.5em; font-style: italic; color: var(--bronze); letter-spacing: 0; margin-left: 0.1em; }
.ledger-label { font-size: 0.875rem; line-height: 1.55; color: var(--muted); max-width: 22ch; }
.ledger-item a { color: inherit; text-decoration: none; display: grid; gap: 10px; }
.ledger-item a:hover .ledger-value { color: var(--brown); }

/* How it works: the four panels are pinned and slide sideways as the page scrolls, on phones too,
   with the glass mark and the gold line travelling across the bottom at every size (landscape phones
   are the one exception, there is no room). Without JavaScript, or for anyone who has asked for
   reduced motion, the panels simply stack. */
.how { background: var(--ink); color: var(--on-dark); --btn-color: var(--gold); --btn-on: var(--ink); --btn-hover: var(--gold-2); }
.how-pin { position: relative; }
.how-sticky { display: block; padding-block: clamp(64px, 10vw, 104px) 0; }
.how-track { display: flex; flex-direction: column; align-items: stretch; gap: clamp(56px, 8vw, 96px); padding-inline: var(--gutter); }
.how-panel { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; max-width: 1000px; }
.how-intro h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--on-dark-strong); }
.how-intro h2 em, .how-panel h3 em { color: var(--gold); font-style: italic; }
.how-intro p { font-size: var(--t-lede); max-width: 44ch; }
.how-photo { width: 100%; }
.how-copy { display: grid; gap: 18px; align-content: center; }
.how-num { font: italic 400 clamp(2.6rem, 5vw, 4.6rem)/0.9 var(--serif); color: var(--bronze); }
.how-panel h3 { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--on-dark-strong); }
.how-panel p { font-size: 1.0625rem; line-height: 1.7; max-width: 48ch; }
.how-glass, .how-progress { display: none; }
.how-end { height: clamp(40px, 6vw, 88px); }
@media (max-width: 700px) {
  .how-panel { grid-template-columns: 1fr; }
  .how-photo { max-width: 300px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .how-sticky {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
  }
  .js .how-track { flex-direction: row; align-items: center; gap: clamp(72px, 10vw, 180px); will-change: transform; }
  .js .how-panel { flex: 0 0 auto; width: min(1000px, 84vw); max-width: none; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 80px); }
  .js .how-glass { display: block; position: absolute; left: var(--gutter); bottom: 5%; width: 88px; will-change: transform; pointer-events: none; opacity: 0.95; }
  .js .how-glass img { width: 100%; height: auto; }
  .js .how-progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform-origin: left center; transform: scaleX(0); opacity: 0.85; }
  @media (max-height: 760px) and (min-width: 901px) {
    .js .how-panel { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
    .js .how-panel h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
    .js .how-panel p { font-size: 1rem; }
  }
  @media (max-width: 900px) {
    .js .how-track { gap: 10vw; }
    .js .how-panel { width: 84vw; grid-template-columns: 1fr; gap: 18px; align-content: center; }
    .js .how-photo { width: min(46vw, 230px); max-width: none; }
    .js .how-copy { gap: 10px; }
    .js .how-num { font-size: 1.9rem; }
    .js .how-intro h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
    .js .how-intro p { font-size: 1rem; }
    .js .how-panel h3 { font-size: clamp(1.4rem, 6.2vw, 1.9rem); }
    .js .how-panel p { font-size: 0.95rem; line-height: 1.55; }
    .js .how-glass { width: 56px; bottom: 3.5%; }
  }
  @media (max-width: 900px) and (max-height: 700px) {
    .js .how-photo { width: min(34vw, 170px); }
    .js .how-panel p { font-size: 0.9rem; line-height: 1.5; }
    .js .how-glass { width: 44px; bottom: 2.5%; }
  }
  @media (max-width: 900px) and (orientation: landscape) {
    .js .how-panel { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 22px; align-items: center; }
    .js .how-photo { width: 100%; }
    .js .how-intro h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); }
    .js .how-intro p, .js .how-panel p { font-size: 0.85rem; line-height: 1.45; }
    .js .how-panel h3 { font-size: clamp(1.2rem, 3.4vw, 1.6rem); }
    .js .how-glass { display: none; }
  }
}

/* Packages: one framed photo of the bar stays put on the left while the four packages scroll past
   on the right, and the photo changes to match the package in view. On phones each package
   carries its own photo above the copy. */
.pkg-intro { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.pkg-intro p { max-width: 46ch; font-size: 1.0625rem; }
.pkg-explorer { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.pkg-media { position: sticky; top: calc(var(--header-h) + 28px); padding: 0 22px 22px 0; max-width: 460px; }
.pkg-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(155deg, #F1E4D2 0%, #E6CFAE 48%, #D9C3A6 100%); }
.pkg-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.7s var(--ease), transform 1.8s var(--ease-out); }
.pkg-stage > .is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pkg-stage > * { transition: opacity 0.3s var(--ease); transform: none; } .pkg-caption { transition: none; } }
.pkg-caption { margin-top: 30px; font: italic 400 1rem/1.5 var(--serif); color: var(--muted); max-width: 38ch; min-height: 3em; transition: opacity 0.4s var(--ease); }
.pkg-caption.is-fading { opacity: 0; }
.pkg-list { display: grid; }
.pkg { display: grid; gap: 16px; padding-block: clamp(32px, 4.5vw, 56px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.pkg:first-child { border-top: 0; padding-top: 0; }
.pkg-shot { display: none; }
.pkg-head { display: grid; gap: 8px; }
.pkg-num { font: italic 400 1.5rem/1 var(--serif); color: var(--bronze); }
.menu-eyebrow { font: 500 0.68rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.menu-title { display: flex; align-items: baseline; gap: 16px; }
.menu-title h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; white-space: nowrap; }
.menu-title .leader { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-0.4em); min-width: 24px; transition: border-color 0.4s var(--ease); }
.pkg:hover .menu-title .leader, .pkg.is-active .menu-title .leader { border-color: var(--bronze); }
.menu-title .price { font: italic 400 clamp(1.15rem, 1.9vw, 1.45rem)/1 var(--serif); color: var(--brown); white-space: nowrap; }
.menu-tag { font: italic 400 1rem/1 var(--serif); color: var(--blue); white-space: nowrap; }
.pkg .lede-sm { font-size: 1.0625rem; max-width: 58ch; }
.includes {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 44px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.includes li { break-inside: avoid; padding-block: 8px; border-bottom: 1px dotted var(--line); }
.pkg .actions { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; padding-top: 8px; }
.menu-foot { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 0.9375rem; }
.menu-foot p { max-width: 70ch; }
@media (max-height: 780px) and (min-width: 901px) {
  .pkg-media { max-width: 380px; top: calc(var(--header-h) + 16px); }
}
@media (max-width: 900px) {
  .pkg-intro { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .pkg-explorer { grid-template-columns: 1fr; }
  .pkg-media { display: none; }
  .pkg-shot { display: block; padding: 0 14px 14px 0; margin-bottom: 8px; }
  .pkg-shot .frame::before { inset: 14px -14px -14px 14px; }
  #dive-bar .pkg-shot img { object-position: center 30%; }
  #full-bar .pkg-shot img { object-position: center 62%; }
}

/* Reviews: one pull quote set large, then the live review feed */
.quote-block { text-align: center; display: grid; gap: 24px; justify-items: center; max-width: 880px; margin-inline: auto; }
.quote-mark { font: 400 6rem/0.5 var(--serif); color: var(--gold); height: 2.6rem; }
.quote-block blockquote { margin: 0; font: italic 400 clamp(1.5rem, 2.8vw, 2.4rem)/1.32 var(--serif); color: var(--ink); text-wrap: balance; letter-spacing: -0.01em; }
.quote-block cite { font: 500 0.78rem/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.rating-line { display: inline-flex; align-items: center; gap: 14px; font-size: 0.9375rem; color: var(--body); text-decoration: none; }
.rating-line .stars { color: var(--gold); letter-spacing: 0.14em; font-size: 1rem; }
.rating-line:hover { color: var(--brown); }
.review-feed { margin-top: clamp(40px, 6vw, 72px); }
.review-feed iframe { display: block; width: 100%; min-width: 100%; min-height: 520px; border: 0; }
.review-feed-note { margin-top: 18px; text-align: center; }

/* Two column feature (who we are, package hero, contact) */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.feature-copy { display: grid; gap: 26px; }
.feature.reverse .feature-copy { order: 2; }
.feature .shot-col { padding: 6px 22px 22px 0; }

/* Signature menus: the headline and copy sit side by side, then the printed menus run across the
   full width of the page in their frames, every other one set a little lower. The row drifts slowly
   on its own and can be slid by hand (swipe, drag, the arrows, or the arrow keys); the drift pauses
   while anyone is touching it and resumes a few seconds later. Three copies of the set let it wrap
   in either direction without a jump. */
.menus-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 110px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.menus-head .h-section { margin: 0; }
.menu-rail { position: relative; }
.menu-scroller { overflow-x: auto; overflow-y: hidden; padding: 6px 0 28px; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.menu-scroller::-webkit-scrollbar { display: none; }
.menu-scroller.is-dragging { cursor: grabbing; }
.menu-scroller:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.menu-rail-track { display: flex; width: max-content; }
.menu-set { display: flex; align-items: flex-start; flex: none; gap: clamp(44px, 4.2vw, 64px); padding-right: clamp(44px, 4.2vw, 64px); }
.menu-set .frame { flex: none; width: clamp(170px, 19vw, 270px); }
.menu-set .frame:nth-child(even) { margin-top: clamp(26px, 3.4vw, 48px); }
.menu-set .frame::before { inset: 16px -16px -16px 16px; }
.menu-set img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.menu-nav { display: flex; justify-content: flex-end; gap: 10px; padding: 18px var(--gutter) 0; }
.menu-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease); }
.menu-arrow:hover { border-color: var(--bronze); color: var(--brown); }
.menu-arrow:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.menu-arrow[data-dir="-1"] svg { transform: rotate(180deg); }
@media (max-width: 900px) {
  .menus-head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .menu-set { gap: 34px; padding-right: 34px; }
  .menu-set .frame { width: clamp(150px, 44vw, 200px); }
  .menu-set .frame::before { inset: 12px -12px -12px 12px; }
  .menu-nav { padding-top: 10px; justify-content: center; }
}

/* What we believe */
.beliefs { background: var(--ink); color: var(--on-dark); --btn-color: var(--gold); --btn-on: var(--ink); --btn-hover: var(--gold-2); }
.beliefs-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 8vw, 140px); align-items: start; }
.beliefs-lead { display: grid; gap: 28px; position: sticky; top: calc(var(--header-h) + 40px); }
.beliefs-lead .h-section { color: var(--on-dark-strong); }
.beliefs-lead .h-section em { color: var(--gold); }
.beliefs-lead p { max-width: 42ch; }
.beliefs-lead .shot-col { padding: 10px 22px 22px 0; max-width: 460px; }
.tenets { list-style: none; margin: 0; padding: 0; display: grid; }
.tenet { display: grid; gap: 14px; padding-block: clamp(32px, 4.5vw, 56px); border-top: 1px solid var(--line-dark); }
.tenet:last-child { border-bottom: 1px solid var(--line-dark); }
.tenet h3 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.018em; color: var(--on-dark-strong); }
.tenet h3 em { font-style: italic; color: var(--gold); }
.tenet p { max-width: 52ch; font-size: 1.0625rem; }
.beliefs-teaser { display: grid; gap: 18px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.eyebrow { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tenets-mini { list-style: none; margin: 0; padding: 0; display: grid; }
.tenets-mini li { display: grid; gap: 6px; padding-block: 16px; border-top: 1px solid var(--line-soft); }
.tenets-mini li:first-child { border-top: 0; padding-top: 0; }
.tenets-mini h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.1; letter-spacing: -0.012em; }
.tenets-mini h3 em { font-style: italic; color: var(--brown); }
.tenets-mini p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 22px;
  font: 400 1.25rem/1.35 var(--serif);
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.faq summary:hover { color: var(--brown); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.7rem/1 var(--sans); color: var(--bronze); transition: transform 0.35s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 26px; max-width: 66ch; font-size: 1rem; }

/* Page hero (inner pages) */
.page-hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 112px); }
.crumb { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--brown); }
.price-line { font: italic 400 1.45rem/1.3 var(--serif); color: var(--brown); }
.price-line small { font: 400 0.9375rem/1.5 var(--sans); color: var(--muted); display: block; font-style: normal; }

/* Side by side lists (we bring / you provide) */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.split h3 { font-size: 1.6rem; margin-bottom: 16px; }
.plain-list { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.plain-list li { padding-block: 11px; border-bottom: 1px dotted var(--line); }

/* Pricing at a glance */
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; max-width: 640px; }
.price-table th, .price-table td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.price-table td.num { font: italic 400 1.25rem/1.2 var(--serif); color: var(--brown); text-align: right; font-variant-numeric: tabular-nums; }
.price-table th.num { text-align: right; }

/* Package switcher at the bottom of each package page */
.more-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.more-packages a {
  display: grid;
  gap: 6px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.more-packages a:hover { border-color: var(--bronze); background: var(--paper-2); }
.more-packages .name { font: 400 1.5rem/1.2 var(--serif); }
.more-packages .from { font: italic 400 1rem/1.4 var(--serif); color: var(--brown); }

/* Final call to action */
.cta-band { text-align: center; display: grid; gap: 24px; justify-items: center; }
.cta-band p { max-width: 50ch; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-list li { padding-block: 18px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.contact-list .k { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.contact-list .v { font: 400 1.4rem/1.3 var(--serif); color: var(--ink); }
.contact-list .v a { color: inherit; text-decoration: none; }
.contact-list .v a:hover { color: var(--brown); }
.panel { background: var(--paper-2); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 5px; margin: 6px; padding: clamp(28px, 4vw, 44px); display: grid; gap: 20px; }
.panel ol { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 0.9375rem; }

/* City strip: the glass mark separates the four markets, drifting slowly across the page */
.cities-strip { overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--paper); padding-block: 22px; }
.cities-track { display: flex; width: max-content; gap: 0; }
.cities-set { display: flex; align-items: center; flex: none; padding-right: 0; }
.cities-set span { font: italic 400 clamp(1.15rem, 1.6vw, 1.5rem)/1 var(--serif); color: var(--ink); white-space: nowrap; padding-inline: clamp(22px, 3vw, 40px); }
.cities-set img { height: 26px; width: auto; opacity: 0.9; }
.cities-set a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
.cities-set a:hover { color: var(--brown); }
@media (prefers-reduced-motion: no-preference) {
  .cities-track { animation: drift 48s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .cities-track { width: auto; justify-content: center; flex-wrap: wrap; }
  .cities-set + .cities-set { display: none; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Footer */
.site-footer { background: var(--paper-2); padding-block: clamp(56px, 7vw, 96px) 28px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.footer-wordmark { width: min(100%, 440px); height: auto; }
.footer-top p { font-size: 1.0625rem; max-width: 40ch; margin-top: 22px; }
.footer-cta { display: grid; gap: 16px; justify-items: start; }
.footer-cta .serif-note { font-size: 1.3rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-top: clamp(36px, 5vw, 56px); }
.footer-col h4 { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.9375rem; }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--brown); }
.footer-col .cities-list li { font: italic 400 1.15rem/1.4 var(--serif); color: var(--ink); }
.footer-bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--brown); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.stack { display: grid; gap: 20px; }
.stack-lg { display: grid; gap: clamp(32px, 4.5vw, 52px); }
.center { text-align: center; }
.mt { margin-top: clamp(24px, 4vw, 40px); }
.embed-slot { min-height: 120px; display: grid; place-items: center; border: 1px dashed var(--line); color: var(--muted); font-size: 0.875rem; text-align: center; padding: 24px; }

/* Responsive */
@media (max-width: 1120px) {
  .nav { gap: 20px; }
  .header-phone { display: none; }
}
@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .nav, .header-cta .btn { display: none; }
  .nav-toggle { display: inline-block; }
  .header-inner { grid-template-columns: auto 1fr auto; min-height: 70px; }
  .brand img { height: 42px; }
  .hero { min-height: clamp(560px, 88vh, 820px); }
  .hero-scroll { display: none; }
  .feature, .contact-grid, .beliefs-grid { grid-template-columns: 1fr; }
  .feature.reverse .feature-copy { order: 0; }
  .feature .shot-col, .beliefs-lead .shot-col { padding-right: 18px; padding-bottom: 18px; }
  .beliefs-lead { position: static; }
  .ledger { grid-template-columns: 1fr; }
  .ledger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-item { padding: 22px 18px 22px 0; }
  .ledger-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger-item:nth-child(even) { padding-left: 18px; }
  .ledger-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .ledger-item:last-child:nth-child(odd) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .ledger-item:last-child:nth-child(odd) .ledger-label { max-width: 40ch; }
  .split { grid-template-columns: 1fr; }
  .more-packages { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; align-items: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .review-feed iframe { min-height: 640px; }
}
@media (max-width: 560px) {
  .includes { columns: 1; }
  .menu-title { flex-wrap: wrap; }
  .menu-title .leader { display: none; }
  .menu-title .price { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .pkg .actions .btn { width: auto; }
  .frame::before { inset: 14px -14px -14px 14px; }
  .ledger-value { font-size: 2.1rem; }
}

/* Curated review cards */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.quote-card { margin: 0; display: grid; gap: 18px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.quote-card blockquote { margin: 0; font: italic 400 1.2rem/1.45 var(--serif); color: var(--ink); text-wrap: pretty; }
.quote-card figcaption { display: grid; gap: 2px; }
.quote-card figcaption cite { font: 500 0.78rem/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown); font-style: normal; }
.quote-card figcaption cite { font-style: normal; }
.quote-card figcaption span { font-size: 0.8125rem; color: var(--muted); }
.mt-lg { margin-top: clamp(40px, 6vw, 72px); }

/* Package list on the occasion and city pages */
.package-list { list-style: none; margin: 0; padding: 0; display: grid; }
.package-list li { border-top: 1px solid var(--line); }
.package-list li:last-child { border-bottom: 1px solid var(--line); }
.package-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 18px 0; text-decoration: none; color: var(--ink); transition: color 0.2s var(--ease); }
.package-list a:hover { color: var(--brown); }
.package-list .name { font: 400 1.35rem/1.2 var(--serif); }
.package-list .from { font: italic 400 1rem/1.4 var(--serif); color: var(--brown); white-space: nowrap; }
.package-list .desc { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--body); max-width: 60ch; }

/* Areas served */
.area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; font-size: 1rem; }
.area-list li { padding-block: 9px; border-bottom: 1px dotted var(--line); }

/* Legal pages */
.legal { display: grid; gap: 16px; font-size: 1rem; }
.legal h2 { font-size: 1.5rem; margin-top: 20px; }
.legal p { max-width: 72ch; }
.legal strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .area-list { grid-template-columns: 1fr; }
  .package-list a { grid-template-columns: 1fr; }
}

/* Related links */
.related { display: grid; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.related-label { font: italic 400 1.05rem/1.4 var(--serif); color: var(--muted); }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.related a { font: 500 0.78rem/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown); text-decoration: none; }
.related a:hover { color: var(--bronze); }

/* Cocktail classes */
.class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.class-item { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.class-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.class-item h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.class-item p { font-size: 1rem; max-width: 56ch; }
.credit { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.credit .serif-note { font-size: 1.35rem; }
.form-panel { max-width: 820px; margin-inline: auto; background: var(--paper-2); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 5px; padding: clamp(16px, 3vw, 32px); }
.form-panel iframe { display: block; width: 100%; min-height: 813px; }
@media (max-width: 900px) {
  .class-grid { grid-template-columns: 1fr; }
}