@font-face {
  font-family: 'Cabinet Grotesk';
  src: url(assets/fonts/cabinet-grotesk-500.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url(assets/fonts/cabinet-grotesk-700.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url(assets/fonts/cabinet-grotesk-800.woff2) format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url(assets/fonts/satoshi-400.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url(assets/fonts/satoshi-500.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url(assets/fonts/satoshi-700.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Size-matched fallbacks so the swap to the brand fonts does not reflow the page.
   Metrics computed from the font files, weighted by this site's text. Android has no Arial
   and keeps the system font, as before. */
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 400 500;
  size-adjust: 98.91%; ascent-override: 99.08%; descent-override: 28.31%; line-gap-override: 9.10%;
}
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 900;
  size-adjust: 96.87%; ascent-override: 101.17%; descent-override: 28.90%; line-gap-override: 9.29%;
}
@font-face {
  font-family: 'Cabinet Grotesk Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 700 900;
  size-adjust: 93.77%; ascent-override: 92.78%; descent-override: 29.86%; line-gap-override: 9.60%;
}

/* Icons are inline SVGs (Phosphor, MIT); .ph sizes them to the surrounding text. */
.ph {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.nav__burger .ph-x { display: none; }
.nav__burger[aria-expanded="true"] .ph-x { display: inline-block; }
.nav__burger[aria-expanded="true"] .ph-list { display: none; }


/* ==========================================================================
   Emerald Coast IV Hydration & Wellness
   Design system. Hand-built tokens on native CSS (no framework).

   PALETTE LOCK  : sand neutrals + ONE accent (emerald, sampled from the logo).
   SHAPE LOCK    : buttons/chips = pill (999px). media/cards = 20px.
                   inputs = 12px. nothing else.
   THEME LOCK    : light page by default, full dark counterpart via
                   prefers-color-scheme + manual [data-theme] override.
   TYPE          : Cabinet Grotesk (display) + Satoshi (body), Fontshare.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Hosted-site palette tokens (site.json) */
  --color-primary: #0E7F6C;
  --color-accent: #45D6B8;
  --color-background: #FDFAF4;
  --color-text: #08201D;
  /* -- sand neutrals (light ground) -- */
  --sand-50:  #FDFAF4;
  --sand-100: #F7F0E2;
  --sand-200: #EFE4CF;
  --sand-300: #E1D2B4;

  /* -- deep teal ink, sampled from the logo's dark shape -- */
  --ink-900: #08201D;
  --ink-800: #0B2220;
  --ink-700: #123833;
  --ink-600: #1B4E46;

  /* -- the single accent -- */
  --emerald-600: #0E7F6C;  /* solid buttons, white text, AA 4.92 */
  --emerald-500: #10917B;
  --emerald-400: #45D6B8;  /* logo wave, dark-mode accent */
  --emerald-100: #D5F2EA;

  /* -- semantic: light theme -- */
  --bg:            var(--sand-50);
  --bg-subtle:     var(--sand-100);
  --bg-sunken:     var(--sand-200);
  --surface:       #FFFFFF;
  --surface-line:  rgb(11 34 32 / 0.10);
  --surface-line-strong: rgb(11 34 32 / 0.20);

  --text:          var(--ink-800);
  --text-muted:    #42615C;          /* AA 6.51 on --bg */
  --text-inverse:  var(--sand-50);

  --accent:        var(--emerald-600);
  --accent-text:   #0A6E5D;          /* AA on every light surface: 5.93 bg, 5.44 subtle, 4.90 sunken */
  --accent-soft:   var(--emerald-100);
  --accent-on:     #FFFFFF;          /* text colour that sits on --accent */

  --band:          var(--ink-800);   /* dark foot of the page */
  --band-text:     #EFE7D7;
  --band-muted:    #A9C2BB;
  --band-accent:   var(--emerald-400);
  --band-line:     rgb(239 231 215 / 0.16);

  /* -- shape lock -- */
  --r-pill: 999px;
  --r-media: 20px;
  --r-input: 12px;
  --r-chip: 999px;

  /* -- tinted shadows: hue-matched to the ground, never pure black -- */
  --shadow-sm: 0 1px 2px rgb(11 34 32 / 0.05), 0 2px 8px rgb(11 34 32 / 0.04);
  --shadow-md: 0 2px 4px rgb(11 34 32 / 0.05), 0 12px 28px rgb(11 34 32 / 0.08);
  --shadow-lg: 0 4px 8px rgb(11 34 32 / 0.06), 0 24px 60px rgb(11 34 32 / 0.12);

  /* -- type -- */
  --font-display: 'Cabinet Grotesk', 'Cabinet Grotesk Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Satoshi', 'Satoshi Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* -- layout -- */
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 72px;
  --hero-gap: clamp(24px, 3vw, 48px);   /* sand showing below the hero photo */

  /* -- motion (MOTION_INTENSITY 5: fluid CSS, no hijacking) -- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;

  /* -- z scale, documented so nobody guesses -- */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;

  color-scheme: light;
}

/* Dark counterpart. The logo's native form: emerald on deep teal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:           var(--ink-900);
    --bg-subtle:    #0B2925;
    --bg-sunken:    #0D2B27;
    --surface:      #0F322D;
    --surface-line: rgb(239 231 215 / 0.14);
    --surface-line-strong: rgb(239 231 215 / 0.26);

    --text:         #EFE7D7;
    --text-muted:   #A9C2BB;
    --text-inverse: var(--ink-900);

    --accent:       var(--emerald-400);
    --accent-text:  var(--emerald-400);
    --accent-soft:  rgb(69 214 184 / 0.14);
    --accent-on:    var(--ink-900);

    --band:         #061917;
    --band-text:    #EFE7D7;
    --band-muted:   #A9C2BB;
    --band-accent:  var(--emerald-400);
    --band-line:    rgb(239 231 215 / 0.14);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30), 0 2px 8px rgb(0 0 0 / 0.24);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.32), 0 12px 28px rgb(0 0 0 / 0.36);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.34), 0 24px 60px rgb(0 0 0 / 0.44);

    color-scheme: dark;
  }
}

[data-theme='dark'] {
  --bg:           var(--ink-900);
  --bg-subtle:    #0B2925;
  --bg-sunken:    #0D2B27;
  --surface:      #0F322D;
  --surface-line: rgb(239 231 215 / 0.14);
  --surface-line-strong: rgb(239 231 215 / 0.26);

  --text:         #EFE7D7;
  --text-muted:   #A9C2BB;
  --text-inverse: var(--ink-900);

  --accent:       var(--emerald-400);
  --accent-text:  var(--emerald-400);
  --accent-soft:  rgb(69 214 184 / 0.14);
  --accent-on:    var(--ink-900);

  --band:         #061917;
  --band-text:    #EFE7D7;
  --band-muted:   #A9C2BB;
  --band-accent:  var(--emerald-400);
  --band-line:    rgb(239 231 215 / 0.14);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30), 0 2px 8px rgb(0 0 0 / 0.24);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.32), 0 12px 28px rgb(0 0 0 / 0.36);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.34), 0 24px 60px rgb(0 0 0 / 0.44);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2.5px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--text); }

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

.skip-link {
  position: absolute; left: 12px; top: -100px;
  z-index: var(--z-overlay);
  background: var(--accent); color: var(--accent-on);
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.h-1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: -0.032em; }
.h-2 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); letter-spacing: -0.026em; line-height: 1.1; }
.h-3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -0.018em; line-height: 1.22; font-weight: 700; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}
.body-copy { color: var(--text-muted); max-width: 62ch; text-wrap: pretty; }
.body-copy + .body-copy { margin-top: 1em; }

/* Eyebrow. Rationed: max one per three sections, site-wide. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 20px;
}
.eyebrow .ph { font-size: 1.05rem; }

.accent-word { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 9vw, 128px); }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }
.section-head { max-width: 46ch; margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head .lede { margin-top: 18px; }

.rule { height: 1px; background: var(--surface-line); border: 0; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   Every variant below is contrast-checked against the surface it sits on.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-on);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;              /* CTA labels never wrap */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 15px 28px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn .ph { font-size: 1.15em; transition: transform 0.25s var(--ease); }
.btn:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn:hover .ph-arrow-right { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.985); box-shadow: var(--shadow-sm); }

.btn--sm { padding: 11px 20px; font-size: 0.9rem; }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }

/* Outline on the sand ground */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--surface-line-strong);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--text); background: var(--bg-subtle); box-shadow: none; }

