/* ==========================================================================
   Self-hosted fonts.
   Previously loaded from fonts.googleapis.com / fonts.gstatic.com on every
   page view, which sent every visitor's IP to Google before they had answered
   the cookie banner — directly contradicting the banner's own copy. Hosting
   them here removes that third-party call entirely and drops two render-
   blocking cross-origin round trips.
   Both families are variable fonts, so one file covers the whole weight range.
   Latin + Latin-Extended subsets only.
   ========================================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
      /* Bistro green anchors the site; the dachshund supplies the bright accents. */
      --primary: #24543e;
      --primary-deep: #173d2e;
      --logo-navy: #093b70;
      /* Accent must pass 4.5:1 both as text on light bands and as a button
         background under white label text. */
      --accent: #B8231A;
      --accent-deep: #8F1A13;
      --sunset: #F2B613;
      --sand: #FBF7EE;
      --sand-2: #F3ECDB;
      --light-gray: #E4DED0;
      --text: #10141A;
      --text-muted: rgba(16, 20, 26, 0.72);
      --stripe: linear-gradient(90deg, var(--accent) 0 33.4%, var(--sunset) 33.4% 66.7%, var(--logo-navy) 66.7%);
      --white: #fff;
      --font-display: "Fraunces", Georgia, "Times New Roman", serif;
      --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --header-h: 120px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --focus: 0 0 0 3px #fff, 0 0 0 6px var(--primary);
      --max: 1440px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      /* Must clear the help strip + scrolled header so anchor targets and
         focused elements are never obscured — WCAG 2.4.11. */
      scroll-padding-top: calc(var(--strip-h, 34px) + 84px);
      font-size: 100%;
    }
    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      line-height: 1.65;
    }
    body.menu-open { overflow: hidden; }
    body.has-cookie { padding-bottom: 8.5rem; }

    img { max-width: 100%; display: block; height: auto; }
    a { color: var(--primary); }
    a:hover { color: var(--accent); }

    .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;
    }

    /* Focus — WCAG 2.4.7 / 2.4.11 */
    :focus { outline: none; }
    :focus-visible {
      outline: 3px solid var(--primary);
      outline-offset: 3px;
    }
    .site-header :focus-visible,
    .hero :focus-visible,
    .menu-overlay :focus-visible,
    .cookie-banner :focus-visible,
    .footer :focus-visible {
      outline-color: var(--sunset);
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* Skip */
    .skip-link {
      position: absolute; top: -120px; left: 16px; z-index: 10001;
      background: var(--primary); color: #fff; padding: 0.85rem 1.25rem;
      font-weight: 600; text-decoration: none; min-height: 48px;
      display: inline-flex; align-items: center;
    }
    .skip-link:focus { top: 12px; box-shadow: var(--focus); outline: none; }

    /* Help strip — consistent help (WCAG 3.2.6). Its real height is published
       as --strip-h by site.js, because on narrow screens the text wraps to
       2–3 lines and the header used to be pinned to a hard-coded 34px. */
    .help-strip {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
      background: var(--primary-deep); color: rgba(255,255,255,0.9);
      text-align: center; font-size: 12px; letter-spacing: 0.06em;
      padding: 0.5rem 1rem; min-height: 34px;
    }
    .help-strip a { color: #c5d6cc; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .help-strip a:hover { color: #fff; }

    /* ========== HEADER ========== */
    .site-header {
      position: fixed; top: var(--strip-h, 34px); left: 0; width: 100%; z-index: 1000;
      transition: background 0.45s var(--ease), backdrop-filter 0.45s, border-color 0.45s;
      border-bottom: 1px solid transparent;
    }
    .site-header.scrolled {
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom-color: var(--light-gray);
    }
    .header-inner {
      max-width: var(--max); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 40px; height: var(--header-h);
      transition: height 0.4s var(--ease);
      position: relative;
    }
    .site-header.scrolled .header-inner { height: 72px; }
    @media (max-width: 768px) {
      .header-inner { padding: 0 20px; height: 80px; }
      .site-header.scrolled .header-inner { height: 64px; }
    }

    .menu-btn {
      background: none; border: none; color: #fff; cursor: pointer;
      font-family: var(--font-body); font-size: 13px; letter-spacing: 1.6px;
      text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px;
      min-height: 48px; min-width: 48px; padding: 0.4rem 0.5rem;
      transition: color 0.3s;
    }
    .menu-btn:hover { color: var(--sunset); }
    .site-header.scrolled .menu-btn { color: var(--primary); }
    .menu-icon { display: flex; flex-direction: column; gap: 5px; }
    .menu-icon span {
      display: block; width: 22px; height: 1.5px; background: currentColor;
      transition: transform 0.3s var(--ease), opacity 0.3s;
    }
    .menu-btn[aria-expanded="true"] .menu-icon span:first-child {
      transform: translateY(3.25px) rotate(45deg);
    }
    .menu-btn[aria-expanded="true"] .menu-icon span:last-child {
      transform: translateY(-3.25px) rotate(-45deg);
    }

    .logo-link {
      position: absolute; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; text-decoration: none;
      min-height: 48px;
    }
    .site-logo {
      height: 52px; width: auto;
      filter: brightness(0) invert(1);
      transition: filter 0.4s, height 0.4s;
    }
    .site-header.scrolled .site-logo { filter: none; height: 40px; }
    @media (max-width: 768px) { .site-logo { height: 36px; } }

    .header-right { display: flex; align-items: center; gap: 8px; }
    .nav-desktop { display: flex; align-items: center; gap: 4px; }
    .nav-desktop a {
      font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase;
      color: #fff; text-decoration: none; padding: 0.75rem 0.85rem;
      min-height: 48px; display: inline-flex; align-items: center;
      transition: color 0.3s;
    }
    .nav-desktop a:hover { color: var(--sunset); }
    .site-header.scrolled .nav-desktop a { color: var(--primary); }
    .site-header.scrolled .nav-desktop a:hover { color: var(--accent); }

    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 48px; padding: 0 32px;
      font-family: var(--font-body); font-size: 11px; font-weight: 600;
      letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none;
      border: 1px solid transparent; cursor: pointer;
      transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
    }
    .btn:active { transform: scale(0.98); }
    .btn-reserve {
      background: #fff; color: var(--primary); border-color: #fff;
    }
    .btn-reserve:hover { background: var(--light-gray); color: var(--primary); }
    .site-header.scrolled .btn-reserve {
      background: var(--primary); color: #fff; border-color: var(--primary);
    }
    .site-header.scrolled .btn-reserve:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .btn-primary { background: var(--primary); color: #fff; }
    .btn-primary:hover { background: var(--accent); color: #fff; }
    .btn-outline {
      background: transparent; color: #fff; border-color: rgba(255,255,255,0.65);
    }
    .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
    .btn-outline-dark {
      background: transparent; color: var(--primary); border-color: rgba(23,86,87,0.3);
    }
    .btn-outline-dark:hover { border-color: var(--primary); background: rgba(23,86,87,0.05); color: var(--primary); }
    .btn-gold { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn-gold:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
    .btn-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }

    @media (max-width: 900px) {
      .nav-desktop { display: none; }
    }

    /* Full-screen menu overlay — “separate pages” feel */
    .menu-overlay {
      position: fixed; inset: 0; z-index: 999;
      background: var(--primary-deep);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.45s var(--ease), visibility 0.45s;
    }
    .menu-overlay.open {
      opacity: 1; visibility: visible; pointer-events: auto;
    }
    /* The [hidden] flip is deferred until the fade-out finishes (see site.js),
       so the overlay must stay laid out while .closing is set. */
    .menu-overlay.closing { display: flex; }
    .menu-overlay-inner {
      text-align: center; padding: 2rem; width: min(520px, 92vw);
    }
    .menu-overlay nav ul {
      list-style: none; display: flex; flex-direction: column; gap: 0.25rem;
    }
    .menu-overlay nav a {
      display: block; color: #fff; text-decoration: none;
      font-family: var(--font-display); font-weight: 300;
      font-size: clamp(1.75rem, 5vw, 2.75rem);
      padding: 0.55rem 1rem; min-height: 52px;
      transition: color 0.25s, letter-spacing 0.35s var(--ease);
    }
    .menu-overlay nav a:hover { color: var(--sunset); letter-spacing: 0.04em; }
    .menu-overlay .menu-meta {
      margin-top: 2.5rem; color: rgba(255,255,255,0.65);
      font-size: 13px; letter-spacing: 0.08em;
    }
    .menu-overlay .menu-meta a { color: #c5d6cc; }

    /* ========== HERO ========== */
    .hero {
      position: relative; min-height: 100vh; min-height: 100dvh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; color: #fff;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(9,50,51,0.25) 0%, rgba(9,50,51,0.55) 100%),
        url("../imgs/hero.jpg") center/cover no-repeat;
      transform: scale(1.05);
      animation: heroZoom 18s ease-out forwards;
    }
    @keyframes heroZoom {
      to { transform: scale(1); }
    }
    .hero-content {
      position: relative; z-index: 2; text-align: center;
      padding: 120px 24px 80px; max-width: 820px;
    }
    .hero-eyebrow {
      font-size: clamp(12px, 1.4vw, 15px); letter-spacing: 3px;
      text-transform: uppercase; margin-bottom: 24px;
      opacity: 0; animation: fadeUp 1s 0.25s forwards;
    }
    .hero-title {
      font-family: var(--font-display); font-weight: 300;
      font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1.05;
      margin-bottom: 1.25rem;
      opacity: 0; animation: fadeUp 1s 0.45s forwards;
    }
    .hero-sub {
      font-size: 16px; letter-spacing: 0.3px; line-height: 1.65;
      max-width: 480px; margin: 0 auto 2rem;
      opacity: 0; animation: fadeUp 1s 0.65s forwards;
    }
    .hero-cta { opacity: 0; animation: fadeUp 1s 0.85s forwards; }
    .hero-phone {
      margin-top: 1.25rem; font-size: 14px; opacity: 0;
      animation: fadeUp 1s 1s forwards;
    }
    .hero-phone a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
    .hero-scroll {
      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
      z-index: 2; color: #fff; font-size: 11px; letter-spacing: 2px;
      text-transform: uppercase; display: flex; flex-direction: column;
      align-items: center; gap: 8px;
      opacity: 0; animation: fadeUp 1s 1.15s forwards;
    }
    .scroll-line {
      width: 1px; height: 40px; background: rgba(255,255,255,0.35);
      position: relative; overflow: hidden;
    }
    .scroll-line::after {
      content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
      background: #fff; animation: scrollPulse 2s infinite;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes scrollPulse {
      0% { top: -100%; }
      100% { top: 100%; }
    }

    /* Section “pages” */
    .page {
      position: relative;
      scroll-margin-top: 88px;
    }
    .page-label {
      position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2;
      font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--accent); opacity: 0.7; pointer-events: none;
    }

    /* Reveal on scroll. Gated on .js so that a JS failure leaves the page
       readable instead of blanking every section below the hero. */
    .js .reveal {
      opacity: 0; transform: translateY(36px);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }

    /* Intro */
    .intro {
      padding: clamp(4.5rem, 10vw, 7rem) 40px;
      text-align: center; background: var(--white);
    }
    .intro-mark {
      width: 48px; height: 48px; margin: 0 auto 2rem;
      opacity: 0.55; color: var(--primary);
    }
    .intro-text {
      font-family: var(--font-display); font-weight: 300;
      font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.5;
      max-width: 820px; margin: 0 auto; color: var(--primary);
    }

    /* Triptych */
    .triptych {
      display: flex; min-height: 72vh;
    }
    .triptych-panel {
      flex: 1; position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none; color: #fff; min-height: 300px;
      border-right: 1px solid rgba(255,255,255,0.15);
    }
    .triptych-panel:last-child { border-right: none; }
    .panel-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform 0.7s var(--ease);
    }
    .triptych-panel:hover .panel-bg,
    .triptych-panel:focus-visible .panel-bg { transform: scale(1.06); }
    .panel-overlay {
      position: absolute; inset: 0;
      background: rgba(9,50,51,0.4);
      transition: background 0.4s;
    }
    .triptych-panel:hover .panel-overlay { background: rgba(9,50,51,0.22); }
    .panel-content {
      position: relative; z-index: 2; text-align: center; padding: 40px 20px;
    }
    .panel-title {
      font-family: var(--font-display); font-weight: 300;
      font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1;
      margin-bottom: 10px;
    }
    .panel-sub {
      font-size: 13px; letter-spacing: 0.5px; opacity: 0.88; margin-bottom: 1.25rem;
    }
    .panel-arrow {
      display: inline-flex; width: 52px; height: 52px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.5); align-items: center; justify-content: center;
      opacity: 0; transform: translateY(16px);
      transition: opacity 0.4s, transform 0.4s, background 0.3s;
    }
    .triptych-panel:hover .panel-arrow,
    .triptych-panel:focus-visible .panel-arrow {
      opacity: 1; transform: none; background: rgba(255,255,255,0.1);
    }
    @media (max-width: 768px) {
      .triptych { flex-direction: column; }
      .triptych-panel { min-height: 240px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
      .panel-arrow { opacity: 1; transform: none; }
    }

    /* Experience / sand band */
    .band-sand { background: var(--sand); }
    .band-white { background: var(--white); }
    .section-pad { padding: clamp(4.5rem, 9vw, 7rem) 40px; }
    @media (max-width: 640px) { .section-pad { padding-left: 20px; padding-right: 20px; } }

    .section-center { text-align: center; max-width: 720px; margin: 0 auto; }
    .eyebrow {
      font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
      color: var(--accent); margin-bottom: 12px; font-weight: 600;
    }
    .display-title {
      font-family: var(--font-display); font-weight: 300;
      font-size: clamp(1.85rem, 4vw, 2.85rem); color: var(--primary);
      line-height: 1.15; margin-bottom: 1rem;
    }
    .lede {
      font-size: 15px; line-height: 1.75; color: var(--text-muted);
      max-width: 540px; margin: 0 auto 2rem;
    }

    /* Content split */
    .split {
      display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
      align-items: center; max-width: 1200px; margin: 0 auto;
    }
    .split.reverse .split-media { order: 2; }
    .split.reverse .split-body { order: 1; }
    .split-media { overflow: hidden; border-radius: 2px; }
    .split-media img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      transition: transform 0.8s var(--ease);
    }
    .split:hover .split-media img { transform: scale(1.03); }
    .split-body .display-title { text-align: left; }
    .split-body .lede { margin-left: 0; text-align: left; }
    .split-body p { color: var(--text-muted); margin-bottom: 1rem; font-size: 15px; }
    .phone-alt { font-size: 14px; color: var(--text-muted); margin-top: 1rem; }
    .phone-alt a { font-weight: 600; }
    @media (max-width: 800px) {
      .split, .split.reverse { grid-template-columns: 1fr; }
      .split.reverse .split-media, .split.reverse .split-body { order: unset; }
    }

    /* Image mosaic */
    .mosaic {
      display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px;
      max-width: 1200px; margin: 3rem auto 0;
    }
    .mosaic figure {
      margin: 0; overflow: hidden; position: relative; min-height: 180px;
    }
    .mosaic figure:first-child { grid-row: span 2; min-height: 420px; }
    .mosaic img {
      width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
      transition: transform 0.7s var(--ease);
    }
    .mosaic figure:hover img { transform: scale(1.05); }
    @media (max-width: 700px) {
      .mosaic { grid-template-columns: 1fr; }
      .mosaic figure:first-child { grid-row: auto; min-height: 260px; }
    }

    /* Menu */
    .menu-block {
      max-width: 900px; margin: 0 auto 1.5rem;
      border-top: 1px solid var(--light-gray); padding-top: 2rem;
    }
    .menu-block h3 {
      font-family: var(--font-display); font-weight: 300;
      font-size: 1.65rem; color: var(--primary); margin-bottom: 0.25rem;
    }
    .menu-when {
      font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--accent); font-weight: 600; margin-bottom: 1.25rem;
    }
    .menu-list { list-style: none; }
    .menu-item {
      display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1.25rem;
      padding: 1rem 0; border-bottom: 1px solid rgba(23,86,87,0.08);
    }
    .menu-name { font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
    .menu-price { font-weight: 600; color: var(--primary); white-space: nowrap; }
    .menu-desc { grid-column: 1 / -1; font-size: 14px; color: var(--text-muted); }
    .tag {
      display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      padding: 0.15rem 0.4rem; margin-left: 0.35rem;
      background: rgba(23,86,87,0.08); color: var(--primary); vertical-align: middle;
    }

    .notice-box {
      max-width: 900px; margin: 2rem auto 0;
      background: var(--sand); border-left: 3px solid var(--accent);
      padding: 1.25rem 1.4rem; font-size: 14px; color: var(--text-muted);
    }
    .notice-box h3 {
      font-family: var(--font-display); font-weight: 400;
      font-size: 1.15rem; color: var(--text); margin-bottom: 0.5rem;
    }
    .notice-box p + p { margin-top: 0.65rem; }
    .warning-inline {
      max-width: 900px; margin: 1.25rem auto 0;
      font-size: 12px; line-height: 1.55; color: var(--text-muted);
      border: 1px solid var(--light-gray); padding: 1rem 1.15rem;
    }
    .warning-inline strong { color: var(--text); }

    /* Events horizontal */
    .events-scroll {
      display: flex; gap: 20px; overflow-x: auto;
      padding: 0 40px 12px; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .events-scroll::-webkit-scrollbar { display: none; }
    .event-card {
      flex: 0 0 min(340px, 82vw); scroll-snap-align: start;
      background: var(--white);
    }
    .event-card-img {
      aspect-ratio: 1; overflow: hidden; background: var(--primary);
    }
    .event-card-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.55s var(--ease);
    }
    .event-card:hover .event-card-img img { transform: scale(1.06); }
    .event-card-body { padding: 1.25rem 0 0.5rem; }
    .event-card-title {
      font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
      font-weight: 600; margin-bottom: 0.35rem; color: var(--primary);
    }
    .event-card-meta {
      font-size: 12px; color: var(--accent); font-weight: 600;
      letter-spacing: 0.04em; margin-bottom: 0.65rem;
    }
    .event-card-desc {
      font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 1rem;
    }
    .event-card .btn { min-height: 48px; font-size: 10px; padding: 0 20px; }

    /* Visit cards */
    .visit-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
      max-width: 1000px; margin: 0 auto;
    }
    @media (max-width: 700px) { .visit-grid { grid-template-columns: 1fr; } }
    .info-card {
      background: var(--white); border: 1px solid var(--light-gray);
      padding: 2rem; transition: box-shadow 0.35s, transform 0.35s;
    }
    .info-card:hover { box-shadow: 0 16px 40px rgba(9,50,51,0.08); transform: translateY(-2px); }
    .info-card h3 {
      font-family: var(--font-display); font-weight: 300;
      font-size: 1.5rem; color: var(--primary); margin-bottom: 0.85rem;
    }
    .info-card p, .info-card li { font-size: 14px; color: var(--text-muted); }
    .info-card ul { padding-left: 1.15rem; margin-top: 0.5rem; }
    .info-card li { margin-bottom: 0.4rem; }

    /* Policies */
    .policies { max-width: 800px; margin: 0 auto; }
    details.policy {
      border-bottom: 1px solid var(--light-gray);
    }
    details.policy summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      gap: 1rem; min-height: 56px; padding: 1rem 0;
      font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase;
      font-weight: 600; color: var(--primary);
    }
    details.policy summary::-webkit-details-marker { display: none; }
    details.policy summary::after {
      content: "+"; font-family: var(--font-display); font-size: 1.5rem;
      font-weight: 300; color: var(--accent); line-height: 1;
    }
    details.policy[open] summary::after { content: "−"; }
    details.policy .policy-body {
      padding: 0 0 1.35rem; color: var(--text-muted); font-size: 15px;
    }
    details.policy .policy-body ul { padding-left: 1.15rem; margin: 0.6rem 0 1rem; }
    details.policy .policy-body li { margin-bottom: 0.35rem; }

    /* Newsletter */
    .newsletter-band {
      background:
        linear-gradient(160deg, rgba(9,50,51,0.88), rgba(23,86,87,0.82)),
        url("../imgs/interior-1.jpg") center/cover no-repeat;
      color: #fff; padding: clamp(4rem, 9vw, 6.5rem) 40px; text-align: center;
    }
    .newsletter-band .display-title { color: #fff; }
    .newsletter-band .lede { color: rgba(255,255,255,0.85); }
    .newsletter-form {
      display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
      max-width: 520px; margin: 0 auto;
    }
    .field { flex: 1 1 240px; text-align: left; }
    .field label {
      display: block; font-size: 11px; letter-spacing: 1.2px;
      text-transform: uppercase; margin-bottom: 0.4rem; font-weight: 600;
    }
    .field input {
      width: 100%; min-height: 48px; padding: 0.75rem 1rem;
      border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.1);
      color: #fff; font: inherit; border-radius: 0;
    }
    .field input::placeholder { color: rgba(255,255,255,0.55); }
    .field input:focus-visible {
      outline: 3px solid var(--sunset); outline-offset: 2px; background: rgba(255,255,255,0.15);
    }
    .collection-note {
      max-width: 560px; margin: 1.25rem auto 0;
      font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.75); text-align: left;
    }
    .collection-note a { color: #c5d6cc; }
    .form-status { margin-top: 0.85rem; min-height: 1.4em; font-weight: 600; font-size: 14px; }

    /* Legal */
    .legal-wrap { max-width: 900px; margin: 0 auto; }
    .legal-card {
      border: 1px solid var(--light-gray); padding: 1.75rem; margin-bottom: 1rem;
      background: var(--white);
    }
    .legal-card h3 {
      font-family: var(--font-display); font-weight: 300;
      font-size: 1.45rem; color: var(--primary); margin-bottom: 0.5rem;
    }
    .legal-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 0.85rem; }
    .legal-card h4 {
      font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
      margin: 1.15rem 0 0.45rem; color: var(--text);
    }
    .legal-card p, .legal-card li {
      font-size: 14px; color: var(--text-muted); margin-bottom: 0.65rem;
    }
    .legal-card ul { padding-left: 1.15rem; }

    /* Footer */
    .footer {
      background: var(--primary-deep); color: rgba(255,255,255,0.78);
      padding: 4rem 40px 2.5rem; font-size: 14px;
    }
    .footer a { color: #c5d6cc; text-decoration: none; }
    .footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    .footer-grid {
      max-width: 1100px; margin: 0 auto 2.5rem;
      display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem;
    }
    @media (max-width: 700px) {
      .footer { padding-left: 20px; padding-right: 20px; }
      .footer-grid { grid-template-columns: 1fr; }
    }
    .footer-brand {
      font-family: var(--font-display); font-weight: 300;
      font-size: 1.35rem; color: #fff; margin-bottom: 0.75rem;
    }
    .footer h3 {
      font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
      color: #fff; margin-bottom: 0.85rem; font-weight: 600;
    }
    .footer ul { list-style: none; }
    .footer li { margin-bottom: 0.45rem; }
    .footer li a { min-height: 40px; display: inline-flex; align-items: center; }
    /* Consent withdrawal has to be a button, but must read as a footer link. */
    .linkish {
      background: none; border: 0; padding: 0; cursor: pointer;
      font: inherit; color: #c5d6cc; text-align: left;
      min-height: 40px; display: inline-flex; align-items: center;
    }
    .linkish:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    .legal-card .linkish { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 3px; }
    .legal-card .linkish:hover { color: var(--primary); }
    .legal-links {
      max-width: 1100px; margin: 0 auto;
      display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
      padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.12);
    }
    .legal-links a {
      font-size: 12px; letter-spacing: 0.04em; font-weight: 600;
      min-height: 40px; display: inline-flex; align-items: center;
    }
    .prop65 {
      max-width: 1100px; margin: 1.5rem auto 0;
      background: rgba(0,0,0,0.25); padding: 1.15rem 1.25rem;
      font-size: 12px; line-height: 1.55;
    }
    .prop65 strong { color: #fff; }
    .prop65 p + p { margin-top: 0.75rem; }
    .copyright {
      max-width: 1100px; margin: 1.75rem auto 0;
      font-size: 12px; opacity: 0.65;
    }

    /* Cookie banner */
    .cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
      background: var(--primary-deep); color: #fff;
      padding: 1.15rem 24px calc(1.15rem + env(safe-area-inset-bottom, 0));
      box-shadow: 0 -12px 40px rgba(0,0,0,0.28);
      transform: translateY(110%);
      transition: transform 0.4s var(--ease);
    }
    .cookie-banner.is-visible { transform: translateY(0); }
    .cookie-inner {
      max-width: 1100px; margin: 0 auto;
      display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
      justify-content: space-between;
    }
    .cookie-text { flex: 1 1 280px; font-size: 13px; line-height: 1.5; }
    .cookie-text a { color: #c5d6cc; }
    .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .cookie-actions .btn {
      min-height: 48px; min-width: 10rem; font-size: 10px;
    }
    .btn-reject {
      background: transparent; color: #fff; border-color: rgba(255,255,255,0.55);
    }
    .btn-reject:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
    .btn-accept {
      background: #fff; color: var(--primary-deep); border-color: #fff;
    }
    .btn-accept:hover { background: var(--sand); color: var(--primary-deep); }

    /* Side page dots */
    .page-dots {
      position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
      z-index: 50; display: flex; flex-direction: column; gap: 10px;
    }
    .page-dots a {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(23,86,87,0.2); border: 1px solid rgba(23,86,87,0.35);
      text-indent: -9999px; overflow: hidden;
      transition: background 0.25s, transform 0.25s;
    }
    .page-dots a[aria-current="true"],
    .page-dots a:hover {
      background: var(--primary); transform: scale(1.25);
    }
    @media (max-width: 900px) { .page-dots { display: none; } }

    .cta-bar {
      display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
      margin-top: 1.5rem;
    }

/* ========== Multi-page additions ========== */
.site-header.header-dark {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--light-gray);
}
.site-header.header-dark .header-inner { height: 72px; }
.site-header.header-dark .menu-btn,
.site-header.header-dark .nav-desktop a { color: var(--primary); }
.site-header.header-dark .nav-desktop a:hover { color: var(--accent); }
.site-header.header-dark .site-logo { filter: none; height: 40px; }
.site-header.header-dark .btn-reserve {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.site-header.header-dark .btn-reserve:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.page-hero {
  position: relative;
  min-height: 48vh;
  min-height: 48dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  padding: 140px 24px 80px;
}
.page-hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: none;
  animation: none;
}
.page-hero .hero-content {
  position: relative; z-index: 2; text-align: center; max-width: 760px;
  padding: 0;
}
.page-hero .hero-title {
  opacity: 1; animation: fadeUp 0.9s 0.15s both;
}
.page-hero .hero-sub {
  opacity: 1; animation: fadeUp 0.9s 0.35s both;
  margin-bottom: 0;
}
.page-hero .hero-eyebrow {
  opacity: 1; animation: fadeUp 0.9s 0.05s both;
}