/* For use inside dark bands and over photography */
.btn--on-dark { --btn-bg: var(--band-accent); --btn-fg: var(--ink-900); }
.btn--ghost-on-dark {
  --btn-bg: rgb(8 32 29 / 0.36);
  --btn-fg: #FFFFFF;
  border-color: rgb(255 255 255 / 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.btn--ghost-on-dark:hover { background: rgb(8 32 29 / 0.6); border-color: #FFFFFF; box-shadow: none; }
@media (prefers-reduced-transparency: reduce) {
  .btn--ghost-on-dark { background: rgb(8 32 29 / 0.85); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--accent-text);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: 11px; }

/* --------------------------------------------------------------------------
   6. NAVIGATION  (one line at desktop, 72px tall)
   -------------------------------------------------------------------------- */
/* Tall enough that the bar settles after a deliberate scroll, not a twitch. */
.nav-sentinel { position: absolute; top: 0; height: 28px; width: 1px; pointer-events: none; }

.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 20px;
}

/* 'top'  = resting on the page ground, no bar, no line.
   'over'  = sitting on top of dark photography (kept for dark-hero pages).
   'solid' = scrolled, frosted bar with a hairline. */
.nav[data-mode='top'] { background: transparent; border-bottom-color: transparent; box-shadow: none; }

.nav[data-mode='over'] { color: #FFFFFF; }
.nav[data-mode='over'] .nav__link { color: rgb(255 255 255 / 0.88); }
.nav[data-mode='over'] .nav__link:hover,
.nav[data-mode='over'] .nav__link[aria-current='page'] { color: #FFFFFF; }
.nav[data-mode='over'] .nav__icon-btn { color: #FFFFFF; border-color: rgb(255 255 255 / 0.4); }
.nav[data-mode='over'] .brand__name { color: #FFFFFF; }
.nav[data-mode='over'] .brand__tag { color: rgb(255 255 255 / 0.72); }

.nav[data-mode='solid'] {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--surface-line);
  box-shadow: 0 1px 20px rgb(11 34 32 / 0.05);
}
@media (prefers-reduced-transparency: reduce) {
  .nav[data-mode='solid'] { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand__mark { width: 38px; height: 38px; object-fit: contain; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.06; }
.brand__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: -0.022em; color: var(--text);
  transition: color 0.35s var(--ease);
}
.brand__tag {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}
@media (max-width: 400px) {
  .brand__tag { font-size: 0.57rem; letter-spacing: 0.09em; }
}

.nav__links { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); }
.nav__link {
  position: relative;
  font-size: 0.94rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: 10px; }

.nav__icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.nav__icon-btn:hover { background: var(--bg-subtle); border-color: var(--text); }
.nav__icon-btn:active { transform: scale(0.94); }
.nav__icon-btn .ph { font-size: 1.2rem; }

.theme-toggle .ph-moon { display: none; }
[data-theme='dark'] .theme-toggle .ph-moon { display: block; }
[data-theme='dark'] .theme-toggle .ph-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .ph-moon { display: block; }
  :root:not([data-theme='light']) .theme-toggle .ph-sun { display: none; }
}
[data-theme='light'] .theme-toggle .ph-sun { display: block; }
[data-theme='light'] .theme-toggle .ph-moon { display: none; }

.nav__burger { display: none; }

/* Mobile drawer */
@media (max-width: 979px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__burger { display: inline-grid; }

  .nav-drawer {
    position: fixed; inset: var(--nav-h) 0 0 0;
    z-index: var(--z-sticky);
    background: var(--bg);
    padding: 28px var(--gutter) 40px;
    display: flex; flex-direction: column; gap: 6px;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
    overflow-y: auto;
  }
  .nav-drawer[data-open='true'] {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav-drawer a.nav-drawer__link {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.6rem; letter-spacing: -0.028em;
    padding: 14px 0; border-bottom: 1px solid var(--surface-line);
  }
  .nav-drawer .btn { margin-top: 24px; width: 100%; }
  body[data-drawer='true'] { overflow: hidden; }
}
@media (min-width: 980px) { .nav-drawer { display: none; } }

/* --------------------------------------------------------------------------
   7. HERO  (asymmetric split, fits the first viewport)
   -------------------------------------------------------------------------- */
/* The photograph starts below the bar rather than under it, so the nav never
   draws a hairline across the image. Crisp rounded edge, no smeared gradient. */
.hero {
  position: relative;
  min-height: 100dvh;
  padding-top: var(--nav-h);
  padding-bottom: var(--hero-gap);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  background: var(--bg);
}
.hero__content {
  padding-top: 24px;
  padding-bottom: 64px;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-right: clamp(28px, 4vw, 76px);
  max-width: 780px;
  position: relative;
  z-index: var(--z-base);
}
.hero__title { margin-bottom: 22px; }
.hero__lede { margin-bottom: 34px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; }
@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .page-head__ctas { flex-direction: column; align-items: stretch; }
  .page-head__ctas .btn { width: 100%; }
}

.hero__media {
  position: relative;
  align-self: stretch;
  min-height: calc(100dvh - var(--nav-h) - var(--hero-gap));
  border-radius: var(--r-media) 0 0 var(--r-media);
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

@media (max-width: 979px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: var(--nav-h); padding-bottom: 0; }
  .hero__media {
    order: -1;
    min-height: 0;
    height: clamp(240px, 36vh, 360px);
    border-radius: 0 0 var(--r-media) var(--r-media);
  }
  .hero__content {
    padding-inline: var(--gutter);
    padding-top: 26px; padding-bottom: 48px;
  }
  .hero__lede { margin-bottom: 28px; }
}

/* --------------------------------------------------------------------------
   8. ASSURANCE STRIP
   -------------------------------------------------------------------------- */
.assure { border-block: 1px solid var(--surface-line); background: var(--bg-subtle); }
.assure__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--surface-line);
}
.assure__item {
  background: var(--bg-subtle);
  padding: 30px clamp(18px, 2.2vw, 34px);
  display: flex; align-items: flex-start; gap: 14px;
}
.assure__item .ph { font-size: 1.5rem; color: var(--accent-text); flex: none; margin-top: 1px; }
.assure__k { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.018em; }
.assure__v { font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; margin-top: 3px; }

@media (max-width: 900px) { .assure__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .assure__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. BENTO  (6 cells, exact count, mixed sizes, mixed backgrounds)
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(210px, auto);   /* rows lead, images follow */
  gap: clamp(12px, 1.1vw, 16px);
}
.bento__cell {
  border-radius: var(--r-media);
  overflow: hidden;
  position: relative;
  min-height: 200px;
}
.bento__cell--text {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  padding: clamp(26px, 2.6vw, 36px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.bento__cell--text .ph { font-size: 1.75rem; color: var(--accent-text); }
.bento__cell--text p { color: var(--text-muted); font-size: 0.95rem; margin-top: 8px; }

.bento__cell--media { min-height: 260px; }
/* Taken out of flow so the cell's grid area sets the height, not the photo's ratio. */
.bento__cell--media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.bento__cell--accent {
  background: var(--accent);
  color: var(--accent-on);
  padding: clamp(26px, 2.6vw, 36px);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.bento__cell--accent .ph { font-size: 1.75rem; }
.bento__cell--accent p { opacity: 0.92; font-size: 0.95rem; }

.b1 { grid-column: span 7; grid-row: span 2; }
.b2 { grid-column: span 5; }
.b3 { grid-column: span 5; }
.b4 { grid-column: span 5; }
.b5 { grid-column: span 3; }
.b6 { grid-column: span 4; }

@media (max-width: 1024px) {
  .b1 { grid-column: span 12; grid-row: span 1; min-height: 300px; }
  .b2, .b3 { grid-column: span 6; }
  .b4 { grid-column: span 12; }
  .b5, .b6 { grid-column: span 6; }
}
@media (max-width: 700px) {
  .bento__cell { grid-column: span 12 !important; }
}

/* --------------------------------------------------------------------------
   10. DRIP RAIL  (scroll-snap: the right component for a menu of 6+)
   -------------------------------------------------------------------------- */
.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: clamp(32px, 4vw, 52px);
}
.rail-head > div { max-width: 46ch; }
.rail-nav { display: flex; gap: 9px; flex: none; }
.rail-btn {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-pill);
  background: transparent; color: var(--text); cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.18s var(--ease), opacity 0.2s var(--ease);
}
.rail-btn:hover:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); }
.rail-btn:active:not(:disabled) { transform: scale(0.94); }
.rail-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rail-btn .ph { font-size: 1.25rem; }

.rail-wrap { width: 100%; }
/* Percentage of the wrapper, not 100vw: the scrollbar never shifts the gutter,
   and the first card lines up with the headline above it. */
.rail {
  --rail-gutter: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(288px, 24%);
  gap: clamp(12px, 1.1vw, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-gutter);
  padding-inline: var(--rail-gutter);
  padding-bottom: 6px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .rail-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 700px) { .rail { grid-auto-columns: minmax(262px, 82%); } }

.drip {
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-media);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.drip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--surface-line-strong); }
.drip__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.drip__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.22rem;
  letter-spacing: -0.024em; line-height: 1.15;
  min-height: 2.3em;                 /* keeps every card's copy on the same baseline */
}
.drip__price {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: var(--accent-text); flex: none; letter-spacing: -0.02em;
}
.drip__desc { color: var(--text-muted); font-size: 0.93rem; line-height: 1.55; margin-bottom: 20px; }
.drip__list { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.drip__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--surface-line); }
.drip__foot .link-arrow { font-size: 0.9rem; }
.drip__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; line-height: 1.45; }
.drip__list .ph { color: var(--accent-text); font-size: 1rem; flex: none; margin-top: 2px; }

/* --------------------------------------------------------------------------
   11. STEPS  (staggered, verb-labelled, connector line)
   -------------------------------------------------------------------------- */
.steps-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
.steps { position: relative; display: flex; flex-direction: column; gap: 4px; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding-block: 24px;
  position: relative;
}
.step + .step { border-top: 1px solid var(--surface-line); }
.step__badge {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.step__badge .ph { font-size: 1.5rem; }
.step:hover .step__badge { background: var(--accent); color: var(--accent-on); transform: scale(1.06); }
.step__body p { color: var(--text-muted); font-size: 0.96rem; margin-top: 7px; max-width: 44ch; }

.steps-media { border-radius: var(--r-media); overflow: hidden; align-self: stretch; min-height: 380px; position: relative; }
.steps-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

@media (max-width: 900px) {
  .steps-wrap { grid-template-columns: 1fr; }
  .steps-media { min-height: 280px; order: -1; }
  .step { grid-template-columns: 48px 1fr; gap: 18px; }
  .step__badge { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   12. FULL-BLEED MEDIA BAND
   -------------------------------------------------------------------------- */
.band-media {
  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 62vh, 620px);
  display: flex; align-items: center;
  overflow: hidden;
}
.band-media__bg { position: absolute; inset: 0; z-index: -2; }
.band-media__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.band-media::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(6 25 23 / 0.94) 0%, rgb(6 25 23 / 0.80) 42%, rgb(6 25 23 / 0.34) 100%);
}
.band-media__inner { color: #FFFFFF; max-width: 44rem; padding-block: 72px; }
.band-media h2 { color: #FFFFFF; }
.band-media p { color: rgb(255 255 255 / 0.86); margin-top: 20px; max-width: 52ch; }
.band-media .band-ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.band-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.band-stat {
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-chip);
  padding: 9px 18px;
  font-size: 0.88rem; font-weight: 600;
  color: #FFFFFF;
  background: rgb(6 25 23 / 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (prefers-reduced-transparency: reduce) {
  .band-stat { background: rgb(6 25 23 / 0.8); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 700px) {
  .band-media::before { background: linear-gradient(180deg, rgb(6 25 23 / 0.72) 0%, rgb(6 25 23 / 0.92) 60%); }
}

/* --------------------------------------------------------------------------
   13. LOCATIONS  (grouped chips, not a 15-row list)
   -------------------------------------------------------------------------- */
.loc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 4.5vw, 76px);
  align-items: center;
}
.loc-media { border-radius: var(--r-media); overflow: hidden; min-height: 420px; position: relative; }
.loc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.loc-group { margin-top: 32px; }
.loc-group + .loc-group { margin-top: 34px; }
.loc-group__label {
  font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.loc-group__label .ph { color: var(--accent-text); font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; gap: 12px 8px; }   /* row gap > column gap */
.chip {
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-chip);
  padding: 8px 16px;
  font-size: 0.9rem; font-weight: 600;
  background: var(--surface);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.chip:hover { border-color: var(--accent-text); transform: translateY(-1px); }
.chip--solid { background: var(--accent); color: var(--accent-on); border-color: transparent; }
.chip--quiet { background: transparent; color: var(--text-muted); }
.loc-note { font-size: 0.88rem; color: var(--text-muted); margin-top: 14px; }

@media (max-width: 900px) {
  .loc-wrap { grid-template-columns: 1fr; }
  .loc-media { min-height: 260px; order: -1; }
}

/* --------------------------------------------------------------------------
   14. TEAM  (offset photo cluster)
   -------------------------------------------------------------------------- */
.team-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.team-cluster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.2vw, 18px); }
.team-cluster figure { border-radius: var(--r-media); overflow: hidden; position: relative; margin: 0; }
.team-cluster img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.team-cluster figure:nth-child(1) { transform: translateY(-18px); }
.team-cluster figure:nth-child(4) { transform: translateY(18px); }

.creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cred {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-chip);
  padding: 7px 14px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .team-wrap { grid-template-columns: 1fr; }
  .team-cluster figure:nth-child(1),
  .team-cluster figure:nth-child(4) { transform: none; }
}