/* Document pages (legal, 404) use the building elevation drawing instead of a
   photograph — a quieter, more archival treatment, and the only genuinely
   high-resolution asset in the project (2117×1323).
   The source is black linework on white. invert() turns it into white line on
   black, then screen blending drops the black to nothing so only the line sits
   on the navy field. */
.page-hero.hero-drawing {
  min-height: 56vh;
}
.page-hero.hero-drawing .hero-bg {
  background: var(--primary-deep);
}
/* Anchored bottom-right as a watermark rather than centred: the hero copy is
   centre-aligned, so a centred drawing puts the roofline straight through the
   headline at every viewport width. This matches the compliance masthead. */
.page-hero.hero-drawing .hero-bg::after {
  content: "";
  position: absolute;
  right: max(1.5rem, 3vw);
  bottom: -7%;
  width: min(600px, 46%);
  aspect-ratio: 2117 / 1323;
  background: none;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.42;
}
@media (max-width: 760px) {
  .page-hero.hero-drawing .hero-bg::after {
    right: 0; left: 0; width: auto;
    bottom: -4%;
    opacity: 0.22;
  }
}

.nav-desktop a[aria-current="page"] {
  color: var(--sunset);
}
.site-header.scrolled .nav-desktop a[aria-current="page"],
.site-header.header-dark .nav-desktop a[aria-current="page"] {
  color: var(--accent);
}