/* --------------------------------------------------------------------------
   15. FAQ  (native details, keyboard-accessible with zero JS)
   -------------------------------------------------------------------------- */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
.faq { border-top: 1px solid var(--surface-line); }
.faq details { border-bottom: 1px solid var(--surface-line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 24px 46px 24px 0;
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  letter-spacing: -0.018em; line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
/* The marker is a real Phosphor element in the markup, never a guessed codepoint. */
.faq summary .faq__marker {
  position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-pill);
  color: var(--accent-text);
  transition: transform 0.35s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.faq summary .faq__marker .ph { font-size: 1.05rem; }
.faq summary:hover .faq__marker { border-color: var(--accent-text); }
.faq details[open] summary .faq__marker {
  transform: translateY(-50%) rotate(135deg);
  background: var(--accent); color: var(--accent-on); border-color: transparent;
}
.faq__answer { padding: 0 46px 26px 0; color: var(--text-muted); font-size: 0.97rem; max-width: 62ch; }
.faq details[open] .faq__answer { animation: faq-in 0.32s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .faq details[open] .faq__answer { animation: none; } }

/* --------------------------------------------------------------------------
   16. CLOSING CTA  (solid ink, flows into the footer)
   -------------------------------------------------------------------------- */
.cta-band { background: var(--band); color: var(--band-text); position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; top: -40%; right: -8%;
  width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, rgb(69 214 184 / 0.15) 0%, rgb(69 214 184 / 0) 68%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto;
  gap: 40px; align-items: center;
  padding-block: clamp(64px, 8vw, 104px);
}
.cta-band h2 { color: var(--band-text); }
.cta-band p { color: var(--band-muted); margin-top: 18px; max-width: 46ch; }
.cta-band .band-ctas { display: flex; flex-wrap: wrap; gap: 13px; }
.cta-band .btn--ghost { --btn-fg: var(--band-text); border-color: var(--band-line); }
.cta-band .btn--ghost:hover { background: rgb(239 231 215 / 0.08); border-color: var(--band-text); }

@media (max-width: 900px) {
  .cta-band__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--band); color: var(--band-text); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  padding-block: clamp(52px, 6vw, 76px);
  border-top: 1px solid var(--band-line);
}
.footer .brand__name { color: var(--band-text); }
.footer .brand__tag { color: var(--band-muted); }
.footer__blurb { color: var(--band-muted); font-size: 0.94rem; margin-top: 18px; max-width: 34ch; }
.footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--band-muted); margin-bottom: 18px;
}
.footer__col li + li { margin-top: 11px; }
.footer__col a {
  color: var(--band-text); font-size: 0.95rem;
  transition: color 0.2s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.footer__col a:hover { color: var(--band-accent); }
.footer__col .ph { font-size: 1.05rem; color: var(--band-muted); }

.footer__bottom {
  border-top: 1px solid var(--band-line);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--band-muted);
}
.footer__social { display: flex; gap: 9px; }
.footer__social a {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--band-line); border-radius: var(--r-pill);
  color: var(--band-text);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.footer__social a:hover { background: var(--band-accent); color: var(--ink-900); border-color: transparent; }
.footer__social a:active { transform: scale(0.94); }
.footer__social .ph { font-size: 1.15rem; }
.footer__disclaimer { font-size: 0.82rem; color: var(--band-muted); max-width: 74ch; padding-bottom: 26px; }

@media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   18. MOTION  (MOTION_INTENSITY 5: reveal on enter, hover physics, nothing else)
   Every reveal is IntersectionObserver-driven. No scroll listeners anywhere.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-in { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .drip, .chip, .step__badge, .rail-btn, .nav__icon-btn, .footer__social a {
    transition: none !important;
  }
  .btn:hover, .drip:hover { transform: none !important; }
  .team-cluster figure:nth-child(1), .team-cluster figure:nth-child(4) { transform: none; }
}

/* --------------------------------------------------------------------------
   18b. TOUCH TARGETS
   Inline text links clear WCAG 2.5.8 at 24px, but this is a phone-first booking
   site, so every tappable link gets to ~44px on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer__col a { padding-block: 9px; display: flex; width: 100%; }
  .footer__col li + li { margin-top: 1px; }
  .footer__col h3 { margin-bottom: 10px; }
  .link-arrow { padding-block: 8px; }
  .loc-note { line-height: 2; }
  .nav__icon-btn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   19. SERVICES PAGE
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 108px));
  padding-bottom: clamp(48px, 6vw, 84px);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--surface-line);
  overflow: hidden;
}
.page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
.page-head__media {
  border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 5 / 4; position: relative;
}
.page-head__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head .lede { margin-top: 20px; max-width: 52ch; }
.page-head__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }

@media (max-width: 900px) {
  .page-head__inner { grid-template-columns: 1fr; }
  .page-head__media { aspect-ratio: 16 / 10; }
}

/* Split feature (used twice max, never three in a row) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body .lede { margin-top: 18px; }
.split__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; }

.ticks { margin-top: 26px; display: grid; gap: 11px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.97rem; color: var(--text-muted); }
.ticks .ph { color: var(--accent-text); font-size: 1.15rem; flex: none; margin-top: 2px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* Menu filter */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 38px); }
.filter {
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-chip);
  padding: 9px 18px;
  font-size: 0.9rem; font-weight: 700;
  background: transparent; color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.filter:hover { border-color: var(--text); color: var(--text); }