.menu-overlay nav a[aria-current="page"] {
  color: var(--sunset);
}

main { min-height: 50vh; }

/* Footer legal always present — compact on inner pages */
.footer .prop65 { font-size: 11.5px; }

.brand-row {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: center; justify-content: center;
  margin-top: 3rem; padding: 1.5rem;
  background: var(--white); border: 1px solid var(--light-gray);
}
.brand-row img {
  height: 36px; width: auto; max-width: 110px; object-fit: contain; opacity: 0.85;
}

/* Therapie: a balanced masthead and a photograph-led composition (shared pattern with the Beach Club site). */
:root { --header-h: 104px; --strip-h: 0px; --page-gutter: clamp(1.5rem,5vw,5rem); }
html { scroll-padding-top: calc(var(--header-h) + 24px); }
.site-header, .site-header.scrolled, .site-header.header-dark { top: 0; background: #fff; border-bottom: 1px solid #e4ded0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header .header-inner, .site-header.scrolled .header-inner, .site-header.header-dark .header-inner { height: var(--header-h); display: grid; grid-template-columns: 1fr 270px 1fr; gap: 2rem; padding: 0 var(--page-gutter); max-width: 1600px; }
.site-header .logo-link { position: static; transform: none; justify-content: center; align-items: center; gap: .75rem; min-width: 0; }
.site-header .site-logo, .site-header.scrolled .site-logo, .site-header.header-dark .site-logo { display: block; width: auto; height: 76px; filter: none; }
/* Mark and wordmark are optically centred; hanging the plate on the mark's baseline pushed the "Bistro & Wine Bar" line into the stripe. */
.site-wordmark { display: block; width: auto; height: 56px; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; min-width: 0; }
.nav-desktop { display: flex; align-items: center; gap: clamp(.6rem,1.5vw,1.5rem); }
.site-header .nav-desktop a { color: var(--primary-deep); padding: .65rem 0; min-height: 48px; font-size: .875rem; letter-spacing: .01em; text-transform: none; white-space: nowrap; position: relative; }
.site-header .nav-desktop a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.site-header .nav-desktop a:hover::after, .site-header .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav-desktop a[aria-current="page"] { color: var(--accent); }
.header-event-link { display: inline-flex; align-items: center; gap: 1.5rem; border: 1px solid #d6cfbd; color: var(--primary-deep); text-decoration: none; padding: .75rem 1.2rem; min-height: 48px; font-size: .875rem; white-space: nowrap; }
.header-event-link:hover { background: var(--primary-deep); color: white; border-color: var(--primary-deep); }
.site-header .menu-btn { display: none; color: var(--primary-deep); letter-spacing: .03em; font-size: .875rem; text-transform: none; padding: .5rem; gap: .8rem; }
.site-header :focus-visible { outline-color: var(--primary); }
.btn { min-height: 50px; font-size: .875rem; letter-spacing: .025em; text-transform: none; line-height: 1.4; padding: .85rem 1.6rem; }
.btn-light { background: #fff; border-color: #fff; color: var(--primary-deep); }
.btn-light:hover { background: #f3ecdb; border-color: #f3ecdb; color: var(--primary-deep); }
.eyebrow { font-size: .875rem; letter-spacing: .09em; font-weight: 500; }
.lede, .split-body p, .info-card p, .info-card li, .legal-card p, .legal-card li, .policy-body, .event-card-desc, .menu-desc { font-size: 1rem; }
.field label, .footer h3, .legal-card h4, .cookie-actions .btn, .menu-when { font-size: .875rem; }
.footer .prop65, .copyright, .legal-meta, .collection-note { font-size: .75rem; }
.display-title { font-size: clamp(2rem,3.7vw,3.8rem); letter-spacing: -.04em; line-height: 1.12; }
.menu-overlay { z-index: 1100; overflow-y: auto; align-items: flex-start; overscroll-behavior: contain; }
.menu-overlay-inner { position: relative; width: min(680px,100%); padding: 5.5rem 1.25rem 2.5rem; margin: auto; }
.menu-close { position: absolute; right: 1.25rem; top: 1rem; display: flex; align-items: center; gap: 1rem; min-height: 48px; padding: .5rem 1rem; background: none; color: white; border: 1px solid #7d9a8a; font: inherit; cursor: pointer; }
.menu-close span { font-size: 1.75rem; line-height: 1; }
.menu-overlay nav a { font-size: clamp(1.5rem,4vw,2.5rem); padding: .35rem 1rem; }
.menu-overlay .menu-meta { margin-top: 1.5rem; font-size: .875rem; }
.page-hero { padding-top: calc(var(--header-h) + 100px); min-height: 500px; }
.page-hero .hero-title { font-size: clamp(2.6rem,6vw,4.5rem); }
.hero-title, .hero-eyebrow, .hero-sub, .hero-cta, .hero-phone { opacity: 1; animation: none; }
.js .reveal, .reveal { opacity: 1; transform: none; }
.bay-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); background: var(--primary-deep); color: #fff; padding: calc(var(--header-h) + 3.5rem) var(--page-gutter) 3.5rem; }
.bay-hero-copy { align-self: center; max-width: 660px; padding-block: 1rem; }
.bay-hero-copy .eyebrow { color: #c5d6cc; font-size: .75rem; letter-spacing: .1em; display: flex; flex-wrap: wrap; gap: .65rem; }
.bay-hero-copy .eyebrow span { color: #a9c2b5; }
.bay-hero h1 { font: 300 clamp(3.25rem,6.2vw,6.5rem)/1.03 var(--font-display); letter-spacing: -.045em; margin: 1.75rem 0; }
.bay-hero h1 em, .celebration-feature em { font-weight: 300; color: var(--sunset); }
.bay-hero-description { max-width: 355px; font-size: 1rem; line-height: 1.85; color: #dfe9e3; margin-bottom: 2rem; }
.bay-hero .btn-group { justify-content: flex-start; }
.bay-hero-address { border-top: 1px solid #3f6353; padding-top: 1.25rem; margin-top: 2.5rem; font-size: .875rem; color: #c5d6cc; max-width: 355px; }
.bay-hero-photo { align-self: center; margin: 0; min-width: 0; padding-top: .5rem; }
.bay-hero-photo img { width: 100%; height: auto; aspect-ratio: 1/1.1; object-fit: cover; border-radius: 48% 48% 0 0; }
.bay-hero-photo figcaption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: 1.1rem 0 0; font-size: .75rem; letter-spacing: .02em; color: #c5d6cc; }
.bay-hero-photo figcaption span:last-child { color: white; font: 300 1.3rem var(--font-display); }
.visit-ribbon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.4rem var(--page-gutter); border-bottom: 1px solid #e4ded0; background: #fff; font-size: .875rem; }
.visit-ribbon a { text-underline-offset: .3em; }
.club-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 5rem; max-width: 1360px; margin: 0 auto; padding-block: clamp(4rem,8vw,7.5rem); }
.club-intro-body { padding-top: 2.1rem; font-size: 1.125rem; line-height: 1.8; max-width: 520px; }
.club-intro-body p { margin-bottom: 1.5rem; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: .35em; }
.club-brands { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #e4ded0; margin-top: 1.25rem; padding-top: 2rem; }
.club-brands a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; text-align: center; text-decoration: none; }
.club-brands a + a { border-left: 1px solid #e4ded0; }
.club-brands img { height: 50px; max-width: 180px; width: auto; object-fit: contain; }
.club-brands span { font-size: .875rem; }
.bay-discover { background: #f6f1e6; }
.section-heading-row { max-width: 1200px; margin: 0 auto 2.75rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.discovery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.5rem,3vw,3rem); max-width: 1200px; margin: 0 auto; }
.discovery-card { text-decoration: none; color: var(--text); }
.discovery-card > img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.discovery-card { display: flex; flex-direction: column; }
.discovery-card > div { display: flex; flex-direction: column; flex: 1; }
.discovery-card .text-link { margin-top: auto; }
.discovery-card > div { padding-top: 1.75rem; }
.discovery-card h3 { font: 300 clamp(1.6rem,2.3vw,2.2rem)/1.15 var(--font-display); letter-spacing: -.025em; margin: .7rem 0; }
.discovery-card p { font-size: 1rem; color: var(--text-muted); margin-bottom: .75rem; }
.discovery-card .text-link { color: var(--primary); }
.discovery-card:hover .text-link { color: var(--accent); }
.celebration-feature { display: grid; grid-template-columns: 1fr 1fr; background: var(--primary-deep); color: #fff; }
.celebration-feature > img { width: 100%; height: 100%; max-height: 740px; object-fit: cover; }
.celebration-feature > div { padding: clamp(2rem,6vw,6rem); align-self: center; }
.celebration-feature .eyebrow { color: #c5d6cc; }
.celebration-feature .display-title { color: white; }
.celebration-feature p:not(.eyebrow) { margin: 1.5rem 0 2rem; color: #dfe9e3; font-size: 1rem; max-width: 440px; }
.home-visit { display: grid; grid-template-columns: 1fr 1fr; max-width: 1280px; margin: auto; gap: 3rem; }
.home-visit > div:nth-child(2) { align-self: center; }
.home-visit .btn-group { justify-content: flex-start; margin-top: 1.5rem; }
.sister-note { display: flex; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap; padding: 2rem 1.5rem; background: #f6f1e6; font-size: .875rem; }
.sister-note a { text-underline-offset: .25em; }
.footer { padding-top: 3.5rem; }
.cookie-banner { padding: 1rem 1.5rem; }
.cookie-text { font-size: .875rem; }
.cookie-actions .btn { min-width: auto; }
@media (max-width: 1180px) {
 .site-header .header-inner, .site-header.scrolled .header-inner, .site-header.header-dark .header-inner { grid-template-columns: minmax(0,1fr) auto; gap: 1rem; }
 .site-header .nav-desktop { display: none; }
 .site-header .logo-link { justify-content: flex-start; }
 .site-header .menu-btn { display: inline-flex; }
 .site-header .header-right { gap: 1.25rem; }
}
@media (max-width: 760px) {
 :root { --header-h: 84px; --page-gutter: 1.5rem; }
 .site-header .site-logo, .site-header.scrolled .site-logo, .site-header.header-dark .site-logo { height: 60px; }
 .site-wordmark { height: 40px; }
 .site-header .logo-link { gap: .5rem; }
 .header-event-link { display: none; }
 .site-header .header-right { gap: 0; }
 .bay-hero { grid-template-columns: 1fr; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 2rem; gap: 2rem; }
 .bay-hero-copy { padding: 0; }
 .bay-hero h1 { font-size: clamp(3.25rem,12vw,5.25rem); margin-block: 1.25rem; }
 .bay-hero-address { margin-top: 1.75rem; }
 .bay-hero-photo { max-width: 520px; width: 100%; justify-self: center; }
 .bay-hero-photo img { aspect-ratio: 1/1; }
 .visit-ribbon { justify-content: center; text-align: center; }
 .visit-ribbon > span:nth-child(2) { display: none; }
 .club-intro, .home-visit { grid-template-columns: 1fr; gap: 1rem; }
 .club-intro-body { padding-top: 0; }
 .club-brands { gap: .25rem; }
 .club-brands a { padding: .5rem; }
 .club-brands img { max-width: 90px; height: 36px; }
 .club-brands span { font-size: .875rem; }
 .section-heading-row { display: block; margin-bottom: 1.5rem; }
 .discovery-grid { grid-template-columns: 1fr; gap: 2.75rem; }
 .discovery-card:nth-child(2) { padding-top: 0; }
 .discovery-card > img { aspect-ratio: 4/3; }
 .discovery-card > div { padding-top: 1.25rem; }
 .celebration-feature { grid-template-columns: 1fr; }
 .celebration-feature > img { aspect-ratio: 4/3; }
 .celebration-feature > div { padding: 2.5rem 1.5rem 3rem; }
 .home-visit { gap: 1.5rem; }
 .cookie-actions { width: 100%; }
 .cookie-actions .btn { flex: 1 1 130px; padding-inline: .75rem; }
}
@media (max-width: 360px) {
 .club-brands { grid-template-columns: 1fr; }
 .club-brands a + a { border-left: none; border-top: 1px solid #e4ded0; }
 .club-brands img { max-width: 140px; height: 44px; }
}
body:not(.menu-ready) .menu-btn { display: none; }
@media (max-width: 1180px) {
 body:not(.menu-ready) .site-header { position: relative; }
 body:not(.menu-ready) .site-header .header-inner { height: auto; padding-block: 1rem; grid-template-columns: 1fr; }
 body:not(.menu-ready) .site-header .logo-link { grid-row: 1; }
 body:not(.menu-ready) .header-right { flex-wrap: wrap; justify-content: flex-start; }
 body:not(.menu-ready) .site-header .nav-desktop { display: flex; flex-wrap: wrap; }
 body:not(.menu-ready) .bay-hero { padding-top: 2.5rem; }
}
/* Inner-page introductions pair each subject with its image; copy stays on a solid surface. */
.page-hero:not(.hero-drawing) { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: var(--header-h) 0 0; min-height: 0; background: var(--primary-deep); overflow: visible; }
.page-hero:not(.hero-drawing) .hero-bg { position: relative; inset: auto; order: 2; min-height: 420px; background-size: cover; background-position: center; animation: none; transform: none; }
.page-hero:not(.hero-drawing) .hero-content { order: 1; display: flex; flex-direction: column; justify-content: center; max-width: none; padding: 3.5rem var(--page-gutter); text-align: left; }
.page-hero:not(.hero-drawing) .hero-sub { margin: 0; max-width: 440px; color: #dfe9e3; }
.page-hero:not(.hero-drawing) .hero-eyebrow { color: #c5d6cc; font-size: .875rem; letter-spacing: .1em; margin-bottom: 1.25rem; }
.page-hero:not(.hero-drawing) .hero-title { font-size: clamp(2.5rem,4.8vw,4.75rem); letter-spacing: -.035em; }
.split-media img { aspect-ratio: 1/1; object-fit: cover; }
@media (max-width: 760px) {
 .page-hero:not(.hero-drawing) { grid-template-columns: 1fr; }
 .page-hero:not(.hero-drawing) .hero-content { padding: 2.5rem 1.5rem; }
 .page-hero:not(.hero-drawing) .hero-bg { min-height: 0; aspect-ratio: 4/3; }
 .page-hero:not(.hero-drawing) .hero-title { font-size: clamp(2.5rem,9vw,3.5rem); }
}

/* Full-photo homepage hero. */
.bay-hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 5rem) var(--page-gutter) 5rem; gap: 0; overflow: hidden; }
.bay-hero::after { content: ''; position: absolute; inset: var(--header-h) 0 0; z-index: -1; background: linear-gradient(180deg,rgba(9,50,51,.35),rgba(9,50,51,.52) 50%,rgba(9,50,51,.68)); }
.bay-hero .bay-hero-photo { position: absolute; inset: var(--header-h) 0 0; width: 100%; height: auto; max-width: none; margin: 0; padding: 0; align-self: stretch; justify-self: stretch; z-index: -2; }
.bay-hero .bay-hero-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 45%; border-radius: 0; }
.bay-hero .bay-hero-photo figcaption { display: none; }
.bay-hero-copy { width: 100%; max-width: 960px; text-align: center; padding: 0; }
.bay-hero-copy .eyebrow { justify-content: center; color: white; font-size: .875rem; }
.bay-hero-copy .eyebrow span { color: #dfe9e3; }
.bay-hero h1 { font-size: clamp(3.5rem,7.5vw,7.5rem); margin: 1.5rem 0; color: white; text-shadow: 0 2px 25px rgba(0,0,0,.15); }
.bay-hero h1 em { color: white; }
.bay-hero-description { max-width: 450px; margin: 0 auto 2rem; color: white; font-size: 1.0625rem; }
.bay-hero .btn-group { justify-content: center; }
.bay-hero .btn-outline { background: rgba(9,50,51,.25); border-color: #fff; }
.bay-hero-address { border: 0; padding: 0; margin: 2rem auto 0; max-width: none; color: #fff; }
@media (max-width: 760px) {
 .bay-hero { padding: calc(var(--header-h) + 3rem) 1.5rem 3rem; min-height: 92svh; }
 .bay-hero h1 { font-size: clamp(3.25rem,12vw,5.5rem); }
 .bay-hero-copy .eyebrow { font-size: .75rem; }
 .bay-hero-description { font-size: 1rem; }
 .bay-hero .bay-hero-photo img { object-position: center; }
}

/* Long URLs in legal copy and notices wrap instead of widening small screens. */
.legal-card a, .prop65 a, .warning-inline a, .collection-note a { overflow-wrap: anywhere; }

/* Compact footer: one set of links and a shorter, readable notices area. */
.footer { padding: 2.5rem var(--page-gutter) 1.5rem; }
.footer-grid { max-width: 1280px; grid-template-columns: 1.5fr 1fr 1fr; gap: 1.5rem 3rem; margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.6; }
.footer-brand { font-size: 1.35rem; margin-bottom: .5rem; }
.footer h3 { font-size: .875rem; letter-spacing: .04em; text-transform: none; margin-bottom: .65rem; }
.footer li { margin-bottom: .1rem; }
.footer li a, .footer .linkish { min-height: 32px; }
.footer .prop65 { max-width: 1280px; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); padding: 1rem 0 0; margin-top: 0; background: transparent; font-size: .75rem; line-height: 1.6; }
.footer .prop65 p + p { margin-top: 0; }
.footer .copyright { max-width: 1280px; margin-top: 1rem; font-size: .75rem; opacity: .85; }
/* Parent-company band: separated from the Beach Club footer content. */
.footer-group { max-width: 1280px; margin: 1.75rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem 2rem; font-size: .8125rem; }
.footer-group-logo { grid-row: 1 / span 2; height: 34px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-group p { margin: 0; }
.footer-group .copyright { margin-top: 0; }
@media (max-width: 700px) {
 .footer-group { grid-template-columns: 1fr; gap: .75rem; }
 .footer-group-logo { grid-row: auto; height: 28px; justify-self: start; }
}
@media (max-width: 700px) {
 .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
 .footer-grid > div:first-child { grid-column: 1/-1; }
 .footer .prop65 { grid-template-columns: 1fr; gap: .75rem; }
 .footer li a, .footer .linkish { min-height: 40px; }
}
/* Therapie has no sub-brand logos; the three pillars use type instead. */
.club-brands strong { display: block; font: 300 1.6rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--primary-deep); }
/* The wine wall is busier than a horizon; a touch more shade keeps the hero copy legible. */
.bay-hero::after { background: linear-gradient(180deg,rgba(9,50,51,.5),rgba(9,50,51,.62) 50%,rgba(9,50,51,.75)); }

/* Logo-derived touches. The dachshund mark supplies the accents; the site quotes its full palette in
   two places only — a thin red/mustard/navy rule closing the masthead and the parent-company
   band, and a mustard hours ribbon under the homepage hero. Red carries hover and active states. */
.site-header, .site-header.scrolled, .site-header.header-dark { border-bottom: 0; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--stripe); pointer-events: none; }
.site-header .menu-btn:hover, .site-header .nav-desktop a:hover { color: var(--accent); }
.bay-hero h1 em { color: var(--sunset); }
.visit-ribbon { background: var(--sunset); color: var(--text); border-bottom: 0; font-weight: 500; }
.visit-ribbon a { color: var(--text); font-weight: 600; }
.visit-ribbon a:hover { color: var(--primary-deep); }
.footer-group { position: relative; border-top: 0; padding-top: calc(1.5rem + 4px); }
.footer-group::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--stripe); }
/* The field styles above assume the navy newsletter band; on the cream catering band they need solid surfaces. */
.band-sand .field { flex: 0 0 auto; }
.band-sand .field input, .band-sand .field textarea { background: #fff; color: var(--text); border-color: var(--light-gray); }
.band-sand .field input::placeholder, .band-sand .field textarea::placeholder { color: var(--text-muted); }
.band-sand .field input:focus-visible, .band-sand .field textarea:focus-visible { outline-color: var(--primary); background: #fff; }
/* Wordmark plate in the menu overlay and footer (white version on navy). */
.menu-wordmark { display: block; width: 120px; height: auto; margin: 0 auto 1.5rem; }
.footer-brand img { display: block; width: 150px; height: auto; }
/* Visit page map: full content width, hairline frame, caption under. */
.visit-map { max-width: 1000px; margin: 2.5rem auto; }
.visit-map img { width: 100%; height: auto; border: 1px solid var(--light-gray); background: #fff; }
.visit-map figcaption { margin-top: .6rem; font-size: .75rem; color: var(--text-muted); }
/* Red on the green newsletter band clashes; the signup button borrows the ribbon's mustard instead. */
.newsletter-band .btn-gold { background: var(--sunset); border-color: var(--sunset); color: var(--text); }
.newsletter-band .btn-gold:hover { background: #DBA30F; border-color: #DBA30F; color: var(--text); }
/* Insider signup: name, email, and interests in one tidy grid. */
.insider-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; max-width: 560px; }
.insider-form .field-full, .insider-form .btn { grid-column: 1 / -1; }
.insider-form .btn { justify-self: center; margin-top: .25rem; }
.interests { border: 1px solid rgba(255,255,255,.28); padding: .9rem 1rem 1rem; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
.interests legend { padding: 0 .35rem; font-size: .6875rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.interests legend span { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
.interests label { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; cursor: pointer; }
.interests input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--sunset); flex: none; }
@media (max-width: 560px) { .insider-form, .interests { grid-template-columns: 1fr; } }

/* Restaurant identity shared with Mission Bay Beach Club: serif type,
   generous spacing, photography, restrained borders and a quiet masthead. */
:root { --sand: #f8f7f2; --sand-2: #efeee7; --sunset: #d5bc86; }
body { background: #fff; }
.site-header, .site-header.scrolled, .site-header.header-dark { background: #fff; border-bottom: 1px solid #e2e7e2; }
.site-header::after, .footer-group::before { display: none; }
.header-event-link { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.header-event-link:hover { background: var(--primary); color: white; }
.btn, .header-event-link { border-radius: 0; font-weight: 500; }
.bay-hero h1, .display-title, .hero-title, .discovery-card h3, .club-brands strong { font-family: var(--font-display); font-weight: 300; }
.bay-hero h1 { font-size: clamp(3.5rem,7vw,7rem); letter-spacing: -.045em; }
.bay-hero h1 em { color: white; }
.bay-hero::after { background: linear-gradient(180deg,rgba(10,30,23,.42),rgba(10,30,23,.55) 50%,rgba(10,30,23,.7)); }
.bay-hero .btn-outline { background: rgba(10,30,23,.25); }
.visit-ribbon { background: #fff; color: var(--primary-deep); border-bottom: 1px solid #e2e7e2; font-weight: 400; }
.visit-ribbon a { color: var(--primary); font-weight: 500; }
.club-intro--restaurant { grid-template-columns: 1fr 1.15fr; align-items: center; gap: 2rem clamp(2rem,5vw,5rem); }
.club-intro--restaurant .club-intro-body { padding-top: 1.5rem; }
.bistro-room { margin: 0; }
.bistro-room img { width: 100%; aspect-ratio: 5/4; object-fit: cover; object-position: center 45%; }
.bistro-room figcaption { font-size: .875rem; color: var(--text-muted); margin-top: .75rem; }
.bay-discover { background: var(--sand); }
.discovery-card > img, .split-media img { border-radius: 0; border: 0; box-shadow: none; }
.celebration-feature { background: var(--primary-deep); }
.celebration-feature > img { object-fit: cover; }
.page-hero:not(.hero-drawing) { background: var(--primary-deep); }
.page-hero:not(.hero-drawing) .hero-title { color: white; }
.page-hero:not(.hero-drawing) .hero-eyebrow { color: #d5bc86; }
.page-hero:not(.hero-drawing) .hero-sub { color: #e1e9e3; }
.page-hero .hero-title, .page-hero .hero-eyebrow, .page-hero .hero-sub { opacity: 1; animation: none; transform: none; }
.footer-group { border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.5rem; }
.newsletter-band { background: var(--primary-deep); }
@media (max-width: 760px) {
 .club-intro--restaurant { grid-template-columns: 1fr; }
 .bay-hero h1 { font-size: clamp(3rem,10.5vw,5rem); }
 .bistro-room { margin-top: 1rem; }
}