.filter:active { transform: scale(0.96); }
.filter[aria-pressed='true'] {
  background: var(--accent); color: var(--accent-on); border-color: transparent;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.menu-card {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-media);
  padding: 28px 26px 22px;
  display: flex; flex-direction: column;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.menu-card:hover { border-color: var(--surface-line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.menu-card[hidden] { display: none; }
.menu-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.menu-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; letter-spacing: -0.026em; }
.menu-card__price {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.028em; color: var(--accent-text); flex: none;
}
.menu-card__price small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; display: block; color: var(--text-muted); text-align: right; }
.menu-card__desc { color: var(--text-muted); font-size: 0.94rem; line-height: 1.58; margin-top: 12px; }
.menu-card details { margin-top: 20px; border-top: 1px solid var(--surface-line); padding-top: 14px; }
.menu-card summary {
  list-style: none; cursor: pointer;
  font-size: 0.86rem; font-weight: 700; color: var(--accent-text);
  display: flex; align-items: center; gap: 7px;
}
.menu-card summary::-webkit-details-marker { display: none; }
.menu-card summary .ph { transition: transform 0.28s var(--ease); }
.menu-card details[open] summary .ph { transform: rotate(180deg); }
.menu-card__ingredients { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.menu-card__ingredients li {
  font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--surface-line);
  background: var(--bg-subtle);
  border-radius: var(--r-chip); padding: 5px 11px;
  color: var(--text-muted);
}
.menu-card__foot { margin-top: auto; padding-top: 20px; }

.menu-empty {
  border: 1px dashed var(--surface-line-strong);
  border-radius: var(--r-media);
  padding: 56px 32px;
  text-align: center;
  color: var(--text-muted);
  grid-column: 1 / -1;
}
.menu-empty .ph { font-size: 2rem; color: var(--accent-text); display: block; margin-bottom: 14px; }
.menu-empty[hidden] { display: none; }

/* Boosters */
.boost-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
.boost-media { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 1 / 1; position: relative; }
.boost-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.boost-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(20px, 3vw, 44px); }
.boost-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-block: 15px;
  border-bottom: 1px solid var(--surface-line);
  font-size: 0.96rem;
}
.boost-list b { font-weight: 600; }
.boost-list span { font-family: var(--font-display); font-weight: 800; color: var(--accent-text); flex: none; }

@media (max-width: 900px) {
  .boost-wrap { grid-template-columns: 1fr; }
  .boost-media { aspect-ratio: 16 / 9; order: -1; }
}
@media (max-width: 620px) { .boost-list { grid-template-columns: 1fr; } }

/* Packages: two unequal cells */
.pack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(12px, 1.2vw, 18px);
}
.pack {
  border-radius: var(--r-media);
  padding: clamp(30px, 3.4vw, 46px);
  display: flex; flex-direction: column;
  border: 1px solid var(--surface-line);
  background: var(--surface);
}
.pack--accent { background: var(--accent); color: var(--accent-on); border-color: transparent; }
.pack--accent .pack__price, .pack--accent h3 { color: var(--accent-on); }
.pack--accent .btn {
  --btn-bg: var(--accent-on);   /* white on the light card, ink on the dark one */
  --btn-fg: var(--accent);
  border-color: transparent;
}
.pack--accent .btn:hover { --btn-bg: var(--accent-on); }
.pack--accent .pack__desc { color: #FFFFFF; }
.pack--accent .ticks li { color: #FFFFFF; }
.pack--accent .ticks .ph { color: var(--accent-on); }
/* .loc-note and .link-arrow default to light-surface tokens (--text-muted,
   --accent-text), which fall to 1.38:1 and 1.26:1 on --accent. Nothing below
   solid white clears AA here, so the note is de-emphasised by size, not colour. */
.pack--accent .loc-note { color: #FFFFFF; }
.pack--accent .loc-note .link-arrow { color: #FFFFFF; }
[data-theme='dark'] .pack--accent .pack__desc,
[data-theme='dark'] .pack--accent .ticks li,
[data-theme='dark'] .pack--accent .loc-note,
[data-theme='dark'] .pack--accent .loc-note .link-arrow { color: var(--ink-900); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pack--accent .pack__desc,
  :root:not([data-theme='light']) .pack--accent .ticks li,
  :root:not([data-theme='light']) .pack--accent .loc-note,
  :root:not([data-theme='light']) .pack--accent .loc-note .link-arrow { color: var(--ink-900); }
}
.pack__price {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -0.035em;
  color: var(--accent-text); line-height: 1; margin-block: 16px 6px;
}
.pack__price small { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; }
.pack__desc { color: var(--text-muted); font-size: 0.96rem; margin-top: 10px; max-width: 42ch; }
.pack__foot { margin-top: auto; padding-top: 30px; }

@media (max-width: 900px) { .pack-grid { grid-template-columns: 1fr; } }

/* Specialties: one large + two stacked, real photography in each */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(260px, auto);
  gap: clamp(12px, 1.2vw, 18px);
}
.spec {
  position: relative; isolation: isolate;
  border-radius: var(--r-media); overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 300px;
  color: #FFFFFF;
}
.spec img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.spec::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(6 25 23 / 0.95) 0%, rgb(6 25 23 / 0.78) 46%, rgb(6 25 23 / 0.26) 100%);
}
.spec:hover img { transform: scale(1.04); }
.spec__body { padding: clamp(24px, 2.6vw, 34px); }
.spec__body h3 { color: #FFFFFF; }
.spec__body p { color: rgb(255 255 255 / 0.84); font-size: 0.94rem; margin-top: 10px; max-width: 44ch; }
.spec__body .link-arrow { color: #FFFFFF; margin-top: 18px; }
/* Lead fills the left column across both rows; a and b stack to its right.
   Three items, three cells, no gap left over. */
.spec--lead { grid-column: span 7; grid-row: span 2; min-height: 0; }
.spec--a { grid-column: span 5; }
.spec--b { grid-column: span 5; }

@media (max-width: 900px) {
  .spec-grid { grid-auto-rows: auto; }
  .spec--lead, .spec--a, .spec--b { grid-column: span 12; grid-row: auto; min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .spec:hover img { transform: none; } }

/* Widget mount: where the Lilo booking embed lands */
.booking-mount {
  border: 1px dashed var(--surface-line-strong);
  border-radius: var(--r-media);
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.booking-mount .ph { font-size: 2rem; color: var(--accent-text); display: block; margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   20. ARTICLE PROSE
   Reading column for blog posts. Measure is capped at ~68ch; everything else
   here exists to keep long client-authored copy readable.
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; font-size: 1.06rem; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--text-muted); text-wrap: pretty; }
.prose h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  letter-spacing: -0.026em; line-height: 1.15;
  margin-top: 2.1em; margin-bottom: 0.1em;
}
.prose h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em; line-height: 1.25; font-weight: 700;
  margin-top: 1.9em; margin-bottom: 0.1em;
}
.prose h2 + p, .prose h3 + p { margin-top: 0.55em; }
.prose strong { color: var(--text); font-weight: 700; }
.prose a {
  color: var(--accent-text); font-weight: 600;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
  transition: border-color 0.2s var(--ease);
}
.prose a:hover { border-bottom-color: currentColor; }
.prose ul, .prose ol { display: grid; gap: 10px; padding-left: 0; }
.prose li {
  position: relative; padding-left: 28px;
  color: var(--text-muted);
}
.prose ul > li::before {
  content: ''; position: absolute; left: 6px; top: 0.66em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-text);
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
  content: counter(prose-ol) '.';
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--accent-text);
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  font-size: 1.1rem; color: var(--text);
}
.prose blockquote p { color: var(--text); }

/* --------------------------------------------------------------------------
   21. ARTICLE HEADER + LAYOUT
   -------------------------------------------------------------------------- */
.article-head {
  padding-top: calc(var(--nav-h) + clamp(40px, 5vw, 72px));
  padding-bottom: clamp(28px, 3.5vw, 44px);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--surface-line);
}
.article-head__inner { max-width: 74ch; }
.article-head h1 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  letter-spacing: -0.032em; line-height: 1.06;
  margin-bottom: 20px;
}
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  font-size: 0.9rem; color: var(--text-muted);
}
.byline__who { font-weight: 700; color: var(--text); }
.byline time { font-variant-numeric: tabular-nums; }
.byline__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--surface-line-strong); }

/* Several of these heroes are client-made graphics with text baked in, and
   their ratios run from 2:1 to portrait. A fixed crop clipped the lettering,
   so the hero shows the whole image and letterboxes onto the sunken ground. */
.article-hero {
  margin-top: clamp(28px, 4vw, 48px);
  border-radius: var(--r-media); overflow: hidden;
  background: var(--bg-sunken);
  display: grid; place-items: center;
}
.article-hero img {
  width: 100%; height: auto;
  max-height: clamp(300px, 52vh, 560px);
  object-fit: contain;
}

.article-body { padding-block: clamp(44px, 5.5vw, 76px); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.article-aside { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: 24px; }
.article-aside__card {
  border: 1px solid var(--surface-line);
  border-radius: var(--r-media);
  background: var(--surface);
  padding: 24px;
}
.article-aside__card h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 8px;
}
.article-aside__card p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 18px; }
.article-aside__card .btn { width: 100%; }

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; max-width: 420px; }
}

.article-foot {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--surface-line);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}

/* --------------------------------------------------------------------------
   22. BLOG INDEX
   -------------------------------------------------------------------------- */
.post-feature { position: relative; }
.post-feature h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-feature .link-arrow { position: relative; z-index: 2; }
.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--surface-line);
}
.post-feature__media {
  border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 4 / 3; position: relative; background: var(--bg-sunken);
}
.post-feature__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.post-feature:hover .post-feature__media img { transform: scale(1.03); }
.post-feature h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  letter-spacing: -0.03em; line-height: 1.1; margin-block: 16px 14px;
}
.post-feature p { color: var(--text-muted); max-width: 52ch; }
.post-feature .link-arrow { margin-top: 22px; }

@media (max-width: 860px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-feature__media { order: -1; aspect-ratio: 16 / 10; }
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 36px) clamp(18px, 2.2vw, 30px);
}
.post-card { display: flex; flex-direction: column; position: relative; }
.post-card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-card__foot .link-arrow { position: relative; z-index: 2; }
.post-card__media {
  border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 16 / 10; position: relative; background: var(--bg-sunken);
  margin-bottom: 18px;
}
.post-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card h3 a { color: inherit; }
.post-feature h2 a { color: inherit; }
.post-card h3 {
  font-size: 1.18rem; letter-spacing: -0.022em; line-height: 1.25;
  margin-block: 12px 10px;
  transition: color 0.2s var(--ease);
}
.post-card:hover h3 { color: var(--accent-text); }
.post-card p { font-size: 0.94rem; color: var(--text-muted); line-height: 1.6; }
.post-card .byline { font-size: 0.82rem; }
.post-card__foot { margin-top: auto; padding-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .post-feature:hover .post-feature__media img,
  .post-card:hover .post-card__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   23. TEAM PAGE
   Rows rather than a grid: four of the seven have no photograph on the live
   site, and a row keeps the monogram slot the same size as a portrait.
   -------------------------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 4.5vw, 68px);
  align-items: center;
}
.founder__media {
  border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 4 / 5; position: relative;
}
.founder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder blockquote {
  margin-top: 26px; padding-left: 22px;
  border-left: 3px solid var(--accent);
  font-size: 1.08rem; line-height: 1.6; color: var(--text);
  max-width: 54ch;
}
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .founder__media { max-width: 340px; aspect-ratio: 1 / 1; }
}

.people { display: grid; gap: 0; }
.person {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  padding-block: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--surface-line);
  align-items: start;
}
.person__media {
  border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 4 / 5; position: relative; background: var(--bg-sunken);
}
.person__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Stand-in for the three people with no photograph on the live site. */
.monogram {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-media);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-text) 18%, transparent);
}
.monogram span {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.4rem; letter-spacing: -0.04em;
  color: var(--accent-text);
}
.person__name { font-size: 1.32rem; letter-spacing: -0.024em; }
.person__role {
  font-size: 0.86rem; font-weight: 700; color: var(--accent-text);
  margin-top: 6px;
}
.person__bio { margin-top: 14px; color: var(--text-muted); max-width: 62ch; }
.person__bio p + p { margin-top: 0.9em; }
.person .creds { margin-top: 18px; }

@media (max-width: 720px) {
  .person { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
  .monogram span { font-size: 1.6rem; }
}
/* Below this the side-by-side split leaves the bio about 220px wide, which
   wraps every few words. Stack instead and give the text the full column. */
@media (max-width: 560px) {
  .person { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .person__media, .monogram { width: 132px; }
  .person__bio { max-width: none; }
}

/* --------------------------------------------------------------------------
   24. ABOUT PAGE
   -------------------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.value {
  border-top: 2px solid var(--accent);
  padding-top: 22px;
}
.value .ph { font-size: 1.7rem; color: var(--accent-text); }
.value h3 { font-size: 1.12rem; letter-spacing: -0.02em; margin-block: 14px 8px; }
.value p { color: var(--text-muted); font-size: 0.95rem; }

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
}
.about-split__media {
  border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 4 / 3; position: relative;
}
.about-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--surface-line);
  border-block: 1px solid var(--surface-line);
}
.figure { background: var(--bg); padding: clamp(24px, 3vw, 36px); }
.figure__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.035em;
  color: var(--accent-text); line-height: 1;
}
.figure__l { margin-top: 10px; font-size: 0.92rem; color: var(--text-muted); }

/* Utility classes that replaced inline style attributes */
.u-mb-22 { margin-bottom:22px }
.u-band-subtle { background:var(--bg-subtle);border-block:1px solid var(--surface-line) }
.u-fs-inherit { font-size:inherit }
.u-mb-18 { margin-bottom:18px }
.u-mt-28 { margin-top:28px }
.u-mt-16 { margin-top:16px }
.u-mt-34 { margin-top:34px }
.u-mb-14 { margin-bottom:14px }
.u-pb-lg { padding-bottom:clamp(40px,5vw,64px) }
.u-pb-sm { padding-bottom:clamp(8px,1vw,16px) }
.u-max-52ch { max-width:52ch }
.u-inherit-mt-4 { color:inherit;margin-top:4px }
.u-mb-16 { margin-bottom:16px }
.u-max-54ch { max-width:54ch }
.u-fs-95 { font-size:0.95rem